Personal Portfolio

Personal Portfolio is a React.js-based open-source template for a developer's personal website, designed to showcase skills, GitHub projects, and a resume in a multi-page layout. The live demo is hosted at portfolio-devanshsahni.vercel.app, and the project is available on GitHub for forking.

What is Personal Portfolio?

Personal Portfolio is a React.js single-page application template that presents a developer's skills, GitHub projects, and resume through a multi-page layout. It takes content like your name, project links, and a resume PDF as input and produces a fully responsive portfolio website that you can deploy to Vercel. The project uses npm packages for animations, icons, and a preloader, and the README provides step-by-step setup instructions for local development.

Key Features

• Multi-page layout — The site is organized into multiple pages so you can separate home, projects, and resume sections instead of using one long scroll.
• Fully responsive — The layout adapts to different screen sizes so the portfolio reads well on mobile, tablet, and desktop.
• Preloader — Uses the react-spinners package to show a loading animation before the content appears.
• Logo refresh — Clicking the site logo reloads the page, a small interaction detail.
• Lottie animations — Integrates lottie-react to display JSON-based animations throughout the site.
• Typewriter effect — Homepage text uses the typewriter-effect package to create a typing animation.
• Resume preview — Embeds a PDF resume view using react-pdf, so visitors can read it without leaving the page.
• Tilt hover effects — The react-parallax-tilt package applies a tilt effect to images and animated components on hover.

Who should use Personal Portfolio?

• Developers and students who want a polished portfolio without writing a site from scratch can fork the repo, replace the placeholder content, and deploy it to Vercel.
• Job seekers can use the resume preview feature to present their CV in-page and link their GitHub projects directly from the project pages.
• React beginners can study how the template combines npm packages like lottie-react, react-pdf, and react-parallax-tilt in one project.
• Open-source contributors can fork the repository, make improvements, and submit issues or pull requests to the original project.

What can you do with Personal Portfolio?

• Showcase your work: Replace the placeholder projects with your GitHub repositories and add your best work to the projects page.
• Display your resume: Drop a PDF resume into the project so the react-pdf preview renders it for visitors.
• Customize the animation and text: Swap the Lottie animation files and edit the typewriter effect text to match your personal brand.
• Deploy on Vercel: The template is already configured for Vercel, so you can push the repo and get a live URL quickly.

How does Personal Portfolio work?

1. Fork the GitHub repository and clone it to your local machine with git.
2. Run npm i to install all dependencies, then npm start to open the project at http://localhost:3000.
3. Edit the content in the components to replace the author's details with your skills, projects, and resume, then commit and push to deploy.

Pricing

Personal Portfolio is free to use. The repository is public on GitHub and the README explicitly invites you to fork it and make changes of your own. No license is mentioned in the README, so confirm the license terms on the GitHub repo before commercial use.

Alternatives

• soumyajit4419/Portfolio — The design of this template is explicitly inspired by this React portfolio, which also provides a multi-page layout and is widely used by developers.

FAQ

Is Personal Portfolio free?

Yes. The project is open-source and the README encourages you to fork the repo and modify it. You only need to give proper credit back to the original repository as requested in the README.

What do I need to run Personal Portfolio locally?

You need git installed to clone the repo and Node.js to run npm commands. The setup steps are: fork the repo, copy the HTTPS link, run git clone, then npm i and npm start. The site runs on http://localhost:3000 in development mode.

Can I customize the content and animations?

Yes. The README suggests browsing the project and making changes. You can edit the component text, swap Lottie animation files, and update the typewriter text directly in the source code.

Does Personal Portfolio include a resume viewer?

Yes. The template uses the react-pdf npm package to preview the resume PDF inside the site, so visitors can view your resume without downloading it.