Develop and maintain Paulina Chacin's Jekyll-based GitHub Pages portfolio with Catppuccin theming and college prep content.
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.
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`)
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
```bash
bundle install
bundle exec jekyll serve
bundle exec jekyll serve --drafts
bundle exec jekyll build
bundle exec jekyll clean && bundle exec jekyll build
```
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
When updating `_config.yml`:
```yaml
---
layout: page
title: Page Title
permalink: /url-path/
---
```
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 */
}
```
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:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/jekyll-portfolio-development/raw