update docs

Author: AlexJSully

.github/copilot-instructions.md

@@ -1,10 +1,11 @@
-# AlexJSully Portfolio - AI Coding Agent Instructions
+# Alexander Sullivan's Portfolio - AI Coding Agent Instructions
 
 ## Architecture Overview
 
 This is a **Next.js portfolio website** using the **App Router** (not Pages Router), React, TypeScript, and Material-UI with Emotion. The project follows a modular structure with path aliases, comprehensive testing, and Progressive Web App (PWA) capabilities.
 
 ### Key Technologies & Integrations
+
 - **Framework**: Next.js App Router with React Server Components
 - **Styling**: Material-UI (MUI) + Emotion (use `sx` prop, not CSS modules)
 - **Testing**: Jest (unit tests), Cypress (E2E tests with accessibility via cypress-axe)
@@ -14,6 +15,7 @@ This is a **Next.js portfolio website** using the **App Router** (not Pages Rout
 ## Critical Workflows
 
 ### Development Commands
+
 ```bash
 npm run dev               # Start dev server at localhost:3000
 npm run validate          # Full CI check: prettier → eslint → tsc → jest → cypress → build → markdown
@@ -25,6 +27,7 @@ npm run build             # Production build
 **Always run `npm run validate` before committing.** This is the comprehensive quality gate used in CI/CD.
 
 ### Testing Requirements
+
 - **Unit tests**: Every component requires a `.test.tsx` file (see `src/components/banner/Banner.test.tsx`)
 - **Test setup**: Uses `jest/setup.ts` with jsdom environment
 - **E2E tests**: Located in `cypress/e2e/`, include accessibility tests (cypress-axe)
@@ -33,17 +36,23 @@ npm run build             # Production build
 ## Project-Specific Conventions
 
 ### Path Aliases (Critical!)
+
 Always use TypeScript path aliases defined in `tsconfig.json`:
+
 ```typescript
-import Avatar from '@components/banner/Avatar';     // NOT '../components/banner/Avatar'
-import { DELAYS } from '@constants/index';          // NOT '../../constants'
+import Avatar from '@components/banner/Avatar';
+// NOT '../components/banner/Avatar'
+import { DELAYS } from '@constants/index';
+// NOT '../../constants'
 import { isNetworkFast } from '@util/isNetworkFast';
 ```
 
 ### Component Patterns
 
 #### Material-UI Styling
+
 Use `sx` prop for styling, never inline styles or CSS modules:
+
 ```typescript
 <Box
   component='div'
@@ -56,43 +65,52 @@ Use `sx` prop for styling, never inline styles or CSS modules:
 ```
 
 #### SVG Icons Pattern
+
 SVGs are imported as React components via `@svgr/webpack`. See `src/images/icons.tsx`:
+
 ```typescript
 import Icon from './icons/example.svg';
 export const ExampleIcon = (props: SvgIconProps) =>
   <SvgIcon component={Icon} inheritViewBox {...props} />;
 ```
 
 ### Data Management
+
 Static data lives in `src/data/`:
+
 - `projects.ts`: Project portfolio with typed interface
 - `publications.ts`: Academic publications
 - `socials.ts`: Social media links
 - `keywords.ts`: SEO keywords array
 
 ### Constants Pattern
+
 Centralized constants in `src/constants/index.ts` with `as const` for type safety:
+
 ```typescript
-DELAYS.PROJECT_HOVER_VIDEO  // 1000ms before video plays on hover
-THRESHOLDS.SNEEZE_TRIGGER_INTERVAL  // Easter egg triggers
-NETWORK.SLOW_DOWNLINK_THRESHOLD  // Network performance checks
+DELAYS.PROJECT_HOVER_VIDEO; // 1000ms before video plays on hover
+THRESHOLDS.SNEEZE_TRIGGER_INTERVAL; // Easter egg triggers
+NETWORK.SLOW_DOWNLINK_THRESHOLD; // Network performance checks
 ```
 
 ## Code Style & Quality
 
 ### Linting & Formatting
+
 - **Indentation**: Tabs (not spaces) - enforced by ESLint
 - **Line length**: No hard limit, use Prettier
 - **Import sorting**: Handled by `@trivago/prettier-plugin-sort-imports`
 - **Unused vars**: Prefix with `_` to ignore (e.g., `_unusedParam`)
 
 ### ESLint Rules (see `eslint.config.js`)
+
 - Tabs for indentation (indent: ['error', 'tab'])
 - Console logs allowed (`no-console: off`)
 - Unused vars with `_` prefix ignored
 - React hooks exhaustive deps enforced
 
 ### TypeScript
+
 - **Strict mode**: Enabled in `tsconfig.json`
 - **No implicit any**: All types must be explicit
 - **React 19**: Uses new `react-jsx` transform
@@ -101,7 +119,9 @@ NETWORK.SLOW_DOWNLINK_THRESHOLD  // Network performance checks
 ## Next.js App Router Specifics
 
 ### Metadata & SEO
+
 All metadata configured in `src/app/layout.tsx`:
+
 ```typescript
 export const metadata: Metadata = {
   title: { template: `%s | ${metadataValues.title}`, default: metadataValues.title },
@@ -112,12 +132,15 @@ export const metadata: Metadata = {
 ```
 
 ### Server Components vs Client Components
+
 - Default: Server Components (no `'use client'`)
 - Client-only: Components with hooks, event handlers, browser APIs
 - Example client component: `src/components/ServiceWorkerRegister.tsx`
 
 ### Security Headers
+
 CSP and security headers configured in `next.config.js` headers() function. Includes:
+
 - X-Content-Type-Options: nosniff
 - X-Frame-Options: DENY
 - Strict-Transport-Security (HSTS)
@@ -126,31 +149,40 @@ CSP and security headers configured in `next.config.js` headers() function. Incl
 ## Special Features
 
 ### Network Performance Optimization
+
 `src/util/isNetworkFast.ts` checks Network Information API to conditionally load heavy assets based on connection speed.
 
 ### Easter Eggs
+
 - `src/helpers/aaaahhhh.ts`: Fun image replacement logic triggered by avatar interactions
 - `src/helpers/ascii.ts`: Console ASCII art
 
 ### Service Worker
+
 - Lives in `public/sw.js` and served via `src/app/sw.js/`
 - Registration in `src/components/ServiceWorkerRegister.tsx`
 - Used for PWA offline support
 
 ## Firebase & Analytics
+
 Initialize Firebase only client-side (see `src/configs/firebase.ts`):
+
 ```typescript
 import { init, logAnalyticsEvent } from '@configs/firebase';
-init();  // Call once on client mount
+
+init(); // Call once on client mount
 logAnalyticsEvent('event_name', { params });
 ```
 
 ## Documentation
+
 Architecture docs in `docs/architecture/`:
+
 - `index.md`: System overview
 - Component-specific docs for Avatar, Projects, Publications, etc.
 
 ## Common Gotchas
+
 1. **Don't** import from relative paths - use path aliases
 2. **Don't** forget to update tests when changing components
 3. **Always** run `npm run validate` frequently when making changes

.github/prompts/audit-docs.prompt.md

@@ -18,7 +18,7 @@ Documentation produced by this prompt must serve **two audiences simultaneously*
 
 1. **Internal developers / maintainers**
     - To understand system internals, architectural decisions, constraints, and design intent
-    - To preserve *why* things were implemented the way they are and the *how* behind the *what*
+    - To preserve _why_ things were implemented the way they are and the _how_ behind the _what_
 2. **New or external developers**
     - To understand how to use the system, APIs, and modules as tools
     - To quickly navigate from documentation to implementation
@@ -64,12 +64,12 @@ Do **not** skip ahead.
 When documenting behavior, architecture, or usage:
 
 1. **Start with a succinct natural-language explanation**
-    - Explain *what the component does*, *why it exists*, and *how it fits into the system*
+    - Explain _what the component does_, _why it exists_, and _how it fits into the system_
 2. **Link directly to the implementation**
     - Prefer links to real source files over inline code
     - Example:
-      > The request validation logic is centralized in `validateRequest`, which enforces schema constraints before execution.
-      > See implementation: [`src/api/validateRequest.ts`](src/api/validateRequest.ts)
+        > The request validation logic is centralized in `validateRequest`, which enforces schema constraints before execution.
+        > See implementation in the corresponding source file (for example under `src/components/` or `src/util/`), and always link to a real file that exists in this repository.
 3. **Use inline code blocks sparingly and intentionally**
     - Include code snippets **only when they materially improve understanding**, such as:
         - Public API usage examples

docs/architecture/app-directory.md

@@ -1,6 +1,6 @@
 # App Directory (Next.js)
 
-This document explains the Next.js App Router directory structure and implementation in the AlexJSully Portfolio project.
+This document explains the Next.js App Router directory structure and implementation in the Alexander Sullivan's Portfolio project.
 
 ## Overview
 

docs/architecture/components/index.md

@@ -1,6 +1,6 @@
 # Components Documentation
 
-This document describes the internal architecture, relationships, and usage of major UI components in the AlexJSully Portfolio project. Components are modular, reusable, and styled with Material-UI and Emotion.
+This document describes the internal architecture, relationships, and usage of major UI components in the Alexander Sullivan's Portfolio project. Components are modular, reusable, and styled with Material-UI and Emotion.
 
 ## Component List & Hierarchy