Update Your Bio, Skills, and Writing in dev-mode

All of the portfolio’s text, numbers, and metadata live in plain JavaScript data arrays inside the source JSX files. Nothing is pulled from a CMS or an external API — every label, stat, and blurb is a value you can open in your editor, change in seconds, and see reflected instantly in the dev server. This page walks you through every editable section in the order you’re most likely to tackle them.

Updating your bio (About page)

The About page renders a pixel-art character sheet. Four pieces of hardcoded text control the identity section at the top, and a separate card holds the longer narrative paragraph.

Change your name and class

Find the string "DEV_NAME" in the About component and replace it with your own name. Directly below it, change "FULL STACK MAGE" to whatever creative title fits you — it appears as your character class under the portrait.

// Before
<span className="text-cyan-400 font-bold">DEV_NAME</span>
<span className="text-lime-400">FULL STACK MAGE</span>

// After
<span className="text-cyan-400 font-bold">ALEX_CHEN</span>
<span className="text-lime-400">FRONTEND SORCERER</span>

Update the StatBar values

The four stat bars are hardcoded integers on a 0–10 scale. Locate the StatBar block and adjust each value to match your own personality metrics.

<StatBar label="CURIOSITY"          value={10} color="cyan"    />
<StatBar label="PATIENCE FOR BAD UX" value={1}  color="magenta" />
<StatBar label="YEARS DEBUGGING"    value={6}  color="lime"    />
<StatBar label="CAFFEINE LEVEL"     value={8}  color="orange-500" />

The value prop accepts any integer from 0 to 10. The bar fills proportionally and the pixel segments are rendered automatically.

Edit the bio paragraph

The narrative copy lives inside the instruction-manual card beneath the stat block. Look for the JSX string that begins with "A long time ago in a retail job far, far away..." and replace it with your own career story. Keep it short — the card has a fixed height and will scroll on overflow.

Change the warning quote

At the bottom of the About panel there is a flavour-text warning. Replace the default string with your own quirky confession:

// Default
"WARNING: MAY SPEND 4 HOURS TWEAKING A BOX SHADOW."

// Example replacement
"WARNING: WILL ABSOLUTELY RENAME THE VARIABLE ONE MORE TIME."

Swap the pixel-art avatar

The avatar is generated on-the-fly by DiceBear. The only thing you need to change is the seed query parameter — every unique string produces a different character sprite.

// Current seed
<img
  src="https://api.dicebear.com/7.x/pixel-art/svg?seed=dev&backgroundColor=1a0a2e"
  alt="Pixel avatar"
/>

// Change `seed=dev` to any string you like
<img
  src="https://api.dicebear.com/7.x/pixel-art/svg?seed=alex&backgroundColor=1a0a2e"
  alt="Pixel avatar"
/>

The backgroundColor parameter is set to the site’s deep-purple background colour (1a0a2e). You can change it to any hex value, but keeping it consistent with the rest of the page looks best.

Updating skills (Skills page)

Skills are stored in a single array of category objects. Each category renders as one panel on the Skills page, and each skill inside it renders as a row with a fighting-game combo notation and a pixel level bar.

const skillCategories = [
  {
    title: "LANGUAGES",   // Panel heading
    color: "cyan",        // Accent color: "cyan" | "lime" | "magenta"
    skills: [
      { name: "JavaScript", combo: "↓↘→ + P",        level: 9  },
      { name: "TypeScript", combo: "←↙↓↘→ + K",      level: 8  },
      { name: "Python",     combo: "↓↑ + P",          level: 6  },
      { name: "HTML/CSS",   combo: "Hold ←, → + P",   level: 10 }
    ]
  },
  {
    title: "FRONT-END",
    color: "lime",
    skills: [
      { name: "React",         combo: "→↓↘ + P",  level: 9 },
      { name: "Next.js",       combo: "↓↙← + K",  level: 7 },
      { name: "Tailwind",      combo: "PPP",       level: 9 },
      { name: "Framer Motion", combo: "KKK",       level: 6 }
    ]
  },
  {
    title: "BACK-END",
    color: "magenta",
    skills: [
      { name: "Node.js",    combo: "→↘↓↙← + P",    level: 8 },
      { name: "PostgreSQL", combo: "↓↘→↓↘→ + K",   level: 7 },
      { name: "Redis",      combo: "Hold ↓, ↑ + K", level: 5 },
      { name: "GraphQL",    combo: "←→←→ + P",      level: 6 }
    ]
  }
];

Field reference

title

string

required

The heading displayed at the top of the category panel, e.g. "LANGUAGES". All-caps is the house style.

color

"cyan" | "lime" | "magenta"

required

The neon accent colour applied to the panel border and skill-bar fill. Must be one of the three supported theme values.

skills[].name

string

required

The technology or skill name shown on the left side of each row.

skills[].combo

string

required

The fighting-game input notation displayed on the right. Any Unicode string works — use arrow characters (↓↘→) and letters (P, K) to stay on theme, or write whatever you like.

skills[].level

number

required

Proficiency on a scale of 0 to 10. The pixel-segment bar fills proportionally; 10 is fully lit.

Adding a new skill category

Append a new object to the skillCategories array. Each new category object renders an additional panel automatically.

{
  title: "DEVOPS",
  color: "lime",
  skills: [
    { name: "Docker",     combo: "↓↓ + P",       level: 7 },
    { name: "GitHub CI",  combo: "→→ + K",        level: 8 },
    { name: "Terraform",  combo: "Hold ← + P",    level: 4 }
  ]
}

Adding or removing individual skills

To add a skill, push a new object into the relevant category’s skills array. To remove one, delete its object from the array. The layout reflows automatically.

Updating writing articles (Writing page)

The Writing page renders each article as a tilted paper card — like physical zines and flyers pinned to a corkboard. The data lives in a flat array of article objects.

const articles = [
  {
    id: 1,
    title:    "WHY I REWROTE IT IN RUST (AND REGRETTED IT)",
    date:     "OCT 1989",
    type:     "ZINE",
    rotation: -3,
    color:    "bg-yellow-100",
    excerpt:  "A tragic tale of memory safety and lost weekends."
  },
  {
    id: 2,
    title:    "CSS GRID: A SURVIVAL GUIDE",
    date:     "NOV 1992",
    type:     "MANUAL",
    rotation: 2,
    color:    "bg-blue-100",
    excerpt:  "How to center a div without crying."
  },
  {
    id: 3,
    title:    "THE ART OF THE CONSOLE.LOG",
    date:     "JAN 1995",
    type:     "FLYER",
    rotation: -1,
    color:    "bg-pink-100",
    excerpt:  "Debugging like a caveman, but with style."
  },
  {
    id: 4,
    title:    "REACT HOOKS EXPLAINED TO MY CAT",
    date:     "MAR 1998",
    type:     "ZINE",
    rotation: 4,
    color:    "bg-green-100",
    excerpt:  "Meow meow useEffect meow memory leak."
  }
];

Field reference

number

required

Unique integer identifier. Increment from the last entry when adding a new article.

title

string

required

The headline printed on the card. All-caps matches the retro print aesthetic.

date

string

required

A display-only date string — it is not parsed, so any format works. The existing entries use "MMM YYYY" with a retro-future year.

type

"ZINE" | "MANUAL" | "FLYER"

required

The publication type badge shown on the card. The three built-in values are "ZINE", "MANUAL", and "FLYER". You can use any custom string — it will render as-is in the badge.

rotation

number

required

The tilt angle of the card in degrees. Negative values lean left; positive values lean right. Keep values between -5 and 5 — larger values break the corkboard illusion and can cause cards to overlap awkwardly.

color

string

required

A Tailwind background utility class applied to the card surface. Use any bg-{color}-{shade} class from Tailwind’s palette, e.g. "bg-yellow-100", "bg-indigo-100". Light shades (50–200) work best against the dark page background.

excerpt

string

required

A one- or two-sentence teaser displayed beneath the title. Keep it punchy.

The date field is purely decorative — dev-mode does not sort or filter by date. Arrange articles in the array in the order you want them to appear on the page.

Updating case studies (Case Studies page)

Each case study is framed as a boss fight. The data drives a phase-by-phase breakdown of a real project challenge, complete with a boss name, difficulty level, emoji sprite, and XP rewards.

const cases = [
  {
    id:       1,
    bossName: "LEGACY_MONOLITH.EXE",
    level:    99,
    sprite:   "👾",
    phases: [
      { title: "PHASE 1: THE PROBLEM",             content: "A 10-year-old PHP codebase..." },
      { title: "PHASE 2: ATTACK PATTERNS (CHALLENGES)", content: "No documentation..." },
      { title: "PHASE 3: STRATEGY (PROCESS)",      content: "Strangler fig pattern..." },
      { title: "VICTORY: RESULT",                  content: "90% reduction in load times..." }
    ],
    xp: ["Microservices", "GraphQL", "Legacy Migration", "Patience"]
  },
  {
    id:       2,
    bossName: "STATE_MANAGEMENT_HYDRA",
    level:    45,
    sprite:   "🐉",
    phases: [
      { title: "PHASE 1: THE PROBLEM",             content: "..." },
      { title: "PHASE 2: ATTACK PATTERNS (CHALLENGES)", content: "..." },
      { title: "PHASE 3: STRATEGY (PROCESS)",      content: "..." },
      { title: "VICTORY: RESULT",                  content: "..." }
    ],
    xp: ["React Query", "Zustand", "Performance Tuning"]
  }
];

Field reference

number

required

Unique integer identifier. Increment from the last entry.

bossName

string

required

The project challenge displayed as the boss name. SCREAMING_SNAKE_CASE with a file extension like .EXE or .JS reinforces the retro-game aesthetic.

level

number

required

The boss difficulty level shown in the HP header. Any positive integer works — use it to express how gnarly the challenge actually was.

sprite

string

required

A single emoji rendered as the boss sprite. Pick one that matches the vibe of the problem: 👾, 🐉, 🕷️, 💀, and so on.

phases

array

required

An ordered array of phase objects, each with a title string and a content string. The phases are rendered top-to-bottom inside the boss card. The four-phase structure — Problem → Challenges → Process → Result — is the recommended convention but is not enforced by the component.

string[]

required

An array of skill or technology tags awarded at the end of the case study, styled as XP items. List anything you genuinely learned or used during the project.

Adding a third case study

Copy an existing entry, give it a new id, and fill in your own content. The page layout accommodates any number of cases.

{
  id:       3,
  bossName: "THE_INFINITE_REWRITE.BAT",
  level:    77,
  sprite:   "🔁",
  phases: [
    { title: "PHASE 1: THE PROBLEM",              content: "A side project that kept growing..." },
    { title: "PHASE 2: ATTACK PATTERNS (CHALLENGES)", content: "Scope creep at every corner..." },
    { title: "PHASE 3: STRATEGY (PROCESS)",       content: "Time-boxed sprints, ruthless cuts..." },
    { title: "VICTORY: RESULT",                   content: "Shipped in 3 weeks. Not perfect. Shipped." }
  ],
  xp: ["Scope Management", "Vite", "Self-Discipline"]
}

The boss HP bar that animates on page load is a CSS keyframe animation — it is purely decorative and not connected to any field in the data array. Changing level updates the number displayed in the header but does not affect how the HP bar drains.

Theming

Content

Update Your Bio, Skills, and Writing in dev-mode

Updating your bio (About page)

Updating skills (Skills page)

Field reference

Adding a new skill category

Adding or removing individual skills

Updating writing articles (Writing page)

Field reference

Updating case studies (Case Studies page)

Field reference

Adding a third case study

Build docs developers (and LLMs) love

Theming

Content

Documentation Index

​Updating your bio (About page)

​Updating skills (Skills page)

​Field reference

​Adding a new skill category

​Adding or removing individual skills

​Updating writing articles (Writing page)

​Field reference

​Updating case studies (Case Studies page)

​Field reference

​Adding a third case study

Build docs developers (and LLMs) love

Updating your bio (About page)

Updating skills (Skills page)

Field reference

Adding a new skill category

Adding or removing individual skills

Updating writing articles (Writing page)

Field reference

Updating case studies (Case Studies page)

Field reference

Adding a third case study