# Design Language for yongjoon.dev ## Aesthetics and Tone yongjoon.dev is a personal developer portfolio that channels the fractured energy of glitch art -- digital artifacts as autobiography. The visual identity treats code and identity as equally unstable, beautiful things that occasionally break apart and reassemble. Imagine a personal website viewed through a corrupted video buffer: fragments of a developer's life (code snippets, project screenshots, personal philosophy) rendered with deliberate digital decay. The deep burgundy palette evokes old leather-bound journals and dried ink, but the glitch treatment shatters this nostalgia with sudden pixel shifts and chromatic aberration. The tone is approachable-casual -- like a developer who doesn't take themselves too seriously, whose portfolio glitches are a wink at the audience. Inspiration drawn from Rosa Menkman's glitch art manifesto, datamoshing aesthetics, and the warm imperfection of handwritten developer notebooks. ## Layout Motifs and Structure An **asymmetric** layout where content blocks deliberately resist alignment -- columns shift by 20-40px from expected positions, creating visual instability that mirrors the glitch theme. **Primary structure:** - **Hero section (100vh):** The name "YONGJOON" rendered in large handwritten type, with individual characters experiencing intermittent glitch effects (horizontal displacement, color channel separation). Below, a subtitle "developer / maker / breaker" types itself out with occasional glitch interruptions (characters momentarily replaced by random Unicode before resolving). - **Projects zone (asymmetric grid):** A 2-column grid where the left column is 55% width and right is 40%, with a 5% gap -- but the right column is offset 60px lower than the left, creating deliberate asymmetry. Each project card has a leather-texture background with glitch scanlines on hover. - **About section:** A single column offset 15% from center-left, with text that occasionally "glitches" a word (CSS animation replacing a word with its glitched version for 200ms every 8-12 seconds, randomized). - **Contact footer:** Minimal, left-aligned, with social links rendered as handwritten-style icons that briefly distort on hover. **Spatial relationships:** No consistent margins -- sections use varying left offsets (8vw, 12vw, 5vw) to create organic asymmetry. Vertical spacing alternates between tight (40px) and expansive (120px) unpredictably. ## Typography and Palette **Fonts:** - **Display/Name:** "Caveat" (Google Fonts) -- a handwritten script with natural variation in letterforms, used at clamp(48px, 8vw, 96px). The personal, casual letterforms make the portfolio feel like a developer's sketchbook rather than a corporate CV. Weight 700. - **Body text:** "IBM Plex Mono" (Google Fonts) -- a humanist monospace at 15px/1.7 line-height. Weight 400 for body, 600 for code emphasis. The monospace treatment frames all text as potential code, blurring the line between prose and programming. - **Section labels:** "Permanent Marker" (Google Fonts) -- a marker-pen handwritten face at 14px, uppercase, letter-spacing: 0.15em. Used for section headers and labels, giving them a sticky-note annotation quality. **Color Palette:** - **Primary burgundy:** #4a0e2c (deep wine-dark background) - **Secondary dark:** #2a0a18 (darker burgundy for card backgrounds) - **Accent pink:** #e8408a (hot pink for glitch artifacts, links) - **Accent cyan:** #40e8d0 (chromatic aberration offset color) - **Text primary:** #f0e8d8 (warm parchment white) - **Text muted:** #d8c8b0 (faded leather tone) - **Glitch red:** #ff0040 (pure red channel for RGB split effects) ## Imagery and Motifs **Core visual motifs:** - **Leather texture backgrounds:** Subtle leather-grain texture (CSS noise via SVG filters: feTurbulence baseFrequency="0.9" numOctaves="4") applied at 0.03 opacity over burgundy surfaces. This creates a tactile, journal-like quality. - **Glitch scanlines:** Thin horizontal lines (1px, rgba(255,255,255,0.03)) repeated every 4px across the viewport, creating a CRT-monitor effect. On hover over interactive elements, these lines briefly thicken and shift (animation: 200ms). - **RGB chromatic split:** Key elements (the name, project titles) have a triple-layer text-shadow creating a chromatic aberration effect: text-shadow: -2px 0 #ff0040, 2px 0 #40e8d0. This split intensifies on glitch triggers. - **Sharp-angle decorators:** Diagonal lines (45-degree SVG strokes in accent pink) used as section dividers and card corner ornaments. These replace traditional horizontal rules with aggressive angular slashes. - **Random glitch triggers:** JavaScript-driven momentary disruptions every 6-15 seconds (randomized interval) where a random content block briefly shifts position by 3-8px and returns, with a brief RGB split intensification. ## Prompts for Implementation **Full-screen glitch portfolio experience:** The site should feel like browsing a developer's personal journal through a slightly malfunctioning display. The glitches are endearing, not frustrating -- brief, subtle, and always resolving cleanly. **Glitch effect implementation:** - Use CSS keyframes for the base glitch: transform: translate(random -5px to 5px, 0) with clip-path: inset(random% 0) to create horizontal slice displacement. - Apply via a `.glitch` class toggled by JavaScript at random intervals (setInterval with Math.random() * 9000 + 6000 for 6-15s gaps). - Each glitch lasts 150-300ms, then the element returns to normal. **Chromatic aberration on text:** - Base: text-shadow: -2px 0 #ff004066, 2px 0 #40e8d066 - Glitch state: text-shadow: -4px 0 #ff0040, 4px 0 #40e8d0, -2px 2px #e8408a - Transition between states with 100ms duration. **Leather texture overlay:** - Apply an SVG filter with feTurbulence (baseFrequency="0.85", numOctaves="4") composited at multiply blend mode, 0.03 opacity on body background. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, symmetrical grids. The asymmetry and glitch are the personality. ## Uniqueness Notes **Differentiators from other designs:** 1. **Glitch as autobiography:** No other design uses digital glitch artifacts as a deliberate personal branding strategy -- the bugs ARE the feature, expressing a developer's comfort with imperfection and debugging. 2. **Leather-texture meets chromatic aberration:** The collision of analog tactility (leather journal grain) with digital distortion (RGB channel splitting) creates a unique material paradox found in no other design. 3. **Randomized temporal disruptions:** The JavaScript-driven random glitch triggers at unpredictable intervals make each visit temporally unique -- the site literally never looks the same twice at any given moment. **Chosen seed/style:** aesthetic: glitch, layout: asymmetric, typography: handwritten, palette: deep-burgundy, patterns: glitch, imagery: leather-texture, motifs: sharp-angles, tone: approachable-casual **Avoided overused patterns:** photography imagery (91%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (98%), mono typography (82%), mysterious-moody tone (72%).