Kritsada Phetthong Portfolio

Overview

Kritsada Phetthong's portfolio embodies **Architectural Minimalism**—a design philosophy that treats the interface as a precision-engineered blueprint where every element serves a structural purpose. The aesthetic is rooted in high-contrast monochromatic composition (pure black #000000 and white #ffffff with strategic grays #6b7280, #9ca3af) that evokes technical documentation, engineering schematics, and professional rigor. The brand personality is direct, competent, and unflinching: this is someone who solves problems with clarity and delivers results without flourish. The UI conveys quiet confidence through geometric precision, generous whitespace (40px–64px section breaks), and typography that commands attention through weight and scale rather than color. The emotional response is one of trust and capability—a user encounters this portfolio and immediately understands they are dealing with a serious technical professional.

The voice is matter-of-fact, bilingual (English + Thai), and grounded in specificity. Rather than generic claims, the copy names exact technologies (Windows 10/11, Ubuntu Server, Office 365, Network Troubleshooting) and uses concrete action verbs (install, troubleshoot, manage, maintain). Example sentence in brand voice: "ติดตั้งระบบ/โปรแกรม และแก้ปัญหาหน้างาน — ให้ระบบทำงานได้ ให้คนทำงานได้ต่อ" (Set up systems and solve problems so the system works and people can keep working). The tone rejects marketing hyperbole in favor of earned authority.

Colors

The color system operates on a **high-contrast, monochromatic foundation** with strategic use of neutral grays to create visual hierarchy without relying on hue. Primary (#000000) is pure black, used exclusively for CTAs, headlines, and structural elements that demand immediate attention. On-primary (#ffffff) is pure white, ensuring maximum contrast (WCAG AAA) on all interactive elements. The surface stack progresses from bright white (#ffffff) at the base through carefully calibrated grays: surface-container-low (#f9fafb), surface-container (#e9ecef), surface-container-high (#e5e7eb), and surface-container-highest (#d1d5db). This progression creates subtle visual depth without introducing color—each step is precisely 4–8% darker, allowing cards and containers to recede or advance based on

Typography

The type system is built on **Inter (weights 300–900) for English and Prompt (weights 300–700) for Thai**, creating a bilingual hierarchy that maintains visual consistency across scripts. Display (100px, weight 900, line-height 100px, letter-spacing -0.04em) is reserved for the hero h1 "KRITSADA PHETTHONG"; its extreme weight and negative letter-spacing create a bold, architectural presence that fills the viewport. Headline-lg (40px, weight 700, line-height 48px, letter-spacing -0.02em) anchors section titles like "About Me" and "Work Experience". Headline-md (28px, weight 700, line-height 36px) is used for subsection headers and card titles. Title-lg (20px, weight 600, line-height 28px) labels component groups and metadata. Body-lg (18px, weight 400, line-height 28px) is the primary readi

Layout

The layout system uses a **12-column fluid grid with a 1280px max-width container**, maintaining consistent horizontal rhythm across all breakpoints. The gutter is 24px (md spacing token), creating balanced negative space between columns. The hero section spans the full viewport height (min-h-[calc(100vh-5rem)]) minus the 80px fixed header, with a 12-column grid split 7 columns for text content and 5 columns for the portfolio card on desktop; on mobile, this collapses to a single column with 10px gap. Section separation is achieved through 96px vertical padding (lg spacing: 40px top + 40px bottom + 16px buffer), creating a breathing room that prevents cognitive overload. The container max-width of 1280px ensures that at ultra-wide viewports (>1536px), content remains readable and doesn't s

Elevation & Depth

Depth is conveyed through **precise shadow layering and border definition**, not color or blur**. The system defines three elevation levels: Level 1 (Base) uses no shadow—flat surfaces like the body background (#ffffff) and the header (which uses a 1px border-bottom in outline-variant #d1d5db instead). Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that separates the card from the background without appearing disconnected. This shadow has a 3px vertical offset and 8px blur, making it visible but not dramatic. Level 3 (Elevated/Hover) applies

Shapes

The shape philosophy is **Precision-Technical**: rounded corners are used sparingly and purposefully, never for decoration. The rounded scale progresses from sm (0.25rem / 4px) for small UI elements like badges and tags, to DEFAULT (0.5rem / 8px) for buttons and inputs, to md (0.75rem / 12px) for form fields and secondary containers, to lg (1rem / 16px) for cards and modals, to xl (1.5rem / 24px) for the portfolio card and hero-adjacent containers, and full (9999px) for pill-shaped badges and circular avatars. Buttons use rounded-DEFAULT (8px) to signal they are interactive without appearing s

Components

Action Elements

**Button-Primary** (bg: {colors.primary} #000000, text: {colors.on-primary} #ffffff, padding: 16px 24px, height: 48px, rounded: {rounded.DEFAULT} 8px, typography: {typography.label-md} 14px 600 weight) is the primary call-to-action, used for "Selected Works" and "Contact Me". On hover, transition to button-primary-hover (bg: {colors.primary-container} #1f2937, text: {colors.on-primary-container} #f9fafb) over 200ms with ease-in-out timing. The button uses no shadow; its weight and contrast create affordance. Apply a 2px solid outline in {colors.primary} on focus with 2px outline-offset.

**Button-Secondary** (bg: {colors.surface} #ffffff, text: {colors.primary} #000000, border: 1px solid {colors.primary}, padding: 16px 24px, height: 48px, rounded: {rounded.DEFAULT} 8px

Do's and Don'ts

**Do**

• Do use pure black (#000000) and white (#ffffff) as your primary contrast pair—this is the brand's signature and ensures maximum legibility and technical authority.
• Do apply label-sm (11px, weight 700, letter-spacing 0.32em) to all metadata, tags, and UI labels to create consistent visual rhythm and signal that these are secondary information.
• Do use the 12-column grid with 24px gutters and maintain 40–64px section breaks to create breathing room and prevent cognitive overload.
• Do transition all interactive elements (buttons, cards, links) over 200–300ms with ease-in-out timing to signal responsiveness without feeling sluggish.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated containers to create subtle depth; reserve 0 8px 16px rgba(0, 0, 0, 0.12) for hover states only.

**Don't**

• Don't use color to convey hierarchy—use weight, scale, and contrast instead. The system is intentionally monochromatic to maintain technical authority.
• Don't apply rounded corners larger than 24px (xl) except for full circles (9999px); generous rounding undermines the precision-technical aesthetic.
• Don't use shadows larger than 0 8px 16px rgba(0, 0, 0, 0.12); excessive shadow creates a floating, insubstantial appearance that conflicts with the architectural style.
• Don't mix Inter and Prompt fonts within a single text element; use Inter for English and Prompt for Thai, but keep them separate to maintain script integrity.
• Don't add decorative elements, gradients, or textures beyond the subtle dot-pattern background; every visual element must serve a structural or informational purpose.