Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/mittal-parth/personal-portfolio

The only developer portfolio template you'll ever need with modern UI/UX.
https://github.com/mittal-parth/personal-portfolio

developer-portfolio developer-portfolio-template framer-motion hacktoberfest hacktoberfest2022 html personal-portfolio personal-website portfolio-website react-icons reactjs tailwind-css template ui-ux

Last synced: about 1 month ago
JSON representation

The only developer portfolio template you'll ever need with modern UI/UX.

Awesome Lists containing this project

README 

        
 Personal Portfolio 



image



### Deployed link: https://parthmittal.netlify.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/mittal-parth/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/mittal-parth/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/mittal-parth/personal-portfolio/blob/main/index.html) and change the [`title`](https://github.com/mittal-parth/personal-portfolio/blob/main/index.html#L7") to your name.

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


    3. Assets
    


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

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


    ### Deployment
    


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


    ## Contributing 🏆
    


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


    - Please read and abide by our [Code of Conduct](https://github.com/mittal-parth/personal-portfolio/blob/main/CODE_OF_CONDUCT.md);

    our community aspires to be a respectful place both during online and in-person interactions.

    - Please follow the [installation guide](https://github.com/mittal-parth/personal-portfolio/blob/main/readme.md#installation-guide) and the [sample git workflow](https://github.com/mittal-parth/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/mittal-parth/personal-portfolio.git`
    


    ### Install required packages
    


    - `npm install`
    


    ### Run server
    


    - `npm run dev`
    



    


    ## Sample Git Workflow
    


    - Follow the [installation guide](https://github.com/mittal-parth/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/mittal-parth/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