about

index.html

@@ -315,6 +315,21 @@
 
       .projects-container { padding-bottom: 2rem; }
 
+      .projects-intro {
+        font-size: clamp(0.75rem, 1.3vw, 0.85rem);
+        line-height: 1.55;
+        color: rgba(255,255,255,0.55);
+        margin: 0 0 1.2rem;
+        white-space: pre-line;
+      }
+
+      .cat-intro {
+        font-size: clamp(0.75rem, 1.3vw, 0.85rem);
+        line-height: 1.5;
+        color: rgba(255,255,255,0.5);
+        margin: 0.6rem 0 1rem;
+      }
+
       .project-card {
         background: rgba(255,255,255,0.035);
         border: 1px solid rgba(255,255,255,0.06);

src/data/scenes/projects.ts

@@ -3,5 +3,5 @@ import type { SceneContent } from './index'
 export const projects: SceneContent = {
   title: 'PROJECTS',
   subtitle: 'Things I have built',
-  body: 'A collection of work exploring\nWebGPU, shaders, and generative art.',
+  body: 'This is not an exhaustive list or an indepth, it\'s more of an attempt to try to document the fact that I build a lot of cool shit that I can\'t always talk about anywhere else. Some of these are personal projects, some are professional, some are just experiments and prototypes. I will try to keep this updated as I go.',
 }

src/ui/overlay.ts

@@ -81,7 +81,7 @@ function buildResumeHTML(data: ResumeData): string {
 
 // ---------- project HTML builders ----------
 
-function buildCategoryGridHTML(categories: ProjectCategory[]): string {
+function buildCategoryGridHTML(categories: ProjectCategory[], intro?: string): string {
   const cards = categories
     .map(
       (c) => `<div class="cat-card" data-cat-id="${esc(c.id)}">
@@ -91,13 +91,17 @@ function buildCategoryGridHTML(categories: ProjectCategory[]): string {
   </div>`
     )
     .join('')
-  return `<div class="cat-grid">${cards}</div>`
+  const introHtml = intro ? `<p class="projects-intro">${esc(intro)}</p>\n` : ''
+  return `<div class="projects-container">
+  ${introHtml}  <div class="cat-grid">${cards}</div>
+</div>`
 }
 
 function buildCategoryListHTML(cat: ProjectCategory): string {
   if (cat.projects.length === 0) {
     return `<div class="cat-list">
   <button class="project-back" data-back="grid">← Categories</button>
+  <p class="cat-intro">${esc(cat.description)}</p>
   <p class="cat-empty">Nothing here yet.</p>
 </div>`
   }
@@ -113,6 +117,7 @@ function buildCategoryListHTML(cat: ProjectCategory): string {
     .join('')
   return `<div class="cat-list">
   <button class="project-back" data-back="grid">← Categories</button>
+  <p class="cat-intro">${esc(cat.description)}</p>
   ${cards}
 </div>`
 }
@@ -191,7 +196,8 @@ export class DomOverlay {
   }
 
   showCategoryGrid(): void {
-    this.projectsSectionEl.innerHTML = buildCategoryGridHTML(CATEGORIES)
+    const intro = this.scenes[PROJECTS_SCENE]?.body
+    this.projectsSectionEl.innerHTML = buildCategoryGridHTML(CATEGORIES, intro)
   }
 
   showCategory(id: string): void {