Deployed link: https://parthmittal.netlify.app/
- Tech Stack
- Implemented Sections
- Use as a theme
- Contributing
- Installation Guide
- Sample Git Workflow
- References & Inspirations
- Illustrations
- Hero Section
- Skills & Experience
- Education
- Projects
- Blogs
- Open Source Contributions
- Extra Curricular
- Contact Me
Three main things have to be changed to customize it your way (please open an issue if you find more such instances):
- Personal Information
-
/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 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(Eg:import { ... SiReact, } from "react-icons/si";here)
- Website title and icon
- Go to
index.htmland change thetitleto your name. - Also, change the link to the title icon
- Assets
- Add any assets (images) to the
assetsfolder. - Import the asset and export it using the
/src/assets/index.jsfile.
- Creating a .env file
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
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
.envin the root project folder. - Copy over the contents of the
.env.exampleexample file into the.envfile. - 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_TOKENwhereYOUR_GITHUB_TOKENis the personal access token you generated earlier.
You can use Netlify 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
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; our community aspires to be a respectful place both during online and in-person interactions.
- Please follow the installation guide and the sample git workflow to contribute.
- Fork the repo
- Clone the forked repository
- Enter the new
portfoliodirectory withcd 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
npm install
npm run dev
- Follow the installation guide to install the software
- Create a new feature branch with
git checkout -b <name-of-your-feature-branch> - 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 withgit pull https://github.com/mittal-parth/personal-portfolio.git main - Switch back to the feature branch with
git checkout <name-of-your-feature-branch>. Apply the new changes on top of the latest version of the repo withgit rebase main - Resolve merge conflicts (if any)
- Push your feature branch upto your remote repo with
git push origin <name-of-your-feature-branch> - Submit 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! 🌟
- Coding Lottie by Yamesh Sai Balaji
- Quiz Mode Lottie by SenecaDan