Skip to content
miito.devThe Workshop · File 0176
Back to the register

miito.dev

This site: a personal record kept since 2023, rebuilt in 2026 on Next.js 16, Payload CMS and Panda CSS.

Directive
R-004
Class
Personal
Role
Design and build
Period
Feb 2023 – Oct 2026
Status
Delivered
miito.dev on an iMac: the home page, the records, the standards sheet, and home again.

The account§ 01

The site began in February 2023 as a place for notes and a hexagon garden of short posts, and has been rebuilt more than once since. The current version runs on Next.js 16 with Payload CMS as its own admin, Panda CSS for styling and React Aria for the controls.

Most of it is records: bulletins, the garden, a gallery, these works, and a year page compiled from what was listened to on Last.fm and watched on AniList, with a letter sent by email each month.

Outcomes

  • More than 1,400 commits since February 2023.
  • Moved from Sanity to Payload CMS, with a moderation desk for comments.
  • Year pages and a monthly letter compiled from Last.fm and AniList.
  • RSS and Atom feeds, a sitemap, and a contact form checked by Vercel BotID.

Timeline

  1. First commit
  2. Garden page
  3. Feeds and sitemap
  4. Payload CMS and the Directive redesign
  5. Year pages
  6. Monthly letter

In figures§ 02

  • 1,400+commits since February 2023
  • 12looks: the house style and eleven skins for the calendar
  • 138test suites
  • 4years on record, 2023 to 2026

What it does§ 03

A personal site written as a case file: every page is a record, the admin is a command post.

  1. The command post

    Payload CMS dressed as the site's own admin: a daily docket of drafts and held mail, a register for each collection, and a desk for moderating comments.

  2. Seasonal skins

    Eleven skins that take over from the house style with the calendar, Halloween to Canada Day, or by hand, each with its own palette and type, and a motion switch beside them in the header.

  3. Year pages

    A year's listening and watching compiled from Last.fm and AniList into a debrief that plays card by card out of a filing cabinet drawn in CSS 3D.

  4. The garden

    Short notes laid out on a map of hexagons that can be dragged, zoomed and followed from one island to the next.

  5. Correspondence

    Comments under bulletins, held for review, answered from the admin, with official replies marked as such.

  6. Built to be read

    RSS and Atom feeds, axe sweeps of every route, logical properties throughout, and reduced motion honoured by every animation.

Pages§ 04

  • Fig. 1The year page opens as a debrief, one card at a time.
  • Fig. 2Records, with the case files drawer at the top.
  • Fig. 3The garden's map of notes.
  • Fig. 4Standards, the design system laid out as a specimen sheet.
  • Fig. 5The Weeblist ledger.

On a phone§ 05

  • Fig. 6The home page on a phone.
  • Fig. 7Records on a phone, the case files drawer first.
  • Fig. 8Bulletins on a phone.
  • Fig. 9The Citizen file on a phone.

How it fits together§ 06

  1. ReaderAny browser; the look follows the season or the OS
    HTTPS
  2. Next.js 16 on VercelApp Router, prerendered pages purged by tag
    Local API
  3. Payload CMSCollections, drafts, the command post
    Drizzle
  4. Neon PostgresProduction and preview on separate branches