Personal Website References
Personal sites Kevin likes enough to preserve as design references, especially when the site structure expresses a person's taste, library, work, and social graph.
Personal websites are useful references when they show durable structure rather than a single pretty screen: compact navigation, notes, artifacts, relationship graphs, reading lists, and a voice that can survive outside a portfolio template.
References
| Site | Why it matters |
|---|---|
| Flo Guo | Flo Guo: floguo.com |
| Thomas Dimson | Thomas Dimson concept |
| Ning Huang | Ning Huang: ning-h.com |
| Josephine Onggowarsito | Josephine Onggowarsito: josephines.world |
| Rare UI OTP Input | Source-code reference for compact interactive state: small neutral surfaces, one signal color, explicit focus/error/success feedback, spring motion that is disabled under reduced motion, and density that comes from state rather than surrounding chrome. The reusable unit is the state grammar, not Rare UI's page shell. Source: Rare UI repository aca2c360a4abec940b2629c4a18c45971cfa13c0, reviewed 2026-08-31 |
| Jakub Krehel and Details that make interfaces feel better | Personal-site reference for a narrow text-first home and article system where interactive figures sit next to the claim they prove. Durable primitives: roughly 692px main measure, generous but finite vertical rhythm, real interface studies inside prose, and restrained typography instead of a portfolio grid becoming the whole identity. Source: Jakub Krehel live site and article, reviewed 2026-08-31 |
| Anthony Fu posts and Icons in Pure CSS | Source-code reference for 65-character prose, quiet grouped indices, small metadata, full-width visual breakouts, and article pages that mix explanation, code, and runnable interface ideas without adding dashboard chrome. Source: antfu.me repository 4f4911ff10516a4c741717b86d4e62c57f1bf40f, reviewed 2026-08-31 |
| Poster House — Swiss Grid | Historical reference for treating a grid as a flexible program rather than a monochrome costume: it documents pre-modern precedents, the distinct Zürich and Basel tendencies, and work by Ruder, Hofmann, Gerstner, and Müller-Brockmann that bends the field to fit communication and production needs. Source: Poster House live exhibition, reviewed 2026-09-01 |
| Grid and motion reels (grid, motion) | Source studies for construction-before-result and phase-based editorial motion. Their transferable value is the revealed geometry and temporal grammar; the site uses original browser-native figures and ships none of the source video, artwork, or frames. Source: frame-by-frame audits of 448 and 201 frames, reviewed 2026-09-01 |
| Checked-in brand SVG set | Company, institution, and social identity marks are static transparent assets with a source-and-hash receipt beside the files. Runtime identity never depends on a logo API, browser key, provider availability, generated monogram, or hydration handoff. Product marks remain the project-authored local icons; General Translation, Dedalus, Sevenfold, AWS, Bloomberg, AT&T, Princeton, X, GitHub, and LinkedIn use the checked-in brand set. Source: user correction, 2026-09-02; Wikimedia Commons; Simple Icons; first-party local sources; reviews/source-signals/personal-website-static-brand-assets-20260902.review.json |
| lnkiai and Ansyn Yu | Two restrained personal sites that treat AI as an optional product layer: a small “Ask AI” entry point and an evolving public experiment. The useful pattern is to preserve ordinary navigation, authored work, and identity while letting the assistant deepen exploration. Source: local site-image and linked-source review, 2026-09-11 |
Use Pattern
When Kevin flags a personal site, store both the person and the site pattern. If the site contains lists of people, tools, articles, or artifacts, preserve those as first-class wiki pages or artifact cards instead of leaving them as one outbound link.
For Kevin's own site, combine references at the primitive level: keep navigation dormant until engaged, hold prose to a readable measure, let real media carry most large color fields, use one non-neutral state color, and reserve component-like containers for things the reader can manipulate. A specialized route may use one joined utility dock when its lead action is named and every icon opens a real state, changes the actual surface, or reaches a stable endpoint; ornamental toolbar buttons are not admitted. Editorial end frames may let one first-party image, one oversized Kevin-owned word, and tiny provenance/contact text replace a conventional multi-column footer. Preserve Kevin's existing hero and project identity rather than reproducing any reference site's expression.
Interface-detail contract
The September 1 exhaustive pass of Jakub Krehel's interface-details article is
captured at SHA-256
7d0c9fa72348ea88e4e47f979ef7607f7b5362e91889a5a6677cdfb9d23067a9.
The transferable contract is small and testable:
- balance short headings and use pretty wrapping for prose;
- use tabular figures anywhere numbers change or align comparatively;
- keep nested radii concentric and use subtle shadow rings for elevated surfaces, while preserving semantic dividers, focus rings, selections, and flat structural seams;
- outline noisy media one pixel inward so the edge is stable without changing intrinsic geometry;
- keep both state icons mounted and swap them with short opacity, scale, and blur motion for pointer input, while keyboard and reduced-motion state changes remain immediate;
- use transitions for interruptible interface state, keyframes only for staged sequences, and never apply a default page-load entrance system;
- reserve a short stagger for an explicit pointer-driven collection change, soften exits before unmount, keep optical icon alignment deliberate, and expose 40px precise-pointer or 44px touch targets.
The Personal Website applies these rules through shared primitives rather than
copying the article's visuals. The name-conveyor hero, PortfolioMon, and
component demonstrations retain their authored keyframed timelines because
their staged sequence is the product behavior, not generic UI state. Hover
treatments remain fine-pointer-only, and every equivalent keyboard action is
usable without waiting for decorative motion. Source: Jakub Krehel, exact
capture reviewed 2026-09-01;
reviews/source-signals/personal-website-interface-details-20260901.review.json
Source-led article pattern
When an article explains a visual or interaction system, put the proof inside the reading flow: a working original component, the exact local source excerpt that powers it, and a copy control. The figure and its explanation must share the same variables or timeline so the overlay cannot drift away from the result.
- Grid writing should reveal the construction before the composition, distinguish radial, axial, column, modular, and hierarchical relationship models, and present Swiss design as a historically situated method rather than a neutrality myth.
- Anti-default critique should diagnose unexamined accumulation, not turn common typefaces, icons, gradients, cards, or motion into a universal ban list. Product-specific structure, evidence, trust, and stable interaction vocabulary are the correction.
- Dense motion should use one inspectable playhead with semantic phases, direct scrubbing, interruptible controls, and a complete reduced-motion state. Native document scroll remains the editorial default; smoothing is a scoped systems choice.
- Source footage and third-party artwork remain audit-only. Reproductions transfer relationship grammar into original HTML, CSS, React, and GSAP rather than copying a reference's assets or expression.
Timeline
-
2026-09-11 | Added lnkiai and Ansyn Yu as references for personal sites where an AI assistant is a quiet optional layer over authored identity and work. Source: X
2096478051580416089,2098049943638540740; local media review -
2026-09-02 | Replaced the same-day Logo.dev experiment with a wholly local brand-asset contract after Kevin clarified that no key or runtime provider should be used. Transparent SVGs for General Translation, Dedalus, Sevenfold, AWS, Bloomberg, AT&T, Princeton, X, GitHub, and LinkedIn are checked in with provenance; project-authored marks stay local; the component performs no remote lookup. Desktop and mobile passes show zero Logo.dev requests, no broken visible marks, no opaque logo owners, and no horizontal overflow. Source: user correction, 2026-09-02;
reviews/source-signals/personal-website-static-brand-assets-20260902.review.json -
2026-09-02 | Added a single Logo.dev-backed brand-mark primitive to the Personal Website. Domain/name lookup is used only as a progressive enhancement after hydration; existing local assets and inline marks remain the immediate fallback, all owners stay transparent and unframed, and
fallback=404rejects generated monograms. A publishable key is still required for successful live-provider verification and must be configured outside source. Source: Logo.dev product/API-key/image/attribution documentation, reviewed 2026-09-02;reviews/source-signals/personal-website-logo-dev-20260902.review.json -
2026-09-01 | Applied the complete applicable interface-detail contract across the Personal Website: balanced heading/pretty prose wrapping, contextual icon swaps, tabular figures, concentric control groups, inset media outlines, shadow-built elevated edges, optical padding, stable hit areas, interruptible disclosures, quiet exits, and pointer-only collection stagger. Structural dividers, focus rings, the GSAP hero, PortfolioMon, and staged specimens remain explicit exceptions. Desktop/mobile, keyboard, reduced-motion, accessibility, layout, gameplay, and build verification pass. Source: Jakub Krehel exact capture SHA-256
7d0c9fa72348ea88e4e47f979ef7607f7b5362e91889a5a6677cdfb9d23067a9;reviews/source-signals/personal-website-interface-details-20260901.review.json -
2026-09-01 | Published three source-led article systems for the personal site: a 448-frame grid study with Swiss-grid history, an anti-AI-default critique based on the two supplied screenshots, and a 201-frame editorial-motion study with an original GSAP score. Each article places accessible live components beside exact repository source excerpts; the source reels and third-party artwork remain audit-only. Source:
reviews/source-signals/personal-website-grid-ai-motion-articles-20260901.review.json; Poster House; GSAP Timeline; Lenis; user-supplied screenshots -
2026-09-01 | Refined the Rare UI source review around its actual description/install dock (
DescriptionPanel,InstallBar,ThemeToggle, tooltip, description, and code-drawer surfaces) and combined it with Kevin's supplied cinematic end-frame reference. Integrated two bounded primitives into the personal site: a joined machine-index dock whose controls expose real context, description, source, palette, sound, share, and contact actions; and a full-bleed footer built from Kevin's Dedalus stage photograph, one signal-orange word, and small provenance/contact text. No Rare UI source, third-party copy, font, icon drawing, or screenshot asset was shipped. Source: Rare UI repositoryaca2c360a4abec940b2629c4a18c45971cfa13c0; user-supplied visual reference, reviewed 2026-09-01 -
2026-08-31 | Source-reviewed Rare UI's OTP implementation, Jakub Krehel's live home/article system, and Anthony Fu's post shell. Integrated the transferable primitives into Kevin's personal site: a dormant icon rail, 692px editorial spine, 65-character article measure, compact stateful surfaces, one orange state color, adjacent diagrams, and reduced-motion-safe transitions. No third-party assets, fonts, copy, or component source were shipped. Source: Rare UI
aca2c360; antfu.me4f4911ff; Jakub Krehel live site; local browser and source audit, 2026-08-31 -
2026-07-04 | Reviewed the video artifact for People Network Ledger's concept. The durable pattern is a personal site as a playable world, with Mario-like spatial navigation and HUD affordances, not just a portfolio skin. Source: X/@turtlesoupy and local video review, 2026-07-04
-
2026-06-25 | Added People Network Ledger and People Network Ledger from Kevin's design-folder source set. Source: raw/notes/design-folder-sites-2026-06-25.md
-
2026-06-25 | Added People Network Ledger's in-progress personal website concept from the X bookmark reingest. Source: X/@turtlesoupy, 2026-06-24
-
2026-06-24 | Page created from Kevin's Flo Guo capture so personal sites he likes have a durable design-reference home. Source: User request, 2026-06-24