From 457a649df720d6259dfae93b8b5f1b6905ab1adb Mon Sep 17 00:00:00 2001
From: djoser <ineditedofficial@gmail.com>
Date: Mon, 27 Jul 2026 18:32:13 +0200
Subject: [PATCH] about

---
 index.html                  | 15 +++++++++++++++
 src/data/scenes/projects.ts |  2 +-
 src/ui/overlay.ts           | 12 +++++++++---
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index cc2f038..c8a9a31 100644
--- a/index.html
+++ b/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);
diff --git a/src/data/scenes/projects.ts b/src/data/scenes/projects.ts
index 5a094d0..e712868 100644
--- a/src/data/scenes/projects.ts
+++ b/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.',
 }
diff --git a/src/ui/overlay.ts b/src/ui/overlay.ts
index 5c6ed2f..d6ec948 100644
--- a/src/ui/overlay.ts
+++ b/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 {