nicholai-work-2026/dev/continuity.md

# Continuity Log

## Template for New Entries
```
## YYYY-MM-DD - <Milestone>

### Changes Made
- Created X, Y, Z files
- Implemented feature A using pattern B

### Decisions
- Chose X over Y because...
- Pattern for Z is...

### How to Test
1. Navigate to...
2. Click...
3. Verify...

### Next Steps
- [ ] Item 1
- [ ] Item 2
```

## Example: postMessage Pattern (Reference)

**Parent sends to iframe:**
```typescript
// lib/communication/iframe-controller.ts
export function selectElement(iframe: HTMLIFrameElement, nodeId: string) {
  iframe.contentWindow?.postMessage(
    { type: 'SELECT_ELEMENT', payload: { nodeId } },
    'http://localhost:4321' // Always explicit origin
  )
}
```

**Iframe sends to parent:**
```typescript
// Injected script in iframe
window.parent.postMessage(
  { type: 'ELEMENT_SELECTED', payload: { nodeId, rect, astroSource } },
  'http://localhost:3000'
)
```

**Parent receives:**
```typescript
// lib/communication/message-handler.ts
window.addEventListener('message', (event) => {
  if (event.origin !== 'http://localhost:4321') return
  
  switch (event.data.type) {
    case 'ELEMENT_SELECTED':
      handleElementSelected(event.data.payload)
      break
    // ... other handlers
  }
})
```

## Example: Zustand Store Pattern (Reference)
```typescript
// lib/store/editor-store.ts
import { create } from 'zustand'

interface EditorStore {
  selectedElement: SelectedElement | null
  setSelectedElement: (el: SelectedElement | null) => void
}

export const useEditorStore = create<EditorStore>((set) => ({
  selectedElement: null,
  setSelectedElement: (el) => set({ selectedElement: el }),
}))
```

Usage:
```typescript
const selectedElement = useEditorStore((state) => state.selectedElement)
const setSelectedElement = useEditorStore((state) => state.setSelectedElement)
```

## Example: File Update Pattern (Reference)
```typescript
// lib/astro/class-updater.ts
import { parse, walk } from '@astrojs/compiler'

export async function updateClasses(
  filePath: string,
  line: number,
  col: number,
  newClasses: string
): Promise<string> {
  const source = await fs.readFile(filePath, 'utf-8')
  const ast = await parse(source)
  
  // Walk AST to find element at line:col
  let targetNode = null
  walk(ast, (node) => {
    if (node.position?.start.line === line && 
        node.position?.start.column === col) {
      targetNode = node
    }
  })
  
  // Update class attribute in source string
  // ... implementation
  
  return updatedSource
}
```

---

## 2026-01-02 - Client Router Implementation

### Changes Made
- Updated `src/layouts/BaseLayout.astro` to use `<ClientRouter />` from `astro:transitions`.
- Modified theme initialization script to handle `astro:after-swap` events for persistent theming during navigation.
- Removed legacy "Intent-Based Prefetch" script as it is superseded by Astro's built-in router capabilities.

### Decisions
- Adopted Astro's `ClientRouter` to provide a smoother, SPA-like user experience with view transitions.
- Consolidated theme logic into a function `applyTheme()` that runs on both initial load and after view transitions to prevent theme flickering or resetting.

### How to Test
1. Open the site in a browser.
2. Toggle the theme to a non-default state (e.g., Light mode if default is Dark).
3. Click a navigation link (e.g., "Blog").
4. Verify the new page loads without a full refresh (no white flash).
5. Verify the selected theme persists on the new page.

### Next Steps
- [ ] Monitor for any script re-execution issues common with View Transitions.
- [ ] Consider adding custom transition animations for specific elements if needed.

## 2026-01-02 - Work Page & Projects Collection Implementation

### Changes Made
- Updated `src/content.config.ts` to include a new `projects` collection with schema for title, description, link, category, and tags.
- Created `src/content/projects/` directory and added `united-tattoos.mdx` and `the-highering-agency.mdx`.
- Created `src/components/ProjectCard.astro` for modular project display.
- Created `src/pages/work.astro` to list development and design projects.
- Updated `src/components/Navigation.astro` to include "Work" in desktop and mobile menus.

### Decisions
- Created a separate `projects` collection rather than overloading `pages` to allow for structured, queryable project data.
- Placed "Work" between "Home" and "Blog" in navigation to emphasize the portfolio aspect.
- Included a VFX/Technical Art section at the bottom of the Work page to bridge the gap between web dev and the existing VFX portfolio.

### How to Test
1. Navigate to the new `/work` page.
2. Verify both "United Tattoos" and "The Highering Agency" are displayed with correct information and links.
3. Test navigation from Home -> Work and Work -> Blog using the new Client Router.
4. Verify mobile menu contains the "Work" link and functions correctly.

### Next Steps
- [ ] Add screenshots/images to the projects in `src/content/projects/`.
- [ ] Expand the `ProjectCard` to support hover effects or mini-galleries if desired.

## 2026-01-02 - Project Descriptions Update

### Changes Made
- Updated `src/content/projects/the-highering-agency.mdx` description to reflect its status as a cannabis staffing agency with specific features like direct hire and executive search.
- Updated `src/content/projects/united-tattoos.mdx` description and tags based on its official README, highlighting Astro 5, booking system features, and editorial design.

### Decisions
- Ensured project descriptions are accurate and highlight the specific technical and business value of each project.
- Added relevant tags like "Astro", "GSAP", "Booking System" to United Tattoo to showcase technical depth.

### How to Test
1. Navigate to `/work`.
2. Verify the text for "The Highering Agency" mentions cannabis staffing and recruitment services.
3. Verify "United Tattoo" description mentions "Official marketing website", "Astro 5", and "Booking System".

## 2026-01-02 - Hero Animation Fix for Client Router

### Changes Made
- Refactored `src/components/sections/Hero.astro` script.
- Wrapped initialization logic (intro, clock, grid, pulse) in `initHero()` function.
- Added event listener for `astro:page-load` to run `initHero()` on every navigation.
- Added `cleanup()` function triggered on `astro:before-swap` to clear timers (`clockTimer`, `pulseInterval`).

### Decisions
- Moving logic to `astro:page-load` is required for View Transitions (ClientRouter) because standard `window.onload` only fires on the first page visit.
- Explicit cleanup prevents memory leaks and double-firing timers when navigating back and forth.

### How to Test
1. Load the homepage directly. Verify Hero animations (text fade-in, grid pulse) work.
2. Navigate to another page (e.g., `/work`).
3. Click "Home" in the navigation.
4. Verify Hero animations re-trigger correctly without a full page reload.
5. Check console for any errors (none expected).

## 2026-01-02 - Dev Page Redesign & Rename

### Changes Made
- Renamed `src/pages/work.astro` to `src/pages/dev.astro`.
- Updated `src/components/Navigation.astro` to link to `/dev` labeled "DEV".
- Redesigned `src/pages/dev.astro` completely:
  - **Layout:** Switched from a sparse grid to a dense, 2-column "System Module" layout.
  - **Aesthetics:** Aligned with the homepage's Industrial Dark Mode (scanlines, mono fonts, technical overlays).
  - **Visuals:** Added CSS-based animated mesh backgrounds and SVG decorators to cards, eliminating the need for screenshots while maintaining a high-tech feel.
  - **Typography:** Updated headers to be massive and uppercase, matching the Hero section.

### Decisions
- Renaming to "Dev" better reflects the technical nature of the portfolio and distinguishes it from the VFX work.
- The previous card layout was too simple and looked "sloppy" without images. The new "System Module" design uses CSS/SVG abstracts to look finished and professional without requiring assets.
- Integrated "secondary specialization" section (VFX) with better styling to act as a bridge between the two portfolio halves.

### How to Test
1. Navigate to `/dev` via the new navigation link.
2. Verify the page title is "DEV LOG".
3. Check that the project cards look like technical modules with animated backgrounds.
4. Hover over cards to see the accent color shift.
5. Verify the "Initialize Uplink" buttons link to the correct project URLs.

## 2026-01-02 - Project Added: Summit Painting & Handyman

### Changes Made
- Created `src/content/projects/summit-painting.mdx` with details from its official README.
- Set the preview link to `https://summit-painting-and-handyman-services.pages.dev/`.
- Updated tags and description to highlight Astro 5 and React 19 usage.

### Decisions
- Added as the third project in the Dev list to maintain a chronological or curated flow.
- Highlights the transition to Astro 5 and content-driven design patterns common in recent work.