DESIGN × CODE × MOTION / 2026
WE DESIGN DIGITAL EXPERIENCES.
Websites, interfaces and interactive experiences built around design, motion and technology.
02 / 10 — CAPABILITIES
WHAT
I CREATE
Digital experiences built around clarity, character and interaction.
From visual direction to interactive frontend experiences, every project is approached as a combination of design, technology and motion.
01 / 04
01
WEB DESIGN
→Visual systems, layouts, typography and responsive interfaces designed to give every digital experience a clear and distinctive identity.
02
FRONTEND
→Responsive interfaces translated from visual concepts into clean, functional and interactive web experiences.
03
INTERACTION
→Micro-interactions, cursor behavior, scroll animation and motion systems that make interfaces feel responsive and alive.
04
CREATIVE TECH
→WebGL, particles, 3D, generative visuals and experimental interfaces used to explore what the browser can become.
“Good digital design should be understood before it is admired.”
03 / 10 — SELECTED CONCEPTS
SELECTED
CONCEPTS
Self-initiated digital experiences exploring design, technology and interaction.
PERSONAL / CONCEPT WORK
05 / SELECTED
EVERY INTERFACE STARTS WITH AN IDEA.
MORE EXPERIMENTS →
The portfolio is always evolving.
THE WEB IS
A MEDIUM,
NOT A TEMPLATE.
A MEDIUM,
NOT A TEMPLATE.
NEXT / 05 — PHILOSOPHY
DESIGN PHILOSOPHY
→
05 / 10 — DESIGN PHILOSOPHY
DESIGN
SHOULD FEEL
OBVIOUS.
The best interfaces don’t ask users to understand how they work. They simply make sense.
Design is not decoration. It is the structure that determines how people understand, navigate and remember a digital experience.
01
CLARITY
02
PURPOSEFUL MOTION
03
CHARACTER
04
HUMAN INTERACTION
05
PERFORMANCE
PRINCIPLE / 01
CLARITY
“Beautiful interfaces are useless if people don’t understand them.”
Every layout begins with hierarchy. Typography, spacing, navigation and visual emphasis should guide the visitor naturally toward what matters.
VISUAL DEMO: CHAOS → STRUCTURE
NAVIGATION [A]
CONTENT HIERARCHY [B]
ACTION [C]
PRINCIPLE / 02
PURPOSEFUL MOTION
“Motion should explain something.”
Animation can guide attention, communicate hierarchy, reveal relationships and provide feedback. It should never exist simply to make a page move.
IF IT MOVES, IT SHOULD MEAN SOMETHING.
STATE: EQUILIBRIUM
PRINCIPLE / 03
CHARACTER
“A website should be recognizable before its logo appears.”
Typography, composition, color, imagery, interaction and motion should work together to create an identity that feels specific rather than interchangeable.
BESPOKE IDENTITY STUDY
UNMISTAKABLE CHARACTER
PRINCIPLE / 04
HUMAN INTERACTION
“The interface should respond to the person, not the other way around.”
Cursor movement, touch, scrolling, clicking and keyboard input are opportunities to make the interface feel responsive and understandable.
ACCESSIBILITY STANDARD
INTERACTION SHOULD NEVER BECOME A BARRIER.
PRINCIPLE / 05
PERFORMANCE
“Beautiful is not enough. It has to run.”
A visually impressive experience loses its value when it is slow, unstable or inaccessible. Performance is therefore part of the design process, not something added at the end.
ADAPTIVE HARDWARE PROFILE SCALING
DESKTOP
3,800 Particles • Full 60 FPS Spring Physics
LAPTOP
Balanced Density • Optimized Shaders
MOBILE
1,200 Particles • Touch Gestures
LOW POWER
Minimal Effects • Zero Jank Budget
TECHNOLOGY
SHOULD SERVE
THE EXPERIENCE.
SHOULD SERVE
THE EXPERIENCE.
01 / STRUCTURE
Design gives the experience structure.
02 / RHYTHM
Motion gives it rhythm.
03 / POSSIBILITY
Technology gives it possibility.
04 / LONGEVITY
Performance gives it longevity.
GOOD DESIGN
DOESN’T SHOUT.
IT GUIDES.
NEXT / 06 — TECHNOLOGY
EXPLORE THE STACK
→
BUILT WITH CODE.
06 / 10 — BUILT WITH CODE
BUILT
WITH CODE.
The tools are invisible when they work well. The experience is what remains.
A modern web experience is a system of design, code, motion, performance and interaction working together. The stack is chosen in service of the experience.
SYSTEM ARCHITECTURE / DEPENDENCY FLOW
01 / DESIGN & STRUCTURE (HTML5 / CSS3)
02 / LOGIC (ESNEXT JS)
03 / MOTION (GSAP & SPRINGS)
04 / 3D & SHADERS (THREE.JS / WEBGL)
05 / AUDIO (WEB AUDIO API)
ESNEXT JAVASCRIPT
REACTIVE LOGIC & STATEModular decoupled architecture with zero third-party framework overhead, dispatching native custom events.
DEMO / 01
MORPHIC TRANSLATION
CODE → INTERFACE → MOTION
<button class="btn btn-primary">
<span>INTERACTION</span>
</button>
<span>INTERACTION</span>
</button>
DEMO / 02
DYNAMIC PARTICLE BUDGET
ADAPTIVE PERFORMANCE MATRIX
CODE IS THE MATERIAL.
EXPERIENCE IS THE RESULT.
EXPERIENCE IS THE RESULT.
01 / DESIGN
HTML5 • Modern CSS
02 / INTERACTION
ESNext • Canvas API
03 / MOTION
GSAP • Springs
04 / 3D
Three.js • WebGL
05 / SYSTEM
Responsive • 60 FPS
NEXT / 07 — METHODOLOGY
EXPLORE THE PROCESS
→
FROM IDEA TO INTERFACE.
07 / 10 — THE PROCESS
FROM IDEA
TO INTERFACE
Every finished experience begins with a question, a structure and a reason to exist.
A disciplined engineering workflow from conceptual discovery to performance-tuned deployment. Great digital experiences are designed intentionally from the beginning.
STAGE / 01
DISCOVER
“Start with the problem, not the interface.”
Understand the purpose, audience, context and desired outcome before deciding how the experience should look.
VISUAL BLUEPRINT: QUESTIONS → DIRECTION
WHO?
WHY?
PURPOSE
WHAT?
HOW?
STAGE / 02
STRUCTURE
“Before making it beautiful, make it understandable.”
Define the information hierarchy, page structure, navigation and content relationships before visual styling begins.
DIGITAL BLUEPRINT: 12-COLUMN WIREFRAME GRID
[ 01 / HEADER & PRIMARY NAVIGATION ]
[ 02 / HERO SECTION & ASYMMETRICAL EDITORIAL HOOK ]
[ 03 / PRIMARY CONTENT STREAM ]
[ SIDEBAR / HUD ]
[ 04 / FOOTER & INITIATION CTA ]
STAGE / 03
DESIGN
“Give the structure a visual identity.”
Typography, color, spacing, imagery, composition and visual language transform structure into an experience with character.
TRANSFORMATION: STRUCTURE → CHARACTER
VISUAL IDENTITY SPECIFICATION
DESIGN BECOMES EXPERIENCE
STAGE / 04
BUILD
“Turn the visual system into a working interface.”
Translate the design into responsive frontend code while maintaining the original hierarchy, interaction and visual intent.
RESPONSIVE BUILD MATRIX
RESPONSIVE CANVAS
FLUID COMPONENT ARCHITECTURE
STAGE / 05
POLISH
“The difference lives in the details.”
Once the structure works, refine motion, interaction, spacing, transitions, feedback, accessibility and performance.
INTERACTION CRAFT: TACTILE STATE REFINEMENT
SPRING INERTIA & SOUND
STAGE / 06
LAUNCH
“Make sure it works everywhere.”
Test the experience across devices, browsers, screen sizes and interaction methods before releasing it into the world.
CROSS-DEVICE RELEASE MATRIX
DESKTOP
PASSED [✓]
LAPTOP
PASSED [✓]
TABLET
PASSED [✓]
MOBILE
PASSED [✓]
GOOD EXPERIENCES
AREN’T ACCIDENTAL.
AREN’T ACCIDENTAL.
They are discovered, structured, designed, built, refined and tested. Every finished piece of code represents deliberate design intent.
DISCOVER
→
STRUCTURE
→
DESIGN
→
BUILD
→
POLISH
→
LAUNCH
NEXT / 08 — LAB WORK
EXPLORE THE LAB
→
EXPERIMENTS ARCHIVE
08 / 10 — THE LAB
WHAT
IF...?
A collection of small experiments exploring what happens when design becomes interactive.
EXPERIMENTAL / INTERACTION STUDIES
EXP / 001
Magnetic Type
Letters respond to the cursor as if connected by invisible magnetic springs.
M A G N E T I C
EXP / 002
Liquid Type
Typography stretches and flows as though it were made from flexible viscous material.
V I S C O U S
EXP / 003
Image Reveal
An image appears through a moving circular mask controlled by cursor velocity.
CLIP-PATH MASK
EXP / 004
Cursor Trail
A subtle inertial trailing particle field follows user movement with damping decay.
PARTICLE INERTIA
EXP / 005
Particle Type
Letterforms constructed entirely from autonomous point masses that disperse on impact.
POINT MASS MATRIX
EXP / 006
Staggered Menu
Sequential physical line reveal animation for full-screen editorial navigation.
SEQUENTIAL CLIP-MASK
EXP / 007
Parallax Depth
Multi-layered depth-stratified visual layering with independent coordinate velocities.
DEPTH STRATIFICATION
EXPERIMENTATION IS HOW
IDEAS BECOME SYSTEMS.
EXP / 008
Hover Distortion
Localized displacement mapping bending pixels like liquid glass under pointer proximity.
GLSL DISPLACEMENT
EXP / 009
Morphing Shape
Parametric 3D wireframe mesh continuously morphing between mathematical attractors.
PARAMETRIC ATTRACTOR
EXP / 010
Ripple Button
Water-drop ripple shockwave originating from click coordinates with elastic return.
EXP / 011
Infinite Typographic Marquee
Seamless continuous kinetic ticker with momentum acceleration on drag.
EXP / 012
3D Object Space
Abstract geometric sculptural form responding to pointer rotational drag.
3D MESH ROTATION
EXP / 013
Text Split
Word halves separate during scroll displacement to reveal inner conceptual meanings.
DI [CREATE] VIDE
EXP / 014
Particle Rupture
Compact point mass crystal rupturing into radial trajectory shards on touch.
RADIAL RUPTURE
EXP / ∞ — FINALE
UNKNOWN
An experiment without a predetermined outcome. Click anywhere on the cosmos to mutate the velocity field.
KEEP
EXPLORING.
EXPLORING.
The best ideas usually begin as experiments. Not every study needs to become a product—some exist simply to discover what the browser can become.
NEXT / 09 — IDENTITY
MEET THE STUDIO
→
THE STUDIO
09 / 10 — THE STUDIO
BEHIND
THE INTERFACE.
A creative practice exploring the space between design, code and interaction.
The work is driven by curiosity—finding better ways to communicate ideas through visual systems, motion and technology.
“I build digital experiences to understand what the web can become.”
THE PERSON BEHIND THE CODE • ABSTRACT SILHOUETTE
I’m interested in the space where visual design meets code. I explore typography, interaction, motion, creative coding and 3D to create digital experiences that feel distinctive without losing clarity.
WHAT DRIVES THE WORK
01 / PILLAR
CURIOSITY
Always asking what could happen if an interface behaved differently.
02 / PILLAR
SIMPLICITY
Reducing complexity until the important thing becomes obvious.
03 / PILLAR
EXPERIMENT
Using small prototypes to discover better interaction models.
04 / PILLAR
CRAFT
Paying deep attention to typography, spacing, movement and detail.
05 / PILLAR
LEARNING
Continuously improving through building, testing and iteration.
DESIGN
CODE
MOTION
3D
TYPE
EXPERIMENT
ACTIVE INVESTIGATION
CLICK TOPIC TO INSPECT
CURRENTLY EXPLORING.
Exploring real-time GPU vertex/fragment shaders and additive point field blending in modern browsers.
TASTE & PREFERENCES
I LIKE.
BIG TYPE
SMALL DETAILS
SLOW MOTION
FAST FEEDBACK
DARK INTERFACES
CLEAR STRUCTURE
WEIRD EXPERIMENTS
USEFUL DESIGN
BEYOND THE SCREEN
INSPIRATION FROM EVERYWHERE.
Architecture, typography, photography, objects and everyday interfaces can all become references for digital design.
01 / ARCHITECTURE
FORM & VOID
02 / EDITORIAL
SWISS GRID
03 / PHYSICALITY
TACTILE SYSTEM
04 / KINETICS
CHOREOGRAPHY
MAKE IT USEFUL.
MAKE IT DISTINCTIVE.
MAKE IT YOURS.
MAKE IT DISTINCTIVE.
MAKE IT YOURS.
There is a person behind the pixels, the code and the interactions. The work is driven by curiosity, built through experimentation and refined through attention to detail.
10 / 10 — INITIATE
START A PROJECT
→
LET'S BUILD SOMETHING.
10 / 10 — LET'S BUILD
HAVE AN IDEA?
LET'S BUILD IT.
Have a website, digital product or experimental idea in mind? Let's turn it into a clear, distinctive and interactive experience.
WHAT ARE YOU BUILDING?
MESSAGE RECEIVED.
Thanks for reaching out. The next step starts here—we will review your project scope and connect shortly.
GOOD IDEAS
DESERVE
GOOD EXPERIENCES.
DESERVE
GOOD EXPERIENCES.
Let's make one.
DESIGN.
BUILD.
MOVE.
SEE YOU ON THE OTHER SIDE.