Adding and Updating Content in Dev Nexus

How Content Works

Dev Nexus has no CMS, no database, and no external API. Every piece of visible content — projects, timeline entries, articles, and nav labels — lives as a plain JavaScript array inside the component source files. The general workflow for updating any content is:

Open the relevant source file.
Edit, add, or remove entries in the data array.
Run npm run build to produce an updated dist/.

Vite’s development server hot-reloads on every save, so you can iterate on content changes instantly without rebuilding. Start the dev server with npm run dev and your browser will reflect edits in real time. Only npm run build is needed when you are ready to deploy — hot-reload is for local iteration only.

Adding a New Project (VialCard)

Projects are displayed on the SPELLS page (/projects) using the VialCard component. The four current projects are defined in an array that looks like this in the source:

const projects = [
  {
    title: 'VOID_COMMERCE',
    description: 'A headless e-commerce platform built for high-throughput transactions. Handles inventory state across distributed nodes with sub-millisecond latency.',
    tech: ['Next.js', 'TypeScript', 'Redis', 'Stripe'],
    color: 'violet',
  },
  {
    title: 'ASTRAL_ANALYTICS',
    description: 'Real-time data visualization dashboard. Ingests millions of events and renders them into comprehensible sigils and charts.',
    tech: ['React', 'D3.js', 'WebSockets', 'Node.js'],
    color: 'lime',
  },
  {
    title: 'NEXUS_ROUTER',
    description: 'A custom API gateway that intelligently routes requests based on payload weight and current server load. Reduces bottlenecking by 40%.',
    tech: ['Go', 'Docker', 'Kubernetes', 'gRPC'],
    color: 'mint',
  },
  {
    title: 'ECHO_CHAMBER',
    description: 'A decentralized messaging protocol. Messages are encrypted and fragmented across the network, reassembling only for the intended recipient.',
    tech: ['Rust', 'WebRTC', 'Cryptography', 'WASM'],
    color: 'magenta',
  },
  // Add your entry here
];

Steps to add a new project:

Locate the projects array in your source file (the component that renders the SPELLS page).
Append a new object to the array with the following shape:

{
  title: 'YOUR_PROJECT_NAME',   // All-caps, underscore-separated
  description: 'A short description of what the project does and why it matters.',
  tech: ['Tech1', 'Tech2', 'Tech3'],  // Stack labels shown as tags
  color: 'violet',              // Accent color (see options below)
}

Run npm run build.

Available color values:

Value	Appearance
`'violet'`	Electric violet glow
`'lime'`	Neon lime glow
`'mint'`	Ghost mint glow
`'magenta'`	Hot magenta glow

The project grid is laid out as 1 → 2 → 4 columns across breakpoints. Adding a fifth card will cause the grid to wrap; consider adding entries in multiples of 4 to keep the layout even.

Adding a Timeline Entry (About Page)

The career timeline is displayed on the ORIGIN page (/about). The four current entries span from 2016 to present and are defined in an array:

const timeline = [
  {
    year: '2016',
    title: 'THE HEALING ARTS',
    subtitle: 'Nursing School',
    content: 'Studied the complex biological systems of the human body. Learned triage, rapid problem-solving under pressure, and deep empathy. The ultimate legacy system.',
    icon: <Terminal />,         // A Lucide React icon component
    color: 'electric-violet',
  },
  {
    year: '2018',
    title: 'THE MERCHANTS GUILD',
    subtitle: 'Retail & Merchandising',
    content: 'Mastered the art of visual hierarchy and user flow in physical spaces. Discovered that how things are arranged dictates how people interact with them.',
    icon: <ShoppingBag />,
    color: 'ghost-mint',
  },
  {
    year: '2020',
    title: 'THE SPARK OF CURIOSITY',
    subtitle: 'First Line of Code',
    content: 'Stumbled upon a simple HTML/CSS tutorial. Realized that typing specific incantations into a black box could conjure actual structures on a screen. Hooked instantly.',
    icon: <Zap />,
    color: 'hot-magenta',
  },
  {
    year: '2022 - PRESENT',
    title: 'MASTERING THE ARCANE',
    subtitle: 'Software Engineering',
    content: 'Fully immersed in the digital ether. Building complex, scalable systems using modern frameworks. Translating human intent into machine execution.',
    icon: <Code2 />,
    color: 'neon-lime',
  },
];

Each entry renders as an alternating left/right card along a glowing vertical timeline. The icon field takes any Lucide React icon component. The color field accepts any Tailwind color token defined in the project’s theme (e.g., 'electric-violet', 'ghost-mint', 'hot-magenta', 'neon-lime').

Adding a Writing Article

Writing articles are displayed on the SCROLLS page (/writing). The three current articles are defined as:

const articles = [
  {
    date: '2023.10.14',
    title: 'THE ALCHEMY OF STATE MANAGEMENT',
    excerpt: 'Transforming chaotic prop-drilling into a unified, predictable flow of data. A deep dive into modern context patterns and when to reach for heavier external stores.',
    color: 'hot-magenta',
  },
  {
    date: '2023.07.22',
    title: 'SUMMONING DEMONS: A GUIDE TO BACKGROUND WORKERS',
    excerpt: 'How to offload heavy computational rituals to background processes without losing track of their state or sacrificing the user experience.',
    color: 'electric-violet',
  },
  {
    date: '2023.03.05',
    title: 'WARDING AGAINST INJECTION ATTACKS',
    excerpt: 'Basic defensive incantations every developer should know. Sanitizing inputs is not just good practice, it is the only thing keeping the dark forces at bay.',
    color: 'neon-lime',
  },
];

Each article card features a large drop-cap from the first character of excerpt, a READ_SCROLL → button, and decorative sigil dividers between entries. To add a new article, append a new object:

{
  date: 'YYYY.MM.DD',    // Displayed as [ YYYY.MM.DD ]
  title: 'YOUR_ARTICLE_TITLE',
  excerpt: 'A paragraph summarizing the article. The first character will be rendered as an oversized drop-cap.',
  color: 'electric-violet',  // Controls date label and drop-cap color
}

Adding a Nav Link

The top navigation bar is driven by the navLinks array in the NavBar component:

const navLinks = [
  { path: '/',             label: 'PORTAL'  },
  { path: '/about',        label: 'ORIGIN'  },
  { path: '/projects',     label: 'SPELLS'  },
  { path: '/skills',       label: 'ARSENAL' },
  { path: '/writing',      label: 'SCROLLS' },
  { path: '/case-studies', label: 'RITUALS' },
  { path: '/contact',      label: 'SUMMON'  },
];

To add a new nav link:

Append an entry to the navLinks array:

{ path: '/new-page', label: 'NEW_LABEL' },

Add the corresponding <Route> in your router configuration:

<Route path="/new-page" element={<YourNewPage />} />

Create the page component that the route renders.
If you also want the page accessible as a direct URL (for GitHub Pages compatibility), create a corresponding static shell at pages/NewPage.html following the same pattern as the existing shells — set window.__STATIC_PAGE_ROUTE__ and the hash redirect to #/new-page.
Rebuild: npm run build.

Nav links are hidden on mobile and displayed in a horizontal row on md and larger screens. If you add many links, consider the available horizontal space and adjust the space-x-8 spacing class in NavBar accordingly.

Updating Personal Info (Home Page)

The PORTAL page (/) displays the developer’s name and title inside a rotating sigil diagram. These are hardcoded directly in the JSX:

// Name — find this in the Home page component
<h1>
  ALEX
  <br />
  CHEN
</h1>

// Title — immediately below the name
<div>SOFTWARE_DEVELOPER</div>

To update them, find these string literals in the Home page source and replace them with your own name and title.

Radial Nav Nodes (SigilDiagram)

Surrounding the central name panel are six radial navigation nodes defined in a configuration array:

const sigilNodes = [
  { path: '/about',        label: 'ORIGIN',  angle: 0,   color: 'text-electric-violet', glow: 'glow-violet'  },
  { path: '/projects',     label: 'SPELLS',  angle: 60,  color: 'text-neon-lime',        glow: 'glow-lime'    },
  { path: '/skills',       label: 'ARSENAL', angle: 120, color: 'text-ghost-mint',        glow: 'glow-mint'    },
  { path: '/writing',      label: 'SCROLLS', angle: 180, color: 'text-hot-magenta',      glow: 'glow-magenta' },
  { path: '/case-studies', label: 'RITUALS', angle: 240, color: 'text-electric-violet', glow: 'glow-violet'  },
  { path: '/contact',      label: 'SUMMON',  angle: 300, color: 'text-neon-lime',        glow: 'glow-lime'    },
];

Each node is positioned by converting its angle (in degrees) to an x/y offset from the center of the diagram. The nodes are evenly spaced at 60° intervals around a circle of radius 260px. If you add a new route and want it represented in the sigil, add a new entry and adjust the angles so they remain evenly distributed (e.g., 5 nodes → 72° apart, 6 nodes → 60° apart).

Adding a New Case Study

The RITUALS page (/case-studies) currently renders a single hardcoded case study: MIGRATION OF THE LEGACY MONOLITH. The study is divided into five sections:

Section	Heading	Color
I	`INTENT`	Electric violet
II	`MATERIALS`	Hot magenta
III	`METHOD`	Neon lime
IV	`OUTCOME`	Ghost mint
V	`LESSONS`	Electric violet

To support multiple case studies, convert the page to map over an array following the same five-section structure:

const caseStudies = [
  {
    id: '0x7A9B',
    title: 'MIGRATION OF THE LEGACY MONOLITH',
    subtitle: 'A comprehensive restructuring of a 5-year-old monolithic application into a distributed microservices architecture without disrupting active users.',
    intent: [
      'The existing monolith had grown too unwieldy. Build times exceeded 45 minutes.',
      'Goal: decouple core domains (Auth, Billing, Inventory) into independent services.',
    ],
    materials: ['Node.js / Express', 'Docker & Kubernetes', 'PostgreSQL', 'Redis (Pub/Sub)', 'GraphQL Federation'],
    method: '...',
    outcome: '...',
    lessons: '...',
  },
  // Add more entries here
];

Then update the page component to render caseStudies.map(study => <CaseStudySection key={study.id} {...study} />) instead of the hardcoded JSX block.

Theming & Design

Deployment

Adding and Updating Content in Dev Nexus

How Content Works

Adding a New Project (VialCard)

Adding a Timeline Entry (About Page)

Adding a Writing Article

Adding a Nav Link

Updating Personal Info (Home Page)

Radial Nav Nodes (SigilDiagram)

Adding a New Case Study

Build docs developers (and LLMs) love

Theming & Design

Deployment

Documentation Index

​How Content Works

​Adding a New Project (VialCard)

​Adding a Timeline Entry (About Page)

​Adding a Writing Article

​Adding a Nav Link

​Updating Personal Info (Home Page)

​Radial Nav Nodes (SigilDiagram)

​Adding a New Case Study

Build docs developers (and LLMs) love

How Content Works

Adding a New Project (VialCard)

Adding a Timeline Entry (About Page)

Adding a Writing Article

Adding a Nav Link

Updating Personal Info (Home Page)

Radial Nav Nodes (SigilDiagram)

Adding a New Case Study