// shared.jsx β€” primitives + project data + interactives shared across all 5 home page directions const PROJECTS = [ { id: 'officehours', name: 'Office Hours', tagline: 'A workplace survival quiz game.', blurb: 'Pick a workplace archetype, play real scenarios, find out your survival type.', href: 'https://techclatters.vercel.app/officehoursgame', kind: 'Game Β· Web', emoji: 'β˜•', color: '#FF7A6B', accent: '#FFD66B', year: 'Apr 2026', }, { id: 'moneyticker', name: 'Money Ticker', tagline: 'Watch your hourly earnings tick up in real time.', blurb: 'Celebrations at every milestone and at the end of your work day.', href: 'https://chromewebstore.google.com/detail/money-ticker/agiaaekccnmeolhalkejpcjfmpogbngb', kind: 'Chrome Extension', emoji: 'πŸ’Έ', color: '#7BB87A', accent: '#9DC3FF', year: 'Apr 2026', }, { id: 'underpaint', name: 'Underpaint', tagline: 'Upload a photo β€” get a step-by-step painting lesson.', blurb: 'Drop in any image and Underpaint walks you through how to paint it, layer by layer.', href: '/underpaint', kind: 'AI Β· Painting', emoji: '🎨', color: '#C9A2E6', accent: '#FFE66B', year: 'Jun 2026', }, { id: 'hoops', name: 'Hoops', tagline: 'Organize local basketball pickup games.', blurb: 'Find runs, fill spots, and show up ready to ball.', href: '#', kind: 'Community Β· Sports', emoji: 'πŸ€', color: '#FF7A6B', accent: '#FFE66B', year: 'May 2026', noLink: true, }, { id: 'soon1', name: 'Cooking…', tagline: 'Something tiny and useful is in the oven.', blurb: 'Idea-stage. Stay tuned.', href: '#', kind: 'Coming soon', emoji: '🍳', color: '#FFE66B', accent: '#C9A2E6', year: 'soon', soft: true, }, ]; const ABOUT = { oneLine: "I build little things for fun & occasional utility.", likes: ['art', 'DIYs', 'machine learning', 'computer vision', 'software'], email: 'techclatters@gmail.com', }; // ───────────────────────────────────────────────────────────── // Pixel robot mascot β€” a chunky little buddy. Eyes blink + track cursor. // ───────────────────────────────────────────────────────────── function PixelBuddy({ size = 80, mood = 'happy', talking = false, palette }) { const p = palette || { body: '#FFE66B', shade: '#E8C932', shadow: '#1f1a14', eye: '#1f1a14', cheek: '#FF7A6B', antenna: '#7BB87A' }; // 16x16 pixel-art robot. Each char maps to a color. // .=transparent, B=body, S=shade, K=outline, E=eye-bg(white), P=pupil, C=cheek, A=antenna, T=antennaTip const art = [ '.......T........', '.......A........', '.......A........', '..KKKKKKKKKK....', '.KBBBBBBBBBBK...', 'KBEEKBBKEEKBSK..', 'KBEPKBBKEPKBSK..', 'KBBBBCBBBCBBSK..', 'KBBBBBBBBBBBSK..', 'KBBBKKKKKKBBSK..', '.KBBBBBBBBBBSK..', '..KKKKKKKKKK....', '..K.KK..KK.K....', '..K.KK..KK.K....', '..KKKK..KKKK....', '................', ]; const colors = { '.': 'transparent', B: p.body, S: p.shade, K: p.shadow, E: '#fffdf5', P: p.eye, C: p.cheek, A: p.antenna, T: p.antenna }; const px = size / 16; return (
{art.map((row, y) => row.split('').map((ch, x) => ch === '.' ? null : ) )} {/* blink */} {talking && (
{talking}
)}
); } // ───────────────────────────────────────────────────────────── // Anagram reveal: SCARLETT ⇄ CLATTERS. Click letters scramble. // ───────────────────────────────────────────────────────────── function AnagramReveal({ size = 28, color = '#1f1a14', accent = '#FF7A6B', defaultPhase = 0, onChange }) { const FROM = 'SCARLETT'; const TO = 'CLATTERS'; // permutation: which index of FROM each TO letter came from // S(0)C(1)A(2)R(3)L(4)E(5)T(6)T(7) β†’ C(1)L(4)A(2)T(6)T(7)E(5)R(3)S(0) const perm = [1, 4, 2, 6, 7, 5, 3, 0]; const [phase, setPhase] = React.useState(defaultPhase); // 0 = SCARLETT, 1 = CLATTERS const letters = phase === 0 ? FROM.split('') : TO.split(''); return ( ); } // ───────────────────────────────────────────────────────────── // Tiny mini-game: "Feed the Kitty" β€” click flying treats to feed // a sleepy cat. Cat purrs (gets bigger/happier) the more you feed. // ───────────────────────────────────────────────────────────── function FeedTheKitty({ width = 280, height = 180, palette }) { const p = palette || { bg: '#fffaf0', border: '#1f1a14', cat: '#FF7A6B', score: '#FF7A6B', ground: '#FFE66B' }; const [treats, setTreats] = React.useState([]); const [score, setScore] = React.useState(0); const [running, setRunning] = React.useState(false); const [timeLeft, setTimeLeft] = React.useState(20); const [purr, setPurr] = React.useState(0); // 0..3 happiness const idRef = React.useRef(0); const runningRef = React.useRef(false); runningRef.current = running; React.useEffect(() => { if (!running) return; const spawn = setInterval(() => { if (!runningRef.current) return; idRef.current += 1; const id = idRef.current; const startX = 20 + Math.random() * (width - 40); const drift = (Math.random() - 0.5) * 60; const kind = Math.random() < 0.5 ? 'fish' : 'heart'; setTreats((ts) => [...ts, { id, startX, drift, kind }]); setTimeout(() => setTreats((ts) => ts.filter((t) => t.id !== id)), 3500); }, 750); const tick = setInterval(() => setTimeLeft((t) => Math.max(0, t - 1)), 1000); return () => { clearInterval(spawn); clearInterval(tick); }; }, [running, width]); React.useEffect(() => { if (timeLeft === 0 && running) setRunning(false); }, [timeLeft, running]); const start = () => { setTreats([]); setScore(0); setTimeLeft(20); setPurr(0); setRunning(true); }; const feed = (id) => { setTreats((ts) => ts.filter((t) => t.id !== id)); setScore((s) => s + 1); setPurr((p) => Math.min(3, p + 0.3)); setTimeout(() => setPurr((p) => Math.max(0, p - 0.15)), 600); }; // cat in bottom-right corner const catSize = 56 + purr * 6; return (
FED Β· {score} {purr > 1 ? 'Β· purring πŸ’•' : ''} {running ? `${timeLeft}s` : score > 0 ? `${score} treats Β· cat is happy` : 'FEED THE KITTY'}
{/* the cat */}
0.5 ? `rotate(${Math.sin(Date.now() / 200) * 4}deg)` : 'none', }}> {/* body */} {/* head */} {/* ears */} {/* eyes β€” closed (happy) when purring */} {purr > 1 ? ( <> ) : ( <> )} {/* nose + mouth */} {/* whiskers */} {/* tail */}
{/* falling treats */} {treats.map((t) => ( ))} {!running && ( )}
); } // ───────────────────────────────────────────────────────────── // Sparkle/confetti cursor trail (scoped to a container) // ───────────────────────────────────────────────────────────── function CursorTrail({ containerRef, kind = 'confetti', colors = ['#FF7A6B', '#FFE66B', '#7BB87A', '#9DC3FF', '#C9A2E6'], enabled = true }) { const [bits, setBits] = React.useState([]); const idRef = React.useRef(0); React.useEffect(() => { if (!enabled) return; const el = containerRef.current; if (!el) return; let last = 0; const onMove = (e) => { const now = Date.now(); if (now - last < 40) return; last = now; const r = el.getBoundingClientRect(); const x = e.clientX - r.left; const y = e.clientY - r.top; idRef.current += 1; const id = idRef.current; const color = colors[Math.floor(Math.random() * colors.length)]; const dx = (Math.random() - 0.5) * 30; const dy = 30 + Math.random() * 20; const rot = (Math.random() - 0.5) * 360; setBits((b) => [...b.slice(-30), { id, x, y, color, dx, dy, rot, kind }]); setTimeout(() => setBits((b) => b.filter((p) => p.id !== id)), 900); }; el.addEventListener('mousemove', onMove); return () => el.removeEventListener('mousemove', onMove); }, [containerRef, kind, enabled, colors.join('|')]); return (
{bits.map((b) => ( {kind === 'sparkle' ? '✦' : kind === 'star' ? '' : ''} ))}
); } // Confetti dot pattern bg (decorative) function ConfettiDots({ density = 1, palette = ['#FF7A6B', '#FFE66B', '#7BB87A', '#9DC3FF', '#C9A2E6'] }) { const dots = React.useMemo(() => { const seed = 42; const rand = (i) => { const x = Math.sin(seed + i * 12.9898) * 43758.5453; return x - Math.floor(x); }; const n = Math.floor(60 * density); return Array.from({ length: n }, (_, i) => ({ x: rand(i) * 100, y: rand(i + 1000) * 100, r: 2 + rand(i + 2000) * 4, c: palette[Math.floor(rand(i + 3000) * palette.length)], rot: rand(i + 4000) * 360, kind: rand(i + 5000) > 0.6 ? 'rect' : 'dot', })); }, [density, palette.join('|')]); return ( {dots.map((d, i) => d.kind === 'dot' ? : )} ); } // Wiggle on hover wrapper function Wiggle({ children, intensity = 1, ...rest }) { const ref = React.useRef(null); const [hov, setHov] = React.useState(false); return ( setHov(true)} onMouseLeave={() => setHov(false)} style={{ display: 'inline-block', animation: hov ? `wiggle-${intensity} .35s ease-in-out infinite alternate` : 'none', ...rest.style, }}> {children} ); } // ───────────────────────────────────────────────────────────── // Office Hours clock β€” minimal mark, light-mode treatment. // Mirrors the favicon-scale clock from the brand sheet. // ───────────────────────────────────────────────────────────── function OfficeHoursClock({ size = 64, radius = 10, bg = '#F5F2ED', accent = '#C4622D', ink = '#2A2520', border }) { const cx = 32, cy = 32, r = 20; return ( {Array.from({ length: 12 }).map((_, i) => { const a = (i / 12) * Math.PI * 2 - Math.PI / 2; const x1 = cx + Math.cos(a) * (r - 2); const y1 = cy + Math.sin(a) * (r - 2); const x2 = cx + Math.cos(a) * r; const y2 = cy + Math.sin(a) * r; return ; })} {/* minute hand pointing to 9 */} {/* hour hand pointing toward 1 */} ); } // ───────────────────────────────────────────────────────────── // JamΓ³n β€” Scarlett's gray guinea pig with a yellow fur patch on // her back-left leg. Side-view, pear-shaped (fatter butt). Clickable. // ───────────────────────────────────────────────────────────── function JamonGuineaPig({ size = 140, onClick, talking, idle = true, walking = false, squish = false }) { const ink = '#1f1a14'; const fur = '#a4a3a8'; const furDark = '#74737a'; const furLight = '#e3e2e6'; const cheek = '#FF9CA0'; const yellow = '#FFE066'; const w = size; const bodyD = "M 28 100 C 22 38, 80 24, 138 38 C 178 46, 200 64, 200 92 C 200 118, 180 132, 142 142 C 92 154, 28 158, 28 100 Z"; return (
{talking && (
{talking}
)}
); } // ───────────────────────────────────────────────────────────── // JamΓ³n Chat β€” fixed bottom-right chat window. JamΓ³n is a cute // chatbot. Email is only sent if JamΓ³n offers and the user agrees. // ───────────────────────────────────────────────────────────── function _jamonPick(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function JamonChat({ open, onClose, accent = '#FF7A6B' }) { const ink = '#1f1a14'; const paper = '#FBF7EE'; const [messages, setMessages] = React.useState([ { from: 'jamon', text: "*squeak squeak!* hi! I'm JamΓ³n, Ms. Clatters' guinea pig 🐹 Chat with me! If you have an idea or feedback, tell me everything β€” when you're done just say 'send it' and I'll deliver it straight to her πŸ“¬" }, ]); const [input, setInput] = React.useState(''); const [typing, setTyping] = React.useState(false); const [emailForm, setEmailForm] = React.useState(false); const [formName, setFormName] = React.useState(''); const [formEmail, setFormEmail] = React.useState(''); const [formExtra, setFormExtra] = React.useState(''); const [sending, setSending] = React.useState(false); const msgsRef = React.useRef(null); const taRef = React.useRef(null); const endRef = React.useRef(null); React.useEffect(() => { if (open && taRef.current && !emailForm) setTimeout(() => taRef.current?.focus(), 50); }, [open, emailForm]); React.useEffect(() => { endRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages, typing, emailForm]); if (!open) return null; const addJamon = (text, delay = 900) => { setTyping(true); setTimeout(() => { setTyping(false); setMessages((m) => [...m, { from: 'jamon', text }]); }, delay); }; const submitEmailForm = async () => { const name = formName.trim(); const email = formEmail.trim(); if (!name || !email || sending) return; setSending(true); const chatLog = messages .map((m) => `${m.from === 'user' ? name : 'JamΓ³n'}: ${m.text}`) .join('\n'); try { const r = await fetch('/api/send-chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, visitorEmail: email, chatLog, extraNote: formExtra.trim() }), }); setSending(false); setEmailForm(false); setFormName(''); setFormEmail(''); setFormExtra(''); if (r.ok) { addJamon("*sprints to inbox* πŸƒπŸ’¨ wheeeek!! delivered to Ms. Clatters!! πŸ“¬ she'll reply to your email when she can!", 300); } else { const body = await r.json().catch(() => ({})); const errMsg = body.error || `HTTP ${r.status}`; console.error('send-chat error:', errMsg); addJamon(`*worried squeak* something went wrong: ${errMsg} πŸ˜…`, 300); } } catch (e) { setSending(false); console.error('send-chat fetch error:', e); addJamon(`*worried squeak* couldn't reach the server: ${e.message} πŸ˜…`, 300); } }; // Detect explicit "send to Scarlett" intent β€” user must say it, not just mention an idea const _wantsSend = (t) => ( (/\bsend\s+(this|it|that|my\s+(?:message|idea|feedback|note))?\s*(?:to\s+(?:scarlett|her))?\b/.test(t) && !/\bdon'?t\s+send\b/.test(t) && !/\bsend\s+me\b/.test(t)) || /\bsend\s+to\s+scarlett\b/.test(t) || /\bforward\s+(this|it)\b/.test(t) || t.trim() === 'send' ); const send = () => { const raw = input.trim(); if (!raw || typing || emailForm) return; setMessages((m) => [...m, { from: 'user', text: raw }]); setInput(''); const t = raw.toLowerCase(); let reply; let showForm = false; if (_wantsSend(t)) { showForm = true; reply = "*squeak!!* yay!! πŸ“¬ I just need a tiny bit of info β€” fill in the form below and I'll run to Ms. Clatters' inbox!"; } else if (t.match(/\b(hi|hello|hey|howdy|hiya|sup|yo|heyy)\b/)) { reply = _jamonPick([ "*wheek wheek!* hi hi!! 🐹✨ so happy you're here!", "*happy vibrate* HI!! you came to chat with me!! πŸŽ‰", "*squeak!* hello friend!! I'm JamΓ³n 🐹", ]); } else if (t.match(/\b(thank|thanks|thx|ty|appreciate|grateful)\b/)) { reply = _jamonPick([ "*happy squeak!* aww πŸ₯Ή you're SO sweet!!", "*popcorns excitedly* that made my whole tiny day!! πŸ’•", "no no YOU'RE wonderful!! *wheek wheek*", ]); } else if (t.match(/\b(idea|build|feature|cool if|what if|suggest|should make|could add|wish|add a|you should)\b/)) { reply = _jamonPick([ "*ears perk WAY up* πŸ‘€ ooh!! tell me EVERYTHING!! take your time β€” when you're all done just say 'send it' and I'll deliver it straight to her inbox πŸ“¬", "*vibrating with excitement* 🐹 I love ideas!! keep going!! say 'send it' whenever you're ready and I'll run it over to her πŸ’Œ", ]); } else if (t.match(/\b(feedback|bug|broken|issue|problem|annoying|confusing|wrong|fix|improve|doesn't work|not working)\b/)) { reply = _jamonPick([ "*thoughtful nibble* 🌿 I hear you β€” keep going, get it all out!! when you're done just say 'send it' and I'll make sure she sees it!", "*nods tiny head seriously* noted! tell me more β€” say 'send it' when you're ready and I'll deliver your message πŸ“¬", ]); } else if (t.match(/\b(who|scarlett|she|techclatters|made|built|this site|workshop)\b/)) { reply = _jamonPick([ "Ms. Clatters made all of this! πŸ› οΈ she builds tiny fun things β€” games, extensions, all sorts of stuff!", "this is Ms. Clatters' little workshop 🏠 she makes small software things for fun and curiosity!", "oh Ms. Clatters is SO cool (I live with her so I'm an expert 🐹) β€” she makes lil apps and games!", ]); } else if (t.match(/\b(cute|adorable|love you|you're great|best|awesome|i like you|you're cool)\b/)) { reply = _jamonPick([ "*blushes furiously* πŸ₯Ί stoppp you're making me popcorn!!", "*happy squeak intensifies* πŸ’•πŸ’• I LOVE THIS CONVERSATION", "I'M TELLING MS. CLATTERS YOU SAID THAT πŸ“’ *wheek*", ]); } else if (t.match(/\b(food|eat|snack|hungry|hay|pellets|lettuce|carrot|veggie|grass)\b/)) { reply = _jamonPick([ "*perks up IMMEDIATELY* πŸ‘€ did someone say... snacks???", "*zooms to food bowl* WHEEK WHEEK WHEEK πŸ₯¬πŸ₯¬", "I am ALWAYS thinking about food. always. what are we eating. πŸ₯•", ]); } else if (t.match(/\b(bye|goodbye|cya|see ya|later|gotta go|leaving)\b/)) { reply = _jamonPick([ "*sad squeak* nooo come back soon!! πŸ₯Ή", "byeee!! *waves tiny paw* πŸΎπŸ’•", "*runs after you* wait waitβ€” okay okay. bye!! come back!! 🐹", "*dramatically flops* the loneliness... it is too much... (jk bye πŸ’•)", ]); } else if (t.match(/\b(scarlett|your owner|pet|you live with|where do you live)\b/)) { reply = _jamonPick([ "I live with Ms. Clatters!! she's very nice and gives me veggies πŸ₯¬ I approve of her", "Ms. Clatters is my human 🐹 she codes a lot and sometimes lets me sit on the desk while she works", "*whispers* between you and me... I am her MUSE. all these projects? inspired by my existence. probably.", ]); } else if (t.match(/\b(sleep|tired|nap|rest|sleepy|yawn|zzz)\b/)) { reply = _jamonPick([ "*does a little loaf* ..zzzz...... hm? OH I'm awake!! totally awake πŸ‘€", "sleep is IMPORTANT. I take 47 naps a day and I am THRIVING πŸ˜€πŸ’€", "*yawns enormously* oh excuse me... what were you saying... *immediately falls asleep*", ]); } else if (t.match(/\b(play|game|fun|bored)\b/)) { reply = _jamonPick([ "*zooms in a figure-8* I AM PLAYING RIGHT NOW!! THIS IS IT!! 🐾🐾", "you should try the Office Hours game upstairs!! Ms. Clatters made it πŸ‘†", "*shakes a tiny rattle* I'm SO fun. everyone says so.", "I play a game called 'run laps at 3am'. Ms. Clatters is less enthusiastic about it than I am.", ]); } else if (t.match(/\b(soft|fluffy|floofy|fur|fuzzy|pet you|cuddle|hold)\b/)) { reply = _jamonPick([ "*vibrates intensely* 🐹 yes. YES. I am extremely pettable.", "my fur is described as 'soft gray cloud' by experts (me) 🌀", "*leans into imaginary pets* ...don't stop... ever...", ]); } else if (t.match(/\b(how are you|how's it going|you okay|feeling|you good|you alright)\b/)) { reply = _jamonPick([ "*popcorns* GREAT!! 7/10 β€” could use more parsley, but genuinely thriving!!", "I am SPECTACULAR. I ate a carrot earlier. life is good πŸ₯•", "doing a little wheek, a little squeak, a little exploring. so: perfect 🐹✨", ]); } else if (t.match(/\b(name|called|you're|your name|who are you)\b/)) { reply = _jamonPick([ "I'm JamΓ³n!! like the Spanish ham, but I am NOT ham. I am a guinea pig. very important distinction. 🐹", "JamΓ³n!! (jah-MOHN) 🐹 named after Spanish cured meat, which feels slightly ominous but I choose not to dwell on it", ]); } else if (t.match(/\b(weather|outside|rain|sun|cold|hot|temperature)\b/)) { reply = _jamonPick([ "I live inside so all weather is Irrelevant to me 🐹 it is currently: cozy.", "ideal temperature: exactly 72Β°F. anything else is a CRISIS. *wraps in tiny blanket*", ]); } else { reply = _jamonPick([ "*squeak squeak!* interesting!! tell me more πŸ‘‚", "*happy wheek!* I hear you!! 🐹", "*nibble nibble* hmm... *thinks with tiny brain*...", "*popcorns!* πŸŽ‰", "*runs in a tiny circle* I'm listening!!", "wheek wheek!! that's fascinating to me, a guinea pig 🐾", "*tilts head curiously* yeah? yeah!! *squeak*", "*vibrates with excitement* 🐹✨", "*pauses mid-munch* oh! yeah! go on!", "incredible. truly. *squeaks approvingly*", "*does a tiny binky* I just felt happy for no reason!! anyway what were you saying", "as a guinea pig, my perspective on this is: wheek wheek 🐾", ]); } addJamon(reply); if (showForm) setTimeout(() => setEmailForm(true), 1100); }; const inputStyle = { border: `1.5px solid ${ink}`, padding: '6px 8px', fontFamily: 'inherit', fontSize: 12, background: '#fff', outline: 'none', width: '100%', boxSizing: 'border-box' }; return (
{/* header */}
chat with Jamón 🐹
{/* mascot strip */}
chatting with jamΓ³n Β· online
{/* messages */}
{messages.map((m, i) => (
{m.text}
))} {typing && (
Β·Β·Β·
)}
{/* email form β€” shown after user says "send to Scarlett" */} {emailForm && (
*squeak!* who should Ms. Clatters reply to? 🐹
setFormName(e.target.value)} placeholder="your name" style={inputStyle} /> setFormEmail(e.target.value)} placeholder="your email" type="email" style={inputStyle} />
anything else to add? (optional)