About page: iPod click-wheel interactive bio navigator

// Simplified About page structure — iPod click wheel
import { motion, AnimatePresence } from 'framer-motion';
import { useState } from 'react';

const sections = [
  {
    id:      'origin',
    title:   'Origin Story',
    content: 'Born in the era of dial-up, I learned to code by inspecting Geocities source code...',
  },
  {
    id:      'journey',
    title:   'How I Got Here',
    content: 'Started with HTML/CSS, moved to jQuery, survived the Angular vs React wars...',
  },
  {
    id:      'hobbies',
    title:   'Hobbies',
    content: 'When not coding, I collect vintage Apple products, curate early-2000s web design archives...',
  },
  {
    id:        'philosophy',
    title:     'Philosophy',
    content:   'Software should be functional, yes, but it should also be delightful...',
  },
];

export default function About() {
  const [index, setIndex]  = useState(0);
  const [rotation, setRotation] = useState(0);

  const next = () => {
    setIndex((i) => (i + 1) % sections.length);
    setRotation((r) => r + 90);
  };

  const prev = () => {
    setIndex((i) => (i - 1 + sections.length) % sections.length);
    setRotation((r) => r - 90);
  };

  return (
    <div className="ipod-layout">
      {/* Left: iPod device */}
      <div className="ipod-body">
        {/* Miniature LCD screen */}
        <div className="ipod-screen">
          <h3>{sections[index].title}</h3>
          <AnimatePresence mode="wait">
            <motion.p
              key={index}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.2 }}
            >
              {sections[index].content}
            </motion.p>
          </AnimatePresence>
          <span>{index + 1} of {sections.length}</span>
          {/* Progress fill bar */}
        </div>

        {/* Click wheel */}
        <div className="click-wheel">
          <motion.div
            animate={{ rotate: rotation }}
            transition={{ type: 'spring', stiffness: 200, damping: 20 }}
            className="wheel-ring"
          />
          {/* MENU label, prev/next arrows, centre button */}
          <button onClick={prev}>‹</button>
          <button onClick={next}>›</button>
        </div>
      </div>

      {/* Right: prose panel */}
      <div className="aqua-glass about-prose">
        <h2>The Story So Far</h2>
        <p>Use the click wheel (or just click the arrows) to navigate through my background.</p>
      </div>
    </div>
  );
}

// In assets/main.js — locate the sections array (search for "Origin Story")
const sections = [
  { id: 'origin',     title: 'Origin Story',    content: 'Your text here.' },
  { id: 'journey',    title: 'How I Got Here',  content: 'Your text here.' },
  { id: 'hobbies',    title: 'Hobbies',         content: 'Your text here.' },
  { id: 'philosophy', title: 'Philosophy',      content: 'Your text here.' },
];