The Writing page functions as the portfolio’s in-game codex: an archive of unlocked knowledge entries that the visitor can browse and read. Blog posts and articles are displayed as pixel-bordered cards arranged in a list or grid, each entry showing a title, publication date, and short summary. The BookOpen icon in the navigation panel signals the scholarly nature of this section. The codex metaphor transforms a conventional blog index into something that feels like discovering collectible lore items throughout a game world — each post is an artifact to be read and understood.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/player-one/llms.txt
Use this file to discover all available pages before exploring further.
Route Info
| Property | Value |
|---|---|
| Path | /writing |
| Arcade Label | CODEX |
| Navigation Icon | Book Open (book-open) |
| Page Transition | PageTransition blur/scale wrapper, pt-24 pb-32 padding |
Visual Layout
The page renders a vertically stacked list (or two-column grid on wide viewports) of article cards:- Page heading — a pixel-font section title (e.g., “CODEX” or “TRANSMISSIONS”) introduces the archive.
- Article cards — each post is contained in a pixel-bordered card with a consistent internal layout:
- Title — article name in a prominent pixel or semi-pixel font.
- Date — publication date styled as a game-world timestamp.
- Summary — two-to-three sentence excerpt or abstract.
- Read link — a styled button or underlined link to the full post.
- Empty state — when no posts are present, a placeholder card communicates that the codex is being written.
HUD, CRTOverlay, and GhostSprite components appear as on all other routes.
Key Components
PageTransition
Shared entrance animation wrapper applied to all routes.
Article card
Pixel-bordered card component rendering one writing entry with title, date, summary, and a read action.
Navigation
Used in the
Navigation inventory panel to identify the Writing route. Communicates the reading/learning theme of this section.GhostSprite
Background floating sprites present on every route, keeping the arcade atmosphere alive behind the card list.
Interactivity & Special Features
- Read link — each card’s action navigates to the full article. This can be an internal route (if articles are rendered within the SPA) or an external link (e.g., a Medium, Substack, or personal blog URL).
- Hover state — cards may lift, glow, or shift border color on hover to reinforce the “item pickup” metaphor — as if the visitor is hovering over a collectible codex entry.
- Date formatting — publication dates may be formatted in a stylized way (e.g.,
CYCLE 2024.03.15) to maintain the in-game aesthetic while remaining human-readable. - Scroll animation — cards can animate in on scroll, staggered by index, to simulate entries being “discovered” as the visitor moves through the codex.
Customization Notes
Writing entries are defined in a data array inside the Writing page component or a co-located data file. Each entry should include at minimum a
title, date, summary, and url (for the read link). Add new posts by appending to that array.If your writing lives on an external platform (Medium, Substack, dev.to, a personal blog), set the
url field on each entry to the external article URL and ensure the read link opens in a new tab. This page then acts as a curated index rather than a full content renderer.