Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rafay99-epic/astro-portfolio-blog
Personal Blog and Portfolio using Astro
https://github.com/rafay99-epic/astro-portfolio-blog
astro github-actions html-css-javascript sitemap tinacms versel
Last synced: 2 days ago
JSON representation
Personal Blog and Portfolio using Astro
- Host: GitHub
- URL: https://github.com/rafay99-epic/astro-portfolio-blog
- Owner: rafay99-epic
- License: mit
- Created: 2024-07-21T09:00:05.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-07T00:04:41.000Z (16 days ago)
- Last Synced: 2024-12-07T00:32:53.507Z (16 days ago)
- Topics: astro, github-actions, html-css-javascript, sitemap, tinacms, versel
- Language: MDX
- Homepage: https://www.rafay99.com
- Size: 69.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
├── 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**:
```bash
git clone https://github.com/rafay99-epic/Personal-Blog.git
cd Astro-Portfolio-Blog
```
2. **Install dependencies**:
```bash
npm install
```
3. **Start the development server**:
```bash
npm run dev
```
4. **Build for production**:
```bash
npm run build
```
- Build your production site to `./vercel/output/static`.
5. **Preview the production build**:
```bash
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](https://www.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](https://www.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**:
```bash
git checkout -b feature/your-feature-name
```
3. **Make your changes and commit them**:
```bash
git commit -m "Add your feature description"
```
4. **Push to your branch**:
```bash
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](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:
[](mailto:[email protected])
[](https://rafay99.com/contact)
[](https://www.linkedin.com/in/abdul-rafay1999/)