Add Projects, Skills, Blog Posts, and More to Your Portfolio

All portfolio content in Full Stack Sorcery lives in plain JavaScript data arrays defined directly inside the React components before compilation. There is no CMS, no database, and no external API — if you can edit a JS array, you can update every section of the site. The compiled output lives at assets/main.js, but edits must be made to the source components before running vite build.

Find the right data array

Each section of the portfolio (Projects, Skills, Work, etc.) has its own array constant. Locate the array for the section you want to update in the corresponding source component.

Add your new entry following the shape

Copy an existing entry as a template. Every array enforces a specific object shape — missing or misnamed keys will silently drop data or cause rendering errors.

Rebuild with Vite

From the project root, run vite build. Vite bundles all source components into assets/main.js and assets/main.css.

Deploy

Copy the updated assets/ directory (and index.html) to your hosting provider. Because the site is a static SPA, no server-side steps are required.

Adding a Project

Projects appear on the Skeletons in the Closet page (/projects) as hanging Polaroid cards inside a creaking closet. Clicking a card opens a detail modal with the full description, tech stack, and links.

// In the projects data array (Projects component)
{
  id: 4,                    // Increment from last entry
  title: "My New Project",
  desc: "A brief spooky description of the project.",
  tech: ["React", "Node.js", "PostgreSQL"],
  image: "https://images.unsplash.com/photo-...?w=400&q=80",
  link: "https://live-site.com",
  github: "https://github.com/username/repo"
}

Field	Type	Notes
`id`	`number`	Unique integer — increment from the last entry
`title`	`string`	Displayed on the Polaroid and in the modal heading
`desc`	`string`	Shown in the modal body
`tech`	`string[]`	Rendered as teal badge pills in the modal
`image`	`string`	URL for the Polaroid thumbnail and modal image
`link`	`string`	”Live Haunt” button target
`github`	`string`	”The Bones” button target

Adding a Skill

Skills appear on the Tricks of the Trade page (/skills). Clicking the magic hat launches all skill bubbles out of it; each bubble floats and can be dragged. Bubble size is proportional to level.

// In the skills array (Skills component)
{ name: "GraphQL", category: "backend", level: 78 }
// category must be one of: "frontend" | "backend" | "design"
// level is 0-100 (controls bubble size in the magic-hat reveal)

Category controls the bubble’s glow color:

Category	Glow Color
`"frontend"`	Turquoise (`#3fd6c0`)
`"backend"`	Blue (`#60a5fa`)
`"design"`	Orange (`#f59e0b`)

Adding a Work Entry

Work history appears on the Haunts page (/work) as interactive SVG gravestones. Hovering a gravestone reveals a speech-bubble tooltip with the role details.

// In the work history array (Work component)
{
  id: 4,
  company: "NewCorp",
  role: "Principal Wraith Engineer",
  dates: "2024 - Present",
  epitaph: "Summoned features from the void.",
  details: "Led a cross-functional team to deliver..."
}

Field	Type	Notes
`id`	`number`	Unique integer
`company`	`string`	Rendered on the gravestone body
`role`	`string`	Shown in the hover tooltip heading
`dates`	`string`	Shown beneath the company name on the stone
`epitaph`	`string`	Short italic quote shown on the gravestone
`details`	`string`	Full paragraph shown in the hover tooltip

Adding a Case Study

Case studies appear on the Crypt Notes page (/case-studies) as weathered parchment cards. Clicking a card flips it open into a full-page reading modal with a drop-cap first letter.

// In the case studies array (CaseStudies component)
{
  id: 3,
  title: "The Fog of War (Deployment)",
  excerpt: "How we conquered zero-downtime deployments.",
  content: "Full body text of the case study..."
}

Field	Type	Notes
`id`	`number`	Unique integer
`title`	`string`	Card heading and modal title
`excerpt`	`string`	Short summary shown on the card
`content`	`string`	Full body text rendered in the modal; the first character is automatically styled as a decorative drop-cap

Adding a Blog Post

Blog posts appear on the Things That Go Bump in the Blog page (/blog) as books standing on a shelf. Each book spine shows the title vertically and a row of ghost icons representing spookiness. Clicking a book opens a reading modal.

// In the blog posts array (Blog component)
{
  id: 4,
  title: "The Specter of Tech Debt",
  spookiness: 4,             // 1 (mildly eerie) to 5 (terrifying)
  color: "bg-spooky-navy",  // Book spine color
  content: "Full blog post body text..."
}

Field	Type	Notes
`id`	`number`	Unique integer
`title`	`string`	Displayed vertically on the book spine and in the modal heading
`spookiness`	`number`	Integer 1–5; controls how many ghost icons are filled on the spine
`color`	`string`	Tailwind `bg-*` class applied to the book spine element
`content`	`string`	Full post body text shown in the reading modal

Accepted color values (keep to dark tones so the cream spine text stays legible):

"bg-spooky-navy"      // #0a2a2f — default dark teal
"bg-spooky-midnight"  // #0d1f24 — near-black
"bg-[#1f4b54]"        // arbitrary deep teal (used in sample data)

Match spookiness to the post’s actual tone. Use 1–2 for light, educational technical posts and 4–5 for harrowing production war stories. The ghost rating sets reader expectations before they even open the book.

Adding a Testimonial

Testimonials appear on the They Survived page (/testimonials) as a Polaroid-style carousel. Each entry auto-advances every 6 seconds with a “BOO!” flash between transitions.

// In the testimonials array (Testimonials component)
{
  id: 4,
  name: "Bride of Frankenstein",
  role: "CTO, Monster Labs",
  text: "Absolutely electrifying work. My expectations were exceeded by a jolt.",
  image: "https://images.unsplash.com/photo-...?w=150&q=80"
}

Field	Type	Notes
`id`	`number`	Unique integer
`name`	`string`	Displayed as the Polaroid’s display-font byline
`role`	`string`	Shown in small-caps beneath the name
`text`	`string`	The testimonial quote body
`image`	`string`	Avatar URL — rendered as a sepia-tinted circle, `150×150` recommended

The sample data uses Unsplash CDN URLs (images.unsplash.com?w=150&q=80) as placeholder avatars. For a production portfolio, replace these with your own hosted images to avoid dependency on a third-party CDN and ensure the correct people are pictured.

Nav Items Reference

The navigation array drives both the home page portal grid and the slide-out sidebar menu. Each entry maps a route to its spooky label, sublabel, description, icon component, and accent color.

// Nav items array — for reference only, matches existing routes
{
  id: "projects",
  path: "/projects",
  label: "Skeletons",          // Large display label shown on cards
  sublabel: "Projects",        // Small utility label shown above the display label
  description: "Things I built — still rattling",
  icon: CodeIcon,              // Lucide React icon component
  accent: "orange"             // "turquoise" | "aqua" | "orange"
}

The accent field controls which color variant (turquoise, aqua, or orange) is applied to the nav card’s border, background tint, and icon on hover.

Since the site is compiled with Vite, all content edits must be made to the source component files before running vite build. The compiled assets/main.js is a minified bundle and cannot be safely edited directly in production. Always edit the source, rebuild, then deploy the updated assets/ directory.

Architecture

Customization

Add Projects, Skills, Blog Posts, and More to Your Portfolio

Adding a Project

Adding a Skill

Adding a Work Entry

Adding a Case Study

Adding a Blog Post

Adding a Testimonial

Nav Items Reference

Build docs developers (and LLMs) love

Architecture

Customization

Documentation Index

​Adding a Project

​Adding a Skill

​Adding a Work Entry

​Adding a Case Study

​Adding a Blog Post

​Adding a Testimonial

​Nav Items Reference

Build docs developers (and LLMs) love

Adding a Project

Adding a Skill

Adding a Work Entry

Adding a Case Study

Adding a Blog Post

Adding a Testimonial

Nav Items Reference