Document font loading and its network requirement; captions-over-video verified

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019yhnsd9RDz7jDSUUX7oEcH

.claude/skills/remotion-video/SKILL.md

@@ -0,0 +1,102 @@
+---
+name: remotion-video
+description: Create videos from React code with Remotion. Use when the user asks to make, animate, preview, or render a video, motion graphic, intro, caption, or social clip using code.
+---
+
+# Remotion Video
+
+Remotion makes videos out of React components. Each frame is a web page. Render them in order and you get an MP4.
+
+## Core ideas
+- **Composition**: one video. Has `width`, `height`, `fps`, `durationInFrames`.
+- **Frame**: `useCurrentFrame()` returns the current frame number. All animation is a function of the frame.
+- **`interpolate`**: maps a frame range to a value range (fade, slide).
+- **`spring`**: natural bouncy motion.
+- **`Sequence`**: shows children only during a frame range.
+- **`AbsoluteFill`**: full-screen layer; stack them for backgrounds.
+- **`Audio` / `OffthreadVideo` / `Img`**: media. Put files in `public/` and load with `staticFile("name.mp3")`.
+
+## Workflow
+1. **Plan first.** Ask or decide: length (seconds), size (1920x1080, or 1080x1920 for vertical), fps (30), and the scenes. Keep scenes to a short list.
+2. **Set up** (skip if the project exists):
+   ```
+   npx create-video@latest
+   cd <project> && npm install
+   ```
+3. **Write** compositions in `src/`, register them in `src/Root.tsx`.
+4. **Preview**: `npm run dev` (opens Remotion Studio).
+5. **Render**: `npx remotion render <CompositionId> out/video.mp4`
+   Still frame: `npx remotion still <CompositionId> out/frame.png --frame=30`
+6. **Verify**: render one still first, check it looks right, then render the full video.
+
+## Starter example
+`src/Root.tsx`
+```tsx
+import { Composition } from "remotion";
+import { Hello } from "./Hello";
+
+export const RemotionRoot = () => (
+  <Composition
+    id="Hello"
+    component={Hello}
+    durationInFrames={150}
+    fps={30}
+    width={1920}
+    height={1080}
+    defaultProps={{ title: "Hello, world" }}
+  />
+);
+```
+
+`src/Hello.tsx`
+```tsx
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+export const Hello = ({ title }: { title: string }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
+  const scale = spring({ frame, fps, config: { damping: 12 } });
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#0b1020", justifyContent: "center", alignItems: "center" }}>
+      <h1 style={{ color: "white", fontSize: 120, opacity, transform: `scale(${scale})` }}>{title}</h1>
+    </AbsoluteFill>
+  );
+};
+```
+
+## Rules of thumb
+- Never animate with CSS transitions, `setTimeout`, or CSS animations. They don't render per frame. Drive everything from `useCurrentFrame()`.
+- Always pass `extrapolateRight: "clamp"` to `interpolate` unless you want values to keep growing.
+- Seconds to frames: `seconds * fps`.
+- Use `<Sequence from={..} durationInFrames={..}>` to order scenes; `<Series>` to chain them.
+- Load fonts with `@remotion/google-fonts` so they are ready before rendering.
+- Keep props in `defaultProps` so the user can edit text in the Studio.
+- Rendering needs Chromium and ffmpeg (Remotion installs/handles these); first render can be slow.
+
+## Fonts
+Google Fonts: `npm i @remotion/google-fonts`, then
+```tsx
+import { loadFont } from "@remotion/google-fonts/Inter";
+const { fontFamily } = loadFont();   // use as style={{ fontFamily }}
+```
+It downloads the font while rendering, so the machine needs internet access to fonts.googleapis.com. If the render fails with "Failed to load font", the network is blocking it: use a local font file in `public/` with `@remotion/fonts` (`loadFont({ family, url: staticFile("x.woff2") })`) or a system font. (Not verified in the sandbox where this skill was tested, which had no access to Google.)
+
+## Common problems
+- **Can't download the browser (no internet / locked-down machine)**: point Remotion at an installed Chromium:
+  `npx remotion render <Id> out/video.mp4 --browser-executable=/path/to/chromium --chrome-mode=chrome-for-testing`
+- **Blank/white frames**: an asset path is wrong; use `staticFile()`.
+- **Flicker**: an image or font not loaded; use `<Img>` and `@remotion/google-fonts`.
+- **Slow render**: lower resolution/fps while testing, or use `--concurrency`.
+
+## Templates
+Copy-paste starting points. Read the one that fits:
+- `templates/captions.md` - words highlighted in time with speech
+- `templates/charts.md` - animated bar chart
+- `templates/intro-outro.md` - title card + chaining scenes with `Series`
+- `templates/audio-voiceover.md` - background music, voiceover, auto video length
+- `templates/vertical.md` - 1080x1920 clips for Reels/TikTok/Shorts
+
+## Docs
+https://www.remotion.dev/docs

.claude/skills/remotion-video/templates/audio-voiceover.md

@@ -0,0 +1,62 @@
+# Template: Audio, music and voiceover
+
+Put sound files in `public/` (mp3 or wav). Load them with `staticFile()`.
+
+`src/Narrated.tsx`
+```tsx
+import { AbsoluteFill, Audio, Sequence, interpolate, staticFile, useVideoConfig } from "remotion";
+import { getAudioDurationInSeconds } from "@remotion/media-utils";
+import type { CalculateMetadataFunction } from "remotion";
+
+type Props = { title: string; voice: string; music: string };
+
+// Make the video exactly as long as the voiceover (+1 second of padding).
+export const calcNarratedMetadata: CalculateMetadataFunction<Props> = async ({ props }) => {
+  const seconds = await getAudioDurationInSeconds(staticFile(props.voice));
+  return { durationInFrames: Math.ceil((seconds + 1) * 30) };
+};
+
+export const Narrated = ({ title, voice, music }: Props) => {
+  const { fps, durationInFrames } = useVideoConfig();
+  return (
+    <AbsoluteFill style={{ background: "#0b1020", justifyContent: "center", alignItems: "center" }}>
+      <h1 style={{ color: "white", fontSize: 110 }}>{title}</h1>
+
+      {/* Background music: quiet, fades out over the last second. */}
+      <Audio
+        src={staticFile(music)}
+        volume={(f) => interpolate(f, [durationInFrames - fps, durationInFrames], [0.15, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })}
+      />
+
+      {/* Voiceover starts half a second in, full volume. */}
+      <Sequence from={Math.round(fps * 0.5)}>
+        <Audio src={staticFile(voice)} volume={1} />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};
+```
+
+Register it (note `calculateMetadata`):
+```tsx
+<Composition
+  id="Narrated"
+  component={Narrated}
+  calculateMetadata={calcNarratedMetadata}
+  durationInFrames={300}   // placeholder, replaced by calculateMetadata
+  fps={30} width={1920} height={1080}
+  defaultProps={{ title: "My story", voice: "voice.mp3", music: "music.mp3" }}
+/>
+```
+
+Install: `npm i @remotion/media-utils`
+
+Getting a voiceover
+- Record yourself, or generate speech with a text-to-speech service, and save as `public/voice.mp3`. Never commit API keys; keep them in environment variables.
+- Pair with `templates/captions.md`: feed it word timings from a transcription of the same file.
+
+Rules
+- Music volume 0.1-0.2 so the voice stays clear.
+- `<Sequence from={...}>` delays when a sound starts.
+- Audio is only in the final render (mp4). Stills (`remotion still`) have no sound.
+- Check the sound made it in: `ffprobe out/video.mp4` should list an `Audio:` stream.

.claude/skills/remotion-video/templates/captions.md

@@ -0,0 +1,38 @@
+# Template: Captions
+
+Words appear in time with speech. Give each word a start time in seconds.
+
+`src/Captions.tsx`
+```tsx
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
+
+type Word = { text: string; start: number; end: number }; // seconds
+
+export const Captions = ({ words, background = "#111" }: { words: Word[]; background?: string }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const t = frame / fps;
+
+  // Show a window of up to 5 words around the current one.
+  const current = words.findIndex((w) => t >= w.start && t < w.end);
+  const i = current === -1 ? 0 : current;
+  const visible = words.slice(Math.floor(i / 5) * 5, Math.floor(i / 5) * 5 + 5);
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: background, justifyContent: "flex-end", alignItems: "center", paddingBottom: 200 }}>
+      <div style={{ fontSize: 72, fontWeight: 800, color: "white", textShadow: "0 4px 12px black", textAlign: "center", maxWidth: "80%" }}>
+        {visible.map((w, k) => (
+          <span key={k} style={{ color: t >= w.start && t < w.end ? "#ffd400" : "white", marginRight: 16 }}>
+            {w.text}
+          </span>
+        ))}
+      </div>
+    </AbsoluteFill>
+  );
+};
+```
+
+Tips
+- Get word times from a transcription tool (e.g. `@remotion/captions` or Whisper) and save them as JSON in `public/`.
+- `background` is the backdrop when there is no video. Pass `"transparent"` when layering over a video.
+- Layer it over the video: `<AbsoluteFill><OffthreadVideo src={staticFile("clip.mp4")} /><Captions words={words} background="transparent" /></AbsoluteFill>`.

.claude/skills/remotion-video/templates/charts.md

@@ -0,0 +1,37 @@
+# Template: Animated bar chart
+
+Bars grow one after another.
+
+`src/BarChart.tsx`
+```tsx
+import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+type Bar = { label: string; value: number };
+
+export const BarChart = ({ data, color = "#4f8cff" }: { data: Bar[]; color?: string }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const max = Math.max(...data.map((d) => d.value));
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#0b1020", padding: 120, justifyContent: "flex-end" }}>
+      <div style={{ display: "flex", alignItems: "flex-end", gap: 40, height: 700 }}>
+        {data.map((d, i) => {
+          const grow = spring({ frame: frame - i * 6, fps, config: { damping: 15 } });
+          return (
+            <div key={d.label} style={{ flex: 1, textAlign: "center", color: "white", fontSize: 36 }}>
+              <div style={{ height: (d.value / max) * 600 * grow, background: color, borderRadius: 8 }} />
+              <div style={{ marginTop: 16 }}>{d.label}</div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+```
+
+Tips
+- Delay each bar with `frame - i * 6` (6 frames apart).
+- For lines, animate `strokeDashoffset` on an SVG path using `interpolate`.
+- Keep numbers readable: show the value as text, rounded.

.claude/skills/remotion-video/templates/intro-outro.md

@@ -0,0 +1,34 @@
+# Template: Title intro / outro card
+
+A short card (2-3 seconds) with a title and subtitle. Use at the start or end.
+
+`src/TitleCard.tsx`
+```tsx
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+export const TitleCard = ({ title, subtitle }: { title: string; subtitle?: string }) => {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+  const rise = spring({ frame, fps, config: { damping: 14 } });
+  const fadeOut = interpolate(frame, [durationInFrames - 15, durationInFrames], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ background: "linear-gradient(135deg,#1b2a6b,#0b1020)", justifyContent: "center", alignItems: "center", opacity: fadeOut }}>
+      <h1 style={{ color: "white", fontSize: 130, margin: 0, transform: `translateY(${(1 - rise) * 60}px)`, opacity: rise }}>{title}</h1>
+      {subtitle && <p style={{ color: "#9fb3ff", fontSize: 48, opacity: rise }}>{subtitle}</p>}
+    </AbsoluteFill>
+  );
+};
+```
+
+Chain with the main video using `<Series>`:
+```tsx
+<Series>
+  <Series.Sequence durationInFrames={90}><TitleCard title="My Video" /></Series.Sequence>
+  <Series.Sequence durationInFrames={600}><MainScene /></Series.Sequence>
+  <Series.Sequence durationInFrames={90}><TitleCard title="Thanks for watching" /></Series.Sequence>
+</Series>
+```

.claude/skills/remotion-video/templates/vertical.md

@@ -0,0 +1,23 @@
+# Template: Vertical clips (Reels / TikTok / Shorts)
+
+Same code, different size. Register a vertical composition:
+
+```tsx
+<Composition
+  id="Vertical"
+  component={MyScene}
+  width={1080}
+  height={1920}
+  fps={30}
+  durationInFrames={30 * 30} // 30 seconds
+/>
+```
+
+Render: `npx remotion render Vertical out/vertical.mp4`
+
+Rules
+- Keep text inside the **safe zone**: about 150px from the top, 350px from the bottom (apps cover those parts with buttons and captions), and 60px from the sides.
+- Use big text (60px+). Phone screens are small.
+- Keep clips under 60 seconds (Shorts limit); 15-30 seconds does best.
+- Use `useVideoConfig()` for width/height instead of hard-coding, so the same scene works wide and tall.
+- Put captions in the lower-middle, above the bottom safe zone (see captions.md).

keith-portfolio/.gitignore

@@ -1,2 +0,0 @@
-node_modules
-dist

keith-portfolio/PRD.md

@@ -1,46 +0,0 @@
-# PRD: Keith Rana Portfolio (built from the "Jack 3D Creator" template)
-
-## The restaurant analogy
-| Stage | Restaurant | This project |
-|---|---|---|
-| Phase 1 (done) | Food stand: one great dish, open today | The full single-page site with Keith's real content, photos and animations |
-| Phase 2 | Small restaurant: a few tables, a real menu | Make it easy to edit (content in one file), better mobile + accessibility |
-| Phase 3 | Full restaurant: front of house + back of house | Real contact form, email, project pages, CMS, analytics |
-
-Front of house = what visitors see. Back of house = forms, email, storage, security.
-
-## Core features
-1. Hero: giant "Hi, i'm jack" title, nav, magnetic portrait, Contact button
-2. Marquee: two rows of GIFs sliding left/right as you scroll
-3. About: floating 3D icons + words that light up as you scroll
-4. Services: white panel, 5 numbered services
-5. Projects: 3 cards that stack and shrink as you scroll
-6. Reusable parts: ContactButton, LiveProjectButton, FadeIn, Magnet, AnimatedText
-
-## Phased roadmap
-**Phase 1 — Food stand (today).** Static site, all 5 sections, all animations, responsive.
-Done when: builds with no errors; page loads with no console errors; every button/link works; all image URLs load.
-
-**Phase 2 — Small restaurant.** Nav links smooth-scroll to sections, Contact Me opens a mailto, content moved into editable data files, reduced-motion support, alt text, SEO tags, image fallbacks.
-
-**Phase 3 — Full restaurant.** Contact form with a backend (server-side validation, spam protection, rate limits), project detail pages, CMS, analytics, hosting.
-
-## Test ladder (each step must pass before the next)
-1. Page loads with no errors
-2. Buttons / links / forms work
-3. Real external APIs/assets work (images load)
-4. Security check (no secrets in code, safe external links, dependency audit)
-
-## Security notes
-Phase 1 has no forms, no logins, no secrets, so risk is low. External links use rel="noopener noreferrer". When Phase 3 adds a form, validation and spam protection must live on the server, and API keys must never be in front-end code.
-
-## Phase 1 status (done)
-- Content comes from Keith's existing portfolio: profile, 8 capabilities, 3 roles + 5 earlier roles, 4 projects, 10 certifications, contact details (all in `src/data/content.ts`).
-- Each project card has its own illustrative diagram (drawn from the deliverables in Keith's portfolio text; swap for real screenshots when available).
-- Sections: Hero (portrait), scrolling photo/skills rows, About, Capability, Experience, Projects (stacking cards), Credentials, Contact.
-- Photos and the Kanit font ship inside the site (no outside image hosts needed).
-- Tested at 360, 390, 768, 1024, 1440 and 1920 px wide: no sideways scroll, no console errors, all images load.
-- Cloud preview: `node scripts/build-preview.mjs out.html` builds one self-contained page.
-
-## Not used yet
-- `it_helpdesk.db` (87 IT help-desk FAQs) was supplied but is not portfolio content. Candidate for a Phase 2 FAQ section if wanted.

keith-portfolio/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Keith Rana, IT Service Delivery Manager in Melbourne, Australia." />
-    <title>Keith Rana -- IT Service Delivery</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

keith-portfolio/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "keith-portfolio",
-  "private": true,
-  "version": "1.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc --noEmit && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@fontsource/kanit": "^5.3.0",
-    "framer-motion": "^12.38.0",
-    "lucide-react": "^0.344.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.18",
-    "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.5.3",
-    "vite": "^5.4.2"
-  }
-}

keith-portfolio/postcss.config.js

@@ -1,3 +0,0 @@
-export default {
-  plugins: { tailwindcss: {}, autoprefixer: {} },
-};

keith-portfolio/scripts/build-preview.mjs

@@ -1,24 +0,0 @@
-// Builds ONE self-contained HTML page for the Claude cloud preview.
-// Claude's cloud pages block outside images and files, so photos and fonts are baked in.
-// Usage: node scripts/build-preview.mjs <output.html>
-import { execFileSync } from 'node:child_process';
-import { readFileSync, readdirSync, writeFileSync } from 'node:fs';
-
-const out = process.argv[2] ?? 'preview.html';
-execFileSync('npm', ['run', 'build'], { stdio: 'inherit', env: { ...process.env, INLINE: '1' } });
-
-const dir = 'dist/assets/';
-const files = readdirSync(dir);
-const js = readFileSync(dir + files.find((f) => f.endsWith('.js')), 'utf8').replace(/<\/script/g, '<\\/script');
-const css = readFileSync(dir + files.find((f) => f.endsWith('.css')), 'utf8');
-
-const html = `<meta charset="utf-8">
-<title>Keith Rana Portfolio</title>
-<style>${css}
-html,body{background:#0C0C0C}</style>
-<div id="root"></div>
-<script type="module">${js}</script>
-`;
-writeFileSync(out, html);
-const mb = Buffer.byteLength(html) / 1048576;
-console.log(`wrote ${out} (${mb.toFixed(1)} MB)${mb > 16 ? '  WARNING: over the 16 MB page limit' : ''}`);

keith-portfolio/src/App.tsx

@@ -1,26 +0,0 @@
-import HeroSection from './sections/HeroSection';
-import MarqueeSection from './sections/MarqueeSection';
-import AboutSection from './sections/AboutSection';
-import ServicesSection from './sections/ServicesSection';
-import ExperienceSection from './sections/ExperienceSection';
-import ProjectsSection from './sections/ProjectsSection';
-import CredentialsSection from './sections/CredentialsSection';
-import ContactSection from './sections/ContactSection';
-import { ContactProvider } from './components/ContactDialog';
-
-export default function App() {
-  return (
-    <ContactProvider>
-    <main style={{ background: '#0C0C0C', overflowX: 'clip' }}>
-      <HeroSection />
-      <MarqueeSection />
-      <AboutSection />
-      <ServicesSection />
-      <ExperienceSection />
-      <ProjectsSection />
-      <CredentialsSection />
-      <ContactSection />
-    </main>
-    </ContactProvider>
-  );
-}

keith-portfolio/src/components/AnimatedText.tsx

@@ -1,30 +0,0 @@
-import { useRef } from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
-import type { MotionValue } from 'framer-motion';
-
-function Char({ char, index, total, progress }: { char: string; index: number; total: number; progress: MotionValue<number> }) {
-  const start = index / total;
-  const end = start + 1 / total;
-  const opacity = useTransform(progress, [start, end], [0.2, 1]);
-  return (
-    <span className="relative">
-      <span className="invisible">{char}</span>
-      <motion.span className="absolute left-0 top-0" style={{ opacity }}>
-        {char}
-      </motion.span>
-    </span>
-  );
-}
-
-export default function AnimatedText({ text, className, style }: { text: string; className?: string; style?: React.CSSProperties }) {
-  const ref = useRef<HTMLParagraphElement>(null);
-  const { scrollYProgress } = useScroll({ target: ref, offset: ['start 0.8', 'end 0.2'] });
-  const chars = Array.from(text);
-  return (
-    <p ref={ref} className={className} style={style} aria-label={text}>
-      {chars.map((c, i) =>
-        c === ' ' ? ' ' : <Char key={i} char={c} index={i} total={chars.length} progress={scrollYProgress} />
-      )}
-    </p>
-  );
-}

keith-portfolio/src/components/ContactButton.tsx

@@ -1,21 +0,0 @@
-import { useOpenContact } from './ContactDialog';
-
-export default function ContactButton() {
-  const openContact = useOpenContact();
-  return (
-    <button
-      type="button"
-      onClick={openContact}
-      className="inline-block whitespace-nowrap rounded-full px-8 py-3 text-xs font-medium uppercase tracking-widest text-white sm:px-10 sm:py-3.5 sm:text-sm md:px-12 md:py-4 md:text-base"
-      style={{
-        background: 'linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)',
-        boxShadow: '0px 4px 4px rgba(181, 1, 167, 0.25), 4px 4px 12px #7721B1 inset',
-        outline: '2px solid white',
-        outlineOffset: '-3px',
-        cursor: 'pointer',
-      }}
-    >
-      Contact Me
-    </button>
-  );
-}

keith-portfolio/src/components/ContactDialog.tsx

@@ -1,101 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import type { ReactNode } from 'react';
-import { Check, Copy, Mail, X } from 'lucide-react';
-import { profile } from '../data/content';
-
-const OpenContext = createContext<() => void>(() => {});
-export const useOpenContact = () => useContext(OpenContext);
-
-const subject = encodeURIComponent('Portfolio enquiry');
-const to = encodeURIComponent(profile.email);
-const options = [
-  { label: 'Open my email app', href: `mailto:${profile.email}?subject=${subject}`, newTab: false },
-  { label: 'Write in Gmail', href: `https://mail.google.com/mail/?view=cm&fs=1&to=${to}&su=${subject}`, newTab: true },
-  { label: 'Write in Yahoo Mail', href: `https://compose.mail.yahoo.com/?to=${to}&subject=${subject}`, newTab: true },
-];
-
-const optionClass =
-  'flex items-center justify-between gap-3 rounded-full border-2 border-[#D7E2EA] px-6 py-3 text-sm font-medium uppercase tracking-widest text-[#D7E2EA] transition-colors hover:bg-[#D7E2EA]/10 sm:text-base';
-
-export function ContactProvider({ children }: { children: ReactNode }) {
-  const [open, setOpen] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const closeRef = useRef<HTMLButtonElement>(null);
-  const opener = useRef<HTMLElement | null>(null);
-
-  const show = useCallback(() => {
-    opener.current = document.activeElement as HTMLElement | null;
-    setCopied(false);
-    setOpen(true);
-  }, []);
-  const hide = useCallback(() => {
-    setOpen(false);
-    opener.current?.focus?.();
-  }, []);
-
-  useEffect(() => {
-    if (!open) return;
-    closeRef.current?.focus();
-    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && hide();
-    document.addEventListener('keydown', onKey);
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.removeEventListener('keydown', onKey);
-      document.body.style.overflow = prev;
-    };
-  }, [open, hide]);
-
-  const copy = async () => {
-    try {
-      await navigator.clipboard.writeText(profile.email);
-      setCopied(true);
-    } catch {
-      inputRef.current?.select();
-    }
-  };
-
-  return (
-    <OpenContext.Provider value={show}>
-      {children}
-      {open && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm"
-          onMouseDown={(e) => e.target === e.currentTarget && hide()}
-        >
-          <div role="dialog" aria-modal="true" aria-labelledby="contact-title" className="relative flex w-full max-w-md flex-col gap-5 rounded-[32px] border-2 border-[#D7E2EA] bg-[#0C0C0C] p-6 sm:p-8">
-            <button ref={closeRef} onClick={hide} aria-label="Close" className="absolute right-4 top-4 rounded-full p-2 text-[#D7E2EA] transition-colors hover:bg-[#D7E2EA]/10">
-              <X size={22} />
-            </button>
-            <h2 id="contact-title" className="hero-heading pr-10 text-4xl font-black uppercase leading-none sm:text-5xl">Email Keith</h2>
-            <p className="font-light leading-relaxed text-[#D7E2EA]/80">Pick how you would like to write. Your message goes to the address below.</p>
-            <div className="flex items-center gap-2">
-              <input
-                ref={inputRef}
-                id="contact-email"
-                readOnly
-                value={profile.email}
-                aria-label="Email address"
-                onFocus={(e) => e.currentTarget.select()}
-                className="min-w-0 flex-1 rounded-full border border-[#D7E2EA]/40 bg-transparent px-5 py-3 text-[#D7E2EA]"
-              />
-              <button onClick={copy} className="flex shrink-0 items-center gap-2 rounded-full border border-[#D7E2EA]/40 px-4 py-3 text-sm text-[#D7E2EA] transition-colors hover:bg-[#D7E2EA]/10">
-                {copied ? <Check size={16} /> : <Copy size={16} />}
-                {copied ? 'Copied' : 'Copy'}
-              </button>
-            </div>
-            <div className="flex flex-col gap-3">
-              {options.map((o) => (
-                <a key={o.label} href={o.href} className={optionClass} {...(o.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
-                  {o.label}
-                  <Mail size={18} />
-                </a>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-    </OpenContext.Provider>
-  );
-}

keith-portfolio/src/components/FadeIn.tsx

@@ -1,42 +0,0 @@
-import { motion } from 'framer-motion';
-import type { MotionProps } from 'framer-motion';
-import type { ComponentType, ElementType, ReactNode } from 'react';
-
-type FadeInProps = {
-  children: ReactNode;
-  delay?: number;
-  duration?: number;
-  x?: number;
-  y?: number;
-  className?: string;
-  as?: ElementType;
-};
-
-const cache = new Map<ElementType, ComponentType<MotionProps & { className?: string }>>();
-const getMotion = (el: ElementType) => {
-  if (!cache.has(el)) cache.set(el, motion.create(el as 'div') as ComponentType<MotionProps & { className?: string }>);
-  return cache.get(el)!;
-};
-
-export default function FadeIn({
-  children,
-  delay = 0,
-  duration = 0.7,
-  x = 0,
-  y = 30,
-  className,
-  as = 'div',
-}: FadeInProps) {
-  const Component = getMotion(as);
-  return (
-    <Component
-      className={className}
-      initial={{ opacity: 0, x, y }}
-      whileInView={{ opacity: 1, x: 0, y: 0 }}
-      viewport={{ once: true, margin: '50px', amount: 0 }}
-      transition={{ duration, delay, ease: [0.25, 0.1, 0.25, 1] }}
-    >
-      {children}
-    </Component>
-  );
-}

keith-portfolio/src/components/Magnet.tsx

@@ -1,58 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import type { ReactNode } from 'react';
-
-type MagnetProps = {
-  children: ReactNode;
-  padding?: number;
-  strength?: number;
-  activeTransition?: string;
-  inactiveTransition?: string;
-  className?: string;
-};
-
-export default function Magnet({
-  children,
-  padding = 100,
-  strength = 2,
-  activeTransition = 'transform 0.3s ease-out',
-  inactiveTransition = 'transform 0.6s ease-in-out',
-  className,
-}: MagnetProps) {
-  const [active, setActive] = useState(false);
-  const [pos, setPos] = useState({ x: 0, y: 0 });
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const onMove = (e: MouseEvent) => {
-      if (!ref.current) return;
-      const { left, top, width, height } = ref.current.getBoundingClientRect();
-      const cx = left + width / 2;
-      const cy = top + height / 2;
-      const dx = Math.abs(cx - e.clientX);
-      const dy = Math.abs(cy - e.clientY);
-      if (dx < width / 2 + padding && dy < height / 2 + padding) {
-        setActive(true);
-        setPos({ x: (e.clientX - cx) / strength, y: (e.clientY - cy) / strength });
-      } else {
-        setActive(false);
-        setPos({ x: 0, y: 0 });
-      }
-    };
-    window.addEventListener('mousemove', onMove);
-    return () => window.removeEventListener('mousemove', onMove);
-  }, [padding, strength]);
-
-  return (
-    <div ref={ref} className={className} style={{ position: 'relative', display: 'inline-block' }}>
-      <div
-        style={{
-          transform: `translate3d(${pos.x}px, ${pos.y}px, 0)`,
-          transition: active ? activeTransition : inactiveTransition,
-          willChange: 'transform',
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

keith-portfolio/src/components/ProjectDiagram.tsx

@@ -1,149 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-
-export type DiagramKind = 'network' | 'server' | 'sccm' | 'voice';
-
-const INK = '#D7E2EA';
-const TEAL = '#2BB3A6';
-const MUTED = 'rgba(215,226,234,0.55)';
-const FILL = '#14161a';
-
-function Box({ x, y, w, h, label, sub, accent }: { x: number; y: number; w: number; h: number; label: string; sub?: string; accent?: boolean }) {
-  return (
-    <g>
-      <rect x={x} y={y} width={w} height={h} rx={14} fill={FILL} stroke={accent ? TEAL : INK} strokeWidth={accent ? 2.5 : 1.5} />
-      <text x={x + w / 2} y={y + h / 2 + (sub ? -4 : 8)} textAnchor="middle" fontSize={22} fontWeight={500} fill={INK}>{label}</text>
-      {sub && <text x={x + w / 2} y={y + h / 2 + 22} textAnchor="middle" fontSize={18} fill={MUTED}>{sub}</text>}
-    </g>
-  );
-}
-
-function Line({ x1, y1, x2, y2, dashed }: { x1: number; y1: number; x2: number; y2: number; dashed?: boolean }) {
-  return <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={MUTED} strokeWidth={2} strokeDasharray={dashed ? '6 6' : undefined} />;
-}
-
-function Arrow({ x1, y, x2, label }: { x1: number; y: number; x2: number; label?: string }) {
-  return (
-    <g>
-      <line x1={x1} y1={y} x2={x2 - 10} y2={y} stroke={TEAL} strokeWidth={3} />
-      <path d={`M${x2 - 14} ${y - 8} L${x2} ${y} L${x2 - 14} ${y + 8} Z`} fill={TEAL} />
-      {label && <text x={(x1 + x2) / 2} y={y - 14} textAnchor="middle" fontSize={20} fill={TEAL}>{label}</text>}
-    </g>
-  );
-}
-
-function Dot({ cx, cy, r = 14 }: { cx: number; cy: number; r?: number }) {
-  return <circle cx={cx} cy={cy} r={r} fill={FILL} stroke={TEAL} strokeWidth={2.5} />;
-}
-
-function Wifi({ cx, cy }: { cx: number; cy: number }) {
-  return (
-    <g fill="none" stroke={TEAL} strokeWidth={2.5} strokeLinecap="round">
-      <path d={`M${cx - 18} ${cy - 4} Q${cx} ${cy - 22} ${cx + 18} ${cy - 4}`} />
-      <path d={`M${cx - 10} ${cy + 4} Q${cx} ${cy - 6} ${cx + 10} ${cy + 4}`} />
-      <circle cx={cx} cy={cy + 12} r={2.5} fill={TEAL} />
-    </g>
-  );
-}
-
-const diagrams: Record<DiagramKind, { label: string; body: ReactNode }> = {
-  network: {
-    label: 'Network topology: Fortinet firewall connects to Fortinet 48P switches, which connect to access points.',
-    body: (
-      <>
-        <Box x={190} y={30} w={220} h={64} label="Fortinet firewall" accent />
-        <Line x1={300} y1={94} x2={300} y2={130} />
-        <Line x1={150} y1={130} x2={450} y2={130} />
-        <Line x1={150} y1={130} x2={150} y2={160} />
-        <Line x1={450} y1={130} x2={450} y2={160} />
-        <Box x={50} y={160} w={200} h={64} label="48P switch" sub="Fortinet" />
-        <Box x={350} y={160} w={200} h={64} label="48P switch" sub="Fortinet" />
-        {[90, 210, 390, 510].map((x, i) => (
-          <g key={x}>
-            <Line x1={i < 2 ? 150 : 450} y1={224} x2={x} y2={274} dashed />
-            <Dot cx={x} cy={296} r={22} />
-            <Wifi cx={x} cy={292} />
-          </g>
-        ))}
-        <text x={300} y={372} textAnchor="middle" fontSize={20} fill={MUTED}>Access point uplift</text>
-        <text x={300} y={400} textAnchor="middle" fontSize={20} fill={MUTED}>Network topology upgrade</text>
-      </>
-    ),
-  },
-  server: {
-    label: 'Server upgrade: virtual machines and services move from the existing server to the upgraded server, with updated network settings.',
-    body: (
-      <>
-        <Box x={20} y={70} w={190} h={200} label="" />
-        <text x={115} y={105} textAnchor="middle" fontSize={22} fontWeight={500} fill={INK}>Existing server</text>
-        <Box x={40} y={130} w={150} h={44} label="VMs" />
-        <Box x={40} y={192} w={150} h={44} label="Services" />
-        <Arrow x1={222} y={170} x2={378} label="Data migrated" />
-        <Box x={390} y={70} w={190} h={200} label="" accent />
-        <text x={485} y={105} textAnchor="middle" fontSize={22} fontWeight={500} fill={INK}>Upgraded server</text>
-        <Box x={410} y={130} w={150} h={44} label="VMs" />
-        <Box x={410} y={192} w={150} h={44} label="Services" />
-        <Line x1={485} y1={270} x2={485} y2={320} dashed />
-        <Box x={150} y={320} w={320} h={56} label="Updated network settings" />
-        <Line x1={470} y1={348} x2={485} y2={348} dashed />
-      </>
-    ),
-  },
-  sccm: {
-    label: 'SCCM implementation: install and configure SCCM, prepare settings, then establish the task-sequence process for endpoints.',
-    body: (
-      <>
-        <Box x={200} y={26} w={200} h={64} label="SCCM" accent />
-        <Line x1={300} y1={90} x2={300} y2={122} />
-        <Box x={40} y={122} w={150} h={92} label="Install" sub="& configure" />
-        <Box x={225} y={122} w={150} h={92} label="Prepare" sub="settings" />
-        <Box x={410} y={122} w={150} h={92} label="Task" sub="sequence" accent />
-        <Arrow x1={190} y={168} x2={225} />
-        <Arrow x1={375} y={168} x2={410} />
-        <Line x1={485} y1={214} x2={485} y2={262} dashed />
-        <Line x1={150} y1={262} x2={450} y2={262} dashed />
-        {[150, 250, 350, 450].map((x) => (
-          <g key={x}>
-            <Line x1={x} y1={262} x2={x} y2={292} dashed />
-            <rect x={x - 30} y={292} width={60} height={40} rx={6} fill={FILL} stroke={TEAL} strokeWidth={2.5} />
-            <line x1={x - 40} y1={344} x2={x + 40} y2={344} stroke={TEAL} strokeWidth={3} strokeLinecap="round" />
-          </g>
-        ))}
-        <text x={300} y={392} textAnchor="middle" fontSize={20} fill={MUTED}>Endpoints built through the task sequence</text>
-      </>
-    ),
-  },
-  voice: {
-    label: 'Microsoft Teams calling: number porting, dial-plan and call-flow design, then users supported by training, documentation and adoption monitoring.',
-    body: (
-      <>
-        <Box x={20} y={50} w={160} h={70} label="Number" sub="porting" />
-        <Box x={220} y={50} w={160} h={70} label="Dial plan" accent />
-        <Box x={420} y={50} w={160} h={70} label="Call flow" />
-        <Arrow x1={180} y={85} x2={220} />
-        <Arrow x1={380} y={85} x2={420} />
-        <Line x1={300} y1={120} x2={300} y2={168} dashed />
-        <Line x1={100} y1={168} x2={500} y2={168} dashed />
-        {[100, 300, 500].map((x) => (
-          <g key={x}>
-            <Line x1={x} y1={168} x2={x} y2={196} dashed />
-            <circle cx={x} cy={214} r={16} fill={FILL} stroke={TEAL} strokeWidth={2.5} />
-            <path d={`M${x - 28} ${264} Q${x} ${226} ${x + 28} ${264}`} fill={FILL} stroke={TEAL} strokeWidth={2.5} />
-          </g>
-        ))}
-        <text x={100} y={310} textAnchor="middle" fontSize={20} fill={INK}>User training</text>
-        <text x={300} y={310} textAnchor="middle" fontSize={20} fill={INK}>Documentation</text>
-        <text x={500} y={310} textAnchor="middle" fontSize={20} fill={INK}>Adoption monitoring</text>
-        <text x={300} y={380} textAnchor="middle" fontSize={20} fill={MUTED}>Microsoft Teams calling</text>
-      </>
-    ),
-  },
-};
-
-export default function ProjectDiagram({ kind, className, style }: { kind: DiagramKind; className?: string; style?: CSSProperties }) {
-  const d = diagrams[kind];
-  return (
-    <svg viewBox="0 0 600 420" role="img" aria-label={`Illustrative diagram. ${d.label}`} className={className} style={{ fontFamily: 'Kanit, sans-serif', ...style }}>
-      {d.body}
-    </svg>
-  );
-}

keith-portfolio/src/data/content.ts

@@ -1,140 +0,0 @@
-import portrait from '../assets/portrait.jpg';
-import leadership from '../assets/leadership.webp';
-import systems from '../assets/systems.webp';
-import signalMark from '../assets/signal-mark.webp';
-import networkPhoto from '../assets/projects/network.jpg';
-import serverPhoto from '../assets/projects/server.jpg';
-import sccmPhoto from '../assets/projects/sccm.jpg';
-import voicePhoto from '../assets/projects/voice.jpg';
-
-import type { DiagramKind } from '../components/ProjectDiagram';
-
-export const images = { portrait, leadership, systems, signalMark };
-
-export const profile = {
-  name: 'Keith Rana',
-  firstName: 'keith',
-  role: 'IT Service Delivery Manager',
-  location: 'Melbourne, Australia',
-  email: 'keith_rana@yahoo.com',
-  phone: '04 1668 7558',
-  phoneHref: 'tel:+61416687558',
-  tagline: 'an it service delivery manager keeping critical services steady while the work keeps moving',
-};
-
-export const aboutText =
-  'A results-driven IT professional with over 16 years of experience across telecommunications, education, and managed services, including more than 8 years leading technical teams. I make technology service delivery visible, stable, and continually better. Let\'s make delivery more dependable.';
-
-export const stats = [
-  { value: '16+', label: 'Years in IT' },
-  { value: '8+', label: 'Years leading' },
-];
-
-export const expertise = [
-  { name: 'IT Service Delivery', description: 'End-to-end accountability for service delivery against agreed SLAs, with reporting to senior stakeholders.' },
-  { name: 'Enterprise Infrastructure', description: 'Enterprise network, server and endpoint environments, including Fortinet, Zscaler and SCCM.' },
-  { name: 'ITIL & Change Control', description: 'ITIL process, measured change and service reporting that improve compliance and service quality.' },
-  { name: 'Incident & Escalation Leadership', description: 'Major incident management, workload prioritisation and escalations led with a calm, evidence-based approach.' },
-  { name: 'Vendor & Stakeholder Management', description: 'Clear ownership of the vendor relationships that sit behind every service the business relies on.' },
-  { name: 'Microsoft 365 & Intune', description: 'Hands-on depth in Microsoft 365, Azure and Intune across cloud applications and end-user devices.' },
-  { name: 'Cybersecurity & Access', description: 'Security, identity and access practices built into daily operations, backed by Microsoft security certifications.' },
-  { name: 'Team Development', description: 'Coaching, performance conversations, training and mentoring that grow capable, confident support teams.' },
-];
-
-export const roles = [
-  {
-    dates: 'Oct 2023 — Present',
-    role: 'IT Service Delivery Manager',
-    organisation: 'AFL Telecommunications',
-    summary: 'Leading the daily delivery of business-critical IT services, balancing prompt resolution, availability, security, and a dependable experience for end users.',
-    points: [
-      'Own service operations across cloud applications, Windows and Linux environments, desktops, virtual apps, networks, and end-user support.',
-      'Lead a support and service-desk team through coaching, performance conversations, workload prioritisation, and escalations.',
-      'Use incident patterns, service-performance reporting, change controls, and feedback loops to improve ITIL compliance and service quality.',
-    ],
-  },
-  {
-    dates: 'Dec 2021 — Sep 2023',
-    role: 'Information Technology Manager',
-    organisation: 'Suzanne Cory High School',
-    summary: 'Managed technology services, documentation, knowledge systems, infrastructure capacity, and Microsoft 365 operations in a fast-moving education environment.',
-    points: [
-      'Oversaw Microsoft 365 services, endpoint operations, security, quality, and the administration and maintenance of core IT infrastructure.',
-      'Led a skilled IT specialist team with a focus on strategic direction, mentoring, service effectiveness, and superior customer outcomes.',
-      'Coordinated systems migrations, upgrades, and deployments to defined scope and schedule constraints.',
-    ],
-  },
-  {
-    dates: 'May 2018 — Nov 2021',
-    role: 'IT Support Specialist — Team Lead',
-    organisation: 'Wesley College Melbourne',
-    summary: 'Directed a six-person IT support team and helped translate organisational priorities into reliable, well-documented technical service.',
-    points: [
-      'Established project scope, supported IT initiatives, and aligned delivery activity with strategic objectives.',
-      'Worked across Casper Management, AirWatch MDM, Microsoft Intune, and operational processes informed by ITIL principles.',
-      'Identified skills gaps, organised training, coordinated with project managers, and maintained clear project documentation.',
-    ],
-  },
-];
-
-export const foundations = [
-  { role: 'IT Support Officer', organisation: 'Mentone Grammar School', dates: 'Apr 2017 — Dec 2017' },
-  { role: 'IT Project Manager', organisation: 'Archirayan Infotech', dates: 'Aug 2015 — Jul 2016' },
-  { role: 'IT Technical Support', organisation: 'Has Tech Solutions', dates: 'Aug 2014 — Jul 2015' },
-  { role: 'IT Technical Engineer', organisation: 'Hindustan Cyber Services', dates: 'Oct 2012 — Aug 2014' },
-  { role: 'Assistant Systems Analyst', organisation: 'Prutha Technologies', dates: 'Oct 2009 — Sep 2010' },
-];
-
-export const projects = [
-  {
-    category: 'Network',
-    name: 'Network project',
-    body: 'Fortinet Firewall upgrade, Fortinet 48P Switches upgrade, Fortinet access point uplift, and network topology upgrade.',
-    delivered: ['Fortinet firewall upgrade', 'Fortinet 48P switches upgrade', 'Fortinet access point uplift', 'Network topology upgrade'],
-    diagram: 'network' as DiagramKind,
-    photo: networkPhoto,
-    photoPosition: 'center',
-  },
-  {
-    category: 'Infrastructure',
-    name: 'Server upgrade',
-    body: 'Upgraded the server with existing VMs and services, migrated data, and configured updated network settings.',
-    delivered: ['Server upgraded with existing VMs and services', 'Data migrated', 'Updated network settings configured'],
-    diagram: 'server' as DiagramKind,
-    photo: serverPhoto,
-    photoPosition: 'center',
-  },
-  {
-    category: 'Endpoint',
-    name: 'SCCM implementation',
-    body: 'Installed and configured SCCM, prepared the required settings, and established the task-sequence process.',
-    delivered: ['SCCM installed and configured', 'Required settings prepared', 'Task-sequence process established'],
-    diagram: 'sccm' as DiagramKind,
-    photo: sccmPhoto,
-    photoPosition: 'center',
-  },
-  {
-    category: 'Voice',
-    name: 'Microsoft Teams calling',
-    body: 'Delivered number-porting support, call-flow and dial-plan design, user training, documentation, and adoption monitoring.',
-    delivered: ['Number-porting support', 'Call-flow and dial-plan design', 'User training and documentation', 'Adoption monitoring'],
-    diagram: 'voice' as DiagramKind,
-    photo: voicePhoto,
-    photoPosition: 'center',
-  },
-];
-
-export const certifications = [
-  'Introduction to Cyber Security',
-  'Windows Client',
-  'Microsoft Teams Voice Engineer',
-  'M365 Teams Administrator Associate',
-  'Microsoft Azure Administrator Associate',
-  'Microsoft Azure Security Engineer Associate',
-  'M365 Security Administrator Associate',
-  'Microsoft Information Protection Administrator Associate',
-  'Project Management Essentials Certified',
-  'Cloud Computing',
-];
-
-export const education = { degree: 'Bachelor of Information Technology', school: 'Federation University', year: '2009' };

keith-portfolio/src/index.css

@@ -1,25 +0,0 @@
-@import '@fontsource/kanit/latin-300.css';
-@import '@fontsource/kanit/latin-400.css';
-@import '@fontsource/kanit/latin-500.css';
-@import '@fontsource/kanit/latin-700.css';
-@import '@fontsource/kanit/latin-900.css';
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-html, body, #root { background: #0C0C0C; }
-html { scroll-behavior: smooth; }
-body { font-family: 'Kanit', sans-serif; }
-
-.hero-heading {
-  background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html { scroll-behavior: auto; }
-}

keith-portfolio/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-import './index.css';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);

keith-portfolio/src/sections/AboutSection.tsx

@@ -1,46 +0,0 @@
-import FadeIn from '../components/FadeIn';
-import AnimatedText from '../components/AnimatedText';
-import ContactButton from '../components/ContactButton';
-import { aboutText, images, stats } from '../data/content';
-
-export default function AboutSection() {
-  return (
-    <section id="about" className="relative flex min-h-screen flex-col items-center justify-center gap-16 px-5 py-20 sm:gap-20 sm:px-8 md:gap-24 md:px-10">
-      <FadeIn delay={0.1} x={-80} y={0} duration={0.9} className="absolute left-[1%] top-[3%] w-[90px] sm:left-[2%] sm:w-[130px] md:left-[4%] md:w-[170px]">
-        <img src={images.signalMark} alt="" className="aspect-square w-full rounded-2xl object-cover" />
-      </FadeIn>
-      <FadeIn delay={0.25} x={-80} y={0} duration={0.9} className="absolute bottom-[4%] left-[3%] w-[100px] sm:left-[6%] sm:w-[150px] md:left-[10%] md:w-[200px]">
-        <img src={images.systems} alt="" className="aspect-[4/3] w-full -rotate-6 rounded-2xl object-cover" />
-      </FadeIn>
-      <FadeIn delay={0.15} x={80} y={0} duration={0.9} className="absolute right-[1%] top-[3%] w-[100px] sm:right-[2%] sm:w-[150px] md:right-[4%] md:w-[210px]">
-        <img src={images.leadership} alt="" className="aspect-[3/2] w-full rotate-6 rounded-2xl object-cover" />
-      </FadeIn>
-      <FadeIn delay={0.3} x={80} y={0} duration={0.9} className="absolute bottom-[4%] right-[3%] sm:right-[6%] md:right-[10%]">
-        <div className="flex gap-2 sm:gap-3">
-          {stats.map((s) => (
-            <div key={s.label} className="rounded-2xl border border-[#D7E2EA]/30 px-2.5 py-2 text-center sm:px-5 sm:py-3">
-              <div className="hero-heading text-2xl font-black leading-none sm:text-5xl md:text-6xl">{s.value}</div>
-              <div className="mt-1 whitespace-nowrap text-[9px] font-light uppercase tracking-wide text-[#D7E2EA] sm:text-xs">{s.label}</div>
-            </div>
-          ))}
-        </div>
-      </FadeIn>
-
-      <div className="relative z-10 flex flex-col items-center gap-10 sm:gap-14 md:gap-16">
-        <FadeIn delay={0} y={40}>
-          <h2 className="hero-heading text-center font-black uppercase leading-none tracking-tight" style={{ fontSize: 'clamp(3rem, 12vw, 160px)' }}>
-            About me
-          </h2>
-        </FadeIn>
-        <AnimatedText
-          text={aboutText}
-          className="max-w-[560px] text-center font-medium leading-relaxed text-[#D7E2EA]"
-          style={{ fontSize: 'clamp(1rem, 2vw, 1.35rem)' }}
-        />
-      </div>
-      <div className="relative z-10 mb-24 sm:mb-28 md:mb-0">
-        <ContactButton />
-      </div>
-    </section>
-  );
-}

keith-portfolio/src/sections/ContactSection.tsx

@@ -1,47 +0,0 @@
-import { ArrowUpRight, Phone } from 'lucide-react';
-import FadeIn from '../components/FadeIn';
-import ContactButton from '../components/ContactButton';
-import { profile } from '../data/content';
-
-export default function ContactSection() {
-  return (
-    <section id="contact" className="flex flex-col items-center gap-10 px-5 pb-10 pt-20 sm:gap-14 sm:px-8 md:px-10 md:pt-28">
-      <FadeIn>
-        <h2 className="hero-heading text-center font-black uppercase leading-none tracking-tight" style={{ fontSize: 'clamp(2.6rem, 10vw, 140px)' }}>
-          Let’s talk
-        </h2>
-      </FadeIn>
-      <FadeIn>
-        <p className="max-w-[560px] text-center font-medium leading-relaxed text-[#D7E2EA]" style={{ fontSize: 'clamp(1rem, 2vw, 1.35rem)' }}>
-          Based in {profile.location}. Available for the right conversation.
-        </p>
-      </FadeIn>
-      <FadeIn>
-        <ContactButton />
-      </FadeIn>
-      <FadeIn className="w-full max-w-3xl">
-        <div className="grid gap-3 sm:grid-cols-2">
-          <a href={`mailto:${profile.email}`} className="flex min-w-0 items-center justify-between gap-3 rounded-3xl border border-[#D7E2EA]/25 p-5 text-[#D7E2EA] transition-colors hover:bg-[#D7E2EA]/10">
-            <span className="min-w-0">
-              <span className="block text-xs font-light uppercase tracking-widest opacity-70">Email</span>
-              <strong className="block break-words font-medium">{profile.email}</strong>
-            </span>
-            <ArrowUpRight size={20} className="shrink-0" />
-          </a>
-          <a href={profile.phoneHref} className="flex min-w-0 items-center justify-between gap-3 rounded-3xl border border-[#D7E2EA]/25 p-5 text-[#D7E2EA] transition-colors hover:bg-[#D7E2EA]/10">
-            <span className="min-w-0">
-              <span className="block text-xs font-light uppercase tracking-widest opacity-70">Phone</span>
-              <strong className="block font-medium">{profile.phone}</strong>
-            </span>
-            <Phone size={18} className="shrink-0" />
-          </a>
-        </div>
-      </FadeIn>
-      <footer className="mt-10 flex w-full flex-wrap justify-between gap-2 border-t border-[#D7E2EA]/20 pt-6 text-xs font-light uppercase tracking-wider text-[#D7E2EA]/70">
-        <span>{profile.name}</span>
-        <span>{profile.role}</span>
-        <span>{profile.location}</span>
-      </footer>
-    </section>
-  );
-}

keith-portfolio/src/sections/CredentialsSection.tsx

@@ -1,31 +0,0 @@
-import FadeIn from '../components/FadeIn';
-import { certifications, education } from '../data/content';
-
-export default function CredentialsSection() {
-  return (
-    <section id="credentials" className="px-5 py-20 sm:px-8 sm:py-24 md:px-10 md:py-32">
-      <FadeIn>
-        <h2 className="hero-heading mb-10 text-center font-black uppercase leading-none tracking-tight sm:mb-14" style={{ fontSize: 'clamp(3rem, 12vw, 160px)' }}>
-          Credentials
-        </h2>
-      </FadeIn>
-      <FadeIn>
-        <div className="mx-auto mb-12 flex max-w-5xl flex-col items-center gap-1 text-center text-[#D7E2EA] sm:mb-16">
-          <span className="text-xs font-light uppercase tracking-widest opacity-70 sm:text-sm">Education</span>
-          <strong className="font-medium uppercase" style={{ fontSize: 'clamp(1.1rem, 2.2vw, 2.1rem)' }}>{education.degree}</strong>
-          <span className="font-light opacity-70">{education.school}, {education.year}</span>
-        </div>
-      </FadeIn>
-      <div className="mx-auto grid max-w-5xl gap-3 sm:grid-cols-2">
-        {certifications.map((c, i) => (
-          <FadeIn key={c} delay={(i % 2) * 0.08}>
-            <div className="flex h-full items-center gap-4 rounded-3xl border border-[#D7E2EA]/25 p-5 sm:p-6">
-              <span className="hero-heading text-3xl font-black leading-none sm:text-4xl">{String(i + 1).padStart(2, '0')}</span>
-              <p className="min-w-0 font-medium uppercase leading-snug text-[#D7E2EA]" style={{ fontSize: 'clamp(0.85rem, 1.4vw, 1.1rem)' }}>{c}</p>
-            </div>
-          </FadeIn>
-        ))}
-      </div>
-    </section>
-  );
-}

keith-portfolio/src/sections/ExperienceSection.tsx

@@ -1,55 +0,0 @@
-import { Check } from 'lucide-react';
-import FadeIn from '../components/FadeIn';
-import { foundations, roles } from '../data/content';
-
-export default function ExperienceSection() {
-  return (
-    <section id="experience" className="bg-white px-5 pb-28 pt-20 sm:px-8 sm:pb-32 sm:pt-24 md:px-10 md:pb-40 md:pt-32">
-      <FadeIn>
-        <h2 className="mb-16 text-center font-black uppercase leading-none text-[#0C0C0C] sm:mb-20 md:mb-28" style={{ fontSize: 'clamp(3rem, 12vw, 160px)' }}>
-          Experience
-        </h2>
-      </FadeIn>
-      <div className="mx-auto max-w-5xl">
-        {roles.map((r, i) => (
-          <FadeIn key={r.role + r.organisation}>
-            <article className="grid gap-4 py-8 sm:py-10 md:grid-cols-[220px_1fr] md:gap-12 md:py-12" style={{ borderTop: '1px solid rgba(12, 12, 12, 0.15)' }}>
-              <div className="flex flex-col gap-1 text-[#0C0C0C]">
-                <span className="text-sm font-medium uppercase tracking-wider opacity-60">{r.dates}</span>
-                <span className="font-black uppercase leading-tight" style={{ fontSize: 'clamp(1.1rem, 1.8vw, 1.5rem)' }}>{r.organisation}</span>
-                <span className="text-sm font-light opacity-60">{String(i + 1).padStart(2, '0')}</span>
-              </div>
-              <div className="flex min-w-0 flex-col gap-4 text-[#0C0C0C]">
-                <h3 className="font-medium uppercase" style={{ fontSize: 'clamp(1rem, 2.2vw, 2.1rem)' }}>{r.role}</h3>
-                <p className="max-w-2xl font-light leading-relaxed opacity-70" style={{ fontSize: 'clamp(0.9rem, 1.6vw, 1.2rem)' }}>{r.summary}</p>
-                <ul className="flex max-w-2xl flex-col gap-3">
-                  {r.points.map((p) => (
-                    <li key={p} className="flex gap-3 font-light leading-relaxed" style={{ fontSize: 'clamp(0.85rem, 1.4vw, 1.05rem)' }}>
-                      <Check size={18} className="mt-1 shrink-0" />
-                      <span>{p}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </article>
-          </FadeIn>
-        ))}
-
-        <FadeIn>
-          <div className="grid gap-6 py-10 md:grid-cols-[220px_1fr] md:gap-12 md:py-12" style={{ borderTop: '1px solid rgba(12, 12, 12, 0.15)' }}>
-            <h3 className="text-sm font-medium uppercase tracking-wider text-[#0C0C0C] opacity-60">Earlier foundations</h3>
-            <div className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
-              {foundations.map((f) => (
-                <div key={f.role + f.organisation} className="flex min-w-0 flex-col text-[#0C0C0C]">
-                  <span className="text-xs font-medium uppercase tracking-wider opacity-60">{f.dates}</span>
-                  <strong className="font-medium uppercase">{f.role}</strong>
-                  <span className="font-light opacity-70">{f.organisation}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </FadeIn>
-      </div>
-    </section>
-  );
-}

keith-portfolio/src/sections/HeroSection.tsx

@@ -1,66 +0,0 @@
-import FadeIn from '../components/FadeIn';
-import Magnet from '../components/Magnet';
-import ContactButton from '../components/ContactButton';
-import { images, profile } from '../data/content';
-
-const links = [
-  { label: 'About', href: '#about' },
-  { label: 'Skills', href: '#skills' },
-  { label: 'Projects', href: '#projects' },
-  { label: 'Contact', href: '#contact' },
-];
-
-export default function HeroSection() {
-  return (
-    <section className="relative flex h-screen min-h-[600px] flex-col" style={{ overflowX: 'clip' }}>
-      <FadeIn delay={0} y={-20}>
-        <nav className="flex justify-between px-6 pt-6 md:px-10 md:pt-8" aria-label="Section navigation">
-          {links.map((l) => (
-            <a
-              key={l.label}
-              href={l.href}
-              className="text-sm font-medium uppercase tracking-wider text-[#D7E2EA] transition-opacity duration-200 hover:opacity-70 md:text-lg lg:text-[1.4rem]"
-            >
-              {l.label}
-            </a>
-          ))}
-        </nav>
-      </FadeIn>
-
-      <div className="overflow-hidden">
-        <FadeIn delay={0.15} y={40}>
-          <h1 className="hero-heading mt-6 w-full whitespace-nowrap text-center text-[16.5vw] font-black uppercase leading-none tracking-tight sm:mt-4 md:-mt-5">
-            Hi, i’m {profile.firstName}
-          </h1>
-        </FadeIn>
-      </div>
-
-      <div className="absolute left-1/2 top-1/2 z-10 w-[min(280px,52vh)] -translate-x-1/2 -translate-y-1/2 sm:bottom-0 sm:top-auto sm:w-[min(360px,56vh)] sm:translate-y-0 md:w-[min(440px,58vh)] lg:w-[min(520px,58vh)]">
-        <FadeIn delay={0.6} y={30}>
-          <Magnet padding={150} strength={3} activeTransition="transform 0.3s ease-out" inactiveTransition="transform 0.6s ease-in-out" className="!block">
-            <img
-              src={images.portrait}
-              alt="Keith Rana at his work desk"
-              className="aspect-square w-full border border-[#D7E2EA]/30 object-cover object-top"
-              style={{ borderRadius: '999px 999px 32px 32px' }}
-            />
-          </Magnet>
-        </FadeIn>
-      </div>
-
-      <div className="mt-auto flex items-end justify-between gap-4 px-6 pb-7 sm:pb-8 md:px-10 md:pb-10">
-        <FadeIn delay={0.35} y={20}>
-          <p
-            className="max-w-[160px] font-light uppercase leading-snug tracking-wide text-[#D7E2EA] sm:max-w-[220px] md:max-w-[260px]"
-            style={{ fontSize: 'clamp(0.7rem, 1.4vw, 1.5rem)' }}
-          >
-            {profile.tagline}
-          </p>
-        </FadeIn>
-        <FadeIn delay={0.5} y={20} className="relative z-20">
-          <ContactButton />
-        </FadeIn>
-      </div>
-    </section>
-  );
-}

keith-portfolio/src/sections/MarqueeSection.tsx

@@ -1,75 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import type { ReactNode } from 'react';
-import { expertise, images } from '../data/content';
-
-const TILE_W = 420;
-const GAP = 12;
-
-const photoTiles: { src: string; alt: string; position: string }[] = [
-  { src: images.portrait, alt: 'Keith Rana at his work desk', position: 'center 20%' },
-  { src: images.leadership, alt: 'Hands organising a service-delivery briefing', position: 'center' },
-  { src: images.systems, alt: 'Abstract composition of connected service pathways', position: 'center' },
-];
-
-const photos = photoTiles.map((t) => (
-  <img
-    key={t.alt}
-    src={t.src}
-    alt={t.alt}
-    loading="lazy"
-    className="h-[270px] w-[420px] shrink-0 rounded-2xl object-cover"
-    style={{ objectPosition: t.position }}
-  />
-));
-
-const skills = expertise.map((e, i) => (
-  <div
-    key={e.name}
-    className="flex h-[270px] w-[420px] shrink-0 flex-col justify-between rounded-2xl border border-[#D7E2EA]/25 p-6"
-    style={{ background: 'linear-gradient(135deg, #14161a, #1d2127)' }}
-  >
-    <span className="hero-heading text-5xl font-black leading-none">{String(i + 1).padStart(2, '0')}</span>
-    <span className="text-2xl font-medium uppercase leading-tight text-[#D7E2EA]">{e.name}</span>
-  </div>
-));
-
-function Row({ tiles, setWidth, transform }: { tiles: ReactNode[]; setWidth: number; transform: string }) {
-  return (
-    <div className="flex" style={{ gap: GAP, marginLeft: -setWidth, transform, willChange: 'transform' }} aria-hidden={tiles === skills}>
-      {[0, 1, 2].map((copy) => (
-        <div key={copy} className="flex" style={{ gap: GAP }}>
-          {tiles}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default function MarqueeSection() {
-  const ref = useRef<HTMLElement>(null);
-  const [offset, setOffset] = useState(0);
-
-  useEffect(() => {
-    const onScroll = () => {
-      if (!ref.current) return;
-      const top = ref.current.getBoundingClientRect().top + window.scrollY;
-      setOffset((window.scrollY - top + window.innerHeight) * 0.3);
-    };
-    onScroll();
-    window.addEventListener('scroll', onScroll, { passive: true });
-    window.addEventListener('resize', onScroll);
-    return () => {
-      window.removeEventListener('scroll', onScroll);
-      window.removeEventListener('resize', onScroll);
-    };
-  }, []);
-
-  const width = (n: number) => n * (TILE_W + GAP) + GAP;
-
-  return (
-    <section ref={ref} className="flex flex-col gap-3 bg-[#0C0C0C] pb-10 pt-24 sm:pt-32 md:pt-40" style={{ overflow: 'clip' }}>
-      <Row tiles={photos} setWidth={width(photos.length)} transform={`translateX(${offset - 200}px)`} />
-      <Row tiles={skills} setWidth={width(skills.length)} transform={`translateX(${-(offset - 200)}px)`} />
-    </section>
-  );
-}

keith-portfolio/src/sections/ProjectsSection.tsx

@@ -1,87 +0,0 @@
-import { useRef } from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
-import { Check } from 'lucide-react';
-import FadeIn from '../components/FadeIn';
-import ProjectDiagram from '../components/ProjectDiagram';
-import { projects } from '../data/content';
-
-type Project = (typeof projects)[number];
-
-const radius = 'rounded-[40px] sm:rounded-[50px] md:rounded-[60px]';
-
-function ProjectCard({ project, index, total }: { project: Project; index: number; total: number }) {
-  const ref = useRef<HTMLDivElement>(null);
-  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'start start'] });
-  const targetScale = 1 - (total - 1 - index) * 0.03;
-  const scale = useTransform(scrollYProgress, [0, 1], [1, targetScale]);
-
-  return (
-    <div ref={ref} className="sticky top-24 min-h-[85vh]">
-      <motion.div
-        className={`border-2 border-[#D7E2EA] bg-[#0C0C0C] p-4 sm:p-6 md:p-8 ${radius}`}
-        style={{ scale, top: `${index * 28}px`, position: 'relative', transformOrigin: 'top center' }}
-      >
-        <div className="mb-4 flex flex-col gap-3 sm:mb-6 md:flex-row md:items-center md:justify-between md:gap-10">
-          <div className="flex items-center gap-4 sm:gap-8">
-            <span className="hero-heading font-black leading-none" style={{ fontSize: 'clamp(3rem, 10vw, 140px)' }}>
-              {String(index + 1).padStart(2, '0')}
-            </span>
-            <div className="min-w-0 text-[#D7E2EA]">
-              <p className="text-xs font-light uppercase tracking-widest opacity-70 sm:text-sm">{project.category}</p>
-              <h3 className="font-medium uppercase" style={{ fontSize: 'clamp(1rem, 2.2vw, 2.1rem)' }}>{project.name}</h3>
-            </div>
-          </div>
-          <p className="max-w-xl px-1 font-light leading-relaxed text-[#D7E2EA]/70" style={{ fontSize: 'clamp(0.85rem, 1.5vw, 1.15rem)' }}>
-            {project.body}
-          </p>
-        </div>
-        <div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
-          <div className="flex flex-col gap-3 sm:w-[40%] sm:gap-4">
-            <img
-              src={project.photo}
-              alt={`${project.name}: illustrative photo`}
-              loading="lazy"
-              className={`w-full object-cover ${radius}`}
-              style={{ height: 'clamp(150px, 16vw, 230px)', objectPosition: project.photoPosition }}
-            />
-            <div
-              className={`flex flex-1 flex-col justify-center gap-3 border border-[#D7E2EA]/25 p-5 sm:gap-4 sm:p-6 md:p-8 ${radius}`}
-              style={{ background: 'linear-gradient(135deg, #14161a, #1d2127)', minHeight: 'clamp(160px, 22vw, 340px)' }}
-            >
-              <span className="text-xs font-medium uppercase tracking-widest text-[#D7E2EA]/60 sm:text-sm">Delivered</span>
-              <ul className="flex flex-col gap-2 sm:gap-3">
-                {project.delivered.map((d) => (
-                  <li key={d} className="flex gap-2 font-light leading-snug text-[#D7E2EA]" style={{ fontSize: 'clamp(0.8rem, 1.3vw, 1.1rem)' }}>
-                    <Check className="mt-0.5 h-4 w-4 shrink-0" />
-                    <span>{d}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-          <div
-            className={`order-first flex items-center justify-center border border-[#D7E2EA]/25 p-3 sm:order-none sm:w-[60%] sm:p-5 md:p-8 ${radius}`}
-            style={{ background: 'linear-gradient(135deg, #14161a, #1d2127)' }}
-          >
-            <ProjectDiagram kind={project.diagram} className="h-auto w-full" style={{ maxHeight: "clamp(240px, 30vw, 430px)" }} />
-          </div>
-        </div>
-      </motion.div>
-    </div>
-  );
-}
-
-export default function ProjectsSection() {
-  return (
-    <section id="projects" className="relative z-10 -mt-10 rounded-t-[40px] bg-[#0C0C0C] px-5 py-20 sm:-mt-12 sm:rounded-t-[50px] sm:px-8 sm:py-24 md:-mt-14 md:rounded-t-[60px] md:px-10 md:py-32">
-      <FadeIn>
-        <h2 className="hero-heading mb-16 text-center font-black uppercase leading-none tracking-tight sm:mb-20 md:mb-28" style={{ fontSize: 'clamp(3rem, 12vw, 160px)' }}>
-          Projects
-        </h2>
-      </FadeIn>
-      {projects.map((p, i) => (
-        <ProjectCard key={p.name} project={p} index={i} total={projects.length} />
-      ))}
-    </section>
-  );
-}

keith-portfolio/src/sections/ServicesSection.tsx

@@ -1,32 +0,0 @@
-import FadeIn from '../components/FadeIn';
-import { expertise } from '../data/content';
-
-export default function ServicesSection() {
-  return (
-    <section id="skills" className="rounded-t-[40px] bg-white px-5 pt-20 sm:rounded-t-[50px] sm:px-8 sm:pt-24 md:rounded-t-[60px] md:px-10 md:pt-32">
-      <h2 className="mb-16 text-center font-black uppercase text-[#0C0C0C] sm:mb-20 md:mb-28" style={{ fontSize: 'clamp(3rem, 12vw, 160px)' }}>
-        Capability
-      </h2>
-      <div className="mx-auto max-w-5xl">
-        {expertise.map((s, i) => (
-          <FadeIn key={s.name} delay={(i % 4) * 0.1}>
-            <div
-              className="flex items-start gap-4 py-8 sm:gap-8 sm:py-10 md:gap-12 md:py-12"
-              style={{ borderTop: i === 0 ? undefined : '1px solid rgba(12, 12, 12, 0.15)' }}
-            >
-              <span className="min-w-[1.6em] font-black leading-none text-[#0C0C0C]" style={{ fontSize: 'clamp(3rem, 10vw, 140px)' }}>
-                {String(i + 1).padStart(2, '0')}
-              </span>
-              <div className="flex min-w-0 flex-col gap-3 text-[#0C0C0C]">
-                <h3 className="font-medium uppercase" style={{ fontSize: 'clamp(1rem, 2.2vw, 2.1rem)' }}>{s.name}</h3>
-                <p className="max-w-2xl font-light leading-relaxed opacity-60" style={{ fontSize: 'clamp(0.85rem, 1.6vw, 1.25rem)' }}>
-                  {s.description}
-                </p>
-              </div>
-            </div>
-          </FadeIn>
-        ))}
-      </div>
-    </section>
-  );
-}

keith-portfolio/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

keith-portfolio/tailwind.config.js

@@ -1,6 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{ts,tsx}'],
-  theme: { extend: { fontFamily: { sans: ['Kanit', 'sans-serif'] } } },
-  plugins: [],
-};

keith-portfolio/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true
-  },
-  "include": ["src"]
-}

keith-portfolio/vite.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-// INLINE=1 bakes every image and font into the JS/CSS (used for the one-file cloud preview).
-export default defineConfig({
-  plugins: [react()],
-  base: './',
-  build: { assetsInlineLimit: process.env.INLINE ? 100_000_000 : 4096 },
-});