# 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
[](https://youtu.be/jcohAIaSy2M)
---
✨ Checkout my brand new SaaS application -> [AI Headshot Generator](https://www.smartheadshots.ai)
---
## 🆕 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`](https://github.com/codebucks27/react-portfolio-final/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:
```bash
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](https://bun.sh) installed (`bun --version` should print 1.0+).
```bash
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.