Build Your Dream 3D Dev Awwwards Portfolio in 2 hours

Build a 3D animated awwwards winning developer portfolio with GSAP & Three.js—in just 2 hours!

Follow this step-by-step tutorial to create an Awwwards-worthy site from Vite setup through hero animations, interactive navbars, scroll reveals, project hovers, and responsive styling—perfect for React and Three.js enthusiasts.

🔔 Subscribe for more React & Three.js tutorials!
👍 Like if this helped you!
💬 Comment with what effect you want to learn next.

🛠 Tech Stack & Highlights:
• Responsive Navbar with GSAP
• 3D hero scene via React Three Fiber & Drei
• Scroll-triggered animations (Tailwind + GSAP)
• Interactive project previews & contact marquees
• Performance & accessibility optimizations

👉 Get the full source code:
https://github.com/Ali-Sanati/awwward...

📂 Timestamps
00:00 – Intro: Why build a 3D portfolio
00:03:41 – Navbar: slide-in + staggered link animations
00:32:45 – Hero Section: 3D planet with GSAP & models
00:53:31 – Service Summary: scroll-triggered horizontal keywords
01:01:02 – Services Section: card animations and layout
01:16:21 – About Section: clip-path reveal + text animation
01:23:13 – Works Section: hover previews over projects
01:46:15 – Contact Summary: marquee with values
01:58:11 – Contact Section: reveal contact info

💬 Let's Connect:
📸 Instagram:   / reels  
👨‍💻 GitHub: https://github.com/Ali-Sanati
🖇️ LinkedId:   / ali-sanati  


#reactjs #reactproject #threejs #awwwards #developer #tailwindcss #tailwind #motion #gsap #gsapanimation #vitejs #portfolioupdate #portfoliodesign #portfoliomanagement #portfoliotips #backend #frontend #webdesign #webdeveloper #webdev #webdevelopment #website #web #project #3d #spline #astronaut #grid #minimal #jupiter #blender