Aa, Bb.Type sample.
Large English headings pair with generously spaced Korean body text. Long project descriptions use limited line lengths for easier reading.
OPEN STUDIO / ABOUT THIS SITEYour
Your
display.
You can adjust how this site looks.
Choose colors and spacing you like.
Your choices also apply to the home and project pages.
DISPLAY / CONTROL
Display settings
Adjust the display for comfortable reading.
01 / DESIGN SYSTEM
The parts of this display
Background, text, and accent colors each have a defined role.
Change a setting above to see these samples update.
Paper
Base page background
Surface
Areas that group content
Ink
Headings and body text
Accent
Links and selected states
Line
Dividers and borders
Spacing and corners
Spacing changes the gaps between sections and cards. Corner settings apply to cards and buttons.
02 / ABOUT THIS SITE
About this site
Projects and case studies
The home page features four projects. Each detail page explains my role, decisions, and validation. Diagrams are reconstructed for explanation, and figures include their measurement conditions.
Interactive badge
On desktop, drag the hanging badge to make it swing. The lanyard follows your movement, and the badge settles after you let go. You can also use the arrow keys to move it and Home to reset it. Mobile devices show a static badge.
Static pages and display controls
The site uses Next.js, React, and TypeScript. The main content is exported as static pages. The desktop badge and display controls run in the browser, and the theme is applied before the page is drawn.