Jekyll Portfolio Development

You are working on a Jekyll-based GitHub Pages portfolio website for **Paulina Chacin** (born 2008), a high school junior preparing for college applications. The site serves as her academic and extracurricular portfolio, showcasing volunteering, events, activities, skills, and resume.

Technology Stack

Design Requirements

Theme System

1. **Dark/Light/Auto Modes**: Implement theme switcher with three options

2. **Color Scheme**: Use Catppuccin Latte (light) and Macchiato (dark) palettes

- **Latte (Light)**: Base: #eff1f5, Text: #4c4f69, Accent colors from Latte palette

- **Macchiato (Dark)**: Base: #24273a, Text: #cad3f5, Accent colors from Macchiato palette

3. **Reference Sites**: Follow design patterns from carloschac.in and vanilla-di.com

4. **Accessibility**: Ensure WCAG compliance and readable contrast ratios

5. Use semantic color naming (e.g., `--color-primary`, `--color-background`)

Content Structure

The site includes these main sections:

1. **Home/Landing Page**: Introduction and highlight reel

2. **About/Contact**: Skills, bio, contact information (email/phone to be added later)

3. **Resume**:

- Web-based resume page with print-friendly CSS

- PDF download button

- Site serves as single source of truth for resume content

- Store resume content in structured data (YAML in `_data/resume.yml`)

4. **Volunteering**: Showcase volunteer work and community service

5. **Events**: Participation in academic and extracurricular events

6. **Activities**: Extra-curricular activities and achievements

Development Workflow

Local Development Commands

```bash

Install dependencies

bundle install

Serve locally with live reload

bundle exec jekyll serve

Serve with drafts

bundle exec jekyll serve --drafts

Build for production

bundle exec jekyll build

Clear cache and rebuild

bundle exec jekyll clean && bundle exec jekyll build

```

Important Behaviors

Jekyll Architecture

Directory Structure

Theme Implementation Strategy

1. Override Minima theme by creating custom layouts in `_layouts/`

2. Create theme switcher using JavaScript in `assets/js/`

3. Define Catppuccin color variables in `_sass/` using CSS custom properties

4. Use `prefers-color-scheme` media query for auto mode

5. Implement theme persistence using localStorage

Configuration Updates

When updating `_config.yml`:

Content Management

Adding New Content

Front Matter Template

```yaml

---

layout: page

title: Page Title

permalink: /url-path/

---

```

Styling Guidelines

Academic & Professional Tone

Catppuccin Color Variables

Define CSS custom properties in `_sass/` for both themes:

```scss

:root {

/* Latte (light mode) */

--color-base: #eff1f5;

--color-text: #4c4f69;

/* Add other Latte colors */

}

[data-theme="dark"] {

/* Macchiato (dark mode) */

--color-base: #24273a;

--color-text: #cad3f5;

/* Add other Macchiato colors */

}

```

Privacy & Security

Instructions for Claude Code

When working on this project:

1. **Always read** `_config.yml` first to understand current site configuration

2. **Test locally** using `bundle exec jekyll serve` before committing changes

3. **Maintain consistency** with Catppuccin color scheme and academic tone

4. **Use structured data** in `_data/` for resume and other structured content

5. **Implement responsive design** for all new pages and components

6. **Preserve accessibility** in all changes (WCAG compliance)

7. **Document** any new collections or data structures in `_config.yml`

8. **Follow Jekyll conventions** for layouts, includes, and data files

9. **Keep resume web version synchronized** with PDF version

10. **Restart Jekyll server** after any `_config.yml` changes

When asked to add new sections or features, always: