This is a personal website designed to highlight my work and experience. The site currently focuses on four primary sections—Header, About, Projects, and Work—that present a concise overview of who I am, what I build, and how I work.
The website is built with React, Sass, and modern JavaScript. Its layout emphasizes clarity and polish so visitors can quickly explore the featured sections and learn more about my background.
- Responsive layout optimized for both mobile and desktop viewing
- Hero-style header with social links, a theme toggle, and quick navigation
- About section with a concise biography and supplemental media embeds
- Projects grid that spotlights selected work with dynamic tag styling
- Work timeline outlining professional experience and key achievements
- Proof companion on unlocked routes (lazy-loaded atlas; see docs/PROOF.md)
- Back to top button and sticky navigation for smooth browsing
Visit the live site on any device to explore the content. The navigation bar and in-page anchor links let you jump directly to the Header, About, Projects, and Work sections. Use the theme toggle in the header to switch between light and dark modes, and the floating back-to-top button to quickly return to the top of the page.
Upcoming improvements include expanding the showcased projects, refining the work timeline with additional context, and introducing new interactive elements that complement the existing sections.
Detailed technical documentation, design specifications, and migration plans are available in the docs/ folder:
- Changelog – Release history (current: v0.1.1).
- Architecture – Dev/build flows, app layers, Notion and Sass maps.
- Notion Integration – Comprehensive guide for the Google Sheets to Notion migration.
- Matrix Component – Easter-egg authentication effect and usage notes.
- Proof Companion – Unlock gating, sizing, vendor sync, and manifest verification.
- Code Audit Report – Security and quality analysis of the codebase.
- Development Notes – Technical notes and refactoring opportunities.
- Archive – Historical implementation debates and analyses.
- Run
./scripts/setup.shafter cloning to install dependencies. - Run
pnpm run compress-imagesto compress JPEG/PNG files in place undersrc/assets/images/. - A pre-commit hook runs this command automatically.
- Consider using Git LFS for large image files.
- Vercel Analytics and Speed Insights are included in the app bundle and activate automatically on Vercel deployments (enable each in the project dashboard).
| Directory | Description | Key files |
|---|---|---|
/docs |
Technical documentation and archives | NOTION_INTEGRATION.md, DEVELOPMENT_NOTES.md |
/src |
TypeScript/React application source | App.tsx, index.tsx |
/src/components/content |
Page sections | About/, Header/, NavBar/, Projects/, Work/ |
/src/components/effects |
Visual effects | Matrix/, Proof/, Moire/, Blur/, Loading/ |
/src/vendor/proof |
Vendored Proof React source + atlas | .proof-vendor.json, ProofCompanion.tsx |
/src/server/notion |
Notion content API modules | api.js, snapshot.js, validate.js |
/src/hooks |
Custom React hooks | useMobileDetection.ts, useScrollUtils.ts |
/src/utils |
Shared utilities | commonUtils.ts, audioUtils.ts, colorUtils.ts |
/api |
Vercel serverless routes | content.js, health.js |
/config |
Shared configuration | notion.json |
/public |
Static assets served as-is | index.html |
| Path | Tool | Used for |
|---|---|---|
dist/ |
Vite (pnpm run build / pnpm run build:dev) |
CI, Lighthouse, Vercel deploy |
Both build scripts emit to dist/. build:dev uses Vite development mode flags (CI/Lighthouse); build is the production profile Vercel uses. Local dev uses pnpm start on port 8080.
See AGENTS.md for the full command reference.
- Motion blur: Toggle via
.motion-blur-onand.motion-blur-offutility classes insrc/sass/base/_utilities.scss.
See docs/MATRIX_COMPONENT.md for the Matrix easter-egg effect (src/components/effects/Matrix/).
See docs/PROOF.md for the Proof companion (src/components/effects/Proof/, src/vendor/proof/).