Old Portfolio Website

Animations
Design
Frontend
GSAP
Portfolio
2024-05-31
Old Portfolio Website

My First Portfolio Site – Built with Pure CSS, Scroll Magic & Tears 😭
This one was personal. I dove headfirst into a world of GSAP animations, smooth scrolling, and pure frontend madness. Design was tough. Colors broke my brain. But I stuck it out and launched something I’m still proud of.

Context

At the time, I wanted something to showcase my work that wasn’t just another boring portfolio. I was inspired by sites with buttery scroll, fluid transitions, and type reveals — and I wanted to challenge myself to build something similar without React or modern frameworks.

This project taught me more about UI/UX and animations than any tutorial ever could.

Key Features

  1. 🎬 GSAP Animations – Timeline-controlled entrance animations, hover effects, and section transitions.
  2. 🌀 ScrollTrigger + Locomotive Scroll – Seamless parallax scroll with trigger-based animations.
  3. 🧠 SplitType – Typographic animation using text splitting for dramatic intros.
  4. 🌐 Fully Responsive – Works great on mobile, tablet, and desktop.

Tech Stack

  • HTML, CSS, JavaScript – Handwritten, no frameworks
  • GSAP – Core animation engine
  • ScrollTrigger – Scroll-based animation triggers
  • Locomotive Scroll – Smooth scroll and inertia effects
  • SplitType – Animated typography handling

Lessons & Takeaways

  • Design is hard — but learnable. I struggled but came out better.
  • CSS nearly broke me – but I’m stronger for it 😭
  • Animation ≠ Performance – Learned how to balance visual flair with smooth performance.
  • Attention to detail is everything — small transitions, easing, timing made a huge difference.
  • This site was the foundation – It helped me build confidence for future frontend/UI work.

Not the cleanest site in the world, but it was a hell of a learning journey — and that’s what matters.