// Components.jsx — shared atoms for Francesco's personal site.
// Tokens come from colors_and_type.css; nothing hardcodes color.
const { useState, useEffect, useRef } = React;
// Identity — change once, used everywhere.
const ME = {
name: 'Francesco Orozco',
initial: 'f',
initials: 'FO',
role: 'AI Engineer & Data Scientist',
company: 'Bloom Growth',
email: 'franccesco@thatai.dev',
github: 'github.com/franccesco',
twitter: '@__franccesco',
linkedin: 'linkedin.com/in/franccesco',
};
// ─────────────────────────────────────────────────────────────────
// Icon — sparse, currentColor, 1.5px stroke.
// ─────────────────────────────────────────────────────────────────
const ICON_PATHS = {
'arrow-up-right': (<>),
'arrow-right': (<>),
'rss': (<>),
'mail': (<>),
'github': (),
'twitter': (),
'linkedin': (<>),
'check': (),
'copy': (<>),
'sun': (<>),
'moon': (),
'monitor': (<>),
};
function Icon({ name, size = 16, style }) {
const path = ICON_PATHS[name];
if (!path) return null;
return (
);
}
// ─────────────────────────────────────────────────────────────────
// Monogram — four variants. The accent appears here (the only place
// on the landing chrome by default, per the brief).
// ─────────────────────────────────────────────────────────────────
function Monogram({ variant = 'dot', letter = ME.initial, initials = ME.initials, size = 28 }) {
// Variants:
// dot — italic letter + small accent dot (default)
// plain — italic letter, no dot
// initials — italic "FO" stacked with a small accent dot between
// bracket — [ italic letter ] in mono, no dot — quietly technical
// underline — italic letter on top of a short accent bar
if (variant === 'plain') {
return (
{letter}
);
}
if (variant === 'initials') {
const dot = Math.max(4, Math.round(size * 0.14));
return (
{initials[0]}
{initials[1]}
);
}
if (variant === 'bracket') {
return (
[
{letter}
]
);
}
if (variant === 'underline') {
return (
{letter}
);
}
// default = "dot"
const dotSize = Math.max(5, Math.round(size * 0.18));
const gap = Math.max(3, Math.round(size * 0.12));
return (
{letter}
);
}
function NavMark({ variant = 'dot', size = 22 }) {
return (
{ME.name}
);
}
// ─────────────────────────────────────────────────────────────────
// MetaLabel — small mono uppercase eyebrow.
// ─────────────────────────────────────────────────────────────────
function MetaLabel({ children, accent = false, style }) {
return (
{children}
);
}
// ─────────────────────────────────────────────────────────────────
// Tag — pill chip.
// ─────────────────────────────────────────────────────────────────
function Tag({ children, active = false, onClick }) {
const interactive = typeof onClick === 'function';
return (
);
}
// ─────────────────────────────────────────────────────────────────
// TextLink — restrained underline + highlighter bar on hover.
// ─────────────────────────────────────────────────────────────────
function TextLink({ href = '#', onClick, external = false, children, accentRest = false }) {
const [hover, setHover] = useState(false);
const on = hover || accentRest;
return (
{ if (onClick) { e.preventDefault(); onClick(e); } }}
target={external ? '_blank' : undefined}
rel={external ? 'noopener noreferrer' : undefined}
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
style={{
color: 'var(--fg)',
textDecoration: 'underline',
textDecorationColor: 'var(--divider-strong)',
textUnderlineOffset: '3px',
textDecorationThickness: '1px',
backgroundImage: 'linear-gradient(var(--accent-soft), var(--accent-soft))',
backgroundRepeat: 'no-repeat',
backgroundSize: on ? '100% 100%' : '0% 100%',
backgroundPosition: '0 0',
padding: '1px 3px',
margin: '-1px -3px',
transition: 'background-size 280ms var(--ease)',
display: 'inline-flex', alignItems: 'baseline', gap: '4px',
}}>
{children}
{external && }
);
}
// ─────────────────────────────────────────────────────────────────
// ThemeToggle — cycles paper → midnight → system → paper.
// `choice` is the raw user pick (what's persisted in tweaks);
// `effective` is what's actually on screen, used as a hint for
// the system-state icon overlay.
// ─────────────────────────────────────────────────────────────────
function ThemeToggle({ choice = 'paper', effective = 'paper', onToggle }) {
const [hover, setHover] = useState(false);
const next =
choice === 'paper' ? 'midnight' :
choice === 'midnight' ? 'system' : 'paper';
const label =
choice === 'paper' ? 'Switch to dark theme' :
choice === 'midnight' ? 'Switch to system theme' :
'Switch to light theme';
const iconName =
choice === 'system' ? 'monitor' :
choice === 'midnight' ? 'moon' : 'sun';
return (
);
}
// ─────────────────────────────────────────────────────────────────
// Nav — top bar (multi-page mode).
// ─────────────────────────────────────────────────────────────────
function Nav({ route, onNavigate, monogram = 'dot', effectiveTheme, themeChoice, onToggleTheme }) {
const items = [
{ key: 'home', label: 'Home' },
{ key: 'writing', label: 'Writing' },
{ key: 'contact', label: 'Contact' },
];
return (
);
}
// SingleNav — used in single-page mode. Section jumps instead of routes.
function SingleNav({ activeSection, onJump, monogram = 'dot', effectiveTheme, themeChoice, onToggleTheme }) {
const items = [
{ key: 'top', label: 'Top' },
{ key: 'writing', label: 'Writing' },
{ key: 'contact', label: 'Contact' },
];
return (
);
}
// ─────────────────────────────────────────────────────────────────
// Page — outer chrome.
// ─────────────────────────────────────────────────────────────────
function Page({ theme = 'paper', route, onNavigate, monogram = 'dot',
children, screenLabel, mode = 'multi',
activeSection, onJump, fontWeight = 400, measureCh = 62,
onToggleTheme, themeChoice }) {
return (
{mode === 'single'
?
:
);
}
function Footer({ mode }) {
return (
);
}
// ─────────────────────────────────────────────────────────────────
// Essay items — three layouts (list / cards / dense)
// ─────────────────────────────────────────────────────────────────
function EssayRow({ date, title, dek, tags = [], onOpen }) {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
display: 'grid',
gridTemplateColumns: '110px 1fr',
gap: '24px',
padding: '22px 0',
borderTop: '1px solid var(--divider)',
cursor: onOpen ? 'pointer' : 'default',
}}>
{date}
{title}
{dek}
{tags.length > 0 && (
{tags.map((t) => {t})}
)}
);
}
function EssayCard({ date, title, dek, tags = [], onOpen }) {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
padding: '20px 22px',
border: '1px solid var(--divider)',
borderRadius: '8px',
background: hover ? 'var(--bg-elev)' : 'transparent',
boxShadow: hover ? 'var(--shadow-card)' : 'none',
cursor: onOpen ? 'pointer' : 'default',
transition: 'background 200ms var(--ease), box-shadow 200ms var(--ease)',
display: 'flex', flexDirection: 'column', gap: '10px',
}}>
{date}
{tags.length > 0 && (
<>
·
{tags.join(' · ')}
)}
{title}
{dek}
);
}
function EssayDense({ date, title, tags = [], onOpen }) {
const [hover, setHover] = useState(false);
return (
{ e.preventDefault(); if (onOpen) onOpen(); }}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
display: 'grid',
gridTemplateColumns: '88px 1fr auto',
gap: '20px',
alignItems: 'baseline',
padding: '10px 0',
borderTop: '1px solid var(--divider)',
color: 'var(--fg)',
textDecoration: 'none',
}}>
{date}
{title}
{tags[0] || ''}
);
}
// ─────────────────────────────────────────────────────────────────
// WorkLine — quiet line item for work history.
// ─────────────────────────────────────────────────────────────────
function WorkLine({ when, role, where, note }) {
return (
{when}
{role}
{where && · {where}}
{note && (
{note}
)}
);
}
// ─────────────────────────────────────────────────────────────────
// ContactRow — channel row for the contact card.
// ─────────────────────────────────────────────────────────────────
function ContactRow({ icon, label, value, href, copyable = false }) {
const [copied, setCopied] = useState(false);
const onCopy = (e) => {
e.preventDefault();
if (navigator.clipboard) navigator.clipboard.writeText(value).catch(() => {});
setCopied(true);
setTimeout(() => setCopied(false), 1400);
};
return (
{label}
{href ? {value} : value}
{copyable && (
)}
);
}
// Expose atoms globally so each