Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/umairazmat/personal-portfolio

Portfolio Website using React Vite, TailwindCss: 1) https://umairazmat.vercel.app/ 2)https://umairazmat.netlify.app/
https://github.com/umairazmat/personal-portfolio

dev-portfolio developer javascript js mern-project mern-stack mern-stack-development portfoilo-project portfolio portfolio-construction portfolio-page portfolio-site portfolio-template portfolio-website react reactjs reactvite tailwind-css tailwindcss vitejs

Last synced: about 1 month ago
JSON representation

Portfolio Website using React Vite, TailwindCss: 1) https://umairazmat.vercel.app/ 2)https://umairazmat.netlify.app/

Awesome Lists containing this project

README 

        
 Personal Portfolio 



image



### Deployed links:



- [Netlify](https://umairazmat.netlify.app/)

- [Vercel](https://umairazmat.vercel.app/)



## Table of Contents 📁



1. [Tech Stack](#tech-stack-)

2. [Implemented Sections](#implemented-sections-%EF%B8%8F)

3. [Use as a theme](#using-as-a-theme-)

4. [Contributing](#contributing-)

5. [Installation Guide](#installation-guide-)

6. [Sample Git Workflow](#sample-git-workflow)

7. [References & Inspirations](#references--inspirations-)

8. [Illustrations](#illustrations-%EF%B8%8F)

   



## Tech Stack 🧰



  • Frameworks
    • 


    - [ReactJS](https://reactjs.org/)

    - [Tailwind CSS](https://tailwindcss.com/)
    


  • Libraries/Tools
    • 

        

    - [ViteJS](https://vitejs.dev/)

    - [React Icons](https://react-icons.github.io/react-icons")

    - [Framer](https://www.framer.com/)

    - [React Lottie](https://www.npmjs.com/package/react-lottie)

    - [Meraki UI](https://merakiui.com/components/)
    



    


    ## Implemented Sections ☑️
    


    - Hero Section

    - Skills & Experience

    - Education

    - Projects

    - Blogs

    - Open Source Contributions

    - Extra Curricular

    - Contact Me
    


    ## Using as a theme ✨
    


    ### Code changes
    


    Three main things have to be changed to customize it your way (please open an issue if you find more such instances):
    


    1. Personal Information
    


    - [/src/constants/index.js](https://github.com/umairazmat/personal-portfolio/blob/main/src/constants/index.js) contains all the personal information one needs to change. Each website section is written as a JavaScript object and is pretty intuitive to change.
    


    - Icons

      - Whenever you want to use an icon, you'll have to make sure that the icon is imported.

      - Head to [https://react-icons.github.io/react-icons/search](https://react-icons.github.io/react-icons/search) and search for the desired icon. (Eg: SiReact for ReactJS)

      - Note the package it belongs to (Eg: 'Si' here)

      - Import the icon into [`/src/constants/index.js`](https://github.com/umairazmat/personal-portfolio/blob/main/src/constants/index.js) (Eg: `import { ... SiReact, } from "react-icons/si";` here)
    


    2. Website title and icon
    


    - Go to [`index.html`](https://github.com/umairazmat/personal-portfolio/blob/main/index.html) and change the [`title`](https://github.com/umairazmat/personal-portfolio/blob/main/index.html#L7") to your name.

    - Also, change the link to the title [icon](https://github.com/umairazmat/personal-portfolio/blob/main/index.html#L5)
    


    3. Assets
    


    - Add any assets (images) to the [`assets`](https://github.com/umairazmat/personal-portfolio/tree/main/src/assets) folder.

    - Import the asset and export it using the[`/src/assets/index.js`](https://github.com/umairazmat/personal-portfolio/blob/main/src/assets/index.js) file.
    


    4. Creating a .env file
    


    VITE_GH_TOKEN=

    VITE_EMAIL_SERVICE_ID=

    VITE_EMAIL_TEMPLATE_ID=

    VITE_EMAIL_USER_ID=
    


    Environment variables store sensitive information that vary for the user and should not be checked into source control.

    One such example is the GitHub personal access token to automatically fetch the Open Source Contributions.
    


    - A personal access token can be created to use the GitHub API following the official guide from GitHub - [GitHub Docs - Creating personal Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic)
    


    The environment variables are to be added onto the .env file
    


    - Create a file in your local dev environment to hold your environment variables called `.env` in the root project folder.

    - Copy over the contents of the `.env.example` example file into the `.env` file.

    - Replace the value of the environment variable value(s) with the values you want the environment variables to hold, for e.g. `VITE_GH_TOKEN=YOUR_GITHUB_TOKEN` where `YOUR_GITHUB_TOKEN` is the personal access token you generated earlier.
    


    ### Deployment
    


    You can use [Netlify](https://docs.netlify.com/) to deploy your site. Follow the instructions in their docs to do so.
    


    Since we have env variables, make sure to add them from the Netlify UI as well. [Link to Guide](https://docs.netlify.com/environment-variables/get-started/#site-environment-variables)
    


    ## Contributing 🏆
    


    We welcome contributions in the form of pull requests, issues and documentation. Feel free to help us in any way! ❤️
    


    - Please follow the [installation guide](https://github.com/umairazmat/personal-portfolio/blob/main/readme.md#installation-guide) and the [sample git workflow](https://github.com/umairazmat/personal-portfolio/blob/main/readme.md#sample-git-workflow) to contribute.
    


    ## Installation Guide 🧑‍💻
    


    ### Using Git and Github
    


    - [Fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo) the repo

    - [Clone](https://docs.github.com/en/get-started/quickstart/contributing-to-projects#cloning-a-fork) the forked repository

    - Enter the new `portfolio` directory with `cd portfolio`

    - Set the upstream remote to the original repository url so that git knows where to fetch updates from in future: `git remote add upstream https://github.com/umairazmat/personal-portfolio.git`
    


    ### Install required packages
    


    - `npm install`
    


    ### Run server
    


    - `npm run dev`
    



    


    ## Sample Git Workflow
    


    - Follow the [installation guide](https://github.com/umairazmat/personal-portfolio/blob/main/readme.md#installation-guide) to install the software

    - Create a new feature branch with `git checkout -b `

    - Make changes and commit them in the feature branch.

    - Once done developing, switch back to the main branch with `git checkout main` ; pull the latest version of the repo with `git pull https://github.com/umairazmat/personal-portfolio.git main`

    - Switch back to the feature branch with `git checkout `. Apply the new changes on top of the latest version of the repo with `git rebase main`

    - [Resolve merge conflicts](https://help.github.com/articles/resolving-a-merge-conflict-from-the-command-line/) (if any)

    - Push your feature branch upto your remote repo with `git push origin `

    - [Submit a Pull Request](https://docs.github.com/en/get-started/quickstart/contributing-to-projects#making-a-pull-request) to the main branch.

    - After any questions or changes have been resolved, your contribution would be merged in!
    


    #### If you found this repo helpful in anyway, considering giving it a star - it would mean the world to me! 🌟
    


    ## References & Inspirations 👏
    


    - [JavaScript Mastery](https://youtu.be/_oO4Qi5aVZs)

    - [Developerfolio](https://developerfolio.js.org/)

    - [MasterPortfolio](https://github.com/ashutosh1919/masterPortfolio)
    


    ## Illustrations 🖼️
    


    - [Coding Lottie](https://lottiefiles.com/90189-coding) by Yamesh Sai Balaji

    - [Quiz Mode Lottie](https://lottiefiles.com/92377-quiz-mode) by SenecaDan
    


    ## Idea and Base CODE Credit 📜
    


    - [Parth Mittal](https://github.com/mittal-parth/personal-portfolio.git`)