// apps.jsx - content for each macOS window app const D = window.JH_DATA; // ─── shared bits ───────────────────────────────────────────────────────────── const Tag = ({ children, dark }) => ( {children} ); const SBHead = ({ children }) => (
{children}
); const SBItem = ({ icon, label, active, onClick }) => (
{icon} {label}
); // ─── Finder / About ────────────────────────────────────────────────────────── const FinderAbout = ({ openApp }) => (
Justin Hatch
{D.role}

{D.name}

{D.location} · graduated {D.graduating}
{D.about.map((p, i) =>

{p}

)}
{D.honors.map(h => {h})}
Get in touch
); const FinderSidebar = ({ active, openApp }) => ( <> Favorites openApp('finder')} /> openApp('projects')} /> openApp('exp')} /> openApp('skills')} /> openApp('writing')} /> Contact openApp('mail')} /> openApp('now')} /> openApp('preview')} /> ); // ─── Projects ──────────────────────────────────────────────────────────────── const StatusBadge = ({ status }) => { const cfg = status === 'shipped' ? { bg: '#28c840', fg: 'white', label: 'shipped' } : status === 'in-progress' ? { bg: '#ff9500', fg: 'white', label: 'in progress' } : { bg: 'rgba(0,0,0,0.15)', fg: 'rgba(0,0,0,0.65)', label: status || 'wip' }; return ( {cfg.label} ); }; const ProjectDetail = ({ project, onBack }) => { const bullets = project.bullets || project.points || []; return (
{project.url && ( Open on GitHub ↗ )}

{project.name}

{project.subtitle}
{bullets.length > 0 ? (
Highlights
    {bullets.map((b, i) =>
  • {b}
    • )}
) : (
More detail coming. Check the GitHub link for the latest.
)}
Tech & themes
{project.tags.map(t => {t})}
); }; const ProjectsApp = () => { const [view, setView] = useState('grid'); const [query, setQuery] = useState(''); const [activeTags, setActiveTags] = useState([]); const [openId, setOpenId] = useState(null); // Tag list with frequency, sorted by count desc. const tagCounts = {}; D.projects.forEach(p => p.tags.forEach(t => { tagCounts[t] = (tagCounts[t] || 0) + 1; })); const allTags = Object.keys(tagCounts).sort((a, b) => tagCounts[b] - tagCounts[a]); const toggleTag = (t) => setActiveTags(prev => prev.includes(t) ? prev.filter(x => x !== t) : [...prev, t]); const filtered = D.projects.filter(p => { if (query.trim()) { const q = query.toLowerCase(); const hay = `${p.name} ${p.subtitle} ${p.tags.join(' ')}`.toLowerCase(); if (!hay.includes(q)) return false; } if (activeTags.length > 0 && !activeTags.some(t => p.tags.includes(t))) return false; return true; }); // Detail view takes over the whole pane. if (openId) { const p = D.projects.find(x => x.id === openId); if (p) return setOpenId(null)} />; } return (
{/* Top bar: search + view toggle + count */}
⌕ setQuery(e.target.value)} placeholder="Search projects, tags, descriptions..." style={{ flex: 1, border: 0, outline: 0, background: 'transparent', fontSize: 13, fontFamily: 'inherit', color: '#1d1d1f', }} /> {query && ( )}
{['grid','list'].map(v => ( ))} {filtered.length}/{D.projects.length}
{/* Tag chip filter strip */}
{activeTags.length > 0 && ( )} {allTags.map(t => { const active = activeTags.includes(t); return ( ); })}
{/* Project grid / list */}
{filtered.length === 0 ? (
No projects match.{' '}
) : view === 'grid' ? (
{filtered.map(p => (
setOpenId(p.id)} style={{ cursor: 'pointer', textAlign: 'center' }}>
{ e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 18px rgba(0,0,0,0.12)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)'; }} > {p.name.split(' ').map(w => w[0]).join('').slice(0,2).toUpperCase()}
{p.name}
{p.tags[0]}
))}
) : (
NameAboutStatus
{filtered.map((p, i) => (
setOpenId(p.id)} style={{ display: 'grid', gridTemplateColumns: '40px 1.2fr 2fr 100px', gap: 12, padding: '10px 14px', alignItems: 'center', background: i % 2 ? 'rgba(0,0,0,0.02)' : 'transparent', color: '#1d1d1f', cursor: 'pointer', fontSize: 13, }} onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(10,132,255,0.08)'} onMouseLeave={(e) => e.currentTarget.style.background = i % 2 ? 'rgba(0,0,0,0.02)' : 'transparent'} > {String(i+1).padStart(2,'0')} {p.name} {p.subtitle} {p.status}
))}
)}
); }; // ─── Experience ────────────────────────────────────────────────────────────── const ExpApp = () => (

Experience

{D.school} · {D.degree}
{D.experience.map((e, i) => (
{e.start} - {e.end} · {e.where}
{e.role}
{e.company} · {e.type}
    {e.bullets.map((b, j) =>
  • {b}
    • )}
{e.tags.map(t => {t})}
))}
); // ─── Skills ────────────────────────────────────────────────────────────────── const SkillsApp = () => (

Stack

What I reach for. Bold = daily.
{Object.entries(D.skills).map(([cat, list]) => (
{cat}
{list.map(s => {s})}
))}
Certifications
    {D.certs.map(c =>
  • {c}
    • )}
); // ─── Writing ───────────────────────────────────────────────────────────────── const WritingApp = () => (

Notes & Reports

Technical writing on what I'm shipping.
{D.writing.map(w => (
{w.kind.toUpperCase()} · {w.date} · {w.mins} MIN
{w.title}
))}
); // ─── Mail / Contact ────────────────────────────────────────────────────────── const MailApp = () => { const [name, setName] = useState(''); const [from, setFrom] = useState(''); const [body, setBody] = useState(''); return (
New Message · To: Justin
{[['From', from, setFrom, 'you@company.com'], ['Name', name, setName, 'Your name']].map(([l, v, set, ph]) => (
{l}: set(e.target.value)} placeholder={ph} style={{ flex: 1, border: 0, outline: 0, background: 'transparent', fontSize: 14, fontFamily: 'inherit' }} />
))}