CLAUDE.md

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

Project Overview

This is a static personal website for Coffee Byte Dev (coffeebyte.dev), hosted on GitHub Pages. The site is a portfolio and content hub featuring educational tools, creative writing, project showcases, and mini-games.

Architecture

Core Structure

Root HTML pages: Main site pages (index.html, commissions.html, donate.html, etc.)
assets/: Shared resources for the main site
- ```
css/styles.css
```
  : Main stylesheet with coffee-themed CSS variables
- ```
js/sidebar.js
```
  : Dynamic sidebar generation with navigation links
- ```
js/scripts.js
```
  : General utilities and clutter toggle functionality
- ```
js/md2html.js
```
  : Markdown-to-HTML converter for inline markdown content
- ```
js/mobile.js
```
  : Mobile-specific responsive handling (768px breakpoint)
- ```
clutter-main/clutter.js
```
  : Visual clutter effect

Key Subsections

school/: Educational worksheet generators (see Worksheet Architecture below)
fishing_mini_game/: Browser-based fishing game
- Modular JS architecture with strict load order:
```
config.js -> state.js -> pathfinding.js -> terrain.js -> player.js -> fishing.js -> input.js -> render.js -> customize.js -> main.js
```
- Uses HTML5 Canvas for rendering
- Three-panel layout: customization | game | stats
osyras_tale/: Markdown story content organized by Parts and Characters
- ```
revision_00/
```
  : Original 2024 version with Parts 0-3
- ```
resision_01/
```
  : 2025 revision (in progress)

Main Page Pattern

All main site pages follow this structure:

<head>
  <link rel="stylesheet" href="assets/css/styles.css" />
  <!-- IMPORTANT: Define image/title BEFORE sidebar.js loads -->
  <script>
    image = "page-image.jpg";  // Profile image filename (in assets/images/profiles/)
    title = "Page Title";       // Sidebar heading
  </script>
  <script src="assets/js/sidebar.js" defer></script>
  <script src="assets/js/scripts.js" defer></script>
  <script src="assets/clutter-main/clutter.js" defer></script>
  <script src="assets/js/mobile.js" defer></script>
</head>
<body>
  <sidebar></sidebar>  <!-- Dynamically populated -->
  <main><article>...</article></main>
</body>

Sidebar System

The sidebar is dynamically generated by

sidebar.js

using a data-driven approach:

Links defined in
```
linksData
```
array with: section, href, text, icon, updateDate
Items show "NEW" badge if updated within 14 days (configurable via
```
DAYS_TO_KEEP_NEW
```
)
Sections: Navigation, Projects, Legal Links
Icons stored in
```
assets/images/icons/
```

To add a navigation link, add an entry to

linksData

in sidebar.js:

{ section: 'Projects', href: 'page.html', text: 'Link Text', icon: 'icon.png',
  alt: 'Alt Text', title: 'Tooltip', updateDate: 20251127 }

Worksheet Architecture (school/)

Each worksheet is a self-contained HTML file with inline CSS and embedded JavaScript.

Page Structure

.app-container
  .app-header          (title bar with LOGOUT link back to school/index.html)
  .controls-panel      (user options, hidden on print)
  .worksheet           (main content area)
    .worksheet-header  (title, Name/Date/Score fields)
    .canvas-container  (for canvas-based worksheets)
  #printContainer      (dynamically generated print pages)

Two-Canvas Layering System

Canvas-based worksheets use two overlaid canvases:

```
#questionsCanvas
```
: Questions/problems layer (always visible)
```
#answersCanvas
```
: Answers overlay (toggled via
```
.show
```
class)

This separation allows showing/hiding answers without regenerating the worksheet.

Core JavaScript Pattern

// Global state
let currentProblems = [];
let showingAnswers = false;
let questionsCanvas, answersCanvas, questionsCtx, answersCtx;

// Required functions
initCanvases()       // Get canvas contexts
generateWorksheet()  // Create problems, call drawWorksheet()
drawWorksheet()      // Render to both canvases
createPrintPages()   // Generate #printContainer for multi-page printing
toggleAnswers()      // Toggle showingAnswers, update UI

Print Support

Uses
```
@media print
```
to hide controls and show
```
#printContainer
```
```
createPrintPages()
```
generates separate canvas elements per page with headers
Page dimensions: 794x900px canvas, 7.5x10in print size, A4 portrait

DOM-Based Worksheets

Some worksheets (writing-definitions) use DOM elements instead of canvas:

Use
```
renderWorksheet()
```
instead of
```
drawWorksheet()
```
May fetch external data (e.g., dictionary API)

Coffee Theme Variables (duplicated in each worksheet file)

--espresso: #1e1610;      --dark-mocha: #2a1e14;
--coffee-bean: #453024;   --steamed-milk: #f5f5dc;
--light-cream: #f8e5c8;   --half-and-half: #d2b48c;
--caramel: #d2691e;       --pumpkin-spice: #b68d40;
--mocha: #8b4513;         --dark-caramel: #38271e;
--toasted-almond: #5c4937; --dark-chocolate: #120d08;

Button Classes

```
.primary
```
: Main action (Generate) - pumpkin-spice background
```
.secondary
```
: Other actions (Show Answers, Print) - mocha background

Design System

CSS variables defined in

:root

follow a coffee theme:

Background colors:
```
--espresso
```
,
```
--dark-mocha
```
,
```
--dark-chocolate
```

Text colors:

--steamed-milk

--light-cream

--half-and-half

Accent colors:
```
--caramel
```
,
```
--pumpkin-spice
```
,
```
--mocha
```

Custom font "Peppermint Pen" used for headings and navigation.

Layout uses CSS Grid:

grid-template-columns: 300px 1fr

(sidebar + content).

Deployment

This is a GitHub Pages site:

Domain: coffeebyte.dev (configured via CNAME file)
Changes pushed to main branch deploy automatically
No build step required - all content is static HTML/CSS/JS

Important Dates (tracked in scripts.js)

2026-01-04: Premium host expiration
2026-09-19: Website domain renewal

File Locations

PDF files:
```
assets/jail/
```
Profile images:
```
assets/images/profiles/
```
Icons:
```
assets/images/icons/
```
Legal documents:
```
assets/legal/
```

CLAUDE.md

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

Project Overview

Architecture

Core Structure

Root HTML pages: Main site pages (index.html, commissions.html, donate.html, etc.)
assets/: Shared resources for the main site
- ```
css/styles.css
```
  : Main stylesheet with coffee-themed CSS variables
- ```
js/sidebar.js
```
  : Dynamic sidebar generation with navigation links
- ```
js/scripts.js
```
  : General utilities and clutter toggle functionality
- ```
js/md2html.js
```
  : Markdown-to-HTML converter for inline markdown content
- ```
js/mobile.js
```
  : Mobile-specific responsive handling (768px breakpoint)
- ```
clutter-main/clutter.js
```
  : Visual clutter effect

Key Subsections

school/: Educational worksheet generators (see Worksheet Architecture below)
fishing_mini_game/: Browser-based fishing game
- Modular JS architecture with strict load order:
```
config.js -> state.js -> pathfinding.js -> terrain.js -> player.js -> fishing.js -> input.js -> render.js -> customize.js -> main.js
```
- Uses HTML5 Canvas for rendering
- Three-panel layout: customization | game | stats
osyras_tale/: Markdown story content organized by Parts and Characters
- ```
revision_00/
```
  : Original 2024 version with Parts 0-3
- ```
resision_01/
```
  : 2025 revision (in progress)

Main Page Pattern

All main site pages follow this structure:

<head>
  <link rel="stylesheet" href="assets/css/styles.css" />
  <!-- IMPORTANT: Define image/title BEFORE sidebar.js loads -->
  <script>
    image = "page-image.jpg";  // Profile image filename (in assets/images/profiles/)
    title = "Page Title";       // Sidebar heading
  </script>
  <script src="assets/js/sidebar.js" defer></script>
  <script src="assets/js/scripts.js" defer></script>
  <script src="assets/clutter-main/clutter.js" defer></script>
  <script src="assets/js/mobile.js" defer></script>
</head>
<body>
  <sidebar></sidebar>  <!-- Dynamically populated -->
  <main><article>...</article></main>
</body>

Sidebar System

The sidebar is dynamically generated by

sidebar.js

using a data-driven approach:

Links defined in
```
linksData
```
array with: section, href, text, icon, updateDate
Items show "NEW" badge if updated within 14 days (configurable via
```
DAYS_TO_KEEP_NEW
```
)
Sections: Navigation, Projects, Legal Links
Icons stored in
```
assets/images/icons/
```

To add a navigation link, add an entry to

linksData

in sidebar.js:

{ section: 'Projects', href: 'page.html', text: 'Link Text', icon: 'icon.png',
  alt: 'Alt Text', title: 'Tooltip', updateDate: 20251127 }

Worksheet Architecture (school/)

Each worksheet is a self-contained HTML file with inline CSS and embedded JavaScript.

Page Structure

.app-container
  .app-header          (title bar with LOGOUT link back to school/index.html)
  .controls-panel      (user options, hidden on print)
  .worksheet           (main content area)
    .worksheet-header  (title, Name/Date/Score fields)
    .canvas-container  (for canvas-based worksheets)
  #printContainer      (dynamically generated print pages)

Two-Canvas Layering System

Canvas-based worksheets use two overlaid canvases:

```
#questionsCanvas
```
: Questions/problems layer (always visible)
```
#answersCanvas
```
: Answers overlay (toggled via
```
.show
```
class)

This separation allows showing/hiding answers without regenerating the worksheet.

Core JavaScript Pattern

// Global state
let currentProblems = [];
let showingAnswers = false;
let questionsCanvas, answersCanvas, questionsCtx, answersCtx;

// Required functions
initCanvases()       // Get canvas contexts
generateWorksheet()  // Create problems, call drawWorksheet()
drawWorksheet()      // Render to both canvases
createPrintPages()   // Generate #printContainer for multi-page printing
toggleAnswers()      // Toggle showingAnswers, update UI

Print Support

Uses
```
@media print
```
to hide controls and show
```
#printContainer
```
```
createPrintPages()
```
generates separate canvas elements per page with headers
Page dimensions: 794x900px canvas, 7.5x10in print size, A4 portrait

DOM-Based Worksheets

Some worksheets (writing-definitions) use DOM elements instead of canvas:

Use
```
renderWorksheet()
```
instead of
```
drawWorksheet()
```
May fetch external data (e.g., dictionary API)

Coffee Theme Variables (duplicated in each worksheet file)

--espresso: #1e1610;      --dark-mocha: #2a1e14;
--coffee-bean: #453024;   --steamed-milk: #f5f5dc;
--light-cream: #f8e5c8;   --half-and-half: #d2b48c;
--caramel: #d2691e;       --pumpkin-spice: #b68d40;
--mocha: #8b4513;         --dark-caramel: #38271e;
--toasted-almond: #5c4937; --dark-chocolate: #120d08;

Button Classes

```
.primary
```
: Main action (Generate) - pumpkin-spice background
```
.secondary
```
: Other actions (Show Answers, Print) - mocha background

Design System

CSS variables defined in

:root

follow a coffee theme:

Background colors:
```
--espresso
```
,
```
--dark-mocha
```
,
```
--dark-chocolate
```

Text colors:

--steamed-milk

--light-cream

--half-and-half

Accent colors:
```
--caramel
```
,
```
--pumpkin-spice
```
,
```
--mocha
```

Custom font "Peppermint Pen" used for headings and navigation.

Layout uses CSS Grid:

grid-template-columns: 300px 1fr

(sidebar + content).

Deployment

This is a GitHub Pages site:

Domain: coffeebyte.dev (configured via CNAME file)
Changes pushed to main branch deploy automatically
No build step required - all content is static HTML/CSS/JS

Important Dates (tracked in scripts.js)

2026-01-04: Premium host expiration
2026-09-19: Website domain renewal

File Locations

PDF files:
```
assets/jail/
```
Profile images:
```
assets/images/profiles/
```
Icons:
```
assets/images/icons/
```
Legal documents:
```
assets/legal/
```

CLAUDE.md

Related Skills

Markdown Converter

Nano Banana Pro

1password