Rename GitHub Project component

Bump postcss from 8.4.26 to 8.4.27

.github/workflows/deploy.yml

@@ -29,7 +29,7 @@ jobs:
           cache: 'npm'
 
       - name: Setup Pages
-        uses: actions/configure-pages@v2
+        uses: actions/configure-pages@v3
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -58,4 +58,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1.2.3
+        uses: actions/deploy-pages@v1.2.4

README.md

@@ -21,8 +21,8 @@
     <a href="https://github.com/arifszn/gitprofile/network/members">
       <img src="https://img.shields.io/github/forks/arifszn/gitprofile"/>
     </a>
-    <a href="https://github.com/arifszn/gitprofile/blob/main/package-lock.json">
-      <img src="https://img.shields.io/snyk/vulnerabilities/github/arifszn/gitprofile"/>
+    <a href="https://github.com/arifszn/gitprofile/commits/main">
+      <img src="https://img.shields.io/github/last-commit/arifszn/gitprofile/main"/>
     </a>
     <a href="https://github.com/arifszn/gitprofile/blob/main/CONTRIBUTING.md">
       <img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat"/>
@@ -49,10 +49,10 @@
 
 <p align="center">
   <a href="https://arifszn.github.io/gitprofile">
-    <img src="https://arifszn.github.io/assets/img/hosted/gitprofile/preview.gif" alt="Preview" width="60%"/>
+    <img src="https://arifszn.netlify.app/assets/img/hosted/gitprofile/preview.gif" alt="Preview" width="60%"/>
   </a>
   <br/>
-  <a href="#arifszn"><img src="https://arifszn.github.io/assets/img/drop-shadow.png" width="50%" alt="Shadow"/></a>
+  <a href="#arifszn"><img src="https://arifszn.netlify.app/assets/img/drop-shadow.png" width="50%" alt="Shadow"/></a>
 </p>
 
 **GitProfile** is an easy to use portfolio builder where you can create a portfolio page automatically by just providing your GitHub username. It is built using React.js on top of Vite. But it's not necessary to have knowledge on these to get you started. You can make your own copy with zero coding experience.
@@ -64,6 +64,7 @@
 ✓ [Google Analytics](#google-analytics)  
 ✓ [Hotjar](#hotjar)  
 ✓ [SEO](#seo)  
+✓ [PWA](#pwa)  
 ✓ [Avatar and Bio](#avatar-and-bio)  
 ✓ [Social Links](#social-links)  
 ✓ [Skill Section](#skills)  
@@ -78,14 +79,14 @@ To view a live example, **[click here](https://arifszn.github.io/gitprofile)**.
 Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
 
 <p align="center">
-  <img src="https://arifszn.github.io/assets/img/hosted/gitprofile/themes.png" alt="Themes">
+  <img src="https://arifszn.netlify.app/assets/img/hosted/gitprofile/themes.png" alt="Themes">
 </p>
 
-## 🎉 Thank you for the 500 ★
+## 🎉 Thank you for the 800 ★
 
 <p>
   <a href="https://arifszn.github.io/gitprofile">
-    <img src="https://user-images.githubusercontent.com/45073703/202119579-eae272bd-ed39-434d-9361-df25308e0691.gif" alt="Thank You" width="50%"/>
+    <img src="https://github.com/arifszn/gitprofile/assets/45073703/b3d34d17-cf55-4c74-bf44-3196b1f0ac66" alt="Thank You" width="50%"/>
   </a>
 </p>
 
@@ -99,21 +100,21 @@ There are three ways to use **GitProfile**. Use any.
 
 ### Forking this repo
 
-These instructions will get you a copy of the project and deploy your portfolio online!
+These instructions will get you a copy of the project and deploy your portfolio online using GitHub Pages!
 
 - **Fork repo:** Click [here](https://github.com/arifszn/gitprofile/fork) to fork the repo so you have your own project to customize. A "fork" is a copy of a repository.
 - **Rename repo:**
   - If you want to host your portfolio at `https://<USERNAME>.github.io`, rename your forked repository to `username.github.io` in GitHub, where `username` is your GitHub username (or organization name).
-  - If you want to host your portfolio at `https://<USERNAME>.github.io/<REPO>` (e.g. `https://<USERNAME>.github.io/portfolio`), rename your forked repository to `<REPO>` (e.g. `portfolio`) in GitHub.
+  - If you want to host your portfolio at `https://<USERNAME>.github.io/<REPO_NAME>` (e.g. `https://<USERNAME>.github.io/portfolio`), rename your forked repository to `<REPO_NAME>` (e.g. `portfolio`) in GitHub.
 - **Enable workflows:** Go to your repo's **Actions** tab and enable workflows.
 
-  ![Workflows](https://arifszn.github.io/assets/img/hosted/gitprofile/workflows.png)
+  ![Workflows](https://arifszn.netlify.app/assets/img/hosted/gitprofile/workflows.png)
 
 - **Base Value:** Open `vite.config.js`, and change `base`'s value.
 
   - If you are deploying to `https://<USERNAME>.github.io`, set `base` to `'/'`.
 
-  - If you are deploying to `https://<USERNAME>.github.io/<REPO>` (e.g. `https://<USERNAME>.github.io/portfolio`), then set `base` to `'/<REPO>/'` (e.g. `'/portfolio/'`).
+  - If you are deploying to `https://<USERNAME>.github.io/<REPO_NAME>` (e.g. `https://<USERNAME>.github.io/portfolio`), then set `base` to `'/<REPO_NAME>/'` (e.g. `'/portfolio/'`).
 
   ```js
   // vite.config.js
@@ -129,7 +130,7 @@ Your portfolio website will be live shortly. Any time you commit a change to the
 
 If you wish to add a custom domain, no CNAME file is required. Just add it to your repo's **Settings** ➜ **Pages** ➜ **Custom domain**.
 
-As this is a Vite project, you can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this [doc](https://vitejs.dev/guide/static-deploy.html) for a detailed deployment guide to other services.
+As this is a Vite project, you can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this [doc](https://vitejs.dev/guide/static-deploy.html) for a detailed deployment guide to other services. Also, if you are not deploying to GitHub pages, `base:` might need to be deleted from `vite.config.js`.
 
 ### Setting up locally
 
@@ -156,7 +157,9 @@ As this is a Vite project, you can also host your website to Netlify, Vercel, He
 
 ### Installing as package
 
-You can also use **GitProfile** by installing as an NPM package. First Install **GitProfile** via <a href="https://www.npmjs.com/package/@arifszn/gitprofile">NPM</a>.
+You can also use **GitProfile** by installing as an NPM package.
+
+First Install **GitProfile** via <a href="https://www.npmjs.com/package/@arifszn/gitprofile">NPM</a>.
 
 ```sh
 npm install @arifszn/gitprofile
@@ -216,6 +219,7 @@ const config = {
     mastodon: '',
     facebook: '',
     instagram: '',
+    youtube: '',
     dribbble: '',
     behance: '',
     medium: '',
@@ -383,7 +387,7 @@ const config = {
 ```
 
 <p align="center">
-  <img src="https://arifszn.github.io/assets/img/hosted/gitprofile/theme-dropdown.png" alt="Theme Dropdown" width="50%">
+  <img src="https://arifszn.netlify.app/assets/img/hosted/gitprofile/theme-dropdown.png" alt="Theme Dropdown" width="50%">
 </p>
 
 You can create your own custom theme by modifying these values. Theme `procyon` will have the custom styles.
@@ -442,13 +446,19 @@ const config = {
 
 Meta tags will be auto-generated from configs dynamically. However, you can also manually add meta tags in `public/index.html`.
 
+### PWA
+
+GitProfile is PWA enabled. The site can be installed as a Progressive Web App.
+
+![PWA](https://github.com/arifszn/gitprofile/assets/45073703/9dc7cc5c-4262-4445-a7a5-1e3566ef43fa)
+
 ### Avatar and Bio
 
 Your avatar and bio will be fetched from GitHub automatically.
 
 ### Social Links
 
-You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, Facebook, Instagram, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
+You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, Facebook, Instagram, YouTube, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
 
 ```js
 // gitprofile.config.js
@@ -460,6 +470,7 @@ const config = {
     mastodon: 'arifszn@mastodon.social',
     facebook: '',
     instagram: '',
+    youtube: '',
     dribbble: '',
     behance: '',
     medium: '',
@@ -622,7 +633,7 @@ const config = {
 };
 ```
 
-![Blog](https://arifszn.github.io/assets/img/hosted/gitprofile/blog.png)
+![Blog](https://arifszn.netlify.app/assets/img/hosted/gitprofile/blog.png)
 
 The posts are fetched by [blog.js](https://github.com/arifszn/blog.js).
 

gitprofile.config.js

@@ -3,11 +3,37 @@
 const config = {
   github: {
     username: 'arifszn', // Your GitHub org/user name. (Required)
-    sortBy: 'stars', // stars | updated
-    limit: 10, // How many projects to display.
-    exclude: {
-      forks: false, // Forked projects will not be displayed if set to true.
-      projects: [], // These projects will not be displayed. example: ['my-project1', 'my-project2']
+  },
+  projects: {
+    github: {
+      header: 'Github Projects',
+      display: true, // Display GitHub projects?
+      sortBy: 'stars', // stars | updated
+      limit: 10, // How many projects to display.
+      exclude: {
+        forks: false, // Forked projects will not be displayed if set to true.
+        projects: [], // These projects will not be displayed. example: ['my-project1', 'my-project2']
+      },
+    },
+    external: {
+      header: 'External Projects',
+      display: true, // Display external projects?
+      projects: [
+        {
+          title: 'Project Name',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+          imageUrl: 'https://via.placeholder.com/250x250',
+          link: 'https://example.com',
+        },
+        {
+          title: 'Project Name',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+          imageUrl: 'https://via.placeholder.com/250x250',
+          link: 'https://example.com',
+        },
+      ],
     },
   },
   social: {
@@ -16,11 +42,12 @@ const config = {
     mastodon: 'arifszn@mastodon.social',
     facebook: '',
     instagram: '',
+    youtube: '', // example: 'pewdiepie'
     dribbble: '',
     behance: '',
     medium: 'arifszn',
     dev: 'arifszn',
-    stackoverflow: '', // format: userid/username
+    stackoverflow: '', // example: '1/jeff-atwood'
     skype: '',
     telegram: '',
     website: 'https://arifszn.com',
@@ -86,23 +113,6 @@ const config = {
     },
   ],
 
-  // To hide the `My Projects` section, keep it empty.
-  externalProjects: [
-    {
-      title: 'Project Name',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
-      imageUrl: 'https://via.placeholder.com/250x250',
-      link: 'https://example.com',
-    },
-    {
-      title: 'Project Name',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
-      imageUrl: 'https://via.placeholder.com/250x250',
-      link: 'https://example.com',
-    },
-  ],
   // Display blog posts from your medium or dev account. (Optional)
   blog: {
     source: 'dev', // medium | dev
@@ -118,7 +128,7 @@ const config = {
     snippetVersion: 6,
   },
   themeConfig: {
-    defaultTheme: 'winter',
+    defaultTheme: 'wireframe',
 
     // Hides the switch in the navbar
     // Useful if you want to support a single color mode

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arifszn/gitprofile",
   "description": "Create an automatic portfolio based on GitHub profile",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "license": "MIT",
   "author": "arifszn",
   "repository": {
@@ -42,11 +42,11 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@arifszn/blog-js": "^2.0.0",
-    "@vitejs/plugin-react": "^3.0.0",
+    "@arifszn/blog-js": "^2.0.4",
+    "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.4",
     "axios": "^1.1.3",
-    "daisyui": "^2.11.0",
+    "daisyui": "^3.0.3",
     "date-fns": "^2.28.0",
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
@@ -56,10 +56,11 @@
     "prettier": "^2.6.0",
     "prop-types": "^15.8.1",
     "react-helmet-async": "^1.2.3",
-    "react-hotjar": "^5.0.0",
+    "react-hotjar": "^6.1.0",
     "react-icons": "^4.3.1",
     "tailwindcss": "^3.0.23",
-    "vite": "^4.0.3"
+    "vite": "^4.0.3",
+    "vite-plugin-pwa": "^0.16.3"
   },
   "keywords": [
     "git-profile",

src/components/GitProfile.jsx

@@ -9,7 +9,7 @@ import Skill from './skill';
 import Experience from './experience';
 import Certification from './certification';
 import Education from './education';
-import Project from './project';
+import GitHubProject from './github-project';
 import Blog from './blog';
 import Footer from './footer';
 import {
@@ -77,15 +77,15 @@ const GitProfile = ({ config }) => {
           return;
         }
 
-        sanitizedConfig.github.exclude.projects.forEach((project) => {
+        sanitizedConfig.projects.github.exclude.projects.forEach((project) => {
           excludeRepo += `+-repo:${sanitizedConfig.github.username}/${project}`;
         });
 
         let query = `user:${
           sanitizedConfig.github.username
-        }+fork:${!sanitizedConfig.github.exclude.forks}${excludeRepo}`;
+        }+fork:${!sanitizedConfig.projects.github.exclude.forks}${excludeRepo}`;
 
-        let url = `https://api.github.com/search/repositories?q=${query}&sort=${sanitizedConfig.github.sortBy}&per_page=${sanitizedConfig.github.limit}&type=Repositories`;
+        let url = `https://api.github.com/search/repositories?q=${query}&sort=${sanitizedConfig.projects.github.sortBy}&per_page=${sanitizedConfig.projects.github.limit}&type=Repositories`;
 
         axios
           .get(url, {
@@ -197,7 +197,7 @@ const GitProfile = ({ config }) => {
                   </div>
                   <div className="lg:col-span-2 col-span-1">
                     <div className="grid grid-cols-1 gap-6">
-                      <Project
+                      <GitHubProject
                         repo={repo}
                         loading={loading}
                         github={sanitizedConfig.github}
@@ -236,19 +236,38 @@ GitProfile.propTypes = {
   config: PropTypes.shape({
     github: PropTypes.shape({
       username: PropTypes.string.isRequired,
-      sortBy: PropTypes.oneOf(['stars', 'updated']),
-      limit: PropTypes.number,
-      exclude: PropTypes.shape({
-        forks: PropTypes.bool,
-        projects: PropTypes.array,
-      }),
     }).isRequired,
+    projects: {
+      github: PropTypes.shape({
+        header: PropTypes.string,
+        display: PropTypes.bool,
+        sortBy: PropTypes.oneOf(['stars', 'updated']),
+        limit: PropTypes.number,
+        exclude: PropTypes.shape({
+          forks: PropTypes.bool,
+          projects: PropTypes.array,
+        }),
+      }),
+      projects: PropTypes.shape({
+        header: PropTypes.string,
+        display: PropTypes.bool,
+        projects: PropTypes.arrayOf(
+          PropTypes.shape({
+            title: PropTypes.string.isRequired,
+            description: PropTypes.string.isRequired,
+            link: PropTypes.string.isRequired,
+            imageUrl: PropTypes.string,
+          })
+        ),
+      }),
+    },
     social: PropTypes.shape({
       linkedin: PropTypes.string,
       twitter: PropTypes.string,
       mastodon: PropTypes.string,
       facebook: PropTypes.string,
       instagram: PropTypes.string,
+      youtube: PropTypes.string,
       dribbble: PropTypes.string,
       behance: PropTypes.string,
       medium: PropTypes.string,
@@ -264,14 +283,6 @@ GitProfile.propTypes = {
       fileUrl: PropTypes.string,
     }),
     skills: PropTypes.array,
-    externalProjects: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string.isRequired,
-        description: PropTypes.string.isRequired,
-        link: PropTypes.string.isRequired,
-        imageUrl: PropTypes.string,
-      })
-    ),
     experiences: PropTypes.arrayOf(
       PropTypes.shape({
         company: PropTypes.string,

src/components/details/index.jsx

@@ -19,6 +19,7 @@ import {
   FaStackOverflow,
   FaTelegram,
   FaLinkedin,
+  FaYoutube,
 } from 'react-icons/fa';
 import PropTypes from 'prop-types';
 import { skeleton } from '../../helpers/utils';
@@ -173,6 +174,14 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://www.instagram.com/${social.instagram}`}
                 />
               )}
+              {social?.youtube && (
+                <ListItem
+                  icon={<FaYoutube />}
+                  title="YouTube:"
+                  value={`@${social.youtube}`}
+                  link={`https://www.youtube.com/@${social.youtube}`}
+                />
+              )}
               {social?.medium && (
                 <ListItem
                   icon={<AiFillMediumSquare />}

src/components/github-project/index.jsx

@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
-import { AiOutlineStar, AiOutlineFork } from 'react-icons/ai';
 import PropTypes from 'prop-types';
-import { ga, languageColor, skeleton } from '../../helpers/utils';
+import { Fragment } from 'react';
+import { AiOutlineFork, AiOutlineStar } from 'react-icons/ai';
 import { MdInsertLink } from 'react-icons/md';
+import { ga, languageColor, skeleton } from '../../helpers/utils';
 
-const Project = ({ repo, loading, github, googleAnalytics }) => {
+const GitHubProject = ({ repo, loading, github, googleAnalytics }) => {
   if (!loading && Array.isArray(repo) && repo.length === 0) {
     return <></>;
   }
@@ -89,7 +89,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
             <div className="flex items-center">
               <div className="card-title text-lg tracking-wide flex text-base-content opacity-60">
                 <MdInsertLink className="my-auto" />
-                <span className="capitalize">{item.name}</span>
+                <span>{item.name}</span>
               </div>
             </div>
             <p className="mb-5 mt-1 text-base-content text-opacity-60 text-sm">
@@ -166,11 +166,11 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
   );
 };
 
-Project.propTypes = {
+GitHubProject.propTypes = {
   repo: PropTypes.array,
   loading: PropTypes.bool.isRequired,
   github: PropTypes.object.isRequired,
   googleAnalytics: PropTypes.object.isRequired,
 };
 
-export default Project;
+export default GitHubProject;

src/components/theme-changer/index.jsx

@@ -57,7 +57,7 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
               </div>
               <div
                 tabIndex={0}
-                className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-lg bg-base-200 text-base-content"
+                className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-lg bg-base-200 text-base-content z-10"
               >
                 <ul className="p-4 menu compact">
                   {[

src/helpers/utils.jsx

@@ -137,11 +137,22 @@ export const sanitizeConfig = (config) => {
   return {
     github: {
       username: config?.github?.username || '',
-      sortBy: config?.github?.sortBy || 'stars',
-      limit: config?.github?.limit || 8,
-      exclude: {
-        forks: config?.github?.exclude?.forks || false,
-        projects: config?.github?.exclude?.projects || [],
+    },
+    projects: {
+      github: {
+        header: config?.projects?.github?.header || 'GitHub Projects',
+        display: config?.projects?.github?.display || true,
+        sortBy: config?.projects?.github?.sortBy || 'stars',
+        limit: config?.projects?.github?.limit || 8,
+        exclude: {
+          forks: config?.projects?.github?.exclude?.forks || false,
+          projects: config?.projects?.github?.exclude?.projects || [],
+        },
+      },
+      external: {
+        header: config?.projects?.external?.header || 'External Projects',
+        display: config?.projects?.external?.display || true,
+        projects: config?.projects?.external?.projects || [],
       },
     },
     social: {
@@ -150,6 +161,7 @@ export const sanitizeConfig = (config) => {
       mastodon: config?.social?.mastodon,
       facebook: config?.social?.facebook,
       instagram: config?.social?.instagram,
+      youtube: config?.social?.youtube,
       dribbble: config?.social?.dribbble,
       behance: config?.social?.behance,
       medium: config?.social?.medium,
@@ -165,7 +177,6 @@ export const sanitizeConfig = (config) => {
       fileUrl: config?.resume?.fileUrl || '',
     },
     skills: config?.skills || [],
-    externalProjects: config?.externalProjects || [],
     experiences: config?.experiences || [],
     certifications: config?.certifications || [],
     education: config?.education || [],

types/index.d.ts

@@ -9,32 +9,63 @@ export interface Github {
    * GitHub org/user name
    */
   username: string;
+}
 
-  /**
-   * stars | updated
-   */
-  sortBy?: string;
-
-  /**
-   * How many projects to display
-   */
-  limit?: number;
-
-  /**
-   * Exclude projects option
-   */
-  exclude?: {
+export interface Projects {
+  github: {
     /**
-     * Forked projects will not be displayed if set to true
+     * Header Title
      */
-    forks?: boolean;
+    header?: string;
 
     /**
-     * These projects will not be displayed
-     *
-     * example: ['my-project1', 'my-project2']
+     * Display GitHub projects?
      */
-    projects?: Array<string>;
+    display?: boolean;
+
+    /**
+     * stars | updated
+     */
+    sortBy?: string;
+
+    /**
+     * How many projects to display
+     */
+    limit?: number;
+
+    /**
+     * Exclude projects option
+     */
+    exclude?: {
+      /**
+       * Forked projects will not be displayed if set to true
+       */
+      forks?: boolean;
+
+      /**
+       * These projects will not be displayed
+       *
+       * example: ['my-project1', 'my-project2']
+       */
+      projects?: Array<string>;
+    };
+  };
+
+  external: {
+    /**
+     * Header Title
+     */
+    header?: string;
+
+    /**
+     * Display external projects?
+     */
+    display?: boolean;
+
+    /**
+     * External Projects
+     */
+    projects?: Array<ExternalProjects>;
   };
 }
 
@@ -64,6 +95,11 @@ export interface Social {
    */
   instagram?: string;
 
+  /**
+   * YouTube
+   */
+  youtube?: string;
+
   /**
    * Dribbble
    */
@@ -260,6 +296,11 @@ export interface Config {
    */
   github: Github;
 
+  /**
+   * Projects
+   */
+  projects?: Projects;
+
   /**
    * Social links
    */
@@ -280,11 +321,6 @@ export interface Config {
    */
   experiences?: Array<Experience>;
 
-  /**
-   * External Projects
-   */
-  externalProjects?: Array<ExternalProjects>;
-
   /**
    * Certifications list
    */

vite.config.js

@@ -3,13 +3,37 @@ import react from '@vitejs/plugin-react';
 import tailwind from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
 import tailwindConfig from './tailwind.config.mjs';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  // If you are deploying to https://<USERNAME>.github.io/, set base to '/'.
-  // If you are deploying to https://<USERNAME>.github.io/<REPO>/, for example your repository is at https://github.com/<USERNAME>/<REPO>, then set base to '/<REPO>/'.
+  // If you are deploying to https://<USERNAME>.github.io/, for example your repository is at https://github.com/<USERNAME>, set base to '/'.
+
+  // If you are deploying to https://<USERNAME>.github.io/<REPO_NAME>/, for example your repository is at https://github.com/<USERNAME>/<REPO_NAME>, then set base to '/<REPO_NAME>/'.
+
   base: '/gitprofile/',
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      workbox: {
+        navigateFallback: undefined,
+      },
+      includeAssets: ['logo.png'],
+      manifest: {
+        name: 'Portfolio',
+        short_name: 'Portfolio',
+        description: 'Personal Portfolio',
+        icons: [
+          {
+            src: 'logo.png',
+            sizes: '64x64 32x32 24x24 16x16 192x192 512x512',
+            type: 'image/png',
+          },
+        ],
+      },
+    }),
+  ],
   css: {
     postcss: {
       plugins: [tailwind(tailwindConfig), autoprefixer],