feat: implement CSS sprite system for image optimization

Reduces HTTP requests from 44+ individual images to 3 sprite sheets
(~93% reduction). Includes Go sprite generator tool, CSS classes,
template integration, and E2E tests.

- Add cmd/sprites/main.go for sprite generation (60x60px + 120x120px @2x)
- Add _sprites.css with responsive sizing and retina support
- Update templates to use sprites with logoIndex fallback
- Add Makefile targets: sprites, sprites-clean
- Add 9-test E2E suite for sprite functionality
- Add doc/22-SPRITES.md with usage documentation

templates/partials/sections/projects.html

@@ -13,15 +13,15 @@
             </summary>
         {{range .CV.Projects}}
     <div class="project-item" id="proj-{{.ProjectID}}" data-project="{{.ProjectID}}" data-title="{{if .ProjectName}}{{.ProjectName}}{{else}}{{.Title}}{{end}}">
-        {{if .ProjectLogo}}
         <div class="project-icon">
+            {{if .LogoIndex}}
+            <span class="icon-sprite icon-section icon-project" style="--icon-index: {{.LogoIndex}};" role="img" aria-label="{{.Title}} logo"></span>
+            {{else if .ProjectLogo}}
             <img src="/static/images/projects/{{.ProjectLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:web\' width=\'80\' height=\'80\' class=\'default-project-icon\'></iconify-icon>'">
-        </div>
-        {{else}}
-        <div class="project-icon">
+            {{else}}
             <iconify-icon icon="mdi:web" width="80" height="80" class="default-project-icon"></iconify-icon>
+            {{end}}
         </div>
-        {{end}}
         <div class="project-content">
             <strong>
                 {{if .ProjectName}}