// Shared multi-page site harness used by all three variations. // Each variation supplies a `theme` object (colors, fonts) + a `tokens` // object (page-specific class hooks) and the `MakeSite(theme)` factory // renders the chrome and switches pages via internal state. window.makeSite = function makeSite(theme) { const D = window.SamData; const T = theme; const PAGES = [ { id: 'home', label: 'Home' }, { id: 'publications', label: 'Publications' }, { id: 'writing', label: 'Writing' }, { id: 'press', label: 'Press' }, { id: 'cv', label: 'CV' }]; function FadeIn({ children, delay = 0, k }) { const ref = React.useRef(null); const [vis, setVis] = React.useState(false); React.useEffect(() => { setVis(false); const t = setTimeout(() => setVis(true), 30 + delay); return () => clearTimeout(t); }, [k]); return (
{children}
); } // Scroll-triggered reveal — fades in once when the element first enters // the viewport. `from` controls the entrance direction (up, left, right). function Reveal({ children, delay = 0, from = 'up', style }) { const ref = React.useRef(null); const [vis, setVis] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { setVis(true); io.disconnect(); } }); }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' }); io.observe(el); const fallback = setTimeout(() => setVis(true), 600); return () => {io.disconnect();clearTimeout(fallback);}; }, []); const offset = from === 'left' ? 'translateX(-32px)' : from === 'right' ? 'translateX(32px)' : 'translateY(28px)'; return (
{children}
); } function Nav({ active, setActive }) { return (
setActive('home')} style={T.brandStyle}> Sam Pratt UCLA Psychology
); } function PageHome({ setActive }) { const [hoverChapter, setHoverChapter] = React.useState(null); return ( {/* ── 01 · Hero — static, top of page ───────────────────────────── */}
Sam Pratt
{D.role} · {D.affiliation}

Sam Pratt

{e.currentTarget.style.background = 'rgba(31,42,74,0.06)';e.currentTarget.style.borderColor = 'rgba(21,25,42,0.32)';}} onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.borderColor = 'rgba(21,25,42,0.18)';}}> Scholar {e.currentTarget.style.background = 'rgba(31,42,74,0.06)';e.currentTarget.style.borderColor = 'rgba(21,25,42,0.32)';}} onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.borderColor = 'rgba(21,25,42,0.18)';}}> Twitter {e.currentTarget.style.background = 'rgba(31,42,74,0.06)';e.currentTarget.style.borderColor = 'rgba(21,25,42,0.32)';}} onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.borderColor = 'rgba(21,25,42,0.18)';}}> LinkedIn
{/* ── Section divider — solid navy band, full bleed ─────────────── */}
{/* ── 02 · Research — full-bleed image bg with content card ──────── */}

Research

{(D.researchAbout || []).map((para, i) =>

)}

{/* ── Section divider — solid navy band, full bleed ─────────────── */}
{/* ── 03 · Science communication — narrative arc, three chapters ── */}

Science Communication

 {/* The book */}
setHoverChapter(0)} onMouseLeave={() => setHoverChapter(null)} className="chapter-card" style={{ ...T.chapterCard, ...(hoverChapter === 0 ? T.chapterCardHover : null) }}>
The book

Outraged

Why We Fight About Morality and Politics & How to Find Common Ground

by Kurt Gray

I was a research and writing assistant for  Outraged, Kurt Gray's book on the psychology of moral disagreement. A Next Big Idea Club must-read, it explores why morality divides us and how we can bridge these conflicts.

Outraged: Why We Fight About Morality and Politics — by Kurt Gray
{/* The podcast */}
setHoverChapter(1)} onMouseLeave={() => setHoverChapter(null)} className="chapter-card" style={{ ...T.chapterCard, ...(hoverChapter === 1 ? T.chapterCardHover : null) }}>
In conversation

In the podcast episode below, I discuss how we make moral judgments and why liberals and conservatives disagree.

Outrage Overload

Episode · April 2025
{/* The newsletter */}
setHoverChapter(2)} onMouseLeave={() => setHoverChapter(null)} className="chapter-card" style={{ ...T.chapterCard, ...(hoverChapter === 2 ? T.chapterCardHover : null) }}>
The newsletter

I recently started my own Substack newsletter, where I write about psychology, science and ethics, and grad school. You can subscribe for free or check it out below.

); } function PageHeading({ title, action }) { return (

{title}

{action &&
{action}
}
); } function PageResearch() { return (
{D.research.map((r, i) =>
0{i + 1}
{r.title}
{r.tag}
{r.link ? {r.linkLabel} : —}
)}
); } // Render a citation with the user's name bolded and a DOI link appended. function renderCitation(text, doi, accent) { const parts = []; const re = /(Pratt,\s*S(?:amuel)?\.?)/g; let last = 0,m,k = 0; while ((m = re.exec(text)) !== null) { if (m.index > last) parts.push(text.slice(last, m.index)); parts.push({m[0]}); last = m.index + m[0].length; } if (last < text.length) parts.push(text.slice(last)); if (doi) { parts.push(' '); parts.push( {'https://doi.org/' + doi} ); } return parts; } function PagePublications() { const [openKey, setOpenKey] = React.useState(null); const [hoverKey, setHoverKey] = React.useState(null); const [podHoverKey, setPodHoverKey] = React.useState(null); const accent = T.accent && T.accent.color || '#b85a3c'; const accentHex = encodeURIComponent(accent); const scholarBtn = Google Scholar Profile ↗ ; return ( {D.publicationGroups.map((group, gi) =>

{group.type}

{group.items.map((p, i) => { const key = gi + '-' + i; const isOpen = openKey === key; const isHover = hoverKey === key; const isPodHover = podHoverKey === key; const RowTag = p.pdf ? 'a' : 'article'; const rowProps = p.pdf ? { href: p.pdf, target: '_blank', rel: 'noopener' } : {}; const showRowHover = isHover && !isPodHover; return ( setHoverKey(key)} onMouseLeave={() => setHoverKey(null)} className="pub-row" style={{ ...T.pubRow, ...(showRowHover ? T.pubRowHover : null), ...(p.pdf ? null : { cursor: 'default' }) }}>
{p.year}
{p.title}
{renderCitation(p.citation, p.doi, accent)}
{p.podcast && ( p.podcastTrack ? : e.stopPropagation()} onMouseEnter={() => setPodHoverKey(key)} onMouseLeave={() => setPodHoverKey(null)} style={{ ...T.pillLink, marginTop: 10, display: 'inline-block', transition: 'background 0.18s ease, color 0.18s ease, border-color 0.18s ease', ...(isPodHover ? { background: accent, color: '#fff', borderColor: accent } : null) }}>5-min podcast ↗) }
↗
 {isOpen && p.podcastTrack &&
} ); })}
)} ); } function PageWriting() { const [hoverIdx, setHoverIdx] = React.useState(null); return ( ); } function FeaturedPressCard() { const wsj = D.press.find((p) => p.outlet === 'Wall Street Journal'); const [hover, setHover] = React.useState(false); if (!wsj) return null; return ( setHover(true)} onMouseLeave={() => setHover(false)} className="featured-press" style={{ ...T.featuredPress, ...(hover ? T.featuredPressHover : null) }}>
The Wall Street Journal
Opinion · Free Expression · {wsj.date}

My paper on the Words Can Harm Scale was featured in The Wall Street Journal.

“{wsj.title}”
By {wsj.author}
Read the article ↗
); } function PagePress() { const [hoverIdx, setHoverIdx] = React.useState(null); const [hoverIvIdx, setHoverIvIdx] = React.useState(null); const [tab, setTab] = React.useState('mentions'); return (
{[ { id: 'mentions', label: 'Media mentions', count: D.press.length }, { id: 'interviews', label: 'Interviews', count: D.interviews.length }]. map((t) => { const active = tab === t.id; return ( ); })}
{tab === 'mentions' ? :
{D.interviews.map((iv, i) => { const isPodcast = iv.kind === 'podcast'; const isHover = hoverIvIdx === i; return (
setHoverIvIdx(i)} onMouseLeave={() => setHoverIvIdx(null)} className="interview-card" style={{ ...T.interviewCard, ...(isHover ? T.interviewCardHover : null) }}> {isPodcast ?
:
}
{isPodcast ? 'Podcast' : 'TV'} {iv.outlet} · {iv.date}

{iv.show}

{iv.logo && {iv.outlet}}
{iv.title &&

“{iv.title}”

}

{iv.description}

{iv.host &&

Hosted by {iv.host}

} {isPodcast ? 'Listen on Spotify' : 'Watch on YouTube'} ↗
); })}
} ); } function PageCV() { return (
); } function PageContact() { return (
Email
{D.email}
Office
Franz Hall
UCLA, Los Angeles, CA
Newsletter
e.preventDefault()} style={T.newsletterForm}>
); } function Footer() { return ( ); } function Site() { const [active, setActive] = React.useState('home'); React.useEffect(() => {window.scrollTo(0, 0);}, [active]); const Page = { home: PageHome, research: PageResearch, publications: PagePublications, writing: PageWriting, press: PagePress, cv: PageCV }[active]; return (
); } return Site; };