GSAP & shadcn Immersive Portfolio

Designing The Future of Web

Creative Web Developer

Hi, I'm Liam, a developer based in Vietnam. I craft high-fidelity digital interfaces with responsive animations, solid typescript architectures, and strict visual excellence.

Scroll Down
Who I Am

Crafting interfaces that feel alive.

I design and build systems from scratch. I don't settle for static page views; I believe interaction, physical ease-ins, and contextual visual depth define modern digital success.

Applying rigorous clean-code models, I build with Next.js, TypeScript, and Tailwind CSS, then animate with GSAP ScrollTrigger to orchestrate smooth, immersive storytelling.

Visual Rigor

Pixel perfect layout orchestration, high-end vector structures, and rich typography composition.

Fluid Interaction

Staggered transitions, hover morphing elements, magnetic field logic, and dynamic horizontal scrolling timelines.

Expertise

Technical Armament

A curated stack engineered for rendering high-fidelity, lightning-fast animations, and robust structural integrity.

React / Next.js
STABLE CAPABILITY

Server Actions, RSCs, App Routing, Optimization

PROFICIENCY95%
GSAP / Animation
STABLE CAPABILITY

ScrollTrigger, Timelines, Physics Easing, Canvas

PROFICIENCY90%
Tailwind CSS
STABLE CAPABILITY

Tailwind v4, CSS Variables, Theme Customization

PROFICIENCY95%
TypeScript
STABLE CAPABILITY

Strict Typing, Generic Patterns, API Integration

PROFICIENCY88%
Backend / Node.js
STABLE CAPABILITY

REST APIs, WebSockets, DB management

PROFICIENCY80%
UI/UX Engineering
STABLE CAPABILITY

Frictionless interactive layouts, accessibility

PROFICIENCY85%
Works
03 Selected Works

Selected
Case Studies

Swipe horizontally or scroll vertically to explore interactive profiles of production projects. Built utilizing Next.js configurations, custom shadcn layouts, and rich client-side animations.

01
Immersive Web ExperienceID: 01

Project Aura

A high-performance interactive 3D portfolio experience utilizing WebGL shaders and smooth scroll timelines.

Next.jsThree.jsGSAP ScrollTrigger
Project Aura Artifact LayoutResponsive Grid Viewport
02
Enterprise Design SystemID: 02

Project Helix

A fully accessible, composable component system and automated style compiler built for modern web application developers.

Tailwind v4TypeScriptRadix UI
Project Helix Artifact LayoutResponsive Grid Viewport
03
Interactive Agent ConsoleID: 03

Project Zenith

A real-time administrative command desk designed for tracking background AI agents, system statuses, and server telemetry.

ReactRechartsWebsockets
Project Zenith Artifact LayoutResponsive Grid Viewport
Career Progress

Timeline & Milestones

A historical trace of my professional integrations, design alignments, and tech stacks.

2024 - PresentTechStudio Vietnam
Senior Frontend Engineer

Architecting high-fidelity customer dashboards, design systems, and rich interactive campaigns. Spearheading core performance audits and React optimization workflows.

2022 - 2024DevCorp Solutions
Software Developer

Built enterprise CRM modules, localized web applications, and interactive telemetry dashboards. Implemented strict state architecture and TypeScript patterns.

2020 - 2022Startup Lab & Freelancing
Junior Web Developer

Created bespoke business portfolios, custom landing pages, and responsive e-commerce frontends. Learned advanced layouts, SVG path animations, and CSS custom properties.

Arcade Zone

Interactive Playground

A sandbox of interactive micro-games built using raw React states, Pointer Events, and Web Audio API synthesis.

2 active sandboxes

Test your velocity & vocabulary.

Explore how client-side state machine mechanics, audio contexts, and responsive pointer events integrate seamlessly without external framework database load.

Built with: **HTML5 PointerEvents**, **Web Audio API Synthesis**, and **GSAP transitions**.
Active Arcade
REACTION
Number Seeker 1-100
Sort 100 randomly scattered numbers in ascending order. Drag overlapping numbers out of the way. Beat the clock!
SYSTEM REQUIREMENTFine Pointer / Touch
SOUND SYNTHESISWeb Audio Enabled
URL: /games/find-number
Active Arcade
VOCABULARY
Cyber Word Chain
Link Vietnamese compound words against an AI system. Avoid duplicate words. Challenge your friends to beat your chain!
SYSTEM REQUIREMENTTyping Keyboard
P2P CHALLENGE MODEUrl State Sharing (Option 2)
URL: /games/word-chain
Playground Shell

Inspect via Command Line.

Prefer terminal workflows? Try out this mock interactive shell console. Type queries directly into the terminal to parse skills, historical logs, contact links, and custom developer easter eggs.

Try running:helpaboutskillssecret
Interactive Terminal
Welcome to my interactive portfolio terminal.
Type 'help' to see list of available commands.
~$
Get In Touch
Start A Project
Have a challenging codebase, layout design, or product in mind? Send a message and let's build it.