// mobile.jsx - iOS-style home screen for phones, mirrors the macOS desktop concept. // Boots with chat already open (the highest-engagement app), tap close to see the // iOS home screen with all the other "apps" (sections of Justin's portfolio). const { useState: mS, useEffect: mE, useRef: mR } = React; const PD = window.JH_DATA; // ─── useMediaQuery ─────────────────────────────────────────────────────────── const useMediaQuery = (query) => { const [matches, setMatches] = mS(() => typeof window !== 'undefined' && window.matchMedia(query).matches ); mE(() => { const mq = window.matchMedia(query); const handler = (e) => setMatches(e.matches); mq.addEventListener('change', handler); return () => mq.removeEventListener('change', handler); }, [query]); return matches; }; // ─── Status bar (time, signal, battery, dynamic island) ────────────────────── const StatusBar = ({ light = true }) => { const [time, setTime] = mS(() => fmtTime(new Date())); mE(() => { const id = setInterval(() => setTime(fmtTime(new Date())), 30_000); return () => clearInterval(id); }, []); const c = light ? 'white' : '#1d1d1f'; return (
{time}
{/* Signal bars */} {/* Wi-Fi */} {/* Battery */}
); }; function fmtTime(d) { let h = d.getHours(), m = d.getMinutes(); return `${h % 12 || 12}:${m.toString().padStart(2, '0')}`; } // ─── Home indicator (cosmetic) ─────────────────────────────────────────────── const HomeIndicator = ({ light = true }) => (
); // ─── Brand / app SVG icons ─────────────────────────────────────────────────── const RobotMark = ( ); const IOSGitHubMark = ( ); const IOSLinkedInMark = ( ); // ─── Apps registry for iOS home ────────────────────────────────────────────── // Items with `href` open externally in a new tab; items without open as in-app sheets. const IOS_APPS = [ { id: 'chat', label: "Justin's Bot", icon: RobotMark, bg: 'linear-gradient(160deg, #d4e3f5, #8eb4d8)', fg: 'white' }, { id: 'about', label: 'About', icon: '◐', bg: 'linear-gradient(160deg, #7ec0ff, #0a84ff)', fg: 'white' }, { id: 'projects', label: 'Projects', icon: '▦', bg: 'linear-gradient(160deg, #ffd479, #ff9500)', fg: 'white' }, { id: 'experience', label: 'Experience', icon: '≡', bg: 'linear-gradient(160deg, #d4d4d9, #86868b)', fg: 'white' }, { id: 'skills', label: 'Stack', icon: '◇', bg: 'linear-gradient(160deg, #b78dff, #5e3fbe)', fg: 'white' }, { id: 'writing', label: 'Writing', icon: '✎', bg: 'linear-gradient(160deg, #fff2c8, #f8d764)', fg: '#5a4a00' }, { id: 'now', label: 'Now', icon: '▷', bg: 'linear-gradient(160deg, #2c2c2e, #1c1c1e)', fg: '#a8c896' }, { id: 'mail', label: 'Mail', icon: '✉', bg: 'linear-gradient(160deg, #7ec0ff, #007aff)', fg: 'white' }, { id: 'resume', label: 'Resume', icon: '⎙', bg: 'linear-gradient(160deg, #ff8a8a, #ff3b30)', fg: 'white' }, { id: 'github', label: 'GitHub', icon: IOSGitHubMark, bg: 'linear-gradient(160deg, #2a2a2e, #0d0d10)', fg: 'white', href: PD.links?.github?.href }, { id: 'linkedin', label: 'LinkedIn', icon: IOSLinkedInMark, bg: 'linear-gradient(160deg, #2c8ed6, #0a66c2)', fg: 'white', href: PD.links?.linkedin?.href }, ]; const IOS_DOCK = ['chat', 'mail', 'projects', 'resume']; // ─── App icon ──────────────────────────────────────────────────────────────── const AppIcon = ({ app, size = 60, label = true, onTap }) => { const isText = typeof app.icon === 'string'; return ( ); }; // ─── iOS Home screen ───────────────────────────────────────────────────────── const IOSHome = ({ onOpen }) => { const dockApps = IOS_DOCK.map(id => IOS_APPS.find(a => a.id === id)).filter(Boolean); const gridApps = IOS_APPS.filter(a => !IOS_DOCK.includes(a.id)); // Click handler: external links open in a new tab; everything else opens as in-app sheet. const handleTap = (app) => { if (app.href) window.open(app.href, '_blank', 'noopener,noreferrer'); else onOpen(app.id); }; return (
{/* Hero (eyebrow + name) */}
{PD.role}
{PD.name}
{/* App grid */}
{gridApps.map(a => )}
{/* Dock */}
{dockApps.map(a => )}
); }; // ─── App view shell (full-screen, with close chevron) ──────────────────────── const IOSAppView = ({ title, onClose, theme = 'light', children }) => { const dark = theme === 'dark'; return (
{/* Header */}
{title}
{children}
); }; // ─── Chat (full-screen, instant SSE) ───────────────────────────────────────── const IOSChat = ({ onClose }) => { const [messages, setMessages] = mS([ { role: 'assistant', content: "Hey - I'm Justin's bot. Ask me anything about his work, projects, or what he's looking for next." }, ]); const [input, setInput] = mS(''); const [sending, setSending] = mS(false); const [error, setError] = mS(null); const scrollRef = mR(null); mE(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, sending]); const sendText = async (text) => { text = text.trim(); if (!text || sending) return; setInput(''); setError(null); const next = [...messages, { role: 'user', content: text }, { role: 'assistant', content: '' }]; setMessages(next); setSending(true); const ctl = new AbortController(); let timeoutReason = null; const connectTimer = setTimeout(() => { timeoutReason = 'connect_timeout'; ctl.abort(); }, 15000); let stallTimer = null; const resetStall = () => { if (stallTimer) clearTimeout(stallTimer); stallTimer = setTimeout(() => { timeoutReason = 'stall_timeout'; ctl.abort(); }, 30000); }; resetStall(); try { const payload = next.filter(m => !(m.role === 'assistant' && m.content === '')).map(m => ({ role: m.role, content: m.content })); const res = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: payload }), signal: ctl.signal }); clearTimeout(connectTimer); if (!res.ok) { const j = await res.json().catch(() => ({})); throw new Error(j.message || `HTTP ${res.status}`); } if (!res.body) throw new Error('no body'); const reader = res.body.getReader(); const dec = new TextDecoder(); let buf = ''; while (true) { const { done, value } = await reader.read(); if (done) break; resetStall(); buf += dec.decode(value, { stream: true }); let idx; while ((idx = buf.indexOf('\n\n')) !== -1) { const raw = buf.slice(0, idx).trim(); buf = buf.slice(idx + 2); if (!raw.startsWith('data:')) continue; let evt; try { evt = JSON.parse(raw.slice(5).trim()); } catch { continue; } if (evt.type === 'delta') { setMessages(prev => { const c = prev.slice(); c[c.length - 1] = { role: 'assistant', content: c[c.length - 1].content + evt.text }; return c; }); } else if (evt.type === 'error') { throw new Error(evt.message || 'stream error'); } } } } catch (e) { const reason = e?.message || String(e); const friendly = timeoutReason === 'connect_timeout' ? "Couldn't reach the server in 15s." : timeoutReason === 'stall_timeout' ? "The server stopped responding." : reason; setError(friendly); setMessages(prev => { const c = prev.slice(); if (c.length && c[c.length - 1].role === 'assistant' && !c[c.length - 1].content) c.pop(); return c; }); } finally { clearTimeout(connectTimer); if (stallTimer) clearTimeout(stallTimer); setSending(false); } }; const onKey = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendText(input); } }; return (
{/* Header */}
JH
Justin's Bot
online · ask anything about Justin
{/* Messages */}
{messages.map((m, i) => { const mine = m.role === 'user'; const isLastEmptyAssistant = !mine && !m.content && sending && i === messages.length - 1; return (
{isLastEmptyAssistant ? ( • • • ) : m.content}
); })} {error &&
{error}
}
{/* Input */}