Replacing guest-portfolio.dev Demo Content with Your Own

guest-portfolio.dev ships with placeholder content — a fictional developer called “guest”. To make the portfolio your own, you only need to edit four component files and one utility. Each section below maps a piece of visible portfolio content to the exact file and data structure that controls it.

Replace All Demo Content

Update your bio

Edit components/outputs/AboutOutput.js to replace the neofetch-style system stats and bio paragraphs with your own details. (jump to section)

Update your skills

Edit the c array in components/outputs/SkillsOutput.js to list your own technologies, proficiency levels, and categories. (jump to section)

Update your career history

Edit the t array in components/outputs/GitLogOutput.js to replace the fake commits with your real roles and accomplishments. (jump to section)

Update your case studies

Edit the n object in components/outputs/ManOutput.js and add matching entries in utils/fileSystem.js under case-studies/. (jump to section)

Customise the boot messages

Edit the n array in components/BootSequence.js to change the BIOS boot text shown on first load. (jump to section)

Update your references log

Edit the inline JSX in Terminal.js that renders when cat references.log is run. (jump to section)

Need to add completely new pages, directories, or files to the filesystem — for example, a new talks/ directory or an awards.md file? See the Filesystem customization guide for the full node schema and step-by-step instructions.

1. Bio (`AboutOutput.js`)

File: components/outputs/AboutOutput.js This component renders when a visitor runs cat about.md or whoami. It displays a neofetch-style layout: ASCII art on the left (hidden on small screens) and a grid of key-value system stats on the right, followed by two bio paragraphs.

System Stats Grid

All stat values are hardcoded JSX <span> elements. Replace each one with your own information:

// components/outputs/AboutOutput.js

// Key-value pairs in the grid — edit the right-hand <span> values:
<span>OS:</span>        <span>Arch Linux x86_64 (btw)</span>
<span>Host:</span>      <span>Human Body v1.0</span>
<span>Uptime:</span>    <span>28 years, 4 months, 12 days</span>   {/* your age */}
<span>Packages:</span>  <span>1337 (npm), 42 (pip)</span>          {/* your package counts */}
<span>Shell:</span>     <span>zsh 5.8</span>
<span>Editor:</span>    <span>nvim</span>
<span>Languages:</span> <span>TypeScript, Python, Rust, Go</span>
<span>Coffee:</span>    <span>4 cups/day</span>
<span>Sleep:</span>     <span className="text-terminal-red">Error: process not found</span>

Bio Paragraphs

Directly below the grid, two <p> tags hold the bio text. Replace both:

<p className="mb-4">
  Full-stack developer specializing in building exceptional digital
  experiences. Currently focused on building accessible, human-centered
  products at scale.
</p>
<p>
  When I'm not at the computer, I'm usually reading sci-fi, tinkering
  with mechanical keyboards, or trying to brew the perfect shot of espresso.
</p>

ASCII Art (Optional)

The ASCII art is defined as a template literal string s at the very top of the component. Replace it with any ASCII art that represents you — generators like asciiart.eu are a good starting point:

const s = `
      .----.
    _.'__    '.
   // your   \\
  //  art     \\
  \`-----------'
`;

2. Skills (`SkillsOutput.js`)

File: components/outputs/SkillsOutput.js Rendered when a visitor runs ./skills.sh. Skills animate in one by one with filled progress bars.

The Skills Array

All skills are defined in the c array. Each entry is an object with three fields:

// components/outputs/SkillsOutput.js
const c = [
  { name: "TypeScript", percent: 90, category: "Languages"  },
  { name: "Python",     percent: 85, category: "Languages"  },
  { name: "Rust",       percent: 60, category: "Languages"  },
  { name: "React",      percent: 95, category: "Frameworks" },
  { name: "Node.js",    percent: 85, category: "Frameworks" },
  { name: "Next.js",    percent: 80, category: "Frameworks" },
  { name: "Docker",     percent: 75, category: "Tools"      },
  { name: "Git",        percent: 90, category: "Tools"      },
  { name: "AWS",        percent: 70, category: "Tools"      },
];

Field	Type	Description
`name`	`string`	Technology name displayed in the left column
`percent`	`number`	Proficiency from `0`–`100`; controls the filled bar length
`category`	`string`	Must match an entry in the `m` array to be displayed

3. Career History (`GitLogOutput.js`)

File: components/outputs/GitLogOutput.js Rendered when a visitor runs git log. Each role in your career is represented as a fake git commit entry, complete with a short hash, author, date, and a multi-line commit message.

The Commits Array

// components/outputs/GitLogOutput.js
const t = [
  {
    hash:    "a1b2c3d",
    author:  "guest <guest@portfolio.dev>",
    date:    "Mon Oct 24 09:00:00 2023 -0400",
    message: `feat(career): Senior Frontend Engineer at TechCorp

- Led migration from Vue to React
- Mentored 3 junior developers
- Reduced bundle size by 40%`,
  },
  {
    hash:    "e4f5g6h",
    author:  "guest <guest@portfolio.dev>",
    date:    "Wed Jun 15 10:30:00 2021 -0400",
    message: `feat(career): Full Stack Developer at StartupInc

- Built MVP from scratch using Next.js and Node
- Implemented CI/CD pipelines
- Handled 10k daily active users`,
  },
  {
    hash:    "i7j8k9l",
    author:  "guest <guest@portfolio.dev>",
    date:    "Mon Jan 10 08:15:00 2019 -0500",
    message: `feat(career): Junior Web Developer at AgencyLLC

- Developed WordPress themes
- Created responsive landing pages
- Learned the hard way not to force push to main`,
  },
];

Field	Type	Description
`hash`	`string`	7-character short hash — any alphanumeric string works
`author`	`string`	Displayed in the `Author:` line; replace with your name and email
`date`	`string`	Full date string in git log format; used for the `Date:` line
`message`	`string`	Template literal — the first line is the subject, subsequent lines are the body; supports `\n`

List roles in reverse chronological order (most recent first) to match the convention of git log.

4. Case Studies (`ManOutput.js`)

File: components/outputs/ManOutput.js Rendered when a visitor runs man [page]. Each case study is a full manual-page layout with NAME, SYNOPSIS, DESCRIPTION, and CHALLENGES sections written as JSX.

The Pages Object

// components/outputs/ManOutput.js
const n = {
  "migration-to-k8s": (
    <>
      <div className="font-bold mb-2">NAME</div>
      <div className="ml-8 mb-4">
        migration-to-k8s - A case study on moving a monolith to Kubernetes
      </div>

      <div className="font-bold mb-2">SYNOPSIS</div>
      <div className="ml-8 mb-4">
        <span className="font-bold">migrate</span> [OPTIONS]{" "}
        <span className="underline">monolith</span>{" "}
        <span className="underline">microservices</span>
      </div>

      <div className="font-bold mb-2">DESCRIPTION</div>
      <div className="ml-8 mb-4 max-w-3xl">
        The <span className="font-bold">migration-to-k8s</span> project involved
        breaking down a 5-year-old Ruby on Rails monolith into Go and Node.js
        microservices, orchestrated via Kubernetes.
        <br /><br />
        This resulted in a 40% reduction in infrastructure costs and improved
        deployment frequency from bi-weekly to multiple times a day.
      </div>

      <div className="font-bold mb-2">CHALLENGES</div>
      <div className="ml-8 mb-4 max-w-3xl">
        - Zero-downtime database migration using the strangler fig pattern.<br />
        - Training the existing engineering team on container orchestration.<br />
        - Setting up robust observability with Prometheus and Grafana.
      </div>
    </>
  ),
};

Adding a New Case Study

Add a key to n in ManOutput.js and write your JSX following the same NAME / SYNOPSIS / DESCRIPTION / CHALLENGES pattern:

const n = {
  "migration-to-k8s": ( /* existing */ ),

  "realtime-dashboard": (
    <>
      <div className="font-bold mb-2">NAME</div>
      <div className="ml-8 mb-4">
        realtime-dashboard - Building a live analytics dashboard with WebSockets
      </div>
      {/* ... SYNOPSIS, DESCRIPTION, CHALLENGES */}
    </>
  ),
};

Add a matching file to the case-studies/ directory in utils/fileSystem.js so that ls case-studies shows the entry and man realtime-dashboard can look it up:

// utils/fileSystem.js — inside case-studies children
"realtime-dashboard": {
  name:        "realtime-dashboard",
  type:        "file",
  permissions: "-rw-r--r--",
  size:        "4096",
  date:        "Jan 15 09:00",
  content:     "case:realtime-dashboard"
}

The man command in Terminal.js passes the argument directly to ManOutput as the page prop, which looks up n[page] to find the right JSX block.

5. Boot Sequence (`BootSequence.js`)

File: components/BootSequence.js The boot sequence plays once when the page first loads, printing lines to the screen one by one before handing off to the terminal. All messages are defined in the n array of strings:

// components/BootSequence.js
const n = [
  "BIOS Date 10/24/98 14:22:10 Ver 08.00.15",
  "CPU: GenuineIntel(R) Processor - 400MHz",
  "Speed: 400MHz",
  "Memory Test: 65536K OK",
  "",
  "Initializing USB Controllers .. Done.",
  "Auto-Detecting Pri Master .. IDE Hard Disk",
  "Auto-Detecting Pri Slave  .. Not Detected",
  "Auto-Detecting Sec Master .. ATAPI CD-ROM",
  "",
  "Booting from Hard Disk...",
  "Loading OS kernel...",
  "[ OK ] Started System Logging Service.",
  "[ OK ] Started Network Manager.",
  "[ OK ] Reached target Network.",
  "[ OK ] Started SSH Daemon.",
  "",
  "Welcome to DEV-OS v2.4.1 (tty1)",
  "",
];

Edit any line in n to change the boot messages. Empty strings ("") render as blank lines. The final "Welcome to …" line is a good place to put your own OS name or tagline. Each line is printed with a randomised delay between 50 ms and 250 ms to simulate a real BIOS POST sequence.

6. References Log (`fileSystem.js` + `Terminal.js`)

The content displayed by cat references.log is not stored in fileSystem.js — it is rendered as inline JSX directly inside the cat handler in Terminal.js. Locate the references.log branch and replace the three hardcoded log lines with your own:

// components/Terminal.js — inside the cat command handler
} else if (node.name === "references.log") {
  output = (
    <div className="my-2 text-terminal-white flex flex-col gap-2">
      <div>
        [2023-10-24 14:32:01] INFO: "Incredible developer, shipped our MVP
        in record time." - CEO, StartupInc
      </div>
      <div>
        [2022-05-12 09:15:44] INFO: "The cleanest code I've ever reviewed."
        - Lead Engineer, TechCorp
      </div>
      <div>
        [2021-11-03 16:45:22] WARN: "Drinks too much coffee, but gets the
        job done." - Product Manager
      </div>
    </div>
  );
}

Each <div> is one log line. The timestamp and log level prefix (INFO, WARN, ERROR) are purely cosmetic — use whatever format suits your references. Add or remove <div> entries as needed.

Overview

Terminal Commands

Components

Customization

Replacing guest-portfolio.dev Demo Content with Your Own

Replace All Demo Content

1. Bio (`AboutOutput.js`)

System Stats Grid

Bio Paragraphs

ASCII Art (Optional)

2. Skills (`SkillsOutput.js`)

The Skills Array

Categories

3. Career History (`GitLogOutput.js`)

The Commits Array

4. Case Studies (`ManOutput.js`)

The Pages Object

Adding a New Case Study

5. Boot Sequence (`BootSequence.js`)

6. References Log (`fileSystem.js` + `Terminal.js`)

Build docs developers (and LLMs) love

Overview

Terminal Commands

Components

Customization

Documentation Index

​Replace All Demo Content

​1. Bio (AboutOutput.js)

​System Stats Grid

​Bio Paragraphs

​ASCII Art (Optional)

​2. Skills (SkillsOutput.js)

​The Skills Array

​Categories

​3. Career History (GitLogOutput.js)

​The Commits Array

​4. Case Studies (ManOutput.js)

​The Pages Object

​Adding a New Case Study

​5. Boot Sequence (BootSequence.js)

​6. References Log (fileSystem.js + Terminal.js)

Build docs developers (and LLMs) love

Replace All Demo Content

1. Bio (`AboutOutput.js`)

System Stats Grid

Bio Paragraphs

ASCII Art (Optional)

2. Skills (`SkillsOutput.js`)

The Skills Array

Categories

3. Career History (`GitLogOutput.js`)

The Commits Array

4. Case Studies (`ManOutput.js`)

The Pages Object

Adding a New Case Study

5. Boot Sequence (`BootSequence.js`)

6. References Log (`fileSystem.js` + `Terminal.js`)