Architecting a 100/100 Lighthouse Monochrome Portfolio & Headless CMS

Many modern engineering portfolios suffer from bloated client bundles, distracting 3D animations, and poor accessibility scores that obscure real engineering work.

When building manishj.dev, the objective was uncompromising: create an editorial, brutalist monochrome developer portfolio with 100/100 Lighthouse scores, complete keyboard accessibility (⌘K), and a headless management layer.

01 // SECTION01. Token-Driven Strict Monochrome Design System

Rather than relying on ad-hoc Tailwind classes, the entire design system is driven by semantic CSS custom properties:

:root {
  --color-bg: #09090b;
  --color-surface: #121215;
  --color-card: #141418;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-text: #f4f4f5;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;
}

This guarantees perfect contrast ratios across light and dark modes while enforcing visual discipline throughout all UI layers.

02 // SECTION02. Data Contract Isolation (DB to UI Mappers)

We strictly decoupled MongoDB documents from UI React component contracts through functional mapper functions:

// lib/content/mappers.ts
export function toProjectRowProps(doc: ProjectDbDoc): ProjectRowData {
  return {
    title: doc.title,
    slug: doc.slug,
    kicker: doc.kicker || 'PROJECT',
    year: doc.year || '2024',
    role: doc.role || 'Software Engineer',
    description: doc.description,
    image: doc.image,
    technologies: doc.technologies || [],
    liveUrl: doc.liveUrl,
    githubUrl: doc.githubUrl,
  };
}

If database schemas evolve or new fields are added, UI components remain completely unaffected.

03 // SECTION03. Performance Metrics

• Performance: 100/100 (First Contentful Paint < 0.4s)
• Accessibility: 100/100 (Full screen reader & keyboard support)
• Best Practices: 100/100
• SEO: 100/100 (Structured JSON-LD schemas for articles and case studies)