My Personal Blog & Portfolio

Showcasing my professional journey, projects, and personal interests. Built with Astro for a lightning-fast, dynamic experience.

Visit Live Site »

Report Bug · Request Feature

✨ Why This Project?

This website serves as my digital resume, project showcase, and a space to share insights and thoughts through my blog. It's built with modern web technologies to be fast, accessible, and SEO-friendly.

---

🚀 Core Features

Badge	Feature	Description
	Responsive Design	Seamless experience on all devices.
	Dynamic Blog	Regular updates and industry insights.
	Portfolio Showcase	Highlights my best projects.
	Web3Forms Contact	Easy and reliable communication.
	Astro-Powered	Blazing fast performance & SEO.
	SEO Optimized	Enhanced search engine visibility.
	RSS Feed & Sitemap	Stay updated, improved indexing.
	Pagefind Search	Powerful on-site content search.

---

🛠️ Tech Stack

This project leverages a modern stack for optimal performance and developer experience:

Category	Technology / Tool
Framework
Styling
Interactivity
Services
DevOps

---

📂 Project Structure

A glimpse into the organization of the codebase:

Personal-Blog/
├── public/                     # Static assets (favicon, images, etc.)
│   ├── favicon.ico
│   └── images/
├── src/                        # Core source code
│   ├── components/             # Reusable Astro/React components
│   ├── layouts/                # Page layouts
│   ├── pages/                  # Site pages & API endpoints
│   ├── styles/                 # Global styles and Tailwind config
│   └── content/                # Markdown content for blog posts, projects (example)
├── .gitignore
├── astro.config.mjs            # Astro configuration
├── package.json
├── tsconfig.json               # TypeScript configuration
└── README.md

Note: The src/content/ directory is a common pattern with Astro for collections, adjust if your structure differs.

---

🏁 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v18 or newer recommended)
• npm (comes with Node.js)

Installation

1. Clone the repository:

   git clone https://github.com/rafay99-epic/Personal-Blog.git

2. Navigate to the project directory:

   cd Personal-Blog # Or Astro-Portfolio-Blog if that's the cloned folder name

3. Install dependencies:

   npm install

Running Locally

1. Start the development server:

   npm run dev

   Open http://localhost:4321 (or the port shown in your terminal) to view it in your browser.

Building for Production

1. Build the site:

   npm run build

   This will create a production-ready build in the ./dist directory (or ./vercel/output/static as per your original config for Vercel).

2. Preview the production build:

   npm run preview

---

🌐 Deployment

The website is live on Vercel, with automatic deployments configured.

• 🌍 Production: rafay99.com
  • This is the main, live version of the website, deployed from the main branch.
• 🧪 Feature Previews:
  • Vercel automatically creates preview deployments for pull requests. This allows testing changes in a production-like environment before merging to main.

---

🤝 Contributing

Contributions make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated!

1. Fork the Project
2. Create your Feature Branch:

   git checkout -b feature/AmazingFeature

3. Commit your Changes:

   git commit -m 'Add some AmazingFeature'

4. Push to the Branch:

   git push origin feature/AmazingFeature

5. Open a Pull Request:
   • Please target the testing branch for your pull requests. PRs to main will be redirected or closed.

We value your input!

---

📜 License

Distributed under the MIT License. See LICENSE file for more information.

---

📬 Get in Touch

I'm always open to connecting, collaborating, or just chatting. Feel free to reach out!

     

---

If you like this project, please consider giving it a 🌟 on GitHub!