diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml new file mode 100644 index 0000000..31bcc4b --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore index 303feec..e306800 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,5 @@ dist-ssr *.njsproj *.sln *.sw? +.dockerignore +Dockerfile \ No newline at end of file diff --git a/README.md b/README.md index 2dc80f8..79ad659 100644 --- a/README.md +++ b/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. +
+

Reactfolio. v1.2.0

 + +Designed for developers looking to showcase their work with style and simplicity. + +
+ Maintained status + Release badge + GitHub stars + GitHub forks + GitHub issues +
+ +
+ +
+ +![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. +
# 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. -
- Get Your Repository Name +```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: -
+* **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. -
- Change base Value in vite.config.js +You can view the live version of your portfolio at [`https://.github.io//`](https://.github.io//) 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: -
- +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! diff --git a/RELEASE.md b/RELEASE.md deleted file mode 100644 index 89e2dd3..0000000 --- a/RELEASE.md +++ /dev/null @@ -1,14 +0,0 @@ -# Reactfolio Release Notes 🚀 - -**Reactfolio** is a customizable portfolio template designed for developers looking to showcase their work with style and simplicity. This document outlines the release history and notable changes in Reactfolio. - -## v1.1.0 - SEO Optimization and Documentation Update -- **SEO Meta Tags:** Added meta tags in HTML for improved search engine optimization. -- **Updated Documentation:** Revised and expanded the documentation for better user guidance. -- **Minor Bug Fixes:** Addressed small issues to enhance overall stability. - -## v1.0.0 - Initial Release -- **React and Vite Setup:** Set up a modern development environment with React and Vite. -- **TailwindCSS Integration:** Added TailwindCSS for streamlined styling and responsive design. -- **Basic Project Structure:** Included a basic structure and configuration to kickstart your portfolio. -- **Documentation:** Provided comprehensive documentation for customization and deployment. [Read the full documentation here](https://github.com/saqibbedar/Reactfolio?tab=readme-ov-file). diff --git a/index.html b/index.html index 55118a7..db5ad71 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,13 @@ - + Your Name | Web Developer Portfolio - + diff --git a/package-lock.json b/package-lock.json index cde1c36..e35f3b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "reactfolio", - "version": "0.0.0", + "version": "1.2.0", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/package.json b/package.json index 95a9c69..1560bc6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "reactfolio", "private": true, - "version": "0.0.0", + "version": "1.2.0", "type": "module", "scripts": { "dev": "vite", diff --git a/public/header.jpg b/public/header.jpg new file mode 100644 index 0000000..35a79e9 Binary files /dev/null and b/public/header.jpg differ diff --git a/public/og-img.jpg b/public/og-img.jpg new file mode 100644 index 0000000..0e63304 Binary files /dev/null and b/public/og-img.jpg differ diff --git a/public/repo-name.png b/public/repo-name.png deleted file mode 100644 index e60c3da..0000000 Binary files a/public/repo-name.png and /dev/null differ diff --git a/public/vite-config-base-value.png b/public/vite-config-base-value.png deleted file mode 100644 index fe5f6e3..0000000 Binary files a/public/vite-config-base-value.png and /dev/null differ diff --git a/vite.config.js b/vite.config.js index 4f7c47a..42cce67 100644 --- a/vite.config.js +++ b/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 });