// Content rendered inside each window. const PROJECTS = [ { name: "Hand-Tracking Synthesizer", year: "2026", tags: ["python", "ML", "Max/MSP", "wekinator", "course project"], blurb: "Camera-based musical instrument that turns finger movement into sustained sine-wave tones", link: "#", }, { name: "Dis-Chord-CS4222", year: "2026", tags: ["java", "java swing", "course project"], blurb: "A musical instrument built with Java Swing for CS4222 module. Dating app for chords.", link: "https://github.com/flayd73/Dis-Chord-CS4222-Project", }, { name: "F1-Reaction-Timer-for-STM32-Blue-Pill", year: "2025", tags: ["Arduino", "STM32", "C++"], blurb: "An F1 style reaction timer using an STM32 \"Blue Pill\", 5 Red LEDs and an OLED screen made with the Arduino IDE", link: "https://github.com/flayd73/F1-Reaction-Timer-for-STM32-Blue-Pill-", }, ]; function ProjectsContent() { return (
~/projects · {PROJECTS.length} items
{PROJECTS.map((p, i) => ( e.currentTarget.style.background = "var(--paper-2)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"} >
{p.name} —— {p.year}
{p.blurb}
{p.tags.map(t => ( {t} ))}
→
 ))}
); } function ReadmeContent() { return ( 
{`# README.md

> last updated: 05/26

## who

i'm Fahamid. i build small,
sometimes-useful things.

## stack

things I reach for first:
  - java
  - python
  - html/css/js when i'm feeling poetic

## interests

distributed systems, dev tools, generative
art, command-line ergonomics, and the exact
shade of warm grey on this page.

## currently

[x] graduating
`}
); } function ResumeContent() { const Row = ({when, what, where, what2}) => (
{when}
{what}
{where}
{what2 &&
{what2}
}
); return (
FAHAMID HYDER
Student · @flayd73
fahamidhyder@gmail.com
github.com/flayd73
{ e.currentTarget.style.transform = "translate(-1px,-1px)"; e.currentTarget.style.boxShadow = "4px 4px 0 var(--ink)"; }} onMouseLeave={e => { e.currentTarget.style.transform = "translate(0,0)"; e.currentTarget.style.boxShadow = "3px 3px 0 var(--ink)"; }} > ↓ download resume.pdf
// experience
// education
// skills
{["Customer Service Excellence","Communication","Fluent English & Italian","Teamwork & Collaboration","Responsability & Reliability","Adaptability & Composure under pressure","Positive & Proactive Attitude","Problem Solving","Attention to Detail", "Python", "Linux"].map(s => ( {s} ))}
); } function ContactContent() { const links = [ { label: "email", value: "fahamidhyder@gmail.com", href: "mailto:fahamidhyder@gmail.com" }, { label: "github", value: "github.com/flayd73", href: "https://github.com/flayd73" }, { label: "linkedin", value: "linkedin.com/in/fahamid-hyder", href: "https://www.linkedin.com/in/fahamid-hyder-5772b2262/" }, ]; return (
~/contact · the inbox is open

contact me about jobs, side projects, weird ideas, or just to say hi.

{links.map((l, i) => ( e.currentTarget.style.color = "var(--accent)"} onMouseLeave={e => e.currentTarget.style.color = "var(--ink)"} > {l.label} {l.value} ↗ ))}
$ response time: usually within a day
); } function ExperimentsContent() { const [count, setCount] = React.useState(0); const [color, setColor] = React.useState("var(--accent)"); const colors = ["#3f63ad", "#f0c43a", "#3a7d44", "#d94a1f", "#9333ea", "#1a1814"]; return (
~/experiments · play with these
// experiment_01.click_counter
{count} {count === 0 ? "still nothing" : count < 5 ? "a small commitment" : count < 15 ? "now we're cooking" : "okay you can stop"}
// experiment_02.color_swap
{colors.map(c => (
// experiment_03.ascii_weather
{`    \\ | /
   --(.)--    72°F · partly thinking
    / | \\    wind: light · mood: ok
   ~~~~~~`}
# more in the works. or maybe not. depends on the week.
); } function fmtTime(s) { if (!isFinite(s)) return "--:--"; const m = Math.floor(s / 60); const r = Math.floor(s % 60); return `${m}:${String(r).padStart(2, "0")}`; } function MusicContent() { const [tracks, setTracks] = React.useState(null); // null = loading const [error, setError] = React.useState(null); const [playing, setPlaying] = React.useState(0); const [isPlaying, setIsPlaying] = React.useState(false); const [cur, setCur] = React.useState(0); const [dur, setDur] = React.useState(0); const [vol, setVol] = React.useState(0.8); const audioRef = React.useRef(null); const seekRef = React.useRef(null); // Load track manifest React.useEffect(() => { fetch("audio/tracks.json", { cache: "no-cache" }) .then(r => { if (!r.ok) throw new Error("tracks.json not found"); return r.json(); }) .then(data => setTracks(Array.isArray(data) ? data : [])) .catch(e => { setError(e.message); setTracks([]); }); }, []); // Sync play/pause React.useEffect(() => { const a = audioRef.current; if (!a) return; if (isPlaying) { a.play().catch(() => setIsPlaying(false)); } else { a.pause(); } }, [isPlaying, playing]); // Volume sync React.useEffect(() => { if (audioRef.current) audioRef.current.volume = vol; }, [vol]); // When track changes, reset audio React.useEffect(() => { const a = audioRef.current; if (!a) return; setCur(0); a.load(); if (isPlaying) a.play().catch(() => setIsPlaying(false)); }, [playing]); const onSeek = (e) => { const a = audioRef.current; const bar = seekRef.current; if (!a || !bar || !dur) return; const rect = bar.getBoundingClientRect(); const pct = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)); a.currentTime = pct * dur; setCur(a.currentTime); }; const next = () => { if (tracks?.length) setPlaying(p => (p + 1) % tracks.length); }; const prev = () => { if (tracks?.length) setPlaying(p => (p - 1 + tracks.length) % tracks.length); }; // Empty / loading / error states if (tracks === null) { return (
loading mixtapes…
); } if (tracks.length === 0) { return (
░░ no mixtapes yet ░░
drop mp3 files into the audio/ folder, then add an entry to audio/tracks.json: 
{`[
  {
    "title": "Tape Side A",
    "artist": "Various",
    "file": "side-a.mp3"
  }
]`}
{error && (
# {error}
)}
); } const t = tracks[playing] || tracks[0]; const src = `audio/${t.file}`; const pct = dur ? (cur / dur) * 100 : 0; return (