Modular Personal Website Platform

Full-Stack, Theme-Aware, and Extensible Personal Site for Developers

Problem

Most personal websites are either static portfolio pages with hardcoded content or heavyweight CMS setups that are not developer-friendly and don’t integrate well with modern workflows (JSON CVs, AI/KB chats, Supabase auth, admin tools). I needed a single codebase that could:

• pull my CV from a JSON Resume source,
• serve a chat backed by my own JSON knowledge base,
• provide an admin area with actual utilities (REST tester, server monitor),
• use Supabase OAuth for gated modules,
• and be modular, so new tools can be dropped in without touching the core app.

So this project is my open-source, Next.js-based answer to “what if a personal website was actually a developer console?”

---

Approach

I built the site on a modern, batteries-included stack:

• Next.js (App Router) + TypeScript for structured, typed React
• Tailwind CSS + CSS variables for live theming and dark mode
• Supabase for OAuth (GitHub) and Postgres persistence
• External JSON sources (JSON Resume Gist + JSON KB) for content
• Modular architecture where each module can register:
  • API routes (/api/modules/...)
  • Admin UI (/admin/modules/...)
  • Public pages
  • Floating, theme-aware widgets

Content is not hardcoded — profile, links, and summary come from the JSON Resume; the chat pulls from a JSON KB; modules store their own state in Supabase. That makes the whole site portable, CI/CD-friendly, and easy to rebuild from config.

---

Features

1. Content & Data

• JSON Resume Gist → fills profile header, links, and “about”
• JSON Knowledge Base → powers the on-site chat
• Supabase Postgres → stores module data (saved REST calls, monitors)

2. Theming

• Live theme editor that updates global CSS vars at runtime
• Dark mode support (prefers-color-scheme + .dark)
• Floating widgets automatically inherit the current theme

3. Authentication

• Supabase OAuth (GitHub) for admin access
• Admin area at /admin
• Server-side routes can use Supabase service-role key for privileged actions

4. Modular Architecture

Each module ships like a mini-feature:

• manifest.json (metadata)
• admin.tsx (admin UI)
• server/route.ts (API endpoint)
• public/widget.js (optional floating widget)
• migrations/*.sql (DB changes)
• install.js / uninstall.js (helpers)

This lets you copy modules/rest-tester/ to bootstrap new functionality.

5. Built-in Modules

• REST API Tester
  • Save/enable/disable requests
  • Auth presets (Bearer, Basic, API key)
  • Draggable/resizable UI
  • Floating widget for admins, theme-aware
• Server Monitor
  • Admin-configurable HTTP checks
  • Status panel
  • Extensible for custom checks
• Chat
  • Answers from JSON KB
  • Theme-aware UI
  • Swappable KB backend

---

My Role

• Architecture & design
  • Defined the modular layout (modules → API + Admin + Widget)
  • Chose Next.js App Router + Supabase as the core
• Full-stack development
  • Implemented content ingestion from JSON Resume Gist
  • Built the theme system (CSS vars, dark mode, live editor)
  • Implemented Supabase OAuth (GitHub) and admin gating
  • Wrote example modules (REST Tester, Server Monitor)
• Data & DX
  • Standardized module migrations (SQL + install scripts)
  • Structured the app to be deployable with just .env.local
• AI/KB integration
  • Integrated JSON knowledge base as chat backend
  • Made chat a replaceable module
• Documentation
  • Wrote setup steps (env, Supabase config, migrations)
  • Documented module structure so others can add features

---

Highlights

• Next.js (App Router), TypeScript, Tailwind CSS
• Supabase OAuth + Postgres
• JSON-driven content (resume + KB)
• Live theme editing
• Modular, pluggable feature system
• Admin-only utilities for real dev workflows

---

License: MIT
Status: Open source / extensible