JvB logo

CLAUDE.md - AI Assistant Guide for jareth.github.io

Project Overview

This is a personal portfolio website (jareth.github.io) for Jareth van Bone, deployed via GitHub Pages. The site showcases professional experience, projects, and serves as a digital presence.

Project Type: Jekyll-based static website with Tailwind CSS Deployment: GitHub Pages Primary Purpose: Portfolio and professional showcase

Technology Stack

Core Technologies

Build Tools

Jekyll Plugins

# GitHub Pages compatible
- jekyll-default-layout
- jekyll-optional-front-matter
- jekyll-titles-from-headings
- jekyll-relative-links

# Custom plugins
- jekyll-feed
- jekyll-sitemap
- jekyll-seo-tag

Directory Structure

jareth.github.io/
├── _config.yml              # Jekyll configuration
├── _data/
│   ├── manifest.yml         # Webpack manifest (auto-generated)
│   └── navigation.yml       # Site navigation structure
├── _includes/
│   ├── analytics.html       # Analytics tracking
│   ├── navigation.html      # Navigation component
│   └── video.html          # Video embed component
├── _layouts/
│   ├── default.html        # Base layout template
│   ├── post.html           # Blog post layout
│   └── project.html        # Project detail layout
├── _posts/                 # Blog posts (date-based: YYYY-MM-DD-title.md)
├── _projects/              # Project case studies (Jekyll collection)
├── assets/
│   ├── css/
│   │   └── site.css        # Main CSS entry point (Tailwind imports)
│   └── images/             # Image assets
├── dist/                   # Webpack output (committed to repo)
│   ├── main.[hash].css     # Compiled CSS
│   └── main.[hash].js      # Compiled JS
├── _site/                  # Jekyll build output (gitignored)
├── node_modules/           # Node dependencies (gitignored)
├── about.md               # About page
├── blog.html              # Blog listing page
├── index.html             # Homepage
├── projects.html          # Projects listing page
├── webpack.config.js      # Webpack configuration
├── tailwind.config.js     # Tailwind configuration
├── postcss.config.js      # PostCSS configuration
├── purgecss.config.js     # PurgeCSS configuration
├── package.json           # Node dependencies
├── Gemfile                # Ruby dependencies
└── README.md              # Developer documentation

Development Workflow

Initial Setup

  1. Install Ruby dependencies: 
    bundle install
  2. Install Node dependencies: 
    yarn install

Local Development

Recommended approach (runs both Jekyll and Webpack watch):

yarn run watch & bundle exec jekyll serve && fg

This command:

Production Build

Two-step process required due to PurgeCSS dependency on final HTML:

  1. Build Jekyll in production mode: 
    JEKYLL_ENV=production bundle exec jekyll build
  2. Build Webpack in production mode: 
    yarn run prod

The production build:

Important: For GitHub Pages deployment, commit the files in the dist/ folder. The _site/ folder is gitignored and regenerated by GitHub Pages.

Available npm Scripts

{
  "prod": "NODE_ENV=production yarn run webpack",
  "dev": "NODE_ENV=development yarn run webpack",
  "watch": "NODE_ENV=development yarn run webpack --watch"
}

Content Management

Jekyll Collections

Projects Collection (_projects/)

Example project front matter:

---
short_name: slide
name: SLiDE
client: Hoodlum / Foxtel / Playmaker
preview: https://assets.vanbone.com/images/slide_proj.jpg
---

Posts Collection (_posts/)

Navigation is data-driven via _data/navigation.yml:

- name: Home
  link: /
- name: About
  link: /about.html
- name: Projects
  link: /projects.html
- name: LinkedIn
  link: https://www.linkedin.com/in/jareth/

Blog navigation is currently commented out.

Pages

Styling Conventions

Tailwind CSS Configuration

Custom font family:

fontFamily: {
  sans: ['Quicksand', ...defaultTheme.fontFamily.sans]
}

Content scanning:

content: ['./_site/**/*.{html,js}']

Main Stylesheet

Location: assets/css/site.css

This file imports Tailwind layers and any custom CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

CSS Class Patterns

The site uses Tailwind utility classes extensively:

Asset Manifest Integration

Jekyll uses the Webpack manifest to reference assets:

<link rel="stylesheet" href="/dist/main.c209ba6d7c758663c166.css">

This ensures cache-busted URLs are used in production.

Git Workflow

Branch Strategy

Commit Message Style

Based on recent commits:

Files to Commit

Always commit:

Never commit (gitignored):

Deployment

Platform: GitHub Pages Domain: jareth.github.io (custom domain configured via CNAME)

Deployment Process

  1. Make changes to source files
  2. Run production build (Jekyll first, then Webpack)
  3. Commit changes including updated dist/ files
  4. Push to repository
  5. GitHub Pages automatically rebuilds and deploys

Note: GitHub Pages runs Jekyll build automatically, but uses the committed dist/ files for assets.

Key Conventions for AI Assistants

When Modifying Styles

  1. Edit assets/css/site.css for custom CSS or Tailwind imports
  2. Use Tailwind utility classes in HTML templates when possible
  3. Run the development watch command to see changes immediately
  4. For production: Remember the two-step build process (Jekyll → Webpack)

When Adding Content

New Project:

  1. Create markdown file in _projects/ with appropriate front matter
  2. Required fields: short_name, name, client, preview
  3. Use project layout (set automatically by defaults)
  4. Reference the example in _projects/slide.md

New Blog Post:

  1. Create file in _posts/ with format YYYY-MM-DD-title.md
  2. Add front matter with at minimum title and layout: post
  3. Note: Blog section currently not visible in navigation

New Page:

  1. Create HTML or markdown file in root directory
  2. Add front matter with title and layout
  3. Update _data/navigation.yml if page should appear in menu

When Modifying Layouts

When Working with Dependencies

Update Ruby gems:

bundle update

Update Node packages:

yarn upgrade

Important: Test after updates, especially github-pages gem which may have specific version requirements.

Security Considerations

Recent dependency updates addressed security vulnerabilities:

When updating dependencies, check for security advisories.

Image and Asset Hosting

Images are hosted externally at https://assets.vanbone.com/:

This keeps the repository lightweight and separates content from code.

Video Embedding

Use the video.html include for responsive video embeds:

<video 
        width="800" 
        height="400" 
        poster="https://assets.vanbone.com/images/slide_4.jpg" 
       
       
       controls="">
    
    
        
            <source src="https://assets.vanbone.com/videos/Slide_StepByStep.mp4" type="video/mp4">
        
    
        
            <source src="https://assets.vanbone.com/videos/Slide_StepByStep.webm" type="video/webm">
        
    
        
            <source src="https://assets.vanbone.com/videos/Slide_StepByStep.ogv" type="video/ogg">
        
    
        
            <source src="https://assets.vanbone.com/videos/Slide_StepByStep.flv" type="video/f4v">
        
    
</video>

Performance Considerations

  1. PurgeCSS in production removes unused Tailwind classes
  2. Hashed filenames enable long-term caching
  3. cssnano minifies CSS
  4. External asset hosting reduces repository size
  5. Font optimization: Uses display=swap for Google Fonts

Common Tasks Reference

Edit _data/navigation.yml and add entry with name and link

Change brand color

Search and replace bg-teal-300 or extend Tailwind config with custom color

Update site metadata

Edit front matter in pages or update _config.yml for site-wide settings

Add custom Tailwind utilities

Edit assets/css/site.css after the Tailwind directives

Rebuild after config changes

Restart Jekyll server and Webpack watch (config changes not auto-detected)

Check build errors

Browser Support

Analytics

Google Analytics is included but only loads when jekyll.environment == 'production'

Additional Notes

Last Updated: 2025-11-24 Jekyll Version: Compatible with GitHub Pages Node Version: Modern LTS recommended (v14+) Ruby Version: 2.7+ recommended