Customization Guide — Personalizing Dev Mode Arcade

Dev Mode Arcade ships with a complete set of placeholder content so the entire site looks great out of the box. Making it yours is a matter of editing one file — data/mockData.js — for almost everything, with a handful of direct component edits for the hardcoded About page copy. This guide walks through every section in order so you can go from demo to deployed personal portfolio in a single session.

All data changes live in data/mockData.js. See the Mock Data reference for the complete schema of every export before you start editing.

Step 1: Update your projects

The p export (the Projects array) is the first thing visitors see. Replace each placeholder entry with a real project from your own work.

Before — placeholder entry:

{
  id: "proj-1",
  title: "Neon Nexus",
  genre: "React / Three.js",
  players: "Solo",
  year: "2025",
  description: "A 3D data visualization dashboard for tracking server metrics in real-time.",
  color: "purple"
}

After — your real project:

{
  id: "proj-1",
  title: "My Actual Project",
  genre: "Next.js / Prisma",
  players: "Solo",
  year: "2025",
  description: "A full-stack SaaS app for managing freelance invoices with PDF export.",
  color: "cyan"
}

Field-by-field guide:

FieldWhat to put hereidAny unique string — keep the "proj-N" pattern or use a slugtitleYour project’s namegenreThe primary tech stack, styled as an arcade genre tagplayers"Solo" if you built it alone, "Team" if it was collaborativeyearThe year you finished or launched itdescriptionOne punchy sentence that explains what it doescolorThe glow accent color for the cabinet card

The color field must be exactly one of "purple", "lime", "magenta", or "cyan". These are the four arcade accent colors defined in the design tokens. Any other value will render without a glow effect.

You can add as many projects as you like — remove the placeholders and add your own entries. There is no enforced maximum, but four to six entries look best on the grid layout.

Step 2: Update your skills

The s export is an object with three category arrays: frontend, backend, and tooling. Edit each array to match your actual skill set.

Adding a new skill:

// Add to the appropriate category array
{ name: "GraphQL", level: "Level 72", desc: "Schema design and Apollo Client integration." }

Removing a skill — delete the object from the array:

// Before
backend: [
  { name: "Node.js",    level: "Level 80", desc: "Event-driven server logic and API design." },
  { name: "PostgreSQL", level: "Level 70", desc: "Relational data modeling and complex queries." },
  { name: "Redis",      level: "Level 60", desc: "Caching and pub/sub for real-time features." }
]

// After — Redis removed, Go added
backend: [
  { name: "Node.js",    level: "Level 80", desc: "Event-driven server logic and API design." },
  { name: "PostgreSQL", level: "Level 70", desc: "Relational data modeling and complex queries." },
  { name: "Go",         level: "Level 55", desc: "Concurrent microservices and CLI tools." }
]

Writing arcade-style level strings:

The level field is a plain display string — it is never parsed as a number. The convention is "Level <integer>" to match the retro RPG aesthetic, but you can use any value you like:

ValueWhen to use"Level 99"Expert — your strongest skill"Level 70–85"Proficient — you reach for this regularly"Level 40–65"Competent — you can use it but still look things up"MAX"When 99 isn’t enough"Still Learning"Honest mode

The skill circles display only the name field at rest. The full desc string appears on hover as a tooltip. Keep name short (one or two words) and use desc for context and personality.

Renaming a category is not supported via data alone — the three keys frontend, backend, and tooling are read directly by the Skills component. To add a fourth category (e.g. "design"), you would also need to update the component to render it.

Step 3: Update the About page

The About page content is hardcoded inside the component rather than sourced from mockData.js. You will need to edit the source component directly.

The fields to update are:

FieldDescriptionExampleCLASSYour developer archetype or title"Full-Stack Engineer"XPYears of experience (or a fun equivalent)"7 Years"GUILDYour current employer, team, or status"Freelance"PREVIOUS LIVESThree prior roles or career highlights shown as log entries"Junior Dev @ StartupCo"

In the production build, the About page component is the nm function in assets/main.js. If you are working from source, look for the About page component file — search for the string "PREVIOUS LIVES" or "CLASS" in your component tree to find the exact location of these hardcoded strings.

Keep the CLASS, XP, and GUILD values short — they are displayed in a fixed-width stat panel styled like an RPG character sheet. Aim for under 20 characters each.

Step 4: Add writing articles

The a export drives the Writing page’s instruction-manual layout. Add your own articles — blog posts, writeups, or devlogs — as entries in the array.

// Add a new article entry
{
  id:      "art-4",
  chapter: "04",
  title:   "Why I Switched to Bun",
  type:    "TECHNICAL",
  date:    "Jan 2026",
  excerpt: "Benchmarking Bun vs Node for a high-traffic API and living to tell the tale."
}

How chapter works:

The chapter field is a display-only string — it appears on the left spine of each entry. It is not validated or enforced as a sequential integer, so you have full control:

Use "01", "02", "03" for a clean numbered series

Use "A1", "B2" for organized sub-series

Reuse numbers if two posts belong to the same conceptual chapter

Built-in article types and custom ones:

type valueIntended use"REFLECTION"Opinion pieces, lessons learned, career thoughts"TECHNICAL"How-to posts, architecture decisions, comparisons"BUG REPORT"War stories, post-mortems, debugging sagasAny uppercase stringCustom categories — "TUTORIAL", "DEEP DIVE", "HOT TAKE"

The badge rendered on each entry uses the type string directly, so keep custom values short and uppercase for visual consistency.

Step 5: Add a case study

The c export uses a boss-fight narrative structure to turn a project challenge into a compelling story. Edit the existing entry or add new ones.

{
  id:       "cs-2",
  title:    "Project: Zero to Launch",
  boss:     "The Blank Canvas",
  problem:  "A client needed a production-ready SaaS from scratch in six weeks with a team of two.",
  strategy: "T-shaped sprint plan — auth and billing first, feature work after. Shipped an MVP on week four.",
  combos: [
    "Next.js App Router",
    "Clerk for authentication",
    "Stripe subscriptions",
    "Vercel edge deployment"
  ],
  victory:  "Launched on schedule. First paying customer within 48 hours of go-live.",
  bonus:    "Client renewed contract for Phase 2 — mobile app in React Native."
}

Boss-fight framing guide:

FieldNarrative roleTipsbossThe antagonist — the core challenge given a nameBe dramatic: "The Legacy Monolith", "The Impossible Deadline"problemThe opening crawl — what was broken or missingLead with the pain. Numbers help: “12-second load time”strategyYour game plan — the high-level approachName the pattern or methodology if there was onecombosSpecial moves — specific tools and techniquesKeep each item to a short phrasevictoryThe win screen — measurable outcomesQuantify wherever possible: load times, conversion rates, team sizebonusPost-credits scene — what came nextOptional, but great for showing momentum

Currently, the Case Studies page renders only the first entry in the c array (c[0]). If you add multiple case studies, only the first will be displayed until the component is updated to support pagination or a list view.

Step 6: Customize guestbook seed data

The g export pre-populates the leaderboard sidebar on the Contact page. These entries set the tone before any real visitors sign the guestbook, so make them yours.

export const g = [
  { initials: "YOU", score: 999999, message: "Your name here — make it count." },
  { initials: "MOM", score: 500000, message: "Very proud of you sweetie" },
  { initials: "H4X", score: 1337,   message: "Nice CSS." },
  { initials: "DOG", score: 100,    message: "Woof." }
];

Rules for valid entries:

FieldConstraintNotesinitialsMax 3 charactersClassic arcade score style — "AAA", "H4X", "YOU"scoreInteger, 0 to 999999Displayed left-padded to 6 digits: 001337messageAny stringKeep it short — the sidebar column is narrow

Sort entries by score in descending order to match the classic arcade high-score table convention. The component renders them in array order, so the sort is yours to control.

Step 7: Branding and colors

The four arcade accent colors — purple, lime, magenta, and cyan — are compiled directly into Tailwind utility classes in main.css. Each color’s hex value appears in every related rule (bg-arcade-*, text-arcade-*, border-arcade-*, text-glow-*, box-glow-*). To change or extend the palette, find and replace the hex value in those rules throughout main.css.

Where the tokens live:

Refer to the Design Tokens reference for the complete list of hex values, utility class names, and glow definitions. The primary color rules control glow effects, border accents, badge backgrounds, and skill circle fills.

Changing the primary accent color:

If you want to shift the overall site tone — for example, replacing purple as the default hero accent with a custom brand color — find every occurrence of #b026ff in main.css (the compiled Tailwind output) and replace it with your chosen hex value. The color is baked directly into the generated utility classes (bg-arcade-purple, text-arcade-purple, border-arcade-purple, text-glow-purple, box-glow-purple, and their hover variants). Everything that uses color: "purple" in the data will inherit the change once those classes are updated.

Typography:

Dev Mode Arcade loads two typefaces from Google Fonts:

FontUsageVT323Pixel display headings, score readouts, badge labelsJetBrains MonoBody text, code-style labels, stat values

To swap fonts, update the @import URL at the top of main.css to load your chosen Google Fonts families, then replace the font-family values in the .font-pixel and .font-mono rules further down in that same file. See the Typography reference for the full font stack documentation.

For the complete list of design tokens — colors, spacing, glow intensities, and animation easing values — see the Design Tokens reference. For an overview of how the project is structured and where each file lives, see the Project Structure guide.

Styling

Data

Customization Guide — Personalizing Dev Mode Arcade

Build docs developers (and LLMs) love

Styling

Data

Documentation Index

Build docs developers (and LLMs) love