[jonathanperis]

Summary

Draft — design exploration, not for merge yet. A self-contained prototype of the redesign direction (pixel-art RPG inspired, mixed with dev aesthetics) at /lab/rpg/. The live portfolio is untouched.

What's in it

• Visual system: PICO-8 16-color palette, notched pixel "JRPG windows" with hard shadows and editor-style tabs (dialogue.txt, player.json, equipment.yml), Pixelify Sans (pixel display) + JetBrains Mono (dev body), pixel starfield
• Title screen: hand-drawn pixel sprite of Jonathan (hoodie, beard, laptop) on a grass/dirt tile, idle bob animation, nameplate Lv.12 Backend Architect
• Dialogue box + command menu: the hero copy as JRPG dialogue with a blinking ▼; ▶ cursor menu (View resume / Talk / Equipment / Quest log) with arrow-key navigation
• Character sheet: name, class, level, guild, home and party, all derived from data.ts (no invented stats)
• Progress counters: hearts for years, scrolls for roles, chests for public repos (live count from GitHub at build)
• Equipment: skill groups as gear slots (Main hand, Spellbook, Armor, Relic, Tongues, Off-hand) with pixel item icons

Implementation

• src/components/rpg/PixelArt.astro renders character-grid sprites to crisp build-time SVG (merged runs, crispEdges); no image assets
• src/components/rpg/sprites.ts: sprite and icon grids
• src/components/rpg/PixelPanel.astro: the window component
• Pixelify Sans added through the Astro Fonts API (self-hosted)
• /lab/ is excluded from the sitemap and the page is noindex, nofollow
• Accessibility: no-JS safe, prefers-reduced-motion stops the animations, skip link, labelled sprite, visible focus
• Client JS: one small menu-navigation script

Verification

• bun run lint 0/0/0; bun run build passes; sitemap still lists only / and /resume/
• Checked in Chromium at 1440×900 and 390×844 (no horizontal overflow)

Next (if the direction lands)

Extend the system to Quest log (experience), World map (Workbench repos), the terminal as an in-game console, and a print-friendly resume, then replace the current home page.

🤖 Generated with Claude Code

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}