Navigation
ResumeVIEW CV
Socials
Portfolio Design & Engineering

Portfolio Design & Engineering

A Masterclass in High-Fidelity UI and Next.js / GSAP

Role

Product Designer & UI Engineer

Timeline

Ongoing

Tools

Figma, Next.js, Tailwind CSS, GSAP

I designed and engineered this portfolio to act as a living testament to my skills as both a Product Designer and a Frontend Engineer. Instead of relying on generic templates, I built a custom design system from scratch, prioritizing a premium dark-mode aesthetic with high-contrast typography and subtle glassmorphism.
The Hero Section: establishing an immediate editorial presence with massive display typography and a dark, moody aesthetic.
The Hero Section: establishing an immediate editorial presence with massive display typography and a dark, moody aesthetic.

The Hero Methodology: Orchestrating Attention

The Hero section was designed to function not just as an introduction, but as a cinematic experience. Instead of relying heavily on static text, I utilized a scroll-driven image sequence to curate a visual story. As the user scrolls, the sequential motion of the high-fidelity frames creates a fluid, cinematic experience that establishes the core 'Product Designer' value proposition. This methodology forces a deliberate, orchestrated visual narrative rather than an overwhelming dump of information.

Design System & Aesthetics

The visual DNA of this portfolio revolves around two contrasting typographic scales: a highly stylized display font for massive, impactful headlines, and highly legible sans-serifs for body text. This contrast is paired with a strictly monochromatic base (deep blacks and crisp whites) accented by a warm, sophisticated orange to guide the user's eye and highlight interactive elements.

Colors

#0a0a0a
#141414
#FAB262
#f5f5f5

Fonts

AaBrier Bold
AaMona Sans

Tagline

Where AI Executes, Humans Must Orchestrate.

Brand values

High-Fidelity UICinematic MotionCode as Design
The About Section: integrating glassmorphism, precise CSS grid layouts, and the signature 'OM.' branding.
The About Section: integrating glassmorphism, precise CSS grid layouts, and the signature 'OM.' branding.

The Engineering Challenge

To bring the static designs to life, I utilized Next.js for its robust routing and performance. The real magic, however, lies in the custom GSAP animations. I implemented a global scroll-driven architecture with Lenis to ensure butter-smooth scrolling, paired with complex stagger animations, custom cursors, and magnetic hover effects that reward user interaction at every step. Everything was built with responsive Tailwind CSS to ensure the premium feel translates flawlessly to mobile devices.

The Project Showcase: featuring alternating layouts, scroll-driven magnetic cards, and rich micro-interactions.
The Project Showcase: featuring alternating layouts, scroll-driven magnetic cards, and rich micro-interactions.

Human Intent & AI Execution

In today's rapidly evolving landscape, many creatives are losing hope, fearing that AI will replace them. This portfolio stands as a direct counter-narrative. It was built through a seamless, real-time collaboration between human intent (my design vision, UX strategy, and empathy) and AI execution (rapid code generation and problem-solving by my AI agent). It showcases that the future belongs not to humans competing with AI, but to those who learn to orchestrate it. Humans provide the soul, the strategy, and the storytelling, while AI provides the velocity and execution.

“This portfolio is more than just a gallery of past work; it is an active demonstration of my ability to bridge human intent with precise machine execution.”