admin
b8c1aedb5a
Added @font-face declarations for both premium font candidates: - Elvaro Grotesque: 7 weights (Light 300 → Black 900) from WOFF2/WOFF files - Blumir: Variable font (100-700 weight range) from WOFF2/WOFF files Updated Tailwind config: - Added font-ui (Elvaro Grotesque) and font-ui-alt (Blumir) families - Removed font-inter references (replaced with font-ui) - Enhanced shadow tokens: pmr, pmr-hover, pmr-banner for Clinical Luxury depth - Kept font-geist (Geist Mono) for data/timestamps, font-mono (Fira Code) for boot/ECG Updated CSS variables and utility classes: - --font-ui: Elvaro Grotesque - --font-ui-alt: Blumir - .pmr-theme now uses var(--font-ui) instead of var(--font-inter) Fixed ESLint errors in ECGAnimation.tsx (viewOff/headSX should be const). Quality checks: All passed (typecheck, lint, build). Font files bundled correctly. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Andy Charlwood - Interactive CV
A distinctive interactive portfolio website featuring a three-phase cinematic loading experience: terminal boot sequence → ECG heartbeat animation → main content. Built with React, TypeScript, and Vite.
Features
- Three-Phase Loading Experience: Terminal boot (~4s) → ECG animation (~5-6s) → content reveal
- Interactive Sections: Hero, Skills, Experience, Education, Projects, Contact
- Smooth Animations: Framer Motion for scroll reveals and staggered transitions
- SVG Skill Visualization: Circular progress indicators for skill levels
- Floating Navigation: Active section tracking as you scroll
- Responsive Design: Tailwind CSS with custom breakpoints
Tech Stack
- Framework: React 18 + TypeScript
- Build Tool: Vite 6
- Styling: Tailwind CSS 3
- Animations: Framer Motion + Canvas API
- Icons: Lucide React
- Linting: ESLint 9
Getting Started
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
Available Scripts
| Command | Description |
|---|---|
npm run dev |
Start dev server (localhost:5173) |
npm run build |
TypeScript compile + Vite production build |
npm run typecheck |
TypeScript type checking only |
npm run lint |
Run ESLint |
npm run preview |
Preview production build |
Project Structure
src/
├── components/ # React components (PascalCase)
├── hooks/ # Custom hooks (use* prefix)
├── lib/ # Utility functions
├── types/ # TypeScript interfaces
├── App.tsx # Phase manager (root component)
└── index.css # Global styles + Tailwind
Design Tokens
- Primary: Teal
#00897B - Accent: Coral
#FF6B6B - Fonts: Plus Jakarta Sans (primary), Inter Tight (secondary), Fira Code (mono)
- Breakpoints: xs 480px, sm 640px, md 768px, lg 1024px, xl 1280px
License
Private - All rights reserved.