Merge pull request #121 from moollaza/feature/sveltekit-redesign

Migrate to SveltKit with updated design

Author: moollaza

.claude/settings.local.json

@@ -0,0 +1,21 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx:*)",
+      "Bash(npm install:*)",
+      "Bash(npm run dev:*)",
+      "Bash(npm run check:*)",
+      "Bash(npm run build:*)",
+      "Bash(npm run test:unit:*)",
+      "WebFetch(domain:www.joshwcomeau.com)",
+      "WebFetch(domain:www.figma.com)",
+      "Bash(git add:*)",
+      "Bash(npm run lint)",
+      "Bash(npm run format:*)",
+      "Bash(npm run test:smoke:*)",
+      "Bash(curl:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,66 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: ["**"]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  quality-checks:
+    name: Quality Checks
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".node-version"
+          cache: "npm"
+          cache-dependency-path: "package-lock.json"
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run check
+
+  build-and-test:
+    name: Build & E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".node-version"
+          cache: "npm"
+          cache-dependency-path: "package-lock.json"
+      - run: npm ci
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').packages['node_modules/@playwright/test'].version)")" >> $GITHUB_OUTPUT
+      - name: Cache playwright binaries
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
+      - name: Install Playwright browsers
+        run: npx playwright install chromium
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      - name: Install system dependencies
+        run: npx playwright install-deps chromium
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      - run: npm test
+      - name: Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            test-results/
+          retention-days: 7

.gitignore

@@ -1,7 +1,26 @@
+test-results
+playwright-report
+e2e/test-results
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
 .DS_Store
-/node_modules/
-/src/node_modules/@sapper/
-yarn-error.log
-/cypress/screenshots/
-/__sapper__/
-static/global.css
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.node-version

@@ -0,0 +1 @@
+22

.prettierignore

@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ],
+  "tailwindStylesheet": "./src/app.css"
+}

CLAUDE.md

@@ -0,0 +1,140 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+- **Start development server**: `npm run dev` - Starts Vite dev server with hot reloading
+- **Build for production**: `npm run build` - Builds optimized production bundle
+- **Preview production build**: `npm run preview` - Preview production build locally
+- **Type checking & Accessibility**: `npm run check` - Run Svelte type checking and accessibility linting
+- **Linting**: `npm run lint` - Run ESLint and Prettier checks
+- **Formatting**: `npm run format` - Format code with Prettier
+- **E2E tests**: `npm test` - Run Playwright end-to-end tests (24 comprehensive tests)
+
+## Architecture Overview
+
+This is a personal portfolio website built with **SvelteKit** (using **Svelte 5**) and styled with **Tailwind CSS v4**, featuring comprehensive visual regression testing with **Argos**.
+
+### Important Documentation Links
+
+- **Svelte 5**: https://svelte.dev/docs/svelte/overview
+- **Svelte 5 Migration Guide**: https://svelte.dev/docs/svelte/v5-migration-guide
+- **SvelteKit**: https://svelte.dev/docs/kit/
+- **Tailwind CSS**: https://tailwindcss.com/docs/
+
+### Project Structure
+
+- **src/routes/**: SvelteKit file-based routing
+  - `+layout.svelte`: Main layout with Nav and theme initialization
+  - `+page.svelte`: Homepage with hero section and animations
+  - `about/+page.svelte`: About page with interests and bio
+  - `projects/+page.svelte`: Project showcase with optimized images
+  - `photos/+page.svelte`: Photo gallery with modal viewer
+  - `contact/+page.svelte`: Contact methods and social links
+
+- **src/lib/**: Shared library code ($lib alias)
+  - `components/`: Reusable Svelte 5 components
+    - `Nav.svelte`: Navigation with active states and theme toggle
+    - `ThemeToggle.svelte`: Dark/light mode toggle
+    - `PhotoModal.svelte`: Modal for photo gallery viewing
+    - `SEO.svelte`: Reusable SEO component for Open Graph and Twitter Cards
+  - `assets/images/`: Optimized images processed by Vite
+    - `photos/`: Photo gallery images (AVIF/WebP/JPEG)
+    - `projects/`: Project screenshot images (AVIF/WebP/PNG)
+  - `stores/`: Svelte stores
+    - `theme.ts`: Theme management with localStorage persistence
+  - `types.ts`: TypeScript type definitions
+
+- **static/**: Static files served as-is (no processing)
+  - `robots.txt`: SEO configuration with sitemap reference
+  - `sitemap.xml`: XML sitemap for search engines
+  - `favicon.ico`, `social.png`: Site metadata assets
+
+### Modern Tech Stack
+
+- **Svelte 5**: Latest version with new reactivity model ($state, $effect)
+- **SvelteKit**: Full-stack framework with Vite
+- **TypeScript**: Full type safety throughout
+- **Tailwind CSS v4**: Latest version with CSS-first configuration
+- **Vite**: Build tool for fast development and optimized builds
+- **@sveltejs/enhanced-img**: Automatic image optimization (AVIF/WebP generation)
+- **Fathom Analytics**: Privacy-focused analytics with custom event tracking
+- **Playwright**: End-to-end testing framework with visual regression testing
+
+### Theme System
+
+- **CSS Custom Properties**: Theme variables defined in `app.css`
+- **Dark Mode**: Automatic system preference detection with manual toggle
+- **Color Palette**: Orange primary (#f97316) with dark red accents (#dc2626)
+- **Persistence**: Theme preference saved to localStorage
+
+### Build System
+
+- **Vite**: Modern build tool replacing Rollup/Webpack
+- **SvelteKit Adapter**: Vercel adapter for deployment
+- **TypeScript**: Compile-time type checking
+- **ESLint + Prettier**: Code quality and formatting
+
+### Styling Approach
+
+- **Tailwind CSS v4**: Utility-first with new @theme syntax
+- **System Fonts**: Using system UI font stack
+- **CSS Custom Properties**: For theme variables and smooth transitions
+- **Responsive Design**: Mobile-first approach with Tailwind breakpoints
+
+### Image Optimization
+
+- **@sveltejs/enhanced-img**: Automatically generates AVIF, WebP, and original formats
+- **Asset Organization**: Images in `src/lib/assets/images/` for Vite processing
+- **Static Files**: Only truly static files (robots.txt, favicon, etc.) in `static/`
+- **Usage**: Import with `?enhanced` query and use `<enhanced:img>` component
+- **Performance**: Dramatic file size reductions (619kB → 6.61kB AVIF)
+
+### Analytics
+
+- **Fathom Analytics**: Privacy-focused analytics with site ID `NKUUIGYT`
+- **Custom Events**: Counting user interactions instead of "tracking"
+  - Nav clicks: `nav_about_click`, `nav_projects_click`, etc.
+  - Project interactions: `project_demo_repo_remover`, `project_github_personal_website`
+  - Photo views: `photo_view_faraglioni_islets`, etc.
+- **Implementation**: Functions like `countNavClick()`, `countProjectClick()`
+
+### SEO & Performance
+
+- **SEO Component**: Reusable `SEO.svelte` component for consistent meta tags
+- **Open Graph**: Complete social media preview support (Facebook, Twitter, etc.)
+- **Sitemap**: XML sitemap at `/sitemap.xml` for search engine discovery
+- **Robots.txt**: Proper search engine crawler configuration
+- **Performance**: Image optimization with AVIF/WebP formats
+
+### Testing & Quality
+
+- **E2E Testing**: 24 comprehensive Playwright tests with DRY utilities
+- **Visual Regression**: Argos integration for cross-platform visual testing
+- **Test Coverage**: Desktop, mobile, tablet, and dark theme screenshots
+- **Smart Waiting**: Content-aware waits instead of networkidle for faster, more reliable tests
+- **Pre-commit Hooks**: Automatic formatting (Prettier) and linting (ESLint) on every commit
+- **CI/CD**: GitHub Actions with Argos reporter for visual diff reviews
+
+### Development Tools
+
+- **Node Version**: Managed with `.node-version` file (Node 22.12+)
+- **Quality Checks**: `npm run check` catches TypeScript and accessibility issues
+- **Accessibility**: All buttons/links have proper `aria-label` attributes
+- **Hot Reloading**: Fast development with Vite HMR
+- **Git Hooks**: Husky + lint-staged for automatic code quality on commit
+- **Test Utils**: DRY utilities in `e2e/test-utils.ts` for maintainable test code
+
+### Visual Testing with Argos
+
+- **Cross-platform Consistency**: Argos handles Linux CI vs macOS local differences
+- **Comprehensive Coverage**: All pages tested on desktop, mobile, and dark theme
+- **Smart Screenshots**: Content-aware waiting with font and image loading detection
+- **CI Integration**: Automatic screenshot uploads and PR status checks
+- **Review Process**: Visual diffs available in Argos dashboard for easy review
+
+### Deployment
+
+- **Vercel**: Deployed via @sveltejs/adapter-vercel
+- **Static Generation**: Pre-rendered for optimal performance

README.md

@@ -1,13 +1,29 @@
-# Zaahir Moolla - Personal Website
+# Zaahir's Personal Website
 
-This is my personal website. You can check it out here: https://zaahir.ca
+My little corner of the internet. Check it out [here](https://zaahir.ca).
 
-The design was mostly borrowed from https://wrapbootstrap.com/theme/articulate-resume-portfolio-WB0N5LC7P.
+## Tech Stack
 
-## Built with:
-  - [Sapper](https://sapper.svelte.dev/)
-  - [Tailwind.css](https://tailwindcss.com)
-  - [Hover.css](https://ianlunn.github.io/Hover/)
-  - [icons8](https://icons8.com)
-  - [Vercel](https://vercel.com/home)
-  - [Fathom Analytics](https://usefathom.com/)
+- **SvelteKit** (Svelte 5) - Full-stack framework
+- **Tailwind CSS** - Styles
+- **Vite** - Build tool
+- **Vercel** - Deployment
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server
+npm run dev
+
+# Build for production
+npm run build
+
+# Run type checking
+npm run check
+
+# Run tests
+npm test
+```