A modern, animated 3D developer portfolio built with React, Three.js, TailwindCSS, and motion effects — designed to help you stand out and showcase your skills creatively.
- Features
- Tech Stack
- Project Structure
- Getting Started
- Assets
- Contact Me
- Suggestions or Feedback
- Like This Project?
- 🔥 3D visuals powered by React Three Fiber and Drei
- ⚡ Smooth transitions and scroll-based animations using Framer Motion
- 🎨 Clean, responsive UI with TailwindCSS
- 💌 Working contact form using EmailJS
- 🧱 Beautiful UI enhancements with Aceternity UI and Magic UI
- 🚀 Lightning-fast development with Vite
| Tech | Description |
|---|---|
| React | Front-end JavaScript library |
| Vite | Fast bundler and dev environment |
| TailwindCSS | Utility-first CSS framework |
| React Three Fiber | 3D rendering with Three.js in React |
| Drei | Helpers and abstractions for R3F |
| Framer Motion | Animation library for React |
| EmailJS | Form handling and email integration |
| Aceternity UI | Custom UI components |
| Magic UI | Prebuilt UI elements and design extras |
├── public/
│ ├── assets/ # Images, textures, models
│ ├── models/ # 3D Astronaut model
│ └── vite.svg
├── src/
│ ├── components/ # Reusable components
│ ├── constants/ # Reusable datas
│ ├── sections/ # Portfolio sections (Hero, About, etc.)
│ ├── App.jsx # Main app file
│ ├── index.css # Tailwind css
│ └── main.jsx # Entry point
├── tailwind.config.js
└── vite.config.js- Clone the Repository
git clone https://github.com/Ali-Sanati/Portfolio.git
cd Portfolio- Install Dependencies
npm install- Run the Development Server
npm run devThe app will be available at http://localhost:5173.
Assets used in the project can be found here
Leave a comment on the YouTube video or open an issue here on GitHub.
👉 What should I build next?
-
A beautiful Landing Page
-
A complete E-commerce site
-
A fun App Clone (YouTube, Netflix, etc.)
Or another interactive Portfolio
Let me know!
Star the repo and subscribe to the YouTube channel for more dev content!