Task 1: Initialize React project with Vite, TypeScript, Tailwind

- Scaffolded project with React 18, Vite, TypeScript - Configured Tailwind CSS with custom design tokens (teal, coral, ecg colors) - Added Framer Motion and Lucide React dependencies - Set up Google Fonts (Fira Code, Plus Jakarta Sans, Inter Tight) - Created TypeScript interfaces for CV data types - Added utility function for skill gauge calculations - Quality checks passing: typecheck, build, lint all clean
2026-02-10 15:39:29 +00:00
parent 06a312fbb7
commit f140c16881
21 changed files with 4603 additions and 2 deletions
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# TypeScript
+*.tsbuildinfo
@@ -75,7 +75,7 @@ src/

 ## Tasks

- [ ] **Task 1: Initialize React project with Vite + TypeScript + Tailwind**
+- [x] **Task 1: Initialize React project with Vite + TypeScript + Tailwind**

  Run `npm create vite@latest . -- --template react-ts` to scaffold the project. Install dependencies: `npm install framer-motion lucide-react`. Initialize Tailwind: `npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p`. Configure `tailwind.config.js` with custom colors (teal #00897B, coral #FF6B6B, etc.). Set up `src/index.css` with Tailwind directives and CSS custom properties matching concept.html.

@@ -25,3 +25,24 @@
 - This progress.txt reset for new phase

 <!-- Iterations will be logged here as tasks are completed -->
+ 
+### Iteration 1 — Task 1: Initialize React project
+- **Completed**: Task 1 - Initialize React project with Vite + TypeScript + Tailwind
+- **Files created**:
+  - `package.json` with dependencies: React 18, Framer Motion, Lucide React, Tailwind
+  - `tsconfig.json`, `tsconfig.app.json`, `tsconfig.node.json` for TypeScript
+  - `vite.config.ts` with path alias `@/` -> `./src/`
+  - `tailwind.config.js` with custom colors (teal, coral, ecg-green), fonts, shadows
+  - `postcss.config.js` for Tailwind processing
+  - `index.html` with Google Fonts (Fira Code, Plus Jakarta Sans, Inter Tight)
+  - `src/index.css` with Tailwind directives and CSS custom properties
+  - `src/main.tsx` entry point
+  - `src/App.tsx` placeholder component
+  - `src/types/index.ts` with TypeScript interfaces
+  - `src/lib/utils.ts` with skill gauge calculation helper
+  - `eslint.config.js` with React hooks and refresh rules
+- **Project structure created**: `src/components/`, `src/hooks/`, `src/lib/`, `src/types/`
+- **Quality checks**: `npm run typecheck` ✓, `npm run build` ✓, `npm run lint` ✓
+- **Learnings**: 
+  - Need `src/vite-env.d.ts` with `/// <reference types="vite/client" />` for CSS imports
+  - Vite refuses to scaffold in non-empty directory, so manual setup was needed
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Andy Charlwood — MPharm | CV</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,35 @@
+{
+  "name": "andy-charlwood-cv",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "framer-motion": "^11.15.0",
+    "lucide-react": "^0.468.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  }
+}
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF980E"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -0,0 +1,45 @@
+import { useState } from 'react'
+import type { Phase } from './types'
+
+function App() {
+  const [phase, setPhase] = useState<Phase>('boot')
+
+  return (
+    <div className="min-h-screen bg-white">
+      {phase === 'boot' && (
+        <div className="fixed inset-0 bg-black flex flex-col justify-center p-10 font-mono text-sm">
+          <div className="text-ecg-green">CLINICAL TERMINAL v3.2.1</div>
+          <button 
+            onClick={() => setPhase('content')}
+            className="mt-8 text-ecg-cyan hover:text-ecg-green transition-colors"
+          >
+            Press to skip boot sequence (placeholder)
+          </button>
+        </div>
+      )}
+      
+      {phase === 'content' && (
+        <main className="max-w-[1000px] mx-auto px-8">
+          <section className="min-h-screen flex flex-col justify-center items-center text-center py-20">
+            <h1 className="font-primary font-bold text-5xl text-heading">Andy Charlwood</h1>
+            <p className="text-muted mt-2">Deputy Head of Population Health &amp; Data Analysis</p>
+            <span className="inline-block mt-2 px-4 py-1 border border-teal rounded-full text-xs text-teal font-medium">
+              Norwich, UK
+            </span>
+            <p className="mt-6 max-w-[560px] text-text">
+              GPhC Registered Pharmacist specialising in medicines optimisation, population health analytics, and NHS efficiency programmes.
+            </p>
+          </section>
+          
+          <section className="py-20">
+            <h2 className="font-primary text-2xl font-bold text-heading text-center mb-8">
+              Components will be built in subsequent tasks
+            </h2>
+          </section>
+        </main>
+      )}
+    </div>
+  )
+}
+
+export default App
@@ -0,0 +1,67 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg: #FFFFFF;
+  --text: #334155;
+  --heading: #0F172A;
+  --teal: #00897B;
+  --teal-light: rgba(0, 137, 123, 0.08);
+  --teal-medium: rgba(0, 137, 123, 0.15);
+  --coral: #FF6B6B;
+  --coral-light: rgba(255, 107, 107, 0.08);
+  --muted: #94A3B8;
+  --border: #E2E8F0;
+  --card-bg: #FFFFFF;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
+  --radius: 16px;
+  --font-primary: 'Plus Jakarta Sans', system-ui, sans-serif;
+  --font-secondary: 'Inter Tight', system-ui, sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-primary);
+  font-size: 15px;
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@layer utilities {
+  .font-primary {
+    font-family: var(--font-primary);
+  }
+  .font-secondary {
+    font-family: var(--font-secondary);
+  }
+  .font-mono {
+    font-family: 'Fira Code', monospace;
+  }
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+@keyframes seedPulse {
+  0%, 100% { text-shadow: 0 0 8px #00ff41, 0 0 16px #00ff41; }
+  50% { text-shadow: 0 0 14px #00ff41, 0 0 28px #00ff41, 0 0 40px rgba(0,255,65,0.3); }
+}
+
+.animate-blink {
+  animation: blink 1s step-end infinite;
+}
+
+.animate-seed-pulse {
+  animation: seedPulse 0.6s ease-in-out infinite;
+}
@@ -0,0 +1,8 @@
+export function calculateSkillOffset(level: number, radius: number): number {
+  const circumference = 2 * Math.PI * radius
+  return circumference * (1 - level / 100)
+}
+
+export function formatBootLine(text: string): string {
+  return text
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
@@ -0,0 +1,41 @@
+export interface Skill {
+  name: string
+  level: number
+  category: 'Technical' | 'Clinical' | 'Strategic'
+  color: 'teal' | 'coral'
+}
+
+export interface Experience {
+  role: string
+  org: string
+  date: string
+  bullets: string[]
+  isCurrent?: boolean
+}
+
+export interface Education {
+  degree: string
+  institution: string
+  period: string
+  detail: string
+}
+
+export interface Project {
+  title: string
+  description: string
+  link?: string
+}
+
+export interface ContactItem {
+  icon: 'phone' | 'mail' | 'linkedin' | 'mapPin'
+  value: string
+  label: string
+  href?: string
+}
+
+export type Phase = 'boot' | 'ecg' | 'content'
+
+export interface BootLine {
+  html: string
+  delay: number
+}
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,46 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        teal: {
+          DEFAULT: '#00897B',
+          light: 'rgba(0, 137, 123, 0.08)',
+          medium: 'rgba(0, 137, 123, 0.15)',
+        },
+        coral: {
+          DEFAULT: '#FF6B6B',
+          light: 'rgba(255, 107, 107, 0.08)',
+        },
+        heading: '#0F172A',
+        text: '#334155',
+        muted: '#94A3B8',
+        border: '#E2E8F0',
+        ecg: {
+          green: '#00ff41',
+          cyan: '#00e5ff',
+          dim: '#3a6b45',
+          grey: '#666666',
+        },
+      },
+      fontFamily: {
+        primary: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
+        secondary: ['Inter Tight', 'system-ui', 'sans-serif'],
+        mono: ['Fira Code', 'monospace'],
+      },
+      boxShadow: {
+        'sm': '0 1px 3px rgba(0,0,0,0.06)',
+        'md': '0 4px 12px rgba(0,0,0,0.08)',
+        'lg': '0 8px 24px rgba(0,0,0,0.1)',
+      },
+      borderRadius: {
+        'card': '16px',
+      },
+    },
+  },
+  plugins: [],
+}
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "src/vite-env.d.ts"]
+}
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app" },
+    { "path": "./tsconfig.node" }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF980E"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>