FRONTEND

Frontend Engineering

Frontendis mymedium.

A living showcase of the Liquid Glass design system - typography, motion, components, media players, and visual language built with Tailwind CSS, Next.js, and pure CSS animation, demonstrating expertise in AI-assisted frontend design, user experience, and modern interface engineering.

Lighthouse Score

Components

0ms

Avg Interaction

Lines of CSS

CSS ✦Motion ✦Typography ✦React ✦Next.js ✦Glassmorphism ✦Tailwind ✦Animation ✦Design Systems ✦Component Architecture ✦Dark Mode ✦Accessibility ✦Micro-interactions ✦CSS ✦Motion ✦Typography ✦React ✦Next.js ✦Glassmorphism ✦Tailwind ✦Animation ✦Design Systems ✦Component Architecture ✦Dark Mode ✦Accessibility ✦Micro-interactions ✦

01 - Typography

Display Font · Plus Jakarta Sans

Headline 1

Headline 2

Headline 3

Headline 4

Body · Inter

Lead paragraph. The quick brown fox jumps over the lazy dog. Used for introductions with higher visual weight.

Standard body copy. Clean, readable typesetting at comfortable line-height for long-form content and descriptive sections across the interface.

Gradient Text

Liquid Glass

"Design is how it works, not just how it looks."

Monospace · JetBrains Mono

const system = "Liquid Glass";

// precision-crafted component architecture

export default FrontendCraft;

02 - Color System

#FF4D8D

Brand Pink

#A855F7

Brand Purple

#111827

Surface Dark

#F3F4F7

Surface Light

10%

20%

30%

40%

50%

60%

70%

80%

Brand Pink opacity scale

03 - Motion & Animation

Hover Scale

transition-transform duration-300

Pulse Glow

✦

animate-ping

Spin

animate-spin

Bounce

animate-bounce

Staggered Reveal

animation-delay stagger

Animated Counter

IntersectionObserver + rAF

04 - Glassmorphism

Glass

backdrop-blur-xl

✦

Depth Layer

bg-white/10

border-white/20

Frosted UI