CLAUDE.md

CLAUDE.md

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

What This Is

Personal portfolio site for Anshid (AI/ML professional). Built with Jekyll and deployed to GitHub Pages at anshid.github.io. No Node.js, no bundler — Jekyll handles Sass compilation and static site generation natively.

Development Commands

# Serve locally with live reload
bundle exec jekyll serve

# Build for production
bundle exec jekyll build

# Install Ruby dependencies (first time)
bundle install

The site is served at http://localhost:4000 by default. Jekyll auto-regenerates on file changes.

Architecture

Jekyll static site — Liquid templating, Markdown content, single SCSS file.

Layer Files Notes
Templates _layouts/default.html, home.html, page.html default.html is the master shell
Components _includes/header.html, footer.html Header has fixed nav with mobile toggle; footer has social links and CV links
Styling assets/css/main.scss All CSS and Google Fonts import live here; Jekyll compiles it to main.css
Content index.md, about.md, projects.md, teaching.md Top-level pages in nav
Hidden pages certifications.md, blog.md Exist but not linked in the nav bar
Sub-pages projects/*.md, courses/*.md Individual project and course detail pages
Teaching philosophy ClassPhilosophy/*.md Uses explicit permalink: to route into /teaching/ URL space
Config _config.yml Site title, description, header_pages list (unused by nav — see below)

JavaScript: Minimal — inline JS in header.html handles the mobile nav toggle. Pages can opt into Mermaid diagram rendering by setting use_mermaid: true in their front matter; default.html then loads Mermaid from CDN.

URL Routing Gotcha: ClassPhilosophy/

Files in ClassPhilosophy/ would normally generate URLs like /ClassPhilosophy/my-first-class/. They instead use explicit permalink: in their front matter to route into the teaching section:

permalink: /teaching/first-class/

Any new file placed outside its intended URL hierarchy must do the same, or Jekyll will use the directory path as the URL.

Static Assets

  • assets/css/main.scss — compiled to main.css by Jekyll
  • assets/favicon.svg — site favicon
  • assets/files/AIML_Engineer.pdf and Teaching.pdf — CVs linked from the footer
  • assets/OTML/CH01.pdfCH16.pdf — Optimization for Machine Learning course slides

The course slide pages (courses/optimization.md, courses/calculus.md) currently use # placeholder links. When linking actual PDFs, use /assets/OTML/CHxx.pdf.

Design System

Defined as CSS custom properties at the top of main.scss:

  • Theme: dark (#0b0f19 base, #131a2a surface) with blue/purple accents (#3b82f6, #8b5cf6)
  • Fonts: Outfit (headings), Inter (body) — imported via @import url(...) at the top of main.scss
  • Cards: .modern-card with glassmorphism (backdrop-filter, semi-transparent bg)
  • Grid: .modern-grid uses auto-fill with minmax(300px, 1fr)
  • Buttons: .btn base + .btn-primary modifier
  • Sections: .section-title for headings within content pages
  • Teaching roles: .role-tile with .role-header for institution/date layout (used only in teaching.md)

When adding new styled components, follow the existing CSS variable conventions and add styles to main.scss (not inline).

Content Workflow

  • Adding a new project: create projects/<slug>.md with front matter (layout: page, title:, description:), then add a card entry in projects.md
  • Adding a course page: create courses/<slug>.md with layout: page, then link it from teaching.md
  • Adding a nav page: create the Markdown file AND manually add the link to _includes/header.html — the header_pages list in _config.yml does not drive the nav bar (the nav is hardcoded in header.html)
  • Front matter: layout: page wraps content in the standard article container; layout: home is for the index only; add use_mermaid: true to any page that needs Mermaid diagrams
  • Teaching philosophy letters: place in ClassPhilosophy/ with an explicit permalink: pointing into /teaching/, then add the link to teaching.md