Portfolio V1

Overview

Portfolio V1 was my first fully custom-built portfolio. Built before utility frameworks and component libraries were part of my workflow — everything from the design system to the animation layer was hand-rolled

System Design & Architecture

Frontend (React)

• Modular component structure for sections (hero, projects, about, etc.)
• Clear separation between layout, content, and animation logic

Styling System (SCSS)

• Custom design system built using:
  • Variables (colors, spacing, typography)
  • Mixins for responsive breakpoints
• Enabled consistent styling without a utility framework

Animation Layer

• GSAP for timeline-based, orchestrated animations
• Framer Motion for declarative, interaction-driven animations
• Combined both approaches depending on use case

---

Key Engineering Decisions

1. Timeline-Based Animation Control

Decision: Use GSAP timelines for complex animation sequences.

Why:

• Precise control over sequencing and timing
• Easier orchestration compared to manual chaining

2. Hybrid Animation Strategy

Decision: Combine GSAP and Framer Motion. To be honest I was not aware of the trade-offs of using both libraries at the time.

Why:

• GSAP excels at complex timelines
• Framer Motion provides simple declarative interactions

Trade-offs:

• Increased bundle size
• More complexity in choosing the right tool

3. Custom Styling System with SCSS

Decision: Build a styling system without relying on utility frameworks.

Why:

• Full control over design and structure
• Better understanding of CSS architecture that I still rely on today

---

Challenges

Coordinating Complex Animations

Managing multiple animations across components can quickly become unmanageable.

Solution:

• Centralized animation logic using GSAP timelines
• Structured animation triggers clearly within components

Building Responsive Layouts Without Utilities

Without Tailwind or similar tools, maintaining consistency required discipline.

Solution:

• Built a reusable SCSS mixin system
• Standardized spacing and breakpoints

---

Learnings

This project established my foundation in frontend engineering and UI craftsmanship:

• Understanding animation performance and browser rendering behavior
• A custom design system is a lot of work — and worth every bit of it
• GSAP and Framer Motion solve different problems, knowing which to reach for matters