CLAUDE.md

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

Project Overview

Academic portfolio website for Xu (Eric) Wang, built with Jekyll using the Academic Pages template (based on Minimal Mistakes theme). Hosted on GitHub Pages at https://xvwang.info.

Common Commands

# Local development
bundle install                           # Install dependencies (first time)
bundle exec jekyll serve -l -H localhost # Serve locally at localhost:4000

# If permission errors occur
bundle config set --local path 'vendor/bundle'
bundle install

# Docker alternative
docker compose up                        # Serve at localhost:4000

Note: Changes to _config.yml require restarting the Jekyll server.

Architecture

Content Structure

_pages/ - Main pages (about.md, publications.md, teaching.md, cv.md)
_data/navigation.yml - Navigation menu configuration
_config.yml - Site settings, author profile, social links, SEO configuration
files/ - PDFs, images, downloadable files (accessible at /files/filename)
images/ - Site images (profile.png for author photo)

Layouts

archive - List-style pages (publications, teaching)
single - Standalone content pages

Custom CSS Classes (in `_sass/layout/_page.scss`)

<!-- Flex container for icon rows (SDG icons) -->
<div class="flex-icons">
  <img src="/files/icon.png" alt="Description">
</div>

<!-- Flex container for larger images (student cards) -->
<div class="flex-cards">
  <img src="/files/image.png" alt="Description">
</div>

Collapsible Content

Important: <details> must be on separate lines from markdown text for proper rendering.

1. Paper title... [[Paper]](link)
   <details>
   <summary>BibTeX</summary>
   <pre>@article{...}</pre>
   </details>

A copy button is automatically added to BibTeX blocks via JavaScript in _includes/head/custom.html.

Page Timestamps

Add last_updated: YYYY-MM-DD to page front matter to display update date:

---
title: "Page Title"
last_updated: 2026-02-02
---

News Section (`_pages/about.md`)

Rule: Always show only 3 news items visible, older items go to collapsed section.

When adding new news:

Add the new item at the top of the News section
Move the 4th item into the <details> “Older News” section (as the first item there)
Keep exactly 3 items visible above the fold

Publications (`_pages/publications.md`)

Format for adding new papers:

1. <small>⭐</small> **X. Wang**, Co-authors, "Title," *Journal*, vol. X, pp. X-X, Year. [[Paper]](url)
   <details>
   <summary>BibTeX</summary>
   <pre>@article{Key,
  author={...},
  title={...},
  journal={...},
  year={...}
}</pre>
   </details>

Use <small>⭐</small> prefix to highlight important/first-author papers
Bold author name with **X. Wang**
Remember to update numbering when adding new entries

Adding Content

New page: Create markdown in _pages/ with front matter, add to _data/navigation.yml
Files/PDFs: Place in files/, reference as /files/filename.pdf
Author links: Edit author: section in _config.yml

Theme & Styling

_sass/theme/ - Theme color variants (default, air, contrast, etc.)
_sass/theme/_default_dark.scss - Dark mode CSS variables
site_theme in _config.yml (line 11) sets active theme

SEO Configuration (`_config.yml`)

og_image - Social media preview image
og_description - Social media description
breadcrumbs - Enable/disable breadcrumb navigation
social.links - Structured data for search engines

Image Optimization

Compress images before adding, especially thumbnails
Use convert image.png -colors 256 -strip output.png for PNG compression
Profile images: ~400px for sidebar display

Xu (Eric) Wang