about

projects

permanent archive (AI)

email me

menu

I have many thoughts on AI. As we all do.

I’m still navigating my relationship with it, adapting to the changing nature of the design process, and remaining curious about what new possibilities are emerging.

I have many thoughts on AI. As we all do.

I’m still navigating my relationship with it, adapting to the changing nature of the design process, and remaining curious about what new possibilities are emerging.

I have many thoughts on AI.
As we all do.

I’m still navigating my relationship with it, adapting to the changing nature of the design process, and remaining curious about what new possibilities are emerging.

Full transparency, I believe it’s worth questioning thoughtfully as it evolves. I deeply empathize for the artists and musicians in my little corner of the world who are trying to find their footing within a creative culture that's being rewritten in real time. And at the risk of sounding hypocritical, given that it’s here to stay, I'm consistently exploring how current and emerging technology can shape something better together. Not to replace one another, but to grow alongside each other.

I want to embrace its role as a tool for possibility.
As a tool in a larger process.
And more importantly, I want to make sure it doesn't replace the whole thing.

I still believe every creative pursuit is deeply human, shaped by perspectives and emotions that can never truly be replicated.
And every AI output still needs someone to ask, "does a real human actual understand this."

Somewhere within all of that reflection, and to keep a finger on the pulse, here is client work mixed with a few small "passion projects" to find clarity within the noise.

Full transparency, I believe it’s worth questioning thoughtfully as it evolves. I deeply empathize for the artists and musicians in my little corner of the world who are trying to find their footing within a creative culture that's being rewritten in real time. And at the risk of sounding hypocritical, given that it’s here to stay, I'm consistently exploring how current and emerging technology can shape something better together. Not to replace one another, but to grow alongside each other.

I want to embrace its role as a tool for possibility.
As a tool in a larger process.
And more importantly, I want to make sure it doesn't replace the whole thing.

I still believe every creative pursuit is deeply human, shaped by perspectives and emotions that can never truly be replicated.
And every AI output still needs someone to ask, "does a real human actual understand this."

Somewhere within all of that reflection, and to keep a finger on the pulse, here is client work mixed with a few small "passion projects" to find clarity within the noise.

Full transparency, I believe it’s worth questioning thoughtfully as it evolves. I deeply empathize for the artists and musicians in my little corner of the world who are trying to find their footing within a creative culture that's being rewritten in real time. And at the risk of sounding hypocritical, given that it’s here to stay, I'm consistently exploring how current and emerging technology can shape something better together. Not to replace one another, but to grow alongside each other.


I want to embrace its role as a tool for possibility.
As a tool in a larger process.
And more importantly, I want to make sure it doesn't replace the whole thing.

I still believe every creative pursuit is deeply human, shaped by perspectives and emotions that can never truly be replicated.
And every AI output still needs someone to ask, "does a real human actual understand this."

Somewhere within all of that reflection, and to keep a finger on the pulse, here is client work mixed with a few small "passion projects" to find clarity within the noise.

“See you in the
permanent archive.”

project one

Hello Application - Cursor Vibe Coding

RAPID PROTOTYPING / PERSONAL EXPLORATION

Figma → Code (MCP)
rapid prototyping
motion & micro-interactions
React 19 + Vite
CSS Animations
Web Animations API

Most projects look at the client.

This one says here’s my media, mess, and memories.

…my average Saturday and the art sitting on my hard drive.

I turned getting-to-know-me into a phone-shaped personal project filled with movies I’ll defend forever, music I’m definitely playing right now, illustrations from side hustles, and an average Saturday when I'm AFK.

I vibe-coded the whole thing… but only after I designed it fully in Figma, named my layers like it was a personality test, and linked the file to Cursor through MCP. That’s when the long, slightly unhinged conversations started: spacing that actually breathes, transitions that aren’t shy, animations and carousels that bleed and nudge, and prints that don’t flicker when you swipe (aka the difference between a mock and a vibe.)

The goal was a small view into who I am, and proof that a unique experience can come from playful experimentation, not a giant roadmap.

⚠️ WIP: Some elements are decorative, some are interactive.

This prototype is still growing. A lot of UI is there to look right while I wire up the rest. What you can poke around on:

• interactive nav bar

• scroll/drag carousels

• arrow/drag prints slider

• playable/animated music player

• clickable reminders/notifications sheet

🖖 Latest Update: Clickable Movie Cards
• Movie detail pages load live metadata from IMDb — title, year, runtime, genres, streaming, cast and plot — when you tap any movie.

• Each card shows the IMDb rating and a hero image pulled from the film’s gallery on IMDb.

→ Back to Homepage

project two

Google Cloud - AI Experience

CLIENT PITCH / ANIMATION + INTERACTION

rapid prototyping
motion & micro-interactions
AI search
user interface
responsive web

While working on the Google account at BASIC/DEPT®, we pitched a new AI-driven experience for their Google Cloud Platform (GCP) homepage.

The Brief: Cloud’s differentiation comes from creating magical experiences through AI. Our site should embody that, leading with bold, inspiring stories that capture attention, build belief, and showcase transformation.

The Script: CIO at Puma, interested in how their brand shows up as a ‘tech best-in-class’ shoe company on cgc.com and on stage at NEXT, by using Imagen to customize product photos on their own website.

Achievements: The BASIC/DEPT® team won the pitch, allowing us to expand further into our partnership within the Google Partner ecosystem.

project three

Suburban Rewind - Cursor Vibe Coding

RAPID PROTOTYPING / PERSONAL EXPLORATION

RAPID PROTOTYPING / PERSONAL EXPLORATION

RAPID PROTOTYPING / PERSONAL EXPLORATION

rapid prototyping
motion & micro-interactions
React
Vite
rapid prototyping
motion & micro-interactions
React
Vite
CSS / design tokens
layout systems

Suburban Rewind started as an attempt to build something that felt like a memory. Fuzzy scanlines, the weight of plastic, glowing “HI·FI STEREO” labels, and the quiet nostalgia of growing up in a suburban basement in the 90s with my brother, who still collects VHS tapes from our childhood every chance he gets.

What began as a playful concept slowly became a quiet engineering battle with the browser. Every solved detail exposed another problem: shadows disappearing behind overflow rules, masks clipping content I still needed, carousel layouts collapsing as the viewport shifted. I treated it like an old recording mix, stripping things back instead of stacking hacks on top of hacks. Rebuild, refine, repeat.

Curiosity drove the technical side:
why does compositing clip here?
why does masking fight scrolling?
how do I make my custom-built TV feel physically grounded in the environmental background around it?

Instinct drove the rest: preserve the atmosphere, protect the usability, and hold onto that sentimental suburban dream state the project was chasing from the beginning. What exists now isn’t something that arrived polished. It’s the result of many wrong turns chosen deliberately, undone quickly, and replaced with tighter parameters until the illusion finally holds.

Suburban Rewind started as an attempt to build something that felt like a memory. Fuzzy scanlines, the weight of plastic, glowing “HI·FI STEREO” labels, and the quiet nostalgia of growing up in a suburban basement in the 90s with my brother, who still collects VHS tapes from our childhood every chance he gets.

What began as a playful concept slowly became a quiet engineering battle with the browser. Every solved detail exposed another problem: shadows disappearing behind overflow rules, masks clipping content I still needed, carousel layouts collapsing as the viewport shifted. I treated it like an old recording mix, stripping things back instead of stacking hacks on top of hacks. Rebuild, refine, repeat.

Curiosity drove the technical side:
why does compositing clip here?
why does masking fight scrolling?
how do I make my custom-built TV feel physically grounded in the environmental background around it?

Intuition drove the rest: preserve the atmosphere, protect the usability, and hold onto that sentimental suburban dream state the project was chasing from the beginning. What exists now isn’t something that arrived polished. It’s the result of many wrong turns chosen deliberately, undone quickly, and replaced with tighter parameters until the illusion finally holds.

Suburban Rewind - Cursor Vibe Coding

rapid prototyping
motion & micro-interactions
React
Vite
CSS / design tokens
layout systems

Technical Solves

Designed a Figma-accurate mobile portfolio shell, then vibe-coded a multi-screen motion system. Persistent nav WAAPI, bleed-aware carousels, SVG displacement music UI, and slot-driven assets, into a static React/Vite build ready for Netlify.
  • React 19 + Vite 6 SPA with hashed static dist/ output, netlify.toml publish config, and edge-friendly static hosting (no server runtime).
  • Design-tokenized shell via CSS custom properties (--phone-design-*, --body-top/bottom, palette tokens) aligning Figma iPhone container geometry (417×876) with in-app UI bounds (393×852 + bezel/outline radii).
  • Figma → implementation pipeline: full UI spec in Figma (named layers / data-name + data-node-id traceability on components), linked into Cursor through MCP, then implemented as production markup/CSS rather than screenshot handoff.

  • Tab indicator via Web Animations API: measured offsetLeft/offsetWidth per tab, 900ms width+position morph with custom easing, animation cancellation on rapid tab changes, prefers-reduced-motion instant snap fallback.

  • Two-layer scroll model: outer .movie-list-row (overflow + bleed viewport) vs inner .movie-list-inner (flex track) so scroll hints animate content without shifting slider chrome.

say hello

I'm open for freelance projects, feel free to email me to see how can we collaborate.

say hello

I'm open for freelance projects, feel free to email me to see how can we collaborate.

say hello

I'm open for freelance projects, feel free to email me to see how can we collaborate.

project one

Most projects look at the client.

This one says here’s my media, mess, and memories.

…my average Saturday and the art sitting on my hard drive.

I turned getting-to-know-me into a phone-shaped personal project filled with movies I’ll defend forever, music I’m definitely playing right now, illustrations from side hustles, and an average Saturday when I'm AFK.

I vibe-coded the whole thing… but only after I designed it fully in Figma, named my layers like it was a personality test, and linked the file to Cursor through MCP. That’s when the long, slightly unhinged conversations started: spacing that actually breathes, transitions that aren’t shy, animations and carousels that bleed and nudge, and prints that don’t flicker when you swipe (aka the difference between a mock and a vibe.)

The goal was a small view into who I am, and proof that a unique experience can come from playful experimentation, not a giant roadmap.

⚠️ WIP: Some elements are decorative, some are interactive.

This prototype is still growing. A lot of UI is there to look right while I wire up the rest. What you can poke around on:

• scroll/drag carousels

• music player animations

• interactive nav bar

• arrow/drag prints slider

• clickable reminders/notifications sheet

🖖 Latest Update: Clickable Movie Cards
• Movie detail pages load live metadata from IMDb — title, year, runtime, genres, trailer and plot — when you tap any movie.

• Each card shows the IMDb rating and a hero image pulled from the film’s gallery on IMDb.

→ Back to Homepage

Figma → Code (MCP)
rapid prototyping
motion & micro-interactions
React 19 + Vite
CSS Animations
Web Animations API

Hello Application - Cursor Vibe Coding

RAPID PROTOTYPING

RAPID PROTOTYPING

project one

Figma → Code (MCP)
rapid prototyping
motion & micro-interactions
React 19 + Vite
CSS Animations
Web Animations API

Hello Application - Cursor Vibe Coding

RAPID PROTOTYPING

Most projects look at the client.

This one says here’s my media, mess, and memories.

…my average Saturday and the art sitting on my hard drive.

I turned getting-to-know-me into a phone-shaped personal project filled with movies I’ll defend forever, music I’m definitely playing right now, illustrations from side hustles, and an average Saturday when I'm AFK.

I vibe-coded the whole thing… but only after I designed it fully in Figma, named my layers like it was a personality test, and linked the file to Cursor through MCP. That’s when the long, slightly unhinged conversations started: spacing that actually breathes, transitions that aren’t shy, animations and carousels that bleed and nudge, and prints that don’t flicker when you swipe (aka the difference between a mock and a vibe.)

The goal was a small view into who I am, and proof that a unique experience can come from playful experimentation, not a giant roadmap.

⚠️ WIP: Some elements are decorative, some are interactive.

This prototype is still growing. A lot of UI is there to look right while I wire up the rest. What you can poke around on:

• scroll/drag carousels

• music player animations

• interactive nav bar

• arrow/drag prints slider

• clickable reminders/notifications sheet

🖖 Latest Update: Clickable Movie Cards
• Movie detail pages load live metadata from IMDb — title, year, runtime, genres, trailer and plot — when you tap any movie.
• Each card shows the IMDb rating and a hero image pulled from the film’s gallery on IMDb.

→ Back to Homepage

project one

Figma → Code (MCP)
rapid prototyping
motion & micro-interactions
React 19 + Vite
CSS Animations
Web Animations API

Hello Application - Cursor Vibe Coding

RAPID PROTOTYPING

Most projects look at the client.

This one says here’s my media, mess, and memories.

…my average Saturday and the art sitting on my hard drive.

I turned getting-to-know-me into a phone-shaped personal project filled with movies I’ll defend forever, music I’m definitely playing right now, illustrations from side hustles, and an average Saturday when I'm AFK.

I vibe-coded the whole thing… but only after I designed it fully in Figma, named my layers like it was a personality test, and linked the file to Cursor through MCP. That’s when the long, slightly unhinged conversations started: spacing that actually breathes, transitions that aren’t shy, animations and carousels that bleed and nudge, and prints that don’t flicker when you swipe (aka the difference between a mock and a vibe.)

The goal was a small view into who I am, and proof that a unique experience can come from playful experimentation, not a giant roadmap.

⚠️ WIP: Some elements are decorative, some are interactive.

This prototype is still growing. A lot of UI is there to look right while I wire up the rest. What you can poke around on:

• scroll/drag carousels

• music player animations

• interactive nav bar

• arrow/drag prints slider

• clickable reminders/notifications sheet

🖖 Latest Update: Clickable Movie Cards
• Movie detail pages load live metadata from IMDb — title, year, runtime, genres, trailer and plot — when you tap any movie.
• Each card shows the IMDb rating and a hero image pulled from the film’s gallery on IMDb.

→ Back to Homepage

project two

Google Cloud - AI Experience

CLIENT PITCH / ANIMATION + INTERACTION

CLIENT PITCH / ANIMATION + INTERACTION

rapid prototyping
motion & micro-interactions
AI search
user interface
responsive web

While working on the Google account at BASIC/DEPT®, we pitched a new AI-driven experience for their Google Cloud Platform (GCP) homepage.

The Brief: Cloud’s differentiation comes from creating magical experiences through AI. Our site should embody that, leading with bold, inspiring stories that capture attention, build belief, and showcase transformation.

The Script: CIO at Puma, interested in how their brand shows up as a ‘tech best-in-class’ shoe company on cgc.com and on stage at NEXT, by using Imagen to customize product photos on their own website.

Achievements: The BASIC/DEPT® team won the pitch, allowing us to expand further into our partnership within the Google Partner ecosystem.

project two

Google Cloud - AI Experience

CLIENT PITCH / ANIMATION + INTERACTION

rapid prototyping
motion & micro-interactions
AI search
user interface
responsive web

While working on the Google account at BASIC/DEPT®, we pitched a new AI-driven experience for their Google Cloud Platform (GCP) homepage.

The Brief: Cloud’s differentiation comes from creating magical experiences through AI. Our site should embody that, leading with bold, inspiring stories that capture attention, build belief, and showcase transformation.

The Script: CIO at Puma, interested in how their brand shows up as a ‘tech best-in-class’ shoe company on cgc.com and on stage at NEXT, by using Imagen to customize product photos on their own website.

Achievements: The BASIC/DEPT® team won the pitch, allowing us to expand further into our partnership within the Google Partner ecosystem.

project two

Google Cloud - AI Experience

CLIENT PITCH / ANIMATION + INTERACTION

rapid prototyping
motion & micro-interactions
AI search
user interface
responsive web
AI search
user interface
responsive web

While working on the Google account at BASIC/DEPT®, we pitched a new AI-driven experience for their Google Cloud Platform (GCP) homepage.

The Brief: Cloud’s differentiation comes from creating magical experiences through AI. Our site should embody that, leading with bold, inspiring stories that capture attention, build belief, and showcase transformation.

The Script: CIO at Puma, interested in how their brand shows up as a ‘tech best-in-class’ shoe company on cgc.com and on stage at NEXT, by using Imagen to customize product photos on their own website.

Achievements: The BASIC/DEPT® team won the pitch, allowing us to expand further into our partnership within the Google Partner ecosystem.