Build a Stunning Portfolio with React JS using Styled-Components and Motion for awesome Animations

This repository contains the final code for the Portfolio Website in ReactJS.

For the Demo and Final Code check out this link 👇:

Checkout this Responsive Portfolio in ReactJS

If you want to learn how to create it, follow the tutorial below 👇:

https://youtu.be/jcohAIaSy2M

✨ Checkout my brand new SaaS application -> AI Headshot Generator

🆕 2026 modernization update

The original tutorial code targeted Create React App and an older set of libraries. The current main branch has been brought up to date. If you want the original tutorial code, check out commit 5cef54f (or any commit before this update) — the older version is preserved in git history.

What changed

• Build tool: removed react-scripts (Create React App) and migrated to Vite 8 with @vitejs/plugin-react. Faster dev server, faster builds, plain ES modules.
• Package manager: project now uses Bun instead of npm/yarn (works fine with either, but bun.lockb is the source of truth).
• React 19 + react-dom 19 (was React 18).
• react-router-dom 7 (was 6) — declarative BrowserRouter / Routes / Route API used here is unchanged.
• framer-motion → motion 12. The package was renamed; imports moved from framer-motion to motion/react.
• styled-components 6 (was 5). All non-DOM props (click, color, img, top, left, right) were converted to transient props ($-prefixed) so they don't leak onto the DOM.
• tsparticles 3 with the new @tsparticles/react wrapper. react-tsparticles is deprecated. The component now uses initParticlesEngine + loadFull and options instead of the old params prop.
• Removed unnecessary CRA leftovers: reportWebVitals.js, setupTests.js, App.test.js, App.css, index.css, logo.svg, manifest.json, logo192.png, logo512.png, package-lock.json, plus data/AllSvg.txt and data/Text.txt scratch files.
• JSX-bearing files were renamed from .js to .jsx (Vite/Rolldown only treats .jsx as JSX by default).

Looking for the old code?

Every previous version is kept in git history. To run the original CRA-based version:

git checkout 5cef54f
npm install
npm start

Images of The Portfolio Website

Resources Used in This Project

Design in: https://www.figma.com/

SVG Icons from: https://fontawesome.com/

Spaceman 3D image from: https://www.figma.com/community/plugin/769588393361258724/Vectary-3D-Elements

Audio: Music by Jonas from Pixabay

Background photo by Patrick Tomasso on Unsplash

Getting started

Make sure you have Bun installed (bun --version should print 1.0+).

bun install
bun run dev      # start the Vite dev server at http://localhost:3000
bun run build    # production build to ./dist
bun run preview  # preview the production build locally

The project is plain Vite + React, so npm install && npm run dev works too if you'd rather not use Bun.