Josh Bruce Online

Claude Instructions for JoshCBruce.github.io

Critical Git Workflow

⚠️ MANDATORY: Always commit and push to Git after every major set of changes.

After completing any significant work (new features, design updates, content changes, bug fixes), you MUST:

  1. Check git status: git status
  2. Review changes: git diff [files]
  3. Stage specific files: git add [file1] [file2] ...
  4. Commit with clear message including co-author: 
    git commit -m "$(cat <<'EOF'
[Brief summary of changes]

[Detailed description of what was changed and why]

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
EOF
)"
  5. Push to remote: git push
  6. Verify sync: git status

What Counts as “Major Changes”

Never leave uncommitted work. GitHub Pages serves from this repository, so changes must be pushed to go live.

Project Overview

This is Josh Bruce’s personal portfolio website hosted on GitHub Pages at https://joshcbruce.github.io

Tech Stack

Key Files

Design Aesthetic

The site uses a cohesive glassmorphism design language with these key elements:

Color Scheme (Google Colors)

--google-red: #ea4335;
--google-yellow: #fbbc05;
--google-green: #34a853;
--google-blue: #4285f4;
--google-pink: #e91e63;

Typography

Visual Elements

Organic Animated Background

Glassmorphism Effects

Buttons

Social Media Icons

Animation Principles

Current Navigation Structure

Main Page Buttons (index.html)

  1. Books (red) → Google Drive folder (external link)
  2. Days (yellow) → /days - A-level countdown
  3. Physics (green) → /plearn - Physics revision guide
  4. iLearn (blue) → /ilearn - Product design revision
  5. PolyTrack (pink) → /polytrack - Racing game project

404 Page

Making Changes

When Updating Design

  1. Maintain consistency: Use the same colors, fonts, spacing, and animation patterns
  2. Preserve glassmorphism: Keep backdrop-filter blur and transparent backgrounds
  3. Test responsive: Check mobile breakpoints (@media max-width: 768px)
  4. Keep animations smooth: Use established easing functions

When Adding New Pages

When Updating Content

Testing Checklist

Before pushing changes:

Common Tasks

  1. Find the button in <div class="buttons">
  2. Update href attribute
  3. Update button text if needed
  4. Add target="_blank" for external links
  5. Commit and push changes

Add New Button

  1. Add new <a> tag with class “button”
  2. Assign appropriate Google color (in order: red, yellow, green, blue, pink)
  3. Update button container width if needed
  4. Commit and push changes
  1. Find <div class="social-icons">
  2. Update href attributes on social icon links
  3. Commit and push changes

Modify Design

  1. Update CSS in <style> tags
  2. Maintain consistency with existing aesthetic
  3. Test animations and transitions
  4. Commit and push changes

Emergency Recovery

If something breaks:

  1. Check git log: git log --oneline -10
  2. View specific commit: git show [commit-hash]
  3. Revert if needed: git revert [commit-hash]
  4. Or reset to previous state: git reset --hard [commit-hash] (destructive!)
  5. Force push if necessary: git push --force (only if safe)

Notes

Remember

🔴 ALWAYS COMMIT AND PUSH AFTER MAKING CHANGES 🔴

This cannot be emphasized enough. Every meaningful change should be committed and pushed to keep the live site in sync with your work.