const { useState, useEffect, useRef, useCallback, useMemo } = React;
/* ============================================================
TWEAKS
============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"fontPair": "humanist",
"density": "comfortable",
"grayTone": "neutral",
"layout": "minimal",
"accent": "#F59425"
} /*EDITMODE-END*/;
const FONT_PAIRS = {
humanist: {
label: "Warm humanist",
display: '"Schibsted Grotesk", system-ui, sans-serif',
body: '"Hanken Grotesk", system-ui, sans-serif',
meta: '"Hanken Grotesk", system-ui, sans-serif',
tracking: "0.04em", transform: "none"
},
neutral: {
label: "Plain grotesk",
display: '"Public Sans", system-ui, sans-serif',
body: '"Public Sans", system-ui, sans-serif',
meta: '"Public Sans", system-ui, sans-serif',
tracking: "0.06em", transform: "uppercase"
},
technical: {
label: "A little technical",
display: '"Space Grotesk", system-ui, sans-serif',
body: '"Hanken Grotesk", system-ui, sans-serif',
meta: '"IBM Plex Mono", ui-monospace, monospace',
tracking: "0.02em", transform: "none"
}
};
const GRAY_TONES = {
cool: { h: 255, c: 0.012 },
neutral: { h: 0, c: 0 },
warm: { h: 75, c: 0.013 }
};
const DENSITY = {
compact: { padX: "5vw", sectionY: "76px", gap: "20px", hero: "clamp(2.3rem, 5.2vw, 4.4rem)", fs: "16px" },
comfortable: { padX: "7vw", sectionY: "120px", gap: "28px", hero: "clamp(2.6rem, 6.2vw, 5.6rem)", fs: "17px" },
airy: { padX: "9vw", sectionY: "168px", gap: "40px", hero: "clamp(3rem, 7vw, 6.6rem)", fs: "18px" }
};
const LANDING_TAGLINE = {
fontFamily: '"Inter Tight", system-ui, sans-serif',
fontWeight: 700,
letterSpacing: "-0.005em",
lineHeight: 1.5
};
/* ============================================================
CONTENT (realistic placeholders — swap for real work)
============================================================ */
const PROJECTS = [
{
n: "01",
slug: "fovere",
title: "Fovere",
year: "2026",
topic: "Mobile App",
meta: "Habit tracker · iOS · 2026",
blurb: "I solo-built Fovere, the first completely free iOS habit tracker featuring full analytics with no ads or paywalls.",
label: "mobile app",
icon: "assets/fovere-icon.png",
hero: "assets/Frame 14.png",
hero2x: "assets/Frame 14.png",
detailHero: "assets/Fovere_Screenshots/Frame 11 (1).png",
detailIntro: [
"Before building Fovere, I downloaded more than 30 habit tracker apps, started their seven-day trials, and wrote down every paid feature I could find. Then I added those features to Fovere for free to everyone.",
"I designed the product in Figma Make and built it with Cursor. Fovere runs on React Native and Expo for iOS. The walkthrough below shows how it works in practice: quick daily logging, calendar views from week to year, and habit-by-habit analytics when you want to go deeper."
],
tagline: "Build & Break Habits",
intro: "Fovere is the habit tracker for building routines you can sustain\u2014and for breaking ones you want to quit or limit. Log in seconds with swipe gestures, see your week and year in Calendar, and go deep in Analytics with trends, heatmaps, and insights. Free, with no ads, and your data stays on your device.",
buildNote: "I made this app entirely on Cursor with Claude and Figma Make AI.",
sections: [
{
title: "Home & logging",
body: "Your habits live on one clear Home screen: daily habits power the completion ring; break habits (reduce, cap, or quit) stay separate; weekly and monthly goals have their own sections so schedules are never mixed up. Swipe left to complete, swipe right to pause or delete\u2014with undo when you slip."
},
{
title: "Build & break habits",
body: "Create build habits (do more) or break habits (stay under a limit or avoid the behavior). Track with simple completion, quantity counts, or timed durations. Set targets or limits, pick an emoji, add notes, and configure reminders\u2014including per-habit times and weekday schedules for weekly habits."
},
{
title: "Daily, weekly & monthly",
body: "Daily habits are checked every day. Weekly and monthly habits accumulate progress across the week or calendar month\u2014the app explains how streaks treat these fairly so long-window goals do not unfairly break your consistency day by day."
},
{
title: "Scoring you can trust",
body: "A transparent 0\u2013100 daily score splits 100 points across active habits. Build habits earn their share when completed; break habits start at full credit and lose points only for today overflow past your limit. Optional strict mode counts only full completions, or allows partial progress\u2014your choice."
},
{
title: "Calendar & analytics",
body: "Calendar shows weekly and monthly completion, streaks, and a yearly view including Year in Beans. Analytics spans from recent days up to long ranges (including 6 months and a year), with habit heatmaps, trend vs prior periods, weekly rhythm (best and toughest days), habit movers, and per-habit completion and break-habit limit history."
},
{
title: "Reminders & control",
body: "Daily check-in reminders plus habit-specific notifications. Export habits to CSV, recover deleted habits for 30 days, pause without erasing history. Dark mode, English or Spanish, week start Sunday or Monday, haptic feedback."
},
{
title: "Privacy",
body: "No analytics SDKs, no ads, no tracking. Fovere does not upload your habits to a server; everything you enter is stored locally on your phone."
}
],
closing: "Download Fovere and start with one habit so easy you cannot say no."
},
{
n: "02",
slug: "sportaz",
title: "Sportaz",
year: "2024",
topic: "E-commerce",
meta: "Sports retail · e-commerce · 2024",
blurb: "Co-founded a Football Jersey brand, scaled it to 400+ sales, and spent every day doing something I genuinely loved.",
label: "e-commerce",
icon: "assets/sportaz-icon.png",
hero: "assets/sportaz-hero.png",
detailHero: "assets/Sportaz/Frame 17.png",
storyImageVariant: "cutout",
detailIntro: [
"I grew up obsessed with football. When a friend and I were looking for something to build together, we kept asking the same question: why did buying a shirt in Argentina feel so forgettable?",
"Sportaz was our answer. Mystery boxes that made the purchase fun, and genuinely useful when you were buying for someone else."
],
tagline: "Dare to surprise yourself",
intro: "Co-founded a Football Jersey brand, scaled it to 400+ sales, and spent every day doing something I genuinely loved.",
sections: [
{
title: "Brand & storefront",
body: "Built the Sportaz identity and shopfront around a fast, athletic look\u2014lime green and bold type\u2014so the store felt energetic and trustworthy at first glance."
},
{
title: "Sales & operations",
body: "Sourced sports goods, listed them online, and fulfilled 400+ orders\u2014managing inventory, customer communication, and shipping."
}
]
}];
const PHOTOS = [
{ cap: "35mm · porto", ratio: 0.78, shade: 0.94 },
{ cap: "rooftop · lisbon", ratio: 1.34, shade: 0.90 },
{ cap: "morning · home", ratio: 1.0, shade: 0.965 },
{ cap: "ferry · setúbal", ratio: 1.5, shade: 0.915 },
{ cap: "stairwell", ratio: 0.82, shade: 0.885 },
{ cap: "kitchen window", ratio: 1.0, shade: 0.945 },
{ cap: "long exposure", ratio: 1.42, shade: 0.90 },
{ cap: "film · expired", ratio: 0.8, shade: 0.925 },
{ cap: "tram, late", ratio: 1.0, shade: 0.955 },
{ cap: "low tide", ratio: 1.5, shade: 0.91 }];
const EDUCATION = [
{
degree: "Master\u2019s in Management, Analytics + AI",
school: "Universidad Torcuato Di Tella",
logo: "assets/about me/di tella.svg",
courses: []
},
{
degree: "Bachelor\u2019s Degree in Digital Business",
school: "Universidad de San Andr\u00e9s",
logo: "assets/about me/630bd3fd4d041c3b14c3529ba3433fcabc19a30b-5242880-removebg-preview.png",
courses: []
}
];
const LINKEDIN_PROFILE = "https://www.linkedin.com/in/franco-galluzzo/";
const CERTIFICATIONS_LINKEDIN = `${LINKEDIN_PROFILE}details/certifications/`;
const CERT_FILTERS = [
{ id: "all", label: "All" },
{ id: "data", label: "Data" },
{ id: "code", label: "Code" },
{ id: "ux", label: "UX/UI" }
];
const CERT_SCHOOL_LOGOS = {
Microsoft: "assets/about me/microsoft_logo_icon_181372.png",
Google: "assets/about me/Google.png",
Coursera: "assets/about me/coursera logo.webp",
DataCamp: "assets/about me/datacamp logo.png",
Meta: "assets/about me/meta logo.webp"
};
function certLogoForSchool(school, existing) {
if (existing) return existing;
return CERT_SCHOOL_LOGOS[school] || null;
}
const PROFESSIONAL_CERTIFICATIONS = [
{
degree: "Power BI Data Analyst Associate (PL-300)",
school: "Microsoft",
logo: "assets/about me/microsoft_logo_icon_181372.png",
courses: []
},
{
degree: "Google Data Analytics Specialization",
school: "Google",
logo: "assets/about me/Google.png",
courses: []
},
{
degree: "Google UX Design Specialization",
school: "Google",
logo: "assets/about me/Google.png",
courses: []
}
];
function inferCertCategory(degree) {
const d = degree.toLowerCase();
if (
d.includes("ux") || d.includes("ui ") || d.includes("(ui)") ||
d.includes("figma") || d.includes("wireframe") || d.includes("visual design") ||
d.includes("augmented reality") || d.includes("mobile ui") ||
d.includes("diseño de interfaz") || d.includes("experiencia de usuario") ||
d.includes("user experience") || d.includes("data-driven design")
) {
return "ux";
}
if (
d.includes("python") || d.includes("web development") ||
d.includes("coding foundations") || d.includes("html and css")
) {
return "code";
}
if (
d.includes("sql") || d.includes("data") || d.includes("power bi") ||
d.includes("pl-300") || d.includes("analytics") || d.includes("r programming") ||
d.includes("business intelligence") || d.includes("data engineering") ||
d.includes("generative ai") || d.includes("google ai") ||
d.includes("visualization")
) {
return "data";
}
return null;
}
const NAV = ["Projects", "Photography", "About"];
/* ============================================================
HEADER
============================================================ */
function SiteHeader({ view, setView }) {
const go = (v) => {
setView(v);
window.scrollTo({ top: 0, behavior: "smooth" });
};
return (
go("Projects")}
style={{
all: "unset", cursor: "pointer",
fontFamily: "var(--font-display)", fontWeight: 600,
fontSize: "0.8rem", letterSpacing: "-0.02em"
}}>
Franco Galluzzo
{NAV.map((item) => {
const active = view === item;
return (
go(item)}
style={{
all: "unset", cursor: "pointer",
fontFamily: "var(--font-meta)", fontSize: "0.62rem",
letterSpacing: "var(--meta-tracking)",
textTransform: "var(--meta-transform)",
color: active ? "var(--ink)" : "var(--ink-3)",
borderBottom: active ? "1.5px solid var(--accent)" : "1.5px solid transparent",
paddingBottom: "2px",
transition: "color .2s ease, border-color .2s ease"
}}>
{item}
);
})}
);
}
/* ============================================================
SMALL PARTS
============================================================ */
function Mono({ children, style }) {
return (
{children} );
}
function ProjectImage({ src, alt, ratio = 16 / 11, natural = false, style }) {
if (natural) {
return (
);
}
return (
);
}
/* striped placeholder block — stands in for an image */
function Placeholder({ shade = 0.94, label, ratio }) {
return (
{label && {label} }
);
}
function Hero({ layout, setView }) {
const statement = "I find the patterns that don\u2019t add up.";
const sub = "Fraud prevention analyst. I work in the noisy middle of payments \u2014 turning messy transaction data into a few clear decisions, and stopping the bad ones before they clear.";
if (layout === "statement") {
return (
);
}
if (layout === "editorial") {
return (
Index — 2026
01 Projects
);
}
/* minimal (default) — the big stacked landing */
return
{text.split("").map((char, i) =>
char === " " ?
:
{char}
)}
);
}
function BigLink({ label, onClick }) {
return (
{label}
);
}
/* ============================================================
MINI LINE GRAPH — self-drawing chart line for the landing hero
Fills its container; path is generated from measured dimensions.
============================================================ */
function MiniLineGraph() {
const svgRef = useRef(null);
const pathRef = useRef(null);
useEffect(() => {
const svg = svgRef.current;
const path = pathRef.current;
if (!svg || !path) return;
let currentAnim = null;
const setup = () => {
const { width: W, height: H } = svg.getBoundingClientRect();
if (W < 10 || H < 10) return;
/* smooth spline — traced from reference chart (irregular peaks/valleys) */
const px = (x, y) => `${(x * W).toFixed(1)},${(y * H).toFixed(1)}`;
const pts = [
[0.00, 0.64], /* start — mid height */
[0.11, 0.52], /* small rounded hump */
[0.26, 0.94], /* deep drop */
[0.33, 0.40], /* sharp rise */
[0.41, 0.73], /* shallow dip */
[0.56, 0.16], /* tall broad peak */
[0.63, 0.87], /* sharp deep drop */
[0.70, 0.28], /* medium-high peak */
[0.78, 0.56], /* mid dip */
[0.85, 0.07], /* highest sharp peak */
[0.93, 0.70], /* descent */
[1.00, 0.89] /* end — low */
];
let d = `M ${px(pts[0][0], pts[0][1])}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[Math.max(i - 1, 0)];
const p1 = pts[i];
const p2 = pts[i + 1];
const p3 = pts[Math.min(i + 2, pts.length - 1)];
const cp1x = p1[0] + (p2[0] - p0[0]) / 6;
const cp1y = p1[1] + (p2[1] - p0[1]) / 6;
const cp2x = p2[0] - (p3[0] - p1[0]) / 6;
const cp2y = p2[1] - (p3[1] - p1[1]) / 6;
d += ` C ${px(cp1x, cp1y)} ${px(cp2x, cp2y)} ${px(p2[0], p2[1])}`;
}
path.setAttribute("d", d);
const len = Math.ceil(path.getTotalLength());
/* fixed visible segment (~9% of path) — gap hides the rest so only one “worm” shows */
const seg = Math.max(6, Math.round(len * 0.095));
path.style.strokeDasharray = `${seg} ${len - seg}`;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
path.style.strokeDashoffset = `${Math.round(len * 0.42)}`;
return;
}
path.style.strokeDashoffset = "0";
if (currentAnim) currentAnim.cancel();
currentAnim = path.animate(
[
{ strokeDashoffset: 0 },
{ strokeDashoffset: -len },
],
{ duration: 2000, easing: "linear", iterations: Infinity }
);
};
/* wait one rAF so the flex layout has settled before measuring */
const raf = requestAnimationFrame(setup);
const ro = new ResizeObserver(setup);
ro.observe(svg);
return () => {
cancelAnimationFrame(raf);
ro.disconnect();
if (currentAnim) currentAnim.cancel();
};
}, []);
return (
);
}
function LandingHero({ setView }) {
const shellRef = useRef(null);
const nameRef = useRef(null);
useFitWidthText(nameRef, shellRef, {
minPx: 24,
maxPxCap: 160,
fillRatio: 0.92,
viewportBottomPad: 16
});
const scrollToWork = () => {
const el = document.getElementById("work");
if (el) window.scrollTo({ top: el.offsetTop - 20, behavior: "smooth" });
};
return (
setView("Photography")} />
setView("About")} />
Data Analytics, UX & AI enthusiast.
I like to create digital things that have value to people.
);
}
/* ============================================================
PROJECTS
============================================================ */
function LandingSectionHead({ title, kicker }) {
return (
);
}
function SectionHead({ kicker, title }) {
return (
{title}
{kicker}
);
}
function ProjectMetaBadge({ children, variant = "solid" }) {
const outline = variant === "outline";
return (
{children} );
}
function ProjectCardLayout({ project, as = "h3", showBlurb = true, onOpen }) {
const TitleTag = as;
const [mediaHover, setMediaHover] = useState(false);
const interactive = as !== "h1";
const overlay = interactive;
const detailBanner = as === "h1" && project.detailHero;
const titleEl =
{project.title}
{interactive &&
→
}
;
const badgesEl =
{project.year &&
{project.year} }
{project.topic &&
{project.topic} }
{!overlay &&
{titleEl}
{badgesEl}
}
{titleEl}
{badgesEl}
:
null} />
{showBlurb && as !== "h1" && (project.blurb || project.tagline) &&
{project.blurb || project.tagline}
}
);
}
function ProjectMedia({ project, heroSrc, banner = false, interactive = false, onHoverChange, onOpen, overlay = null }) {
const [failed, setFailed] = useState(false);
const src = heroSrc || project.hero2x || project.hero;
const wrapProps = interactive ? {
role: "button",
tabIndex: 0,
"aria-label": `Open ${project.title}`,
onClick: () => onOpen?.(),
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onOpen?.();
}
},
onMouseEnter: () => onHoverChange?.(true),
onMouseLeave: () => onHoverChange?.(false),
style: { cursor: "pointer" }
} : {};
const wrapStyle = {
position: "relative",
overflow: "hidden",
borderRadius: "32px",
...wrapProps.style
};
const mediaStyle = banner ? {
width: "100%",
height: "auto",
display: "block",
borderRadius: "14px",
background: "oklch(0.975 var(--tone-c) var(--tone-h))"
} : {
width: "100%",
height: "var(--project-media-h)",
display: "block",
borderRadius: "14px",
background: "oklch(0.93 var(--tone-c) var(--tone-h))"
};
const overlayEl = overlay &&
{overlay}
;
if (src && !failed) {
const srcSet = !banner && project.hero2x ?
`${project.hero} 560w, ${project.hero2x} 1024w` :
undefined;
return (
i < arr.length - 1 ? part : encodeURIComponent(part)).join("/")}
srcSet={srcSet}
sizes={banner ? "(max-width: 720px) 100vw, min(100vw, var(--maxw))" : "(max-width: 720px) 100vw, 560px"}
alt=""
onError={() => setFailed(true)}
className={banner ? "project-media project-media--banner" : "project-media"}
style={{
...mediaStyle,
objectFit: banner ? "contain" : "cover",
objectPosition: "center"
}} />
{overlayEl}
);
}
return (
);
}
function ProjectCard({ p, indexed, onOpen, cardRef, showBlurb = true, className = "" }) {
return (
{indexed && {p.n} }
onOpen(p.slug)} />
);
}
/* ============================================================
Project detail — scroll story (sticky image, scrolling text)
============================================================ */
const PROJECT_STORY = {
fovere: [
{
img: "assets/Fovere_Screenshots/Device.png",
eyebrow: "Home",
title: "Built to stay out of your way",
body: "Fovere is designed around one idea: logging a habit should take seconds, not willpower. A clear home screen, swipe-to-complete gestures, and a light visual language keep daily tracking simple, so you spend less time in the app and more time living the habits you care about."
},
{
img: "assets/Fovere_Screenshots/Device-3.png",
eyebrow: "Calendar · Weekly",
title: "See how your week is really going",
body: "The weekly calendar turns your day-to-day into something you can read at a glance. Bar charts show completion by day, with tooltips that spell out the numbers behind each bar: how much you finished, and what that means for your progress. No digging through menus to understand your week."
},
{
img: "assets/Fovere_Screenshots/Device-2.png",
eyebrow: "Calendar · Yearly",
title: "Long-term progress, one view away",
body: "Switch between months or the full year to see patterns that daily logging alone can\u2019t show. Color-coded days make strong stretches and rough patches obvious, so you can spot trends early and adjust before a habit quietly slips."
},
{
img: "assets/Fovere_Screenshots/Device-1.png",
eyebrow: "Analytics",
title: "Insights for every habit",
body: "Filter analytics by habit and compare trends over 7 days, 30 days, six months, or a year. See which routines are holding steady, which are improving, and which need attention, with clear charts and summaries so you know exactly where to focus next."
}
],
sportaz: [
{
img: "assets/Sportaz/edited-image-1780941151368.png",
eyebrow: "Origin",
title: "Two friends who wanted to build something",
body: "I started Sportaz with a friend from school. We both loved football and wanted something that was ours. Nothing fancy at first. We just felt the experience around shirts did not match how much people actually cared about the game."
},
{
img: "assets/Sportaz/image (1).png",
eyebrow: "Mystery boxes",
imageScale: 1.45,
title: "A twist on buying a shirt",
body: "Picking a jersey is usually straightforward. You already know what you want. We flipped that. Customers could order a mystery shirt and end up with a kit they never would have chosen on their own. The surprise was half the point."
},
{
img: "assets/Sportaz/edited-image-1780940884682.png",
eyebrow: "Growth",
imageScale: 1.45,
title: "Gifts, ads, and learning on the job",
body: "The boxes caught on as gifts. If you were not sure what shirt someone would like, you could leave the choice to us. Once we started running ads on Meta, orders started coming in from provinces across the country. We were shipping mystery boxes out of Buenos Aires to places we had never expected, and that is where I first got my hands dirty figuring out what was actually working."
}
]
};
function StoryStepCopy({ step, index, total }) {
return (
{String(index + 1).padStart(2, "0")} / {String(total).padStart(2, "0")} · {step.eyebrow}
{step.title}
{step.body}
);
}
function StoryStepImage({ step, className = "" }) {
return (
);
}
function AlternatingScrollStory({ steps }) {
return (
{steps.map((s, i) => {
const flip = i % 2 === 1;
const media =
{flip ? [copy, media] : [media, copy]}
);
})}
);
}
function StickyScrollStory({ steps, imageVariant = "phone" }) {
const [active, setActive] = useState(0);
const stepRefs = useRef([]);
const isCutout = imageVariant === "cutout";
useEffect(() => {
const elements = stepRefs.current.filter(Boolean);
if (!elements.length) return;
const update = () => {
const trigger = window.innerHeight * 0.5;
let next = 0;
elements.forEach((el, i) => {
if (el.getBoundingClientRect().top <= trigger) next = i;
});
setActive(next);
};
update();
window.addEventListener("scroll", update, { passive: true });
window.addEventListener("resize", update);
return () => {
window.removeEventListener("scroll", update);
window.removeEventListener("resize", update);
};
}, [steps]);
return (
{steps.map((s, i) => {
const imgScale = s.imageScale || 1;
const activeScale = active === i ? imgScale : imgScale * 0.97;
return (
idx < arr.length - 1 ? part : encodeURIComponent(part)).join("/")}
alt={s.eyebrow}
aria-hidden={active === i ? undefined : true}
className={isCutout ? "fovere-story__cutout-img" : undefined}
style={isCutout ? {
position: "absolute",
top: "50%",
left: "50%",
maxHeight: `${Math.round(100 * imgScale)}%`,
maxWidth: `${Math.round(100 * imgScale)}%`,
width: "auto",
height: "auto",
display: "block",
objectFit: "contain",
transform: `translate(-50%, -50%) scale(${activeScale / imgScale})`,
opacity: active === i ? 1 : 0,
transition: "opacity 0.55s ease, transform 0.55s ease",
filter: "drop-shadow(0 28px 52px rgba(0,0,0,0.16))",
pointerEvents: "none"
} : {
height: "min(78vh, 660px)",
width: "auto",
display: "block",
position: i === 0 ? "relative" : "absolute",
top: i === 0 ? "auto" : 0,
left: i === 0 ? "auto" : "50%",
transform: i === 0 ?
active === i ? "scale(1)" : "scale(0.97)" :
`translateX(-50%) ${active === i ? "scale(1)" : "scale(0.97)"}`,
opacity: active === i ? 1 : 0,
transition: "opacity 0.55s ease, transform 0.55s ease",
filter: "drop-shadow(0 30px 60px rgba(0,0,0,0.18))",
pointerEvents: "none"
}} />
);
})}
{steps.map((s, i) =>
stepRefs.current[i] = el}
className="fovere-story__step"
style={{
minHeight: "100vh",
display: "flex",
flexDirection: "column",
justifyContent: "center",
opacity: active === i ? 1 : 0.32,
transition: "opacity 0.5s ease"
}}>
idx < arr.length - 1 ? part : encodeURIComponent(part)).join("/")}
alt={s.eyebrow}
style={{
display: "none",
...(isCutout && s.imageScale ? { maxHeight: `${Math.round(72 * s.imageScale)}vh` } : null)
}} />
)}
);
}
function ProjectScrollStory({ steps, layout = "sticky", imageVariant = "phone" }) {
if (layout === "alternating") return
{project.detailHero &&
}
{(project.detailIntro || project.tagline) &&
{project.tagline &&
{project.tagline}
}
{project.detailIntro &&
(Array.isArray(project.detailIntro) ? project.detailIntro : [project.detailIntro]).map((para, i) =>
{para}
)
}
);
}
return (
{project.intro &&
{project.intro}
}
{project.buildNote &&
{project.buildNote}
}
{project.sections?.map((section) =>
{section.title}
{section.body}
)}
{project.closing &&
{project.closing}
}
);
}
function ProjectsView({ layout, onOpenProject }) {
const indexed = layout === "editorial";
const [activeIndex, setActiveIndex] = useState(0);
const cardRefs = useRef([]);
useEffect(() => {
const elements = cardRefs.current.filter(Boolean);
if (!elements.length) return;
const updateActive = () => {
const viewportCenter = window.innerHeight * 0.42;
let next = 0;
let bestDistance = Infinity;
elements.forEach((el, i) => {
const rect = el.getBoundingClientRect();
const cardCenter = rect.top + rect.height * 0.35;
const distance = Math.abs(cardCenter - viewportCenter);
if (distance < bestDistance) {
bestDistance = distance;
next = i;
}
});
setActiveIndex(next);
};
updateActive();
window.addEventListener("scroll", updateActive, { passive: true });
window.addEventListener("resize", updateActive);
return () => {
window.removeEventListener("scroll", updateActive);
window.removeEventListener("resize", updateActive);
};
}, []);
const activeProject = PROJECTS[activeIndex];
const activeBlurb = activeProject?.blurb || activeProject?.tagline || "";
return (
Featured Projects
2024 – 2026
{activeBlurb &&
{activeBlurb}
}
{PROJECTS.map((p, i) =>
{
cardRefs.current[i] = el;
if (el) el.dataset.projectIndex = String(i);
}} />
)}
);
}
/* ============================================================
PHOTOGRAPHY — horizontal collage, scroll-jacked
============================================================ */
const PHOTO_CAMERA_SRC = "assets/sony-cybershot-camera.png";
const PHOTO_CAMERA_LABEL = "Sony Cyber-shot DSC-W320";
const PHOTO_NAV = [PHOTO_CAMERA_LABEL];
const CAMARITA_IMAGES = [
"Images_camarita/DSC02823.JPG",
"Images_camarita/DSC02832.JPG",
"Images_camarita/DSC02840.JPG",
"Images_camarita/DSC03359.JPG",
"Images_camarita/DSC03443.JPG",
"Images_camarita/DSC03536.JPG",
"Images_camarita/DSC03547.JPG",
"Images_camarita/DSC03157.JPG",
"Images_camarita/DSC03550.JPG",
"Images_camarita/DSC03730.JPG",
"Images_camarita/DSC03657.JPG",
"Images_camarita/DSC03762.JPG",
"Images_camarita/DSC03773.JPG",
"Images_camarita/DSC03772.JPG",
"Images_camarita/DSC03769.JPG",
"Images_camarita/DSC03383.JPG",
"Images_camarita/DSC03571.JPG",
"Images_camarita/DSC03658.JPG",
"Images_camarita/DSC03883.JPG",
];
const PHOTO_LAYOUT_GROUPS = [
{
mt: "1vh",
cols: [[
{ h: "clamp(310px, 44vh, 460px)", ar: "0.76" },
{ h: "clamp(200px, 28vh, 300px)", ar: "1.38" },
]],
},
{
mt: "0.5vh",
cols: [[
{ h: "clamp(520px, 70vh, 820px)", ar: "0.66" },
]],
},
{
mt: "0.5vh",
cols: [[
{ h: "clamp(310px, 44vh, 460px)", ar: "0.76" },
{ h: "clamp(225px, 31vh, 340px)", ar: "1.4" },
]],
},
{
mt: "0",
cols: [[
{ h: "clamp(520px, 70vh, 820px)", ar: "0.74" },
]],
},
{
mt: "1vh",
cols: [
[
{ h: "clamp(260px, 38vh, 395px)", ar: "0.74" },
{ h: "clamp(210px, 30vh, 315px)", ar: "1.16" },
],
[
{ h: "clamp(260px, 38vh, 395px)", ar: "0.74" },
{ h: "clamp(210px, 30vh, 315px)", ar: "1.16" },
],
],
},
{
mt: "0.5vh",
cols: [[
{ h: "clamp(520px, 70vh, 820px)", ar: "0.66" },
]],
},
{
mt: "0.5vh",
cols: [[
{ h: "clamp(310px, 44vh, 460px)", ar: "0.76" },
{ h: "clamp(200px, 28vh, 300px)", ar: "1.33" },
]],
},
{
mt: "0.5vh",
cols: [[
{ h: "clamp(520px, 70vh, 820px)", ar: "0.68" },
]],
},
{
mt: "0.5vh",
cols: [
[
{ h: "clamp(260px, 38vh, 395px)", ar: "0.74" },
{ h: "clamp(210px, 30vh, 315px)", ar: "1.16" },
],
[
{ h: "clamp(260px, 38vh, 395px)", ar: "0.74" },
{ h: "clamp(210px, 30vh, 315px)", ar: "1.16" },
],
],
},
{
mt: "1vh",
cols: [[
{ h: "clamp(520px, 70vh, 820px)", ar: "0.74" },
]],
},
{
mt: "4vh",
cols: [[
{ h: "clamp(310px, 44vh, 460px)", ar: "0.76" },
{ h: "clamp(200px, 28vh, 300px)", ar: "1.38" },
]],
},
{
mt: "4vh",
cols: [[
{ h: "clamp(520px, 70vh, 820px)", ar: "0.66" },
]],
},
{
mt: "0.5vh",
cols: [
[
{ h: "clamp(260px, 38vh, 395px)", ar: "0.74" },
{ h: "clamp(210px, 30vh, 315px)", ar: "1.16" },
],
[
{ h: "clamp(260px, 38vh, 395px)", ar: "0.74" },
{ h: "clamp(210px, 30vh, 315px)", ar: "1.16" },
],
],
},
{
mt: "0.5vh",
cols: [[
{ h: "clamp(520px, 70vh, 820px)", ar: "0.68" },
]],
},
{
mt: "1vh",
cols: [[
{ h: "clamp(310px, 44vh, 460px)", ar: "0.76" },
{ h: "clamp(200px, 28vh, 300px)", ar: "1.38" },
]],
},
{
mt: "0.5vh",
cols: [[
{ h: "clamp(520px, 70vh, 820px)", ar: "0.74" },
]],
},
{
mt: "0.5vh",
cols: [[
{ h: "clamp(520px, 70vh, 820px)", ar: "0.68" },
]],
},
];
function assignPhotoSources(groups, images) {
let i = 0;
return groups
.map((group) => ({
...group,
cols: group.cols
.map((col) => {
const assigned = [];
for (const photo of col) {
if (i >= images.length) break;
assigned.push({
...photo,
src: images[i++],
});
}
if (!assigned.length) return null;
const colLength = assigned.length;
return assigned.map((p) => ({ ...p, colLength }));
})
.filter(Boolean),
}))
.filter((group) => group.cols.length > 0);
}
function buildPhotoGroups(images) {
return assignPhotoSources(PHOTO_LAYOUT_GROUPS, images);
}
function flattenPhotoList(groups) {
return groups.flatMap((group) => group.cols.flatMap((col) => col));
}
function moveGalleryImage(images, fromIdx, toIdx) {
if (toIdx < 0 || toIdx >= images.length || fromIdx === toIdx) return images;
const next = [...images];
[next[fromIdx], next[toIdx]] = [next[toIdx], next[fromIdx]];
return next;
}
function removeGalleryImage(images, idx) {
return images.filter((_, i) => i !== idx);
}
/* Saved crop & frame adjustments (from photo editor) */
const PHOTO_EDITS = {
"Images_camarita/DSC02823.JPG": { ar: 1.08 },
"Images_camarita/DSC02832.JPG": { ar: 1.08, posY: 73 },
"Images_camarita/DSC02840.JPG": { ar: 0.83, posX: 41, posY: 52 },
"Images_camarita/DSC03359.JPG": { ar: 1.8, posX: 73, posY: 43 },
"Images_camarita/DSC03443.JPG": { ar: 1.8 },
"Images_camarita/DSC03536.JPG": { ar: 1.8 },
"Images_camarita/DSC03547.JPG": { ar: 1.8 },
"Images_camarita/DSC03157.JPG": { ar: 1.8 },
"Images_camarita/DSC03550.JPG": { ar: 1.29, posX: 36 },
"Images_camarita/DSC03730.JPG": { ar: 1.29, posY: 82 },
"Images_camarita/DSC03657.JPG": { ar: 1.8 },
"Images_camarita/DSC03762.JPG": { ar: 1.8 },
"Images_camarita/DSC03773.JPG": { ar: 1.8, posX: 30, posY: 27 },
"Images_camarita/DSC03772.JPG": { ar: 1.8 },
"Images_camarita/DSC03769.JPG": { ar: 1.8 },
"Images_camarita/DSC03383.JPG": { ar: 1.8 },
"Images_camarita/DSC03571.JPG": { ar: 1.61, posX: 100, posY: 88 },
"Images_camarita/DSC03658.JPG": { ar: 1.61, posX: 0, posY: 0 },
"Images_camarita/DSC03883.JPG": { ar: 0.5, posY: 100 },
};
const PHOTO_GALLERY_STYLE_DEFAULTS = {
shadow: true,
shadowAmount: 65,
rounded: true,
cornerRadius: 6,
};
function photoGalleryStyleVars(style) {
const s = { ...PHOTO_GALLERY_STYLE_DEFAULTS, ...style };
const radius = s.rounded ? `${s.cornerRadius}px` : "0px";
let shadow = "none";
let shadowPad = "0px";
if (s.shadow && s.shadowAmount > 0) {
const t = s.shadowAmount / 100;
const y1 = 1 + 2 * t;
const blur1 = 3 + 5 * t;
const a1 = 0.06 + 0.1 * t;
const y2 = 3 + 8 * t;
const blur2 = 10 + 22 * t;
const a2 = 0.1 + 0.18 * t;
shadow =
`0 ${y1.toFixed(1)}px ${blur1.toFixed(1)}px rgba(0, 0, 0, ${a1.toFixed(3)}), ` +
`0 ${y2.toFixed(1)}px ${blur2.toFixed(1)}px rgba(0, 0, 0, ${a2.toFixed(3)})`;
shadowPad = `${Math.round(6 + 20 * t)}px`;
}
return {
"--photo-frame-radius": radius,
"--photo-frame-shadow": shadow,
"--photo-frame-shadow-pad": shadowPad,
};
}
function parseClampHeight(h) {
const m = String(h).match(/clamp\((\d+)px,\s*([\d.]+)vh,\s*(\d+)px\)/);
if (!m) return { min: 200, vh: 30, max: 300 };
return { min: Number(m[1]), vh: Number(m[2]), max: Number(m[3]) };
}
function buildClampHeight({ min, vh, max }) {
return `clamp(${Math.round(min)}px, ${vh}vh, ${Math.round(max)}px)`;
}
function photoWebSrc(src) {
return `Images_camarita/web/${src.split("/").pop()}`;
}
function photoFrameHeight(colLength, frameHPct = 100) {
const base = colLength <= 1
? "var(--photo-view-h)"
: `calc((var(--photo-view-h) - ${(colLength - 1) * 18}px) / ${colLength})`;
if (frameHPct >= 100) return base;
return `calc(${base} * ${frameHPct / 100})`;
}
function photoDefaults(photo) {
return {
posX: 50,
posY: 50,
zoom: 1,
frameH: 100,
ar: Number(photo.ar),
};
}
function effectivePhotoEdit(photo, edits) {
return { ...photoDefaults(photo), ...(PHOTO_EDITS[photo.src] || {}), ...(edits || {}) };
}
function photoFrameStyle(photo, colLength, edits) {
const e = effectivePhotoEdit(photo, edits);
const frameH = e.frameH ?? 100;
return {
height: photoFrameHeight(colLength, frameH),
aspectRatio: String(e.ar),
overflow: "hidden",
position: "relative",
flexShrink: 0,
display: "block",
alignSelf: frameH < 100 ? "flex-start" : "stretch",
};
}
function PhotoGalleryFrame({ photo, colLength, runtimeEdits }) {
const live = runtimeEdits && Object.keys(runtimeEdits).length > 0;
if (live) {
return (
{
if (!e.currentTarget.dataset.fallback) {
e.currentTarget.dataset.fallback = "1";
e.currentTarget.src = photo.src;
}
}}
style={{ width: "100%", height: "100%", display: "block" }}
/>
);
}
function PhotoCropPreview({ photo, colLength, runtimeEdits }) {
const wrapRef = useRef(null);
const edit = effectivePhotoEdit(photo, runtimeEdits);
const frame = photoFrameStyle(photo, colLength, runtimeEdits);
const [crop, setCrop] = useState(null);
const applyCrop = useCallback(() => {
const wrap = wrapRef.current;
const img = wrap?.querySelector("img");
if (!wrap || !img?.naturalWidth) return;
const cw = wrap.clientWidth;
const ch = wrap.clientHeight;
if (!cw || !ch) return;
const nw = img.naturalWidth;
const nh = img.naturalHeight;
const zoom = edit.zoom ?? 1;
const scale = Math.max(cw / nw, ch / nh) * zoom;
const sw = nw * scale;
const sh = nh * scale;
const maxPanX = Math.max(0, (sw - cw) / 2);
const maxPanY = Math.max(0, (sh - ch) / 2);
const tx = ((50 - edit.posX) / 50) * maxPanX;
const ty = ((50 - edit.posY) / 50) * maxPanY;
setCrop({ sw, sh, tx, ty });
}, [edit.posX, edit.posY, edit.zoom, edit.ar, edit.frameH, colLength]);
useEffect(() => {
applyCrop();
const wrap = wrapRef.current;
if (!wrap || typeof ResizeObserver === "undefined") return;
const ro = new ResizeObserver(applyCrop);
ro.observe(wrap);
return () => ro.disconnect();
}, [applyCrop]);
const imgStyle = crop ? {
position: "absolute",
left: "50%",
top: "50%",
width: crop.sw,
height: crop.sh,
maxWidth: "none",
transform: `translate(calc(-50% + ${crop.tx}px), calc(-50% + ${crop.ty}px))`,
display: "block",
} : {
width: "100%",
height: "100%",
objectFit: "cover",
objectPosition: `${edit.posX}% ${edit.posY}%`,
display: "block",
};
return (
);
}
function PhotoLightbox({ src, onClose }) {
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose]);
return (
✕
e.stopPropagation()}
/>
);
}
function clampPhotoScroll(el, value) {
const max = Math.max(0, el.scrollWidth - el.clientWidth);
return Math.max(0, Math.min(max, value));
}
function PhotoEyeCursor({ enabled, scrollRef, lightboxOpen }) {
const nodeRef = useRef(null);
const motionRef = useRef({
x: 0, y: 0, tx: 0, ty: 0, opacity: 0, targetOpacity: 0, raf: null, initialized: false
});
const reducedMotion = useRef(
typeof window !== "undefined" &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches
);
useEffect(() => {
const root = scrollRef.current;
if (!root || !enabled) return;
const onMove = (e) => {
if (lightboxOpen) return;
const m = motionRef.current;
m.tx = e.clientX;
m.ty = e.clientY;
m.targetOpacity = e.target.closest(".photo-frame") ? 1 : 0;
if (!m.initialized) {
m.x = m.tx;
m.y = m.ty;
m.initialized = true;
}
};
const onLeave = () => {
motionRef.current.targetOpacity = 0;
};
root.addEventListener("mousemove", onMove);
root.addEventListener("mouseleave", onLeave);
return () => {
root.removeEventListener("mousemove", onMove);
root.removeEventListener("mouseleave", onLeave);
};
}, [enabled, scrollRef, lightboxOpen]);
useEffect(() => {
if (!enabled) {
const m = motionRef.current;
m.targetOpacity = 0;
m.initialized = false;
if (nodeRef.current) nodeRef.current.style.opacity = "0";
return;
}
const posEase = reducedMotion.current ? 1 : 0.14;
const fadeEase = reducedMotion.current ? 1 : 0.16;
const tick = () => {
const m = motionRef.current;
const el = nodeRef.current;
const show = !lightboxOpen && m.targetOpacity > 0.01;
if (show || m.opacity > 0.01) {
m.x += (m.tx - m.x) * posEase;
m.y += (m.ty - m.y) * posEase;
}
const targetOp = show ? m.targetOpacity : 0;
m.opacity += (targetOp - m.opacity) * fadeEase;
if (el) {
el.style.transform = `translate3d(${m.x}px, ${m.y}px, 0) translate(-50%, -50%)`;
el.style.opacity = String(m.opacity);
}
m.raf = requestAnimationFrame(tick);
};
motionRef.current.raf = requestAnimationFrame(tick);
return () => {
if (motionRef.current.raf) cancelAnimationFrame(motionRef.current.raf);
motionRef.current.raf = null;
};
}, [enabled, lightboxOpen]);
if (!enabled) return null;
return (
);
}
function PhotographyView({ photoGroups, photoEdits, selectedPhotoSrc, photoPickMode, onSelectPhoto, photoGalleryStyle }) {
const scrollRef = useRef(null);
const smoothRef = useRef({ target: null, raf: null });
const showSmoothEye = !photoPickMode;
const [lightboxSrc, setLightboxSrc] = useState(null);
const openLightbox = useCallback((src) => setLightboxSrc(src), []);
const closeLightbox = useCallback(() => setLightboxSrc(null), []);
const reducedMotion = useRef(
typeof window !== "undefined" &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches
);
const stopSmooth = useCallback(() => {
const s = smoothRef.current;
if (s.raf) cancelAnimationFrame(s.raf);
s.raf = null;
}, []);
const runSmoothScroll = useCallback(() => {
const el = scrollRef.current;
const s = smoothRef.current;
if (!el || s.raf) return;
const ease = reducedMotion.current ? 1 : 0.14;
const step = () => {
if (!scrollRef.current) {
s.raf = null;
return;
}
const target = s.target ?? el.scrollLeft;
const diff = target - el.scrollLeft;
if (Math.abs(diff) < 0.5) {
el.scrollLeft = target;
s.raf = null;
return;
}
el.scrollLeft += diff * ease;
s.raf = requestAnimationFrame(step);
};
s.raf = requestAnimationFrame(step);
}, []);
const setScrollTarget = useCallback((next) => {
const el = scrollRef.current;
if (!el) return;
const s = smoothRef.current;
const base = s.target ?? el.scrollLeft;
s.target = clampPhotoScroll(el, base + next);
if (reducedMotion.current) {
el.scrollLeft = s.target;
return;
}
runSmoothScroll();
}, [runSmoothScroll]);
/* lock body scroll while this view is mounted */
useEffect(() => {
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = prev;
stopSmooth();
};
}, [stopSmooth]);
/* vertical wheel → eased horizontal scroll */
useEffect(() => {
const el = scrollRef.current;
if (!el) return;
const onWheel = (e) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
e.preventDefault();
setScrollTarget(e.deltaY * 1.15);
}
};
el.addEventListener("wheel", onWheel, { passive: false });
return () => el.removeEventListener("wheel", onWheel);
}, [setScrollTarget]);
return (
{/* ── horizontal photo strip ── */}
{PHOTO_CAMERA_LABEL}
{photoGroups.map((group, gi) => (
{group.cols.map((col, ci) => (
{col.map((photo, pi) => {
const selected = photo.src === selectedPhotoSrc;
return (
{
e.stopPropagation();
onSelectPhoto?.(photo.src);
} : (e) => {
e.stopPropagation();
openLightbox(photo.src);
}}
style={{
padding: 0,
border: "none",
background: "none",
cursor: photoPickMode ? "pointer" : "none",
flexShrink: 0,
}}
>
);
})}
))}
))}
{/* ── bottom nav ── */}
{PHOTO_NAV.map((item) => (
{item}
))}
{lightboxSrc &&
}
);
}
/* ============================================================
PHOTO MODE TOGGLE (bottom-left View / Edit switch)
============================================================ */
const IconEye = () => (
);
const IconEdit = () => (
);
function PhotoModeToggle({ photoPickMode, setPhotoPickMode }) {
return (
setPhotoPickMode(false)}
aria-label="View mode"
title="View photos"
>
View
setPhotoPickMode(true)}
aria-label="Edit mode"
title="Edit photos"
>
Edit
);
}
/* ============================================================
PHOTO TWEAKS (Tweaks panel controls)
============================================================ */
function photoFileName(src) {
return src.split("/").pop();
}
function PhotoEditorPanel({
galleryImages,
setGalleryImages,
photoList,
photoEdits,
setPhotoEdits,
photoPickMode,
setPhotoPickMode,
selectedPhotoSrc,
setSelectedPhotoSrc,
photoGalleryStyle,
setPhotoGalleryStyle,
}) {
const [open, setOpen] = useState(true);
const [swapTarget, setSwapTarget] = useState("");
const photo = photoList.find((p) => p.src === selectedPhotoSrc) || photoList[0];
const src = photo?.src;
const galleryIdx = src ? galleryImages.indexOf(src) : -1;
const edits = photoEdits || {};
const cur = photo ? effectivePhotoEdit(photo, edits[src]) : null;
const galleryStyle = { ...PHOTO_GALLERY_STYLE_DEFAULTS, ...photoGalleryStyle };
const patchGalleryStyle = (patch) => {
setPhotoGalleryStyle((prev) => ({ ...prev, ...patch }));
};
const movePhoto = (delta) => {
if (galleryIdx < 0) return;
const next = moveGalleryImage(galleryImages, galleryIdx, galleryIdx + delta);
if (next !== galleryImages) setGalleryImages(next);
};
const swapPhoto = (otherSrc) => {
if (!otherSrc || galleryIdx < 0) return;
const otherIdx = galleryImages.indexOf(otherSrc);
if (otherIdx < 0) return;
setGalleryImages(moveGalleryImage(galleryImages, galleryIdx, otherIdx));
setSwapTarget("");
};
const deletePhoto = () => {
if (galleryIdx < 0 || galleryImages.length <= 1) return;
const name = photoFileName(src);
if (!window.confirm(`Remove ${name} from the gallery?`)) return;
const next = removeGalleryImage(galleryImages, galleryIdx);
setGalleryImages(next);
setPhotoEdits((prev) => {
const cleaned = { ...prev };
delete cleaned[src];
return cleaned;
});
setSelectedPhotoSrc(next[Math.min(galleryIdx, next.length - 1)]);
};
const copyGalleryOrder = () => {
const text = JSON.stringify(galleryImages, null, 2);
navigator.clipboard?.writeText(text).catch(() => {});
window.prompt("Copy gallery order (Ctrl+C):", text);
};
const patchPhoto = (patchOrFn) => {
if (!src) return;
setPhotoEdits((prev) => {
const merged = effectivePhotoEdit(photo, prev[src]);
const patch = typeof patchOrFn === "function" ? patchOrFn(merged) : patchOrFn;
return { ...prev, [src]: { ...(prev[src] || {}), ...patch } };
});
};
const resetPhoto = () => {
if (!src) return;
setPhotoEdits((prev) => {
const next = { ...prev };
delete next[src];
return next;
});
};
const copyAllEdits = () => {
const payload = photoList.map((p) => {
const e = effectivePhotoEdit(p, edits[p.src]);
const base = photoDefaults(p);
const changed =
e.posX !== base.posX || e.posY !== base.posY || (e.zoom ?? 1) !== (base.zoom ?? 1) ||
(e.frameH ?? 100) !== 100 || e.ar !== base.ar;
if (!changed) return null;
const row = { file: photoFileName(p.src), src: p.src, ar: e.ar };
if (e.posX !== 50) row.posX = e.posX;
if (e.posY !== 50) row.posY = e.posY;
if ((e.zoom ?? 1) !== 1) row.zoom = e.zoom ?? 1;
if ((e.frameH ?? 100) !== 100) row.frameH = e.frameH ?? 100;
return row;
}).filter(Boolean);
const text = JSON.stringify(payload, null, 2);
navigator.clipboard?.writeText(text).catch(() => {});
window.prompt("Copy your photo edits (Ctrl+C):", text);
};
if (!photo || !cur || galleryImages.length === 0) return null;
if (!open) {
return (
setOpen(true)}
aria-label="Open photo editor"
>
Edit photos
);
}
return (
e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
onWheel={(e) => e.stopPropagation()}
>
Photo editor
setOpen(false)}
>
✕
Frames fill the screen below the header. Adjust crop, then copy edits and run
npm run bake-photos to save real crops.
patchGalleryStyle({ shadow: v })} />
{galleryStyle.shadow &&
patchGalleryStyle({ shadowAmount: v })} />
}
patchGalleryStyle({ rounded: v })} />
{galleryStyle.rounded &&
patchGalleryStyle({ cornerRadius: v })} />
}
({
value: s,
label: `${i + 1}. ${photoFileName(s)}`,
}))}
onChange={setSelectedPhotoSrc} />
{galleryIdx >= 0 ? `Position ${galleryIdx + 1} of ${galleryImages.length}` : ""}
movePhoto(-1)} />
movePhoto(1)} />
{galleryImages.length > 1 &&
s === src ? [] : [{
value: s,
label: `${i + 1}. ${photoFileName(s)}`,
}]),
]}
onChange={(v) => {
if (v) swapPhoto(v);
setSwapTarget("");
}} />
}
patchPhoto({ posX: v })} />
patchPhoto({ posY: v })} />
patchPhoto({ zoom: v })} />
patchPhoto({ frameH: v })} />
patchPhoto({ ar: v })} />
{entry.logo &&
}
{entry.degree}
{entry.issued ? `${entry.school} · ${entry.issued}` : entry.school}
{entry.courses?.length > 0 &&
{entry.courses.map((course) =>
{course}
)}
}
);
}
function CertFilterBtn({ active, label, onClick }) {
return (
{label} );
}
function CertificationsSection() {
const [certs, setCerts] = useState([]);
const [filter, setFilter] = useState("all");
const [loadError, setLoadError] = useState(false);
useEffect(() => {
let cancelled = false;
fetch("certifications.json")
.then((res) => {
if (!res.ok) throw new Error("not found");
return res.json();
})
.then((data) => {
if (cancelled) return;
if (Array.isArray(data) && data.length) {
setCerts(data.map((c) => ({
courses: [],
category: c.category || inferCertCategory(c.degree),
...c,
logo: certLogoForSchool(c.school, c.logo)
})));
setLoadError(false);
}
})
.catch(() => {
if (!cancelled) setLoadError(true);
});
return () => { cancelled = true; };
}, []);
const filterCounts = useMemo(() => {
const counts = { all: certs.length, data: 0, code: 0, ux: 0 };
for (const c of certs) {
if (c.category === "data") counts.data += 1;
if (c.category === "code") counts.code += 1;
if (c.category === "ux") counts.ux += 1;
}
return counts;
}, [certs]);
const filteredCerts = useMemo(() => {
if (filter === "all") return certs;
return certs.filter((c) => c.category === filter);
}, [certs, filter]);
return (
Certifications{filteredCerts.length > 0 ?
` (${filteredCerts.length}${filter !== "all" ? ` · ${CERT_FILTERS.find((f) => f.id === filter)?.label}` : ""})` :
""}
LinkedIn →
{certs.length > 0 &&
{CERT_FILTERS.map((f) =>
setFilter(f.id)}
/>
)}
}
{loadError && certs.length === 0 &&
Could not load certifications.json. Use a local server or check the file path.
}
{certs.length === 0 && !loadError &&
Loading certifications…
}
{filteredCerts.length === 0 && certs.length > 0 &&
No certifications in this category.
}
{filteredCerts.length > 0 &&
{filteredCerts.map((entry) =>
}
);
}
function useFitColumnText(contentRef, containerRef, { minPx = 11, maxPxCap = 140, maxPxRatio = 0.52, minMaxPx = 36, fillRatio = 1 } = {}) {
useEffect(() => {
const content = contentRef.current;
const box = containerRef.current;
if (!content || !box) return;
const fit = () => {
const limit = box.clientHeight * fillRatio;
if (limit < 8) return;
const maxPx = Math.min(maxPxCap, Math.max(minMaxPx, limit * maxPxRatio));
let lo = minPx;
let hi = Math.ceil(maxPx);
let best = minPx;
while (lo <= hi) {
const mid = Math.floor((lo + hi) / 2);
content.style.fontSize = `${mid}px`;
if (content.scrollHeight <= limit) {
best = mid;
lo = mid + 1;
} else {
hi = mid - 1;
}
}
let size = best;
content.style.fontSize = `${size}px`;
while (size + 0.5 <= maxPx) {
content.style.fontSize = `${size + 0.5}px`;
if (content.scrollHeight <= limit) size += 0.5;
else {
content.style.fontSize = `${size}px`;
break;
}
}
};
const scheduleFit = () => requestAnimationFrame(fit);
const ro = new ResizeObserver(scheduleFit);
ro.observe(box);
window.addEventListener("resize", scheduleFit);
scheduleFit();
let cancelled = false;
document.fonts?.ready?.then(() => {
if (!cancelled) scheduleFit();
});
return () => {
cancelled = true;
ro.disconnect();
window.removeEventListener("resize", scheduleFit);
content.style.fontSize = "";
};
}, [contentRef, containerRef, minPx, maxPxCap, maxPxRatio, minMaxPx, fillRatio]);
}
function AboutView() {
const bioRef = useRef(null);
const bioWrapRef = useRef(null);
const educationBoxRef = useRef(null);
const educationContentRef = useRef(null);
useFitColumnText(bioRef, bioWrapRef, {
fillRatio: 0.68,
maxPxCap: 88,
maxPxRatio: 0.36,
minMaxPx: 26,
});
useFitColumnText(educationContentRef, educationBoxRef, {
minPx: 7,
maxPxCap: 20,
maxPxRatio: 0.125,
minMaxPx: 10
});
useEffect(() => {
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = prev;
};
}, []);
return (
About
I’m Franco, a Fraud Prevention Analyst.
Education
{EDUCATION.map((entry) =>
Professional certifications
{PROFESSIONAL_CERTIFICATIONS.map((entry) =>
);
}
/* ============================================================
FOOTER
============================================================ */
function LinkedInIcon() {
return (
);
}
function Footer() {
return (
);
}
/* ============================================================
APP
============================================================ */
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [view, setView] = useState("Projects");
const [activeProject, setActiveProject] = useState(null);
const [galleryImages, setGalleryImages] = useState(CAMARITA_IMAGES);
const [selectedPhotoSrc, setSelectedPhotoSrc] = useState(CAMARITA_IMAGES[0]);
const [photoEdits, setPhotoEdits] = useState({});
const [photoPickMode, setPhotoPickMode] = useState(false);
const [photoGalleryStyle, setPhotoGalleryStyle] = useState(PHOTO_GALLERY_STYLE_DEFAULTS);
const photoGroups = useMemo(
() => buildPhotoGroups(galleryImages),
[galleryImages]
);
const photoList = useMemo(
() => flattenPhotoList(photoGroups),
[photoGroups]
);
const setViewAndTop = useCallback((v) => {
setActiveProject(null);
setView(v);
window.scrollTo({ top: 0, behavior: "smooth" });
}, []);
const openProject = useCallback((slug) => {
const project = PROJECTS.find((p) => p.slug === slug);
if (!project) return;
setActiveProject(project);
setView("Projects");
window.scrollTo({ top: 0, behavior: "smooth" });
}, []);
const closeProject = useCallback(() => {
setActiveProject(null);
window.scrollTo({ top: 0, behavior: "smooth" });
}, []);
const showHeader = view !== "Projects" || activeProject !== null;
// apply tweaks to CSS variables
useEffect(() => {
const root = document.documentElement.style;
const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS.humanist;
root.setProperty("--font-display", fp.display);
root.setProperty("--font-body", fp.body);
root.setProperty("--font-meta", fp.meta);
root.setProperty("--meta-tracking", fp.tracking);
root.setProperty("--meta-transform", fp.transform);
const gt = GRAY_TONES[t.grayTone] || GRAY_TONES.neutral;
root.setProperty("--tone-h", gt.h);
root.setProperty("--tone-c", gt.c);
const d = DENSITY[t.density] || DENSITY.comfortable;
root.setProperty("--pad-x", d.padX);
root.setProperty("--section-y", d.sectionY);
root.setProperty("--gap", d.gap);
root.setProperty("--hero-size", d.hero);
document.body.style.fontSize = d.fs;
root.setProperty("--accent", t.accent);
}, [t.fontPair, t.grayTone, t.density, t.accent]);
return (
{showHeader &&
}
{view === "Projects" && activeProject &&
}
{view === "Projects" && !activeProject &&
}
{view === "Photography" &&
}
{view === "About" &&
}
{view !== "Photography" && view !== "About" &&
}
{view === "Photography" &&
}
{view === "Photography" && photoPickMode &&
}
setTweak("fontPair", v)} />
setTweak("layout", v)} />
setTweak("density", v)} />
setTweak("accent", v)} />
setTweak("grayTone", v)} />
![]({s.img.split("/").map((part,)
idx < arr.length - 1 ? part : encodeURIComponent(part)).join("/")}
alt={s.eyebrow}
aria-hidden={active === i ? undefined : true}
className={isCutout ? "fovere-story__cutout-img" : undefined}
style={isCutout ? {
position: "absolute",
top: "50%",
left: "50%",
maxHeight: `${Math.round(100 * imgScale)}%`,
maxWidth: `${Math.round(100 * imgScale)}%`,
width: "auto",
height: "auto",
display: "block",
objectFit: "contain",
transform: `translate(-50%, -50%) scale(${activeScale / imgScale})`,
opacity: active === i ? 1 : 0,
transition: "opacity 0.55s ease, transform 0.55s ease",
filter: "drop-shadow(0 28px 52px rgba(0,0,0,0.16))",
pointerEvents: "none"
} : {
height: "min(78vh, 660px)",
width: "auto",
display: "block",
position: i === 0 ? "relative" : "absolute",
top: i === 0 ? "auto" : 0,
left: i === 0 ? "auto" : "50%",
transform: i === 0 ?
active === i ? "scale(1)" : "scale(0.97)" :
`translateX(-50%) ${active === i ? "scale(1)" : "scale(0.97)"}`,
opacity: active === i ? 1 : 0,
transition: "opacity 0.55s ease, transform 0.55s ease",
filter: "drop-shadow(0 30px 60px rgba(0,0,0,0.18))",
pointerEvents: "none"
}} />
);
})}