🌐 3D Awwwards-Level Developer Portfolio

Built with React, GSAP, Three.js, TailwindCSS

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.

📺 Watch Full YouTube Walkthrough

---

🚀 Tech Stack

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

---

📁 Features

• 🔥 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

---

📦 Setup & Installation

git clone https://github.com/Ali-Sanati/awwwards-portfolio.git
cd awwwards-portfolio
npm install
npm run dev

Open http://localhost:5173 in your browser.

---

🛠️ Customization Tips

• 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

Assets used in the project can be found here

---

📣 Like the project?

If this helped you build or inspire your own site:

• ⭐ Star this repo

• 📺 Watch the full walkthrough on YouTube

• 📬 Connect on LinkedIn

• 📷 Follow me on Instagram

---

🤝 Let’s Build Together

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!