This is a fully animated, interactive, 3D developer portfolio designed to impress clients, recruiters, and hiring managers. It's more than a portfolio—it's a web experience built with production-level code, scroll-based animations, and real-world best practices.
⚡ Inspired by Awwwards-level sites — built with React (Vite), TailwindCSS, GSAP, React Three Fiber, and Drei.
| Technology | Description |
|---|---|
| React (Vite) | Fast dev server and production bundling |
| Tailwind CSS | Utility-first styling for components |
| GSAP | Scroll-based animation and motion logic |
| Three.js | 3D scenes powered by React Three Fiber |
| Drei | Useful helpers for 3D rendering |
- 🔥 3D Hero Section with animated planet and golden ring
- 🧩 Smooth slide-in Navbar with staggered link animations
- 🎯 Scroll-triggered Service Summary with horizontal word motion
- 🖼️ Works section with hover overlays and interactive previews
- ✍️ About section with clip-path image reveal + typewriter text
- 🏁 Marquee-based Contact Summary and CTA
- 💼 Fully responsive and accessible on all screen sizes
git clone https://github.com/Ali-Sanati/awwwards-portfolio.git
cd awwwards-portfolio
npm install
npm run devOpen http://localhost:5173 in your browser.
-
Change text, images, and links in /constants/index.js
-
Update 3D models and scene in Hero.jsx
-
Add your own contact info in Contact.jsx
-
Adjust colors, fonts, and layout via tailwind.config.js
Assets used in the project can be found here
If this helped you build or inspire your own site:
-
⭐ Star this repo
Drop a comment on the video or open an issue with your idea!
📩 Like, subscribe, and let me know what kind of project you want to build together!