mittal-parth/personal-portfolio

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

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 🧰

Frameworks

• ReactJS
• Tailwind CSS

Libraries/Tools

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

Deployment

You can use Netlify 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; 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

personal-portfolio's Issues

Change <a> tags to markdown style

In the readme, replace all tags with the markdown style of using

Projects: Add name of tech stack on hover.

When hovering over the tech stack icons in the projects (like JS here), the name of the technology can be displayed.

Feature: Use the GitHub API for the Open Source Contributions

Currently, the open source contributions have to be manually typed into the /src/constants/index.js file.

It would be better if we could fetch them automatically using the GitHub API.
This should include all the PRs and issues opened by the person in all repos except the ones owned by him or that are part of his organisation(s).

It will need some discussion before proceeding, so feel free to discuss it here!

Irregular footer width

The entire site is contained in a max-width of 1280px, however, the footer is not. This breaks the flow of the site and makes it look unusual.
If you feel this is a valid issue, please assign it to me and I will fix it under Hacktoberfest.

Increase footer padding on tablets

The left padding on the footer for the tablet viewport is too less. Add padding on the left only for tablets.

Footer: Add credit notes

Add a line Made with 💙 by Parth Mittal & the Open Source Community at the end of the footer separated by a line.

Change Footer design to add image

Add loading screen animation

Add an animation when the website loads for the first time.
Ideally, the icon displayed should be the one used at the website title - icon

Add dynamic Call to Action

The 'LetsConnect' component has my linkedin hardcoded at line 8

Change it to dynamically fetch from /src/constants/index.js. This can be done by:
Create a new constant called callToAction in the /src/constants/index.js file and use this instead of the hardcoded LinkedIn URL

Add name logo

Make Let's Connect a link

Add animations

Hero: Make Intro dynamic

Similar to #17, The intro of the person is hard coded in the Hero component
Change it to be dynamic by fetching it from /src/constants/index.js

Very similar to #34

Custom scrollbar with dark theme

Styling the scrollbar

Hello, I would like to implement some styling to make the scrollbar have the same dark theme as the website.
Please let me know if it interests you, if it does, assign me and I will happily open a PR with the following code, the --primary and --secondary color variables, names, values are subject to change to respect the project styling.

:root {
  --primary: #363636;
  --secondary: lightblue;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--secondary) var(--primary);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 15px;
}

*::-webkit-scrollbar-track {
  background: var(--primary);
  border-radius: 0px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: 14px;
  border: 3px solid var(--primary);
}

Before

After

Make name on Hero and Footer section dynamic

The name of the person is hard coded in the Hero.jsx component and Footer component
Change it to be dynamic by fetching it from /src/constants/index.js

Add Lottie interactivity

Lottie files have this cool feature of animating only upon some action.
The interactivity guide can be accessed here - https://lottiefiles.com/interactivity

This needs some discussion as to how it can be utilised for the two lotties used. Feel free to add your ideas here as comments before we can make PRs.

feature: Add a section for blogs

It would be nice to have a section that displays the blogs written by the person.
Would like to see some design(s) before coding it out.

Add contributing.md

feature: Add a section for Achievements

It would be nice to have a dedicated section for people to display their achievements like competitions, conferences, awards, etc
Similar to #39, would like to see some design(s) before coding it out.

One of the things that I have in mind is that the user should be able to filter out the achievements based on some criteria. This can be done similar to the navigation on the Open Source Contribution section where you can filter out contributions based on the organisation. Here it could be filtered out based on the type (like extra curricular and curricular)

Add 'Star this repo' button

Add a 'star this repo' button in the footer of the site.

Footer: Make tagline dynamic

Similar to #17, The tagline of the person is hard coded in the Footer component
Change it to be dynamic by fetching it from /src/constants/index.js