Personal Portfolio

Deployed link: https://parthmittal.netlify.app/

Table of Contents 📁

1. Tech Stack
2. Implemented Sections
3. Use as a theme
4. Contributing
5. Installation Guide
6. Sample Git Workflow
7. References & Inspirations
8. Illustrations
   

Tech Stack 🧰

• ReactJS
• Tailwind CSS

• ViteJS
• React Icons
• Framer
• React Lottie
• Meraki UI

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

2. Website title and icon

• Go to index.html and change the title to your name.
• Also, change the link to the title icon

3. Assets

• Add any assets (images) to the assets folder.
• Import the asset and export it using the/src/assets/index.js file.

4. 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 .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 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

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; 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.

Installation Guide 🧑‍💻

Using Git and Github

• Fork the repo
• Clone 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 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 with git 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 with git 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! 🌟

References & Inspirations 👏

• JavaScript Mastery
• Developerfolio
• MasterPortfolio

Illustrations 🖼️

• Coding Lottie by Yamesh Sai Balaji
• Quiz Mode Lottie by SenecaDan