L Liz Personal Compact Open preview

Compact personal site template · high signal, low weight

Warm editorial structure for a personal site that still feels like a system.

This template borrows the best bits from Vercel’s typographic discipline, Haoqi’s systems language, and Maxime’s capability clustering — then cuts the heavy WebGL tax.

Inspect preview See rules

Goal: visual upgrade with minimal payload. Not a motion playground.

Take

Do not copy the heavy parts. Copy the legible parts: typography, clustering, microcopy, and a few precise visual moves.

Method

Homepage first. Project cards second. Everything else stays quiet.

The layout is designed for a small site with a strong thesis: identity, a short positioning line, project clusters, writing proof, and a minimal status strip.

01

One thesis

Use one sharp sentence to explain what the site is for.

02

Capability clusters

Group work by what it proves, not by raw chronology.

03

Visible proof

Writing, projects, and links need to do the credibility work.

04

Micro-motion only

Hover, fade, and tiny state changes. No fat WebGL tax.

Signals

Three visual languages, one compact template.

Vercel discipline

Warm paper, serif hierarchy, careful spacing, and one accent used sparingly.

Haoqi systems language

Theme / sound / status microcopy, panel-like layout, small utility strip, strong world-building.

Maxime capability clustering

Group work by shader / motion / craft themes so the site reads like accumulated skill.

Lightweight motion

Progressive detail without first-load drama.

Paper texture

Soft gradients, borders, and quiet depth instead of glass and chrome.

Useful restraint

Enough personality to stand out, not enough to bloat the bundle.

Preview

What the homepage could feel like.

The preview uses a centered hero, a thesis strip, a grouped capability grid, and a report-like writing block. It should read as a personal site, not a startup landing page.

Jump to rules
preview / home / writing / projects / system
Liz
Personal compact template

Design language:
- warm paper background
- serif headline / sans UI
- one accent color
- grouped projects
- small status strip

Content structure:
1. Thesis
2. Projects
3. Writing proof
4. About strip
5. Contact / links

Motion budget:
- hover
- fade
- tiny transition
- no full-page 3D

Do

  • Use serif headlines, sans UI, monospace only for technical snippets.
  • Keep the homepage centered on one thesis.
  • Group projects by capability and outcome.
  • Use a small system strip if it supports identity.
  • Keep load time low and motion small.

Don’t

  • Do not add WebGL before the site has bones.
  • Do not copy SaaS purple-gradient junk.
  • Do not create a control-panel fetish.
  • Do not flatten everything into a blog list.
  • Do not trade speed for fake wow.

Target

  • Small payload.
  • High visual payoff.
  • Personal, but structured.
  • Editorial, but not fragile.
  • Systemic, but not bloated.