# CLAUDE.md This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. > Inherits from `../CLAUDE.md` — follow parent rules unless overridden here. ## Project Overview Personal portfolio website for Kevin Ho (www.kevinho.com). - **Firebase Project:** `kevinho-cb39f` - **Build Output:** `_site/` (DO NOT edit directly) ## Build Commands ```bash # Build site node build.js # Deploy npx firebase deploy --only hosting --project kevinho-cb39f # Build + Deploy node build.js && npx firebase deploy --only hosting --project kevinho-cb39f # Local preview npx serve _site ``` ## Architecture **Critical:** This project uses a custom Node.js build script (`build.js`), NOT standard Jekyll. The Gemfile exists for reference only. ### How build.js Works 1. Loads `_config.yml` settings and `_data/*.yml` files 2. Initializes LiquidJS engine with `_includes/` as partials and `_layouts/` as layouts 3. Processes all `.html` and `.md` files with front matter 4. Recursively processes `experiments/`, `about/`, and `research/` directories 5. Applies layouts specified in front matter (`layout: default`, `layout: experiment`) 6. Auto-generates `sitemap.xml` from processed pages 7. Copies `assets/` to output ### Directory Structure - `experiments/` — Interactive demos and UI experiments - `about/` — About pages (CV, etc.) - `research/` — Standalone research write-ups and analysis pages (e.g., sierra.html) - `styleguide.html` — Design system reference (not in sitemap) ## Design System See `/styleguide` for the complete visual reference. Key specs: - **Font:** Inter (weights 300, 400, 500, 600) - **Letter Spacing:** -0.02em globally - **Colors:** #111111 (text), #9ca3af (muted), #ffffff (bg), #22C55E (accent) - **Border Radius:** 4px (images), 12px (cards), 16px (device cards) - **Breakpoint:** md: 768px (mobile-first) ### Template Globals Available in all Liquid templates: - `site` — config values from `_config.yml` plus `site.data` (loaded from `_data/`) - `page` — front matter values plus `page.url` and `page.content` - `content` — rendered page content (in layouts only) ### Front Matter Options ```yaml layout: default|experiment|null # null = raw output, no layout title: Page Title description: SEO description sitemap: false # exclude from sitemap.xml sitemap_priority: 0.9 # default is 0.8 body_class: extra-classes # added to tag hide_nav: true # hides navigation ``` ## Styling Tailwind CSS loaded via CDN in `_includes/head.html`. Custom CSS in `assets/css/site.css` for anything Tailwind can't express. Design tokens in `_config.yml` under `design:` — font family, weights, colors. ## SEO `_includes/seo.html` handles Open Graph, Twitter Cards, canonical URLs, and robots directives. Every page needs `title` and `description` in front matter.