// 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: '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: '2026', }, { id: 'soon1', name: 'Cooking…', tagline: 'Something tiny and useful is in the oven.', blurb: 'Idea-stage. Stay tuned.', href: '#', kind: 'Coming soon', emoji: '🍳', color: '#C9A2E6', accent: '#FFE66B', 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' }) { 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(0); // 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 }) { const ink = '#1f1a14'; const fur = '#a4a3a8'; const furDark = '#74737a'; const furLight = '#e3e2e6'; const cheek = '#FF9CA0'; const yellow = '#FFE066'; const w = size; // Pear-shaped body: fat left butt, slimmer right toward head. 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, Scarlett's guinea pig 🐹 What's on your mind?" }, ]); const [input, setInput] = React.useState(''); const [typing, setTyping] = React.useState(false); const [waitingEmail, setWaitingEmail] = React.useState(false); const [emailForm, setEmailForm] = React.useState(false); const [formName, setFormName] = React.useState(''); const [formEmail, setFormEmail] = 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 }), }); setSending(false); setEmailForm(false); setFormName(''); setFormEmail(''); if (r.ok) { addJamon("*sprints to inbox* πŸƒπŸ’¨ wheeeek!! Scarlett's got your message πŸ“¬ she'll reply to your email!", 300); } else { addJamon("*worried squeak* hmm, something went wrong πŸ˜… maybe try again in a bit?", 300); } } catch { setSending(false); addJamon("*worried squeak* hmm, something went wrong πŸ˜… maybe try again in a bit?", 300); } }; 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 nextWaiting = waitingEmail; let showForm = false; if (waitingEmail) { if (t.match(/\b(yes|yeah|yep|sure|ok|okay|send|do it|please|absolutely)\b/)) { nextWaiting = false; showForm = true; reply = "*squeak!!* let's do it πŸ“¬ just fill in your name and email below so Scarlett can write back!"; } else if (t.match(/\b(no|nope|nah|not|skip|never|cancel)\b/)) { nextWaiting = false; reply = _jamonPick([ "*shrugs tiny shoulders* no worries! I'll keep it in my heart πŸ’•", "okay okay! *tucks it away* anything else? 🐹", ]); } else { reply = "*squeak?* just say yes or no β€” should I send it to Scarlett? πŸ“¬"; } } 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/)) { nextWaiting = true; reply = "*ears perk way up* πŸ‘€ ooh!! that sounds SO interesting! want me to send this idea to Scarlett's inbox? say yes or no!"; } else if (t.match(/\b(feedback|bug|broken|issue|problem|annoying|confusing|wrong|fix|improve|doesn't work|not working)\b/)) { nextWaiting = true; reply = "*thoughtful nibble* 🌿 hmm I hear you! should I pass this feedback to Scarlett? she'll definitely want to know β€” yes or no?"; } else if (t.match(/\b(who|scarlett|she|techclatters|made|built|this site|workshop)\b/)) { reply = _jamonPick([ "Scarlett made all of this! πŸ› οΈ she builds tiny fun things β€” games, extensions, all sorts of stuff!", "this is Scarlett's little workshop 🏠 she makes small software things for fun and curiosity!", "oh Scarlett 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 SCARLETT 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!! 🐹", ]); } 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* 🐹✨", ]); } if (nextWaiting !== waitingEmail) setWaitingEmail(nextWaiting); 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 agrees to send */} {emailForm && (
*squeak!* who should Scarlett reply to? 🐹
setFormName(e.target.value)} placeholder="your name" style={inputStyle} /> setFormEmail(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') submitEmailForm(); }} placeholder="your email" type="email" style={inputStyle} />
)} {/* chat input β€” hidden while email form is open */} {!emailForm && (