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: 1 day ago
JSON representation

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

Host: GitHub
URL: https://github.com/mittal-parth/personal-portfolio
Owner: mittal-parth
Created: 2022-09-17T05:48:51.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-08-21T17:27:45.000Z (about 1 month ago)
Last Synced: 2024-09-18T12:13:36.000Z (7 days ago)
Topics: developer-portfolio, developer-portfolio-template, framer-motion, hacktoberfest, hacktoberfest2022, html, personal-portfolio, personal-website, portfolio-website, react-icons, reactjs, tailwind-css, template, ui-ux
Language: JavaScript
Homepage: https://parthmittal.netlify.app/
Size: 5.49 MB
Stars: 68
Watchers: 1
Forks: 40
Open Issues: 3
Metadata Files:
- Readme: readme.md
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
 Personal Portfolio 




### 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