feat(deployment): add GitHub Actions workflow for automated deployment

.github/workflows/gh-pages.yml

@@ -0,0 +1,39 @@
+name: Deploy Reactfolio to GitHub Pages
+
+# Triggers the workflow on push to the main branch
+on:
+  push:
+    branches:
+      - main  # Change this to your main branch if it's different
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.15.1'  # Ensure this matches your Node version
+
+      - name: Install dependencies
+        run: npm install
+
+      # Step to modify vite.config.js to dynamically set base with the repository name
+      - name: Update vite.config.js base value
+        run: |
+          REPO_NAME=$(echo ${{ github.repository }} | cut -d'/' -f2)
+          echo "Repository Name: $REPO_NAME"
+          sed -i "s|base: .*|base: '/$REPO_NAME/',|" vite.config.js
+
+      - name: Build the project
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist  # This is where Vite outputs its build files

.gitignore

@@ -25,3 +25,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.dockerignore
+Dockerfile

README.md

@@ -1,9 +1,28 @@
-# Reactfolio
 
-Welcome to **Reactfolio**, a customizable portfolio template built with React, Vite and TailwindCSS. This template allows you to easily create your own developer portfolio for free. It is designed to be flexible and easy to modify, with all the data stored in a single [`assets.js`](https://github.com/saqibbedar/Reactfolio/blob/main/src/assets/assets.js) file.
+<div align="center">
+<span><h1><a href="https://saqibbedar.github.io/Reactfolio/" target="_blank">Reactfolio.</a> v1.2.0</h1></span>
+
+<span>Designed for developers looking to showcase their work with style and simplicity.</span>
+
+<div align="center">
+    <img src="https://img.shields.io/badge/maintenance-actively--developed-brightgreen.svg" alt="Maintained status" />
+    <img src="https://img.shields.io/github/v/release/saqibbedar/Reactfolio.svg" alt="Release badge" />
+  <img src="https://img.shields.io/github/stars/saqibbedar/Reactfolio.svg" alt="GitHub stars" />
+   <img src="https://img.shields.io/github/forks/saqibbedar/Reactfolio.svg" alt="GitHub forks" />
+  <img src="https://img.shields.io/github/issues/saqibbedar/Reactfolio.svg" alt="GitHub issues" />
+</div>
+
+</div>
+
+</br>
+
+![Reactfolio Header Image](./public/header.jpg)
+
+# Reactfolio
 
+**Reactfolio** is a customizable portfolio template built with React, Vite, and TailwindCSS. This template allows you to easily create your own developer portfolio for free. It is designed to be flexible and easy to modify, with all the data stored in a single [`assets.js`](https://github.com/saqibbedar/Reactfolio/blob/main/src/assets/assets.js) file.
 
-# Demo
+# Quick Demo
 
 Check out the live demo of the portfolio [here](https://saqibbedar.github.io/Reactfolio/).
 
@@ -12,10 +31,11 @@ Check out the live demo of the portfolio [here](https://saqibbedar.github.io/Rea
 
 Before starting, ensure you have the following installed on your machine:
 
-1. **NodeJS:** You can download and install it from [here](https://nodejs.org/en/download/prebuilt-installer).
-
-2. **Git:** Download and install Git from [here](https://git-scm.com/downloads).
+1. **Git:** Download and install Git from [here](https://git-scm.com/downloads).
+   
+   > **Note:** You do not need Node.js installed on your machine as the build and deployment process will be handled by GitHub Actions.
 
+</br>
 
 # Getting started
 
@@ -25,33 +45,14 @@ Follow these steps to create and deploy your portfolio:
 
 To begin, you should fork this repository so you have your own copy of the project.
 
-1. Click the Fork button at the top-right corner of this page to create a copy of the repository in your GitHub account.
+1. Click the **Fork** button at the top-right corner of this page to create a copy of the repository in your GitHub account.
 2. Once the repository is forked, clone it to your local machine by running the following command in your terminal:
 
 ```bash
-git clone hhttps://github.com/saqibbedar/Reactfolio.git
-```
-
-## Step 2: Install Dependencies
-
-Navigate to the project folder and install the required dependencies:
-
-```bash
-cd Reactfolio
-npm install
-```
-
-## Step 3: Start deployment server
-
-Start your development server with the following command to preview your portfolio:
-
-```bash
-npm run dev
+git clone https://github.com/saqibbedar/Reactfolio.git
 ```
 
-You can view your website locally on [`http://localhost:5173/Reactfolio/`](http://localhost:5173/Reactfolio/)
-
-## Step 4: Update [`assets.js`](https://github.com/saqibbedar/Reactfolio/blob/main/src/assets/assets.js) file Data
+## Step 2: Update [`assets.js`](https://github.com/saqibbedar/Reactfolio/blob/main/src/assets/assets.js) file Data
 
 The main data for the portfolio is located in the `assets.js` file. Open it and replace the dummy data with your actual information:
 
@@ -72,50 +73,59 @@ const AboutPage = {
 // Similarly, update other values as needed...
 ```
 
-## Step 5: Update [`vite.config.js`](https://github.com/saqibbedar/Reactfolio/blob/main/vite.config.js) File
+## Step 3:  Push Changes to GitHub
 
-After updating your data in `assets.js`, you’ll need to modify the `base` value in the `vite.config.js` file with your repository name for proper deployment:
+Once you’ve updated the `assets.js` file, you can push your changes to your GitHub repository.
 
-<details>
-  <summary><b>Get Your Repository Name</b></summary>
+```bash
+git add .
+git commit -m "Customize portfolio"
+git push origin main
+```
 
-  * **Repository name:** This image shows where to find your repository name in GitHub.
+## Step 4: Automatic Deployment via GitHub Actions
 
-  ![image](./public/repo-name.png)
+The GitHub Actions workflow will automatically handle the following tasks whenever you push to the main branch:
 
-</details>
+* **Update `vite.config.js`**: It will automatically set the correct `base` value for your GitHub Pages deployment.
+* **Build the project**: Vite will create a production-ready build.
+* **Deploy to GitHub Pages**: Your portfolio will be deployed to GitHub Pages.
 
-<details>
-  <summary><b>Change <code>base</code> Value in <code>vite.config.js</code></b></summary>
+You can view the live version of your portfolio at [`https://<your-username>.github.io/<repository-name>/`](https://<your-username>.github.io/<repository-name>/) once the action completes successfully.
 
-  * **Update base value:** Replace the `base` value with your GitHub repository name.
+# Optional: Local Development (If Needed)
 
-  ![image](./public/vite-config-base-value.png)
+If you want to run the project locally, follow these steps:
 
-</details>
- 
+1. Install [Node.js](https://nodejs.org/en/download/prebuilt-installer) on your machine.
+2. Install the dependencies:
 
-## Step 6: Update Git Repository
+    ```bash
+    npm install
+    ```
 
-Before deploying, push your changes to your GitHub repository:
+2. Run the development server:
 
-```bash
-git add .
-git commit -m "Customize portfolio"
-git push origin main
-```
+    ```bash
+    npm run dev
+    ```
 
-## Step 7: Deploy your portfolio
+You can view your site locally at [`http://localhost:5173`](http://localhost:5173)
 
-Once everything is set up, you can deploy your portfolio to GitHub Pages by running the following command:
 
-```
-npm run deploy
-```
+# Community & Feedback
+
+We'd love to hear from you! Whether you have questions, ideas, or feedback, you can engage with the Reactfolio community in our GitHub Discussions. Share your experience, ask questions, or suggest features.
+
+[Join the discussion](https://github.com/saqibbedar/Reactfolio/discussions)
+
+By participating in the discussions, you’ll help shape the future of Reactfolio. Feel free to start a new conversation or respond to existing ones!
+
+# Contributing
 
-Your portfolio will be live at [`https://your-username.github.io/your-repo-name/`](https://your-username.github.io/your-repo-name/). Replace `your-username` and `your-repo-name` with your actual GitHub username and repository name.
+Feel free to contribute to this project by opening issues or submitting pull requests. We welcome contributions from everyone!
 
-# Support Me ❤️
+# Sponsor Project ❤️
 
 This project is completely free under the [`MIT LICENSE`](https://github.com/saqibbedar/Reactfolio?tab=MIT-1-ov-file). If you’ve found this project helpful and would like to support its development, you can consider buying me a coffee. Your support is greatly appreciated!
 

index.html

@@ -5,13 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Professional portfolio showcasing my skills, projects, and experience as a developer." />
     <meta name="keywords" content="portfolio, web developer, projects, skills, experience" />
-    <meta name="author" content="Your Name" />
+    <meta name="author" content="Saqib Bedar" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="canonical" href="https://your-portfolio-url.com" />
     <title>Your Name | Web Developer Portfolio</title>
     <meta property="og:title" content="Your Name | Web Developer Portfolio" />
     <meta property="og:description" content="Professional portfolio showcasing my skills, projects, and experience as a developer." />
-    <meta property="og:image" content="https://your-portfolio-url.com/og-image.jpg" />
+    <meta property="og:image" content="/public/og-img.jpg" />
     <meta property="og:url" content="https://your-portfolio-url.com" />
     <meta name="twitter:card" content="summary_large_image" />
   </head>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactfolio",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

vite.config.js

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+// vite.config.js
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: "/Reactfolio/", // replace base value with your repository name i.e. https://github.com/saqibbedar/Reactfolio so in github url repository name is "/Reactfolio/".
+  base: "/your-repo-name/", // This will be dynamically updated by GitHub Actions
 });