Personal Blog and Portfolio Website

Welcome to my personal blog and portfolio website project! This website showcases my professional journey, projects, and personal interests. Built using the Astro web framework, it offers a seamless and dynamic user experience. Feel free to explore and get in touch!

🚀 Features

Badge	Feature	Description
	Responsive Design	Works on all devices
	Dynamic Blog	Regular updates and industry insights
	Portfolio Showcase	Highlights my top projects
	Web3Forms Contact Form	Easy communication
	Astro-Powered	Fast performance and SEO
	SEO Optimized	Enhanced visibility
	RSS Feed & Sitemap	Keeps content updated and indexed
	Vercel Deployed	Reliable hosting

🛠️ Technologies Used

Badge	Technology	Purpose
	Astro	Static site generator
	HTML5 & CSS3	Modern markup and styling
	CSS3	Custom styling
	TypeScript	Adds interactivity and improves UX
	Web3Forms	Simplifies form handling
	Tailwind CSS	Utility-first CSS framework
	React	Handles animations and interactivity
	Pagefind	Powerful search for static websites
	Vercel	Deployment and hosting
	Playwright	End-to-end testing

📄 Project Structure

Here's a brief overview of the project structure:

├── public/
│   ├── favicon.ico
│   ├── images/
│   └── ...
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   ├── styles/
│   └── ...
├── .gitignore
├── README.md
└── package.json

• public/: Contains public assets like images and the favicon.
• src/: Source files including components, layouts, pages, and styles.
• components/: Reusable UI components.
• layouts/: Layout components for different page types.
• pages/: Individual pages of the website.
• styles/: CSS styles for the website.

📦 Installation and Setup

To run this project locally, follow these steps:

1. Clone the repository:

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

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Build for production:

   npm run build
   

   • Build your production site to ./vercel/output/static.

5. Preview the production build:

   npm run preview
   

   • Preview the production build locally.

🌐 Deployed Website

The website is deployed on Vercel and is available at the following URLs:

🌐 Main Production Branch

Website: rafay99.com

Development Website: You can preview the feature branch for previewing changes before they go live and you can check them out when a pull request is made.

How to Access

• Production Website: Visit rafay99.com for the live, production version of the website.
• Feature Website: Access the feature branch for previewing changes before they go live and you can check them out when a pull request is made.

Additional Information

• Production: The main production branch hosts the live version of the website. Any changes merged here are automatically deployed.

• Feature Branch: The feature branch is used for staging changes. You can preview upcoming updates before they are pushed to production.

🌟 Contributing

Contributions to improve this project are welcome! If you have any ideas or suggestions, feel free to open an issue or submit a pull request.

To contribute:

1. Fork the repository:

   • Click the "Fork" button at the top right of this repository page.

2. Create a new branch:

   git checkout -b feature/your-feature-name
   

3. Make your changes and commit them:

   git commit -m "Add your feature description"
   

4. Push to your branch:

   git push origin feature/your-feature-name
   

5. Open a pull request:

   • Make the pull request to the testing branch. Any pull requests to the main branch will be rejected.

Thank you for your contributions!

📝 License

This project is licensed under the MIT License. See the LICENSE file for more details.

📞 Contact

If you have any questions or want to get in touch, feel free to reach out via any of the following: