Consider splitting into separate HTML/CSS/JS files

[oliverames]

Current State

The entire application is in a single 9,447-line index.html file containing:

• HTML structure
• All CSS (~3,000 lines)
• All JavaScript (~6,000 lines)

Benefits of Splitting

1. Maintainability: Easier to navigate and modify specific sections
2. Caching: CSS/JS can be cached separately from HTML
3. Security: Enables stricter CSP without 'unsafe-inline'
4. Tooling: Enables linting, minification, and bundling
5. Code Organization: Clear separation of concerns

Proposed Structure

sunshine-trail/
├── index.html          # HTML only
├── css/
│   └── styles.css      # All styles
├── js/
│   ├── app.js          # Main application
│   ├── map.js          # Leaflet map logic
│   ├── effects.js      # Easter eggs (god rays, snow, etc.)
│   └── utils.js        # Shared utilities
└── assets/             # (unchanged)

Build Options

• Simple: Manual split, no build step (direct script/link tags)
• Modern: Vite or esbuild for bundling/minification
• Hybrid: Use ES modules with import maps (no build needed)

Trade-offs

• Adds complexity for a demo/portfolio project
• Current single-file architecture is intentional for simplicity
• May not be worth the effort unless scaling the project

Priority

Low - Consider only if the project grows significantly or moves to production.