Design Direction

This site is an academic personal portfolio. It should feel editorial, calm, research-oriented, and easy to scan.

Primary Reference

Use the WIRED DESIGN.md direction from VoltAgent/awesome-design-md as the main reference: paper-white reading surfaces, strong black typography, thin hairline dividers, dense but legible editorial rhythm, and square-edged controls. Borrow only a small amount of Apple-like restraint for spacing and image handling.

Avoid turning the site into a product landing page, a dashboard, or a dark SaaS interface.

Visual Theme

• Background: white or near-white.
• Text: black or near-black for primary content.
• Secondary text: muted gray.
• Accent: one restrained blue for links and focus states.
• Dividers: thin hairline borders instead of boxed cards.
• Shape language: square or lightly rounded only where the existing theme requires it.

Typography

• Use the existing serif heading stack for large editorial headings.
• Use the existing sans-serif stack for body, labels, navigation, metadata, and buttons.
• Keep letter spacing at zero for large headings.
• Use uppercase only for small section labels.
• Favor readable line lengths around 65-85 characters.

Layout Rules

• The homepage should be a single scrolling page.
• Keep old archive URLs available, but the main navigation should point to homepage anchors.
• Prefer continuous chapters separated by hairlines over cards or floating panels.
• Use a strong first viewport: name, research positioning, portrait, and key actions.
• Keep research and publication items as rows, not tiles.
• Avoid nested cards, decorative blobs, heavy gradients, and ornamental backgrounds.

Components

• Buttons: square-edged, high contrast, text-only.
• Lists: row-based, separated by hairline dividers.
• Portrait: real image, square-edged crop, restrained processing.
• Navigation: compact, sticky, anchor-based.
• Footer: quiet and utilitarian.

Responsive Behavior

• Desktop: two-column hero and two-column section rhythm with labels on the left.
• Mobile: single-column flow with hero image below or after the introduction.
• All tap targets should remain at least 42px high.
• Text must never overlap images or controls.