Design reference 39 · Playful & material
Personal Web 1999
Express a person’s interests through a small, hand maintained web of pages.
Download design ZIP · Open interactive specimen
Design specification
Philosophy and fit. Express a person’s interests through a small, hand maintained web of pages. Suitable for personal sites, fan communities, hobby collections, and informal project journals.
Visual grammar. Use a compact masthead, a visible link directory, short update entries, tiny original badges, and an intentionally modest content width. Default-like serif copy and blue underlined links coexist with simple coloured table-like panels built using modern layout CSS. A repeating background pattern can surround a solid, readable content surface.
Specimen and flow. *Moth Observatory* is a fictional enthusiast’s website. Follow a homepage journal link, read an entry, then navigate to adjacent entries. Supporting pages are a curated links directory and a guestbook with clearly local-only sample submissions. A site map keeps every destination discoverable.
Mobile and motion. Collapse the link rail above the content, wrap badges, and keep text comfortably readable. Any small animated decoration has a pause control or a static alternative.
Identity and effort. Preserve personal miscellany, direct linking, and homemade composition; avoid copying obsolete browser failures or inserting fake broken links. Effort: low.
Files for a coding model
Reference images
- Desktop — 1440 × 1000 viewport
- Phone — 390 × 844 viewport
- Supporting state — 1440 × 1000 viewport
- Full page — 1440 × 1000 viewport
Supporting routes
Reuse
Use and adapt the original code and specifications for personal or commercial work under MIT. Keep applicable font and photo notices. The ZIP includes the complete runnable reference and its local assets.