{/* Faint warm amber tint on the upper third to tie into the candlelight */}
{/* Vignette */}
{/* film-edge inner border */}
{effImg && 
}
{/* keep the parlor color reading through an auto-pulled YouTube still */}
{autoThumb && }
{v.length}
{/* index — like a film catalog */}
No. {String(i + 1).padStart(2, '0')}
{v.kind}
{v.year}
{v.title}
Pixels & Print
Design work.
Identity, packaging, editorial. The slow craft of getting the letters and the colors right.
{D.designs.map((d, i) => {
const [cspan, rspan] = d.span;
const disp = (d.image && !isPdfData(d.image)) ? d.image : (d.thumb || '');
const pdfOnly = (d.pdf || isPdfData(d.image)) && !disp;
return (
Field Journal · A short history
);
}
// ── Contact ────────────────────────────────────────────────────────
function Contact() {
const [state, setState] = React.useState({ name: '', email: '', message: '' });
const [sent, setSent] = React.useState(false);
const [sending, setSending] = React.useState(false);
const [errors, setErrors] = React.useState({});
const [sendErr, setSendErr] = React.useState('');
async function submit(e) {
e.preventDefault();
const errs = {};
if (!state.name.trim()) errs.name = 'A name, please.';
if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(state.email)) errs.email = 'A working email helps me write back.';
if (!state.message.trim()) errs.message = 'A message, please.';
setErrors(errs);
if (Object.keys(errs).length > 0) return;
setSending(true); setSendErr('');
try {
const res = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(state),
});
if (!res.ok) throw new Error('send failed');
setSent(true);
} catch (e2) {
setSendErr('Could not send just now — try again, or email me directly below.');
}
setSending(false);
}
const field = (label, key, type = 'text', rows = 0) => (
onOpen(i, 'design')}
style={{ gridColumn: `span ${cspan}`, gridRow: `span ${rspan}`,
cursor: 'pointer', position: 'relative' }}>
);
}
// ── Travel drawer — dark equirectangular world map ─────────────────
// Coarse, stylized continent outlines as [lon, lat] rings. Both the map
// polygons and the location dots use the SAME equirectangular projection,
// so a dot at a given lat/long always lands on its landmass.
const TV_LAT_TOP = 84, TV_LAT_BOT = -56; // crop poles for a ~2.6:1 frame
const TV_W = 1000, TV_H = 389; // viewBox; H = W * 140/360
const tvX = (lon) => ((lon + 180) / 360) * TV_W;
const tvY = (lat) => ((TV_LAT_TOP - lat) / (TV_LAT_TOP - TV_LAT_BOT)) * TV_H;
const tvLeft = (lon) => ((lon + 180) / 360) * 100;
const tvTop = (lat) => ((TV_LAT_TOP - lat) / (TV_LAT_TOP - TV_LAT_BOT)) * 100;
const TV_LANDS = [
// North + Central America
[[-159,70],[-156,71],[-130,70],[-110,69],[-95,72],[-82,73],[-78,68],[-66,60],[-56,52],[-60,47],[-67,45],[-70,41],[-74,40],[-76,35],[-81,31],[-80,25],[-83,29],[-90,29],[-97,28],[-97,22],[-95,18],[-92,15],[-87,13],[-83,9],[-77,8],[-83,12],[-86,16],[-92,17],[-105,19],[-110,23],[-113,27],[-117,32],[-122,37],[-124,42],[-124,48],[-128,51],[-135,57],[-141,60],[-150,59],[-160,58],[-165,60],[-166,65],[-168,66],[-159,70]],
// Greenland
[[-46,83],[-20,82],[-17,76],[-22,70],[-43,60],[-50,64],[-55,69],[-58,75],[-50,80],[-46,83]],
// South America
[[-77,8],[-72,11],[-64,10],[-60,5],[-51,4],[-50,0],[-44,-2],[-38,-6],[-35,-8],[-39,-13],[-41,-22],[-48,-25],[-53,-34],[-58,-39],[-62,-41],[-65,-45],[-69,-51],[-66,-55],[-71,-54],[-74,-45],[-73,-37],[-71,-30],[-70,-23],[-71,-18],[-76,-14],[-81,-6],[-80,-2],[-79,1],[-77,8]],
// Africa
[[-17,15],[-16,20],[-10,27],[-6,36],[10,37],[11,33],[20,32],[25,32],[32,31],[34,28],[35,23],[37,18],[43,12],[51,12],[51,7],[42,-1],[40,-10],[35,-18],[33,-26],[26,-34],[20,-35],[18,-32],[12,-17],[9,-1],[9,4],[3,6],[-5,5],[-8,4],[-13,8],[-17,15]],
// Madagascar
[[44,-16],[50,-16],[50,-25],[45,-25],[44,-16]],
// Europe
[[-10,36],[-9,43],[-2,43],[1,46],[-2,49],[2,51],[8,54],[8,57],[11,58],[14,55],[19,54],[24,57],[30,60],[30,66],[24,66],[22,70],[28,71],[40,68],[44,68],[40,60],[48,56],[50,46],[42,43],[37,47],[32,46],[28,46],[25,41],[20,40],[16,43],[12,45],[8,44],[3,43],[-3,36],[-10,36]],
// Asia
[[40,68],[60,70],[70,72],[90,76],[105,78],[140,73],[160,70],[178,66],[170,60],[163,58],[155,52],[143,46],[135,44],[131,43],[127,40],[122,40],[121,32],[117,24],[110,21],[108,16],[106,10],[104,8],[100,8],[98,12],[97,16],[92,21],[88,21],[80,15],[77,8],[73,18],[68,24],[62,25],[57,25],[52,27],[48,30],[45,38],[40,42],[48,48],[52,54],[60,62],[55,66],[48,66],[40,68]],
// Japan (east coast reaches ~140.8E at lat 35.6 so Tokyo sits on land)
[[132,31],[136,34],[140,35],[142,36.5],[143,38.5],[143.5,41],[143,43],[141,43],[139,40],[137,37],[135,35.5],[133,35],[130,33],[131,31],[132,31]],
// Iceland
[[-24,65],[-22,66],[-14,66],[-13,65],[-15,64],[-19,63],[-22,64],[-24,65]],
// Great Britain
[[-5,50],[-3,51],[0,51],[1,53],[-1,54],[-3,55],[-5,57],[-6,58],[-5,54],[-4,53],[-5,50]],
// Ireland
[[-10,52],[-6,52],[-6,55],[-10,54],[-10,52]],
// Australia
[[114,-22],[114,-34],[121,-34],[129,-32],[138,-35],[141,-38],[147,-38],[150,-37],[153,-31],[153,-25],[146,-19],[142,-11],[136,-12],[137,-16],[130,-15],[125,-14],[122,-18],[114,-22]],
// New Zealand
[[167,-46],[171,-44],[174,-41],[176,-38],[175,-42],[170,-46],[167,-46]],
// Borneo
[[109,2],[117,5],[118,1],[114,-3],[110,-3],[109,2]],
// Sumatra
[[95,5],[98,2],[104,-5],[100,-3],[95,5]],
// New Guinea
[[131,-1],[141,-3],[150,-7],[147,-9],[138,-8],[131,-5],[131,-1]],
// Philippines
[[120,18],[124,17],[126,10],[122,6],[120,10],[120,18]],
];
const TRAVELS = [
{ id: 'japan', name: 'Japan', year: '2024', lon: 139.6, lat: 35.6,
blurb: 'Spent time studying Japanese business and culture through a formal study abroad program at James Madison University. Immersed in daily life across Tokyo and surrounding regions, gaining firsthand exposure to Japanese professional customs, communication styles, and creative industries.' },
{ id: 'romania', name: 'Romania', year: '2025', lon: 24.9, lat: 45.9,
blurb: 'Traveled with Project Ruth to work alongside a local school, leading educational workshops for teachers and spending time with children in the community. The experience was hands-on and relational, focused on meaningful cross-cultural exchange and service.' },
{ id: 'iceland', name: 'Iceland', year: '2025', lon: -18.1, lat: 64.9,
blurb: 'Completed a solo van journey along the Iceland Ring Road over the course of a week. Navigated remote landscapes, volcanic terrain, and coastal cliffs entirely independently, an exercise in self-reliance, adaptability, and finding stillness in unfamiliar places.' },
{ id: 'guatemala', name: 'Guatemala', year: '2025', lon: -90.4, lat: 15.5,
blurb: 'Joined a Teams Commissioned for Christ International mission, contributing to construction projects, painting, and community outreach. Worked alongside a diverse team in a rural setting, focused on practical service and building connections across language and culture.' },
];
// Build an SVG path 'd' from a GeoJSON geometry (Polygon | MultiPolygon),
// projected with the same equirectangular mapping the dots use — so any
// pin at a given lat/long always lands on its landmass.
function tvGeoPath(geom) {
if (!geom) return '';
// Break a ring wherever consecutive points jump more than half the map
// width in projected X — i.e. an antimeridian (±180°) crossing. Without
// this, polygons like Russia draw a straight line clear across the map.
const ring = (r) => {
let d = '', px = null;
for (let k = 0; k < r.length; k++) {
const X = tvX(r[k][0]), Y = tvY(r[k][1]);
const cmd = (k === 0 || (px !== null && Math.abs(X - px) > TV_W / 2)) ? 'M' : 'L';
d += cmd + X.toFixed(1) + ' ' + Y.toFixed(1) + ' ';
px = X;
}
return d + 'Z';
};
if (geom.type === 'Polygon') return geom.coordinates.map(ring).join(' ');
if (geom.type === 'MultiPolygon') return geom.coordinates.map((p) => p.map(ring).join(' ')).join(' ');
return '';
}
// Real country geometry (Natural Earth 1:50m), fetched at runtime from a
// CORS-enabled CDN as TopoJSON (compact) and decoded with topojson-client.
// The coarse outlines below stand in until it arrives / if it fails.
const TV_GEO_URL = 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json';
function TravelDrawer() {
const [open, setOpen] = React.useState(false);
const [activeIdx, setActiveIdx] = React.useState(null); // null = overview (full world)
const [geo, setGeo] = React.useState(null); // GeoJSON features once fetched
const [lightbox, setLightbox] = React.useState(false); // photo lightbox open
const [hover, setHover] = React.useState(false); // hovering the active country shape
const [tip, setTip] = React.useState({ x: 0, y: 0 }); // tooltip position
const [lbPos, setLbPos] = React.useState({ sx: 0, sy: 0, below: true, right: true });
const [closing, setClosing] = React.useState(false); // lightbox closing animation
const [cardPos, setCardPos] = React.useState({ left: 0, top: 0 });
const svgRef = React.useRef(null);
const frameRef = React.useRef(null);
const pinRefs = React.useRef([]);
const viewRef = React.useRef({ x: 0, y: 0, w: TV_W, h: TV_H });
const rafRef = React.useRef(0);
const cardRef = React.useRef(null);
// Travel pins come from the admin (D.travels); fall back to the built-ins.
const travels = (Array.isArray(D.travels) && D.travels.length) ? D.travels : TRAVELS;
const n = travels.length;
const ZOOM = 2.4; // gentle regional zoom — not drastic
const detail = activeIdx != null;
// Fetch + decode the high-detail world (TopoJSON → GeoJSON features).
React.useEffect(() => {
let alive = true;
fetch(TV_GEO_URL).then((r) => r.json()).then((j) => {
if (!alive) return;
let feats = null;
if (window.topojson && j && j.objects && j.objects.countries) {
feats = window.topojson.feature(j, j.objects.countries).features;
} else if (j && j.features) { feats = j.features; }
if (feats) setGeo(feats);
}).catch(() => { /* keep the coarse fallback */ });
return () => { alive = false; };
}, []);
// Land paths + a name→path lookup used to highlight the active country.
const paths = React.useMemo(() => (geo ? geo.map((f) => tvGeoPath(f.geometry)) : null), [geo]);
const byName = React.useMemo(() => {
const m = {};
if (geo) geo.forEach((f) => {
const nm = f.properties && (f.properties.name || f.properties.NAME);
if (nm) m[String(nm).toLowerCase()] = tvGeoPath(f.geometry);
});
return m;
}, [geo]);
const cur = detail ? travels[Math.min(activeIdx, n - 1)] : null;
const highlightD = cur ? byName[(cur.name || '').toLowerCase()] : null;
const select = (i) => { setLightbox(false); setClosing(false); setHover(false); setActiveIdx((i + n) % n); };
const viewAll = () => { setLightbox(false); setClosing(false); setHover(false); setActiveIdx(null); };
// Open the photo card anchored to the active country's on-screen point.
const openLightbox = () => {
const fr = frameRef.current;
if (fr && cur) {
const W = fr.clientWidth, H = fr.clientHeight;
const { x, y, w, h } = viewRef.current;
const s = Math.max(W / w, H / h);
const sx = W / 2 + (tvX(cur.lon) - (x + w / 2)) * s;
const sy = H / 2 + (tvY(cur.lat) - (y + h / 2)) * s;
setLbPos({ sx, sy, below: sy < H / 2, right: sx < W / 2 });
}
setLightbox(true); setClosing(false);
};
// Close the photo card.
const closeLightbox = () => { setLightbox(false); setClosing(false); };
// Clamp the photo card fully inside the visible map, anchored toward center.
const placeCard = React.useCallback(() => {
const fr = frameRef.current, card = cardRef.current;
if (!fr || !card) return;
const W = fr.clientWidth, H = fr.clientHeight, cw = card.offsetWidth, ch = card.offsetHeight, pad = 10;
let left = lbPos.right ? lbPos.sx + 16 : lbPos.sx - 16 - cw;
let top = lbPos.below ? lbPos.sy + 16 : lbPos.sy - 16 - ch;
left = Math.max(pad, Math.min(Math.max(pad, W - cw - pad), left));
top = Math.max(pad, Math.min(Math.max(pad, H - ch - pad), top));
setCardPos({ left, top });
}, [lbPos]);
React.useLayoutEffect(() => { if (lightbox) placeCard(); }, [lightbox, cur, placeCard]);
// Position the HTML pins by projecting lon/lat through the CURRENT viewBox
// (so they stay a constant on-screen size at any zoom and pan with the map).
const placeMarkers = React.useCallback(() => {
const fr = frameRef.current; if (!fr) return;
const W = fr.clientWidth, H = fr.clientHeight;
const { x, y, w, h } = viewRef.current;
// Detail (zoomed) views fill the frame (cover); the overview fits the full
// world width (contain) so far-east/far-west pins are never cropped.
const s = detail ? Math.max(W / w, H / h) : Math.min(W / w, H / h);
travels.forEach((t, i) => {
const el = pinRefs.current[i]; if (!el) return;
const sx = W / 2 + (tvX(t.lon) - (x + w / 2)) * s;
const sy = H / 2 + (tvY(t.lat) - (y + h / 2)) * s;
el.style.left = sx + 'px';
el.style.top = sy + 'px';
el.style.display = (sx < -24 || sx > W + 24 || sy < -24 || sy > H + 24) ? 'none' : 'block';
});
}, [travels, detail]);
const viewFor = React.useCallback((i) => {
const t = travels[i]; const zw = TV_W / ZOOM, zh = TV_H / ZOOM;
return { x: tvX(t.lon) - zw / 2, y: tvY(t.lat) - zh / 2, w: zw, h: zh };
}, [travels]);
const animateView = React.useCallback((target, dur = 640) => {
cancelAnimationFrame(rafRef.current);
const from = { ...viewRef.current };
const t0 = performance.now();
const ease = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
const step = (now) => {
const p = Math.min(1, (now - t0) / dur), e = ease(p);
const v = {
x: from.x + (target.x - from.x) * e, y: from.y + (target.y - from.y) * e,
w: from.w + (target.w - from.w) * e, h: from.h + (target.h - from.h) * e,
};
viewRef.current = v;
if (svgRef.current) svgRef.current.setAttribute('viewBox',
`${v.x.toFixed(2)} ${v.y.toFixed(2)} ${v.w.toFixed(2)} ${v.h.toFixed(2)}`);
placeMarkers();
if (p < 1) rafRef.current = requestAnimationFrame(step);
};
rafRef.current = requestAnimationFrame(step);
}, [placeMarkers]);
// Reset to overview (full world) when the drawer closes.
React.useEffect(() => {
if (open) return;
setActiveIdx(null); setLightbox(false); setClosing(false); setHover(false);
cancelAnimationFrame(rafRef.current);
viewRef.current = { x: 0, y: 0, w: TV_W, h: TV_H };
if (svgRef.current) svgRef.current.setAttribute('viewBox', `0 0 ${TV_W} ${TV_H}`);
}, [open]);
// Animate the map to the overview (full world) or the active region.
React.useEffect(() => {
if (!open) return;
animateView(detail ? viewFor(activeIdx) : { x: 0, y: 0, w: TV_W, h: TV_H });
}, [open, activeIdx, detail, animateView, viewFor]);
// Keep pins aligned after layout settles + on resize.
React.useEffect(() => {
if (!open) return;
const id = setTimeout(placeMarkers, 60);
window.addEventListener('resize', placeMarkers);
return () => { clearTimeout(id); window.removeEventListener('resize', placeMarkers); };
}, [open, activeIdx, geo, placeMarkers]);
React.useEffect(() => () => cancelAnimationFrame(rafRef.current), []);
// ESC closes the photo lightbox.
React.useEffect(() => {
if (!lightbox) return;
const onKey = (e) => { if (e.key === 'Escape') closeLightbox(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [lightbox]);
return (
{disp && 
}
{pdfOnly &&
}
{/* chosen tile color tints the image so the picker always reads */}
{disp && d.color && }
);
})}
{d.kind}
= 2 ? 36 : 24,
fontWeight: 500, lineHeight: 1.05, letterSpacing: '-0.015em' }}>{d.title}
No. {String(i + 1).padStart(2, '0')}
{/* Trigger */}
{/* Drawer */}
);
}
// ── Resume — cinema-credits feel ───────────────────────────────────
function Resume() {
return (
{/* LEFT — map + tabs (+ caption in overview) */}
{/* RIGHT — destination info (slides in) */}
{/* HTML pins */}
{!detail &&
{travels.map((t, i) => {
const act = detail && i === activeIdx;
return (
{detail && (
)}
{detail && hover && (
(pinRefs.current[i] = el)} className="cg-tv-pin"
style={{ display: 'none' }} aria-label={act ? (lightbox ? 'Close photo' : 'View photo') : t.name}
onClick={() => (act ? (lightbox ? closeLightbox() : openLightbox()) : select(i))}
onMouseEnter={act ? () => setHover(true) : undefined}
onMouseLeave={act ? () => setHover(false) : undefined}
onMouseMove={act ? (e) => { const r = frameRef.current && frameRef.current.getBoundingClientRect(); if (r) setTip({ x: e.clientX - r.left, y: e.clientY - r.top }); } : undefined}>
);
})}
{lightbox ? 'Close' : 'View Photo'}
)}
Select a destination
}
{travels.map((t, i) => (
))}
{cur && (
)}
{lightbox && cur && (
{cur.name}
{cur.blurb}
{ const r = frameRef.current && frameRef.current.getBoundingClientRect(); if (r) setTip({ x: e.clientX - r.left, y: e.clientY - r.top }); const overCountry = document.elementsFromPoint(e.clientX, e.clientY).some((el) => el.classList && el.classList.contains('cg-tv-country')); setHover(overCountry); }}>
)}
e.stopPropagation()}
onMouseMove={(e) => { e.stopPropagation(); setHover(false); }}
style={{ left: cardPos.left, top: cardPos.top,
transformOrigin: `${lbPos.sx - cardPos.left}px ${lbPos.sy - cardPos.top}px` }}>
{cur.image
? 
:
◆
}
Where I’ve been.
{/* timeline rail — center for cinematic balance? no, left for readability */}
{D.resume.map((r, i) => (
))}
{/* dates column */}
{/* timeline dot — sits on the rail */}
{/* role/company column */}
{r.dates}
{r.city}
{r.role}
{r.company}
-
{r.bullets.map((b, j) => (
- {b} ))}