CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Build Commands

# Install dependencies
bundle install

# Run local development server (http://localhost:4000)
bundle exec jekyll serve

# Build for production
bundle exec jekyll build

Architecture

This is a Jekyll-based personal portfolio site for jtfeng.com, using the github-pages gem for hosting compatibility.

Tech Stack

• Jekyll v3.10.0 (via github-pages gem)
• Bootstrap v5.2.3 (selective imports, heavily customized)
• GSAP v3.11.5 (animation library)

Layout Hierarchy

• _layouts/default.html - Base template with nav, footer, and asset includes
• _layouts/post.html - Extends default, adds article/prose wrapper

Key Includes

• nav-top.html, footer.html - Site-wide navigation and footer
• index-header.html, index-work.html - Homepage sections
• comp-carousel-*.html - Reusable Bootstrap carousel components (item, indicator, prev-next)

SCSS Architecture (_sass/)

The main stylesheet at assets/css/styles.scss follows this structure:

1. Custom variables (colors, spacing, breakpoints) defined BEFORE Bootstrap imports
2. Selective Bootstrap component imports (only typography, images, containers, grid, carousel)
3. Custom styles (_prose.sass for article content)

Key customizations:

• Primary color: #ee3627
• 4-column grid system
• Custom breakpoints: xs(0), sm(576px), md(768px), lg(992px), xl(1316px)
• Prose max-width: 72ch

JavaScript (assets/js/)

• bootstrap.bundle.min.js - Bootstrap JS
• gsap.min.js - GreenSock animations
• main.js - Custom initialization and library version checks

Pages

• index.html - Homepage with header and work portfolio sections
• privacy.md, terms.md, disclaimer.md - Legal pages using post layout
• styleguide/index.html - Design system documentation
• 404.html - Error page

Plugins

• jekyll-feed (RSS)
• jekyll-seo-tag (meta tags)
• jekyll-sitemap (sitemap.xml)