// Portfolio — single-file React app
const { useState, useEffect, useRef, useCallback, useMemo } = React;
// ─── Tweaks ────────────────────────────────────────────────────────────────
const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
"bluAccent": "#007AFF",
"rossoAccent": "#FF4040",
"checkers": true,
"heroSize": 64,
"ctaWeight": "italic-bold",
"showHand": true,
"wavePalette": "refined"
} /*EDITMODE-END*/;
const FOLDER_PATH = "M 0 10 C 0 4.477 4.477 0 10 0 L 44.639 0 C 47.42 0 50.075 1.158 51.967 3.195 L 52.533 3.805 C 54.425 5.842 57.08 7 59.861 7 L 119 7 C 124.523 7 129 11.477 129 17 L 129 81 C 129 86.523 124.523 91 119 91 L 10 91 C 4.477 91 0 86.523 0 81 L 0 10 Z";
// ─── Theme palettes ────────────────────────────────────────────────────────
const THEMES = {
blu: {
key: "blu",
label: "Work Portfolio",
heroBg: "#000",
portfolioBg: "#0E0E0E",
portfolioFg: "#fff",
heroFg: "#fff",
softFg: "rgba(255,255,255,.55)",
softerFg: "rgba(255,255,255,.35)",
rule: "rgba(255,255,255,.08)",
chipBg: "rgba(255,255,255,.08)",
chipBorder: "rgba(255,255,255,.14)",
handBg: "#0A1834",
handTint: "#fff",
barColor: "rgba(255,255,255,.7)",
dotInactive: "rgba(255,255,255,.25)",
ctaCard: "#0E0E0E",
btnTextOnAccent: "#fff",
btnTextOnOutline: "#fff",
btnOutlineBorder: "rgba(255,255,255,.5)"
},
rosso: {
key: "rosso",
label: "Side Quests",
heroBg: "#ff4438",
portfolioBg: "#FFFFFF",
portfolioFg: "#0E0E0E",
heroFg: "#0E0E0E",
softFg: "rgba(0,0,0,.55)",
softerFg: "rgba(0,0,0,.35)",
rule: "rgba(0,0,0,.08)",
chipBg: "rgba(0,0,0,.045)",
chipBorder: "rgba(0,0,0,.12)",
handBg: "#E5DED5",
handTint: "#0E0E0E",
barColor: "rgba(255,64,64,.85)",
dotInactive: "rgba(0,0,0,.18)",
ctaCard: "#FFFFFF",
btnTextOnAccent: "#fff",
btnTextOnOutline: "#0E0E0E",
btnOutlineBorder: "rgba(0,0,0,.85)"
}
};
// ─── Tag palette ───────────────────────────────────────────────────────────
const TAGS = {
art: { label: "Art Direction", bg: "transparent", color: "#0E0E0E", border: "1px solid rgba(0,0,0,.35)" },
motion: { label: "Motion", bg: "#C983FF", color: "#0E0E0E" },
visual: { label: "Visual", bg: "#AEE9FF", color: "#0E0E0E" },
illu: { label: "Illustration", bg: "#FF8B61", color: "#0E0E0E" },
ai: { label: "Ai", bg: "linear-gradient(135deg, #FFDDF6, #D2E7FF)", color: "#0E0E0E" },
web: { label: "Web Design", bg: "#59A9FF", color: "#0E0E0E" },
ux: { label: "UI/UX", bg: "#B2FD90", color: "#0E0E0E" },
game: { label: "Game Design", bg: "#FDD57B", color: "#0E0E0E" }
};
// ─── Projects ──────────────────────────────────────────────────────────────
const PROJECTS = {
blu: [
// Tones & tags taken from /Sito/about-blu + /Sito/experience-blu Figma
{ name: "CapaToast", img: "assets/capatoast/megatoast-board.jpg", video: "assets/capatoast/menu-v2.mp4", tone: "#F4C400", fit: "cover", tags: ["motion", "visual", "illu"], year: "2023 — 2024",
subtitle: "Food chain",
description: "Capatoast is the first toasteria chain in Italy. Founded in 2014, it turned the classic toast into a complete meal, offering \"mega toasts\" made with large artisan bread (up to 15×19 cm) and filled with high-quality ingredients. It is present across Italy with dozens of stores, often located in shopping centers or in the historic centers of major cities.",
description2: null,
gallery: [
{ type: "image-group",
images: [
"assets/capatoast/store-yellow.jpg",
"assets/capatoast/cagliari.png",
"assets/capatoast/storefront-padova.jpg",
"assets/capatoast/store-granroma.jpg",
"assets/capatoast/store-globo.jpg"
],
caption: "Stores · Italia",
ratio: "16 / 9" },
{ type: "quote", size: 27, content: "CapaToast had a strong, recognizable visual identity, but no language for movement.\n\nThe brand lived in its visuals, not in motion." },
{ type: "text", content: "Together with the agency Fatelardo, I built the brand's first motion system: the way the logo, the products and the campaigns come to life on every screen." },
{ type: "text", content: "The animation style was suggested by the brand itself, almost naturally. CapaToast's letters have an irregular, almost bouncing rhythm, so the motion became choppy, built on just a few frames, recognizable in an instant." },
{ type: "video", url: "assets/capatoast/logo-loop.mp4", caption: "Logo animation · loop" },
{ type: "video", url: "assets/capatoast/menu-v2.mp4", caption: "Brand" },
{ type: "quote", content: "A stepped, jerky rhythm that fits an ironic and direct brand." },
{ type: "text", content: "From there, the system extended to everything else: menu boards, in-store screens, ledwalls, totems and social." },
{ type: "video", url: "assets/capatoast/logo-intro.mp4", caption: "Social" },
{ type: "video", url: "assets/capatoast/v06.mp4", caption: "Reels & stories · social" },
{ type: "video", url: "assets/capatoast/v07b.mp4", caption: "In-store screens" },
{ type: "video", url: "assets/capatoast/limited-v2.mp4", caption: "Limited edition · campaign" },
{ type: "video", url: "assets/capatoast/v08.mp4", caption: "In-store screen" },
{ type: "video", url: "assets/capatoast/v09.mp4", caption: "Store set-up" },
{ type: "video", url: "assets/capatoast/v10.mp4", caption: "Dual screens" },
{ type: "video", url: "assets/capatoast/v11.mp4", caption: "In-store screens" },
{ type: "text", content: "Toastino, the mascot, was designed and animated with the same logic as the brand the same choppy timing, the same attitude." },
{ type: "video", url: "assets/capatoast/v13.mp4", caption: "Toastino · reel" },
{ type: "video", url: "assets/capatoast/v14.mp4", caption: "Toastino · in-store screens" },
{ type: "video", url: "assets/capatoast/v15.mp4", caption: "Toastino · in-store screen" },
{ type: "video", url: "assets/capatoast/v16.mp4", caption: "Toastino · dual screens" },
{ type: "video", url: "assets/capatoast/grazie.mp4", caption: "Grazie · closing" },
] },
{ name: "Museo Maradona", embed: "maradona", video: "assets/maradona/cover.mp4", img: "assets/museo-maradona.jpg", tone: "#59A9FF", fit: "cover", tags: ["art", "motion", "visual", "illu"], year: "2024",
subtitle: "Visual identity for a museum dedicated to Diego Maradona",
description: "Identità visiva per uno spazio espositivo permanente dedicato alla figura di Diego Armando Maradona. Il progetto mette in dialogo iconografia popolare napoletana e linguaggio museale, restituendo all'archivio fotografico una grammatica visiva contemporanea.",
description2: "Il sistema di segnaletica e i materiali di accompagnamento traducono la passione tifoide in un'esperienza curatoriale. Tipografia ampia, illustrazioni in tratto pulito e palette desaturata fanno da contrappunto alla potenza dei materiali storici.",
gallery: 2 },
{ name: "Very Cool Italian Gestures", embed: "gestures", video: "assets/gestures/cover.mp4", img: null, tone: "#2E9E5B", tags: ["art", "motion", "visual", "illu"], year: "2024",
subtitle: "An illustrated dictionary of Italian gestures",
description: "Un dizionario illustrato dei gesti italiani più riconoscibili, animati e raccolti in una pubblicazione editoriale. Ogni gesto è raccontato con un breve loop motion e una didascalia in inglese/italiano per il pubblico internazionale.",
description2: "Il progetto unisce illustrazione vettoriale e motion design per dare vita ai gesti come fossero piccoli pittogrammi animati. Una palette rossa e nera tiene insieme la collezione.",
gallery: 2 },
{ name: "Archive", archive: true, embed: "archive", img: null, tone: "#59A9FF", solid: true, tags: [], year: "",
subtitle: "Archive",
description: "",
gallery: 2 }],
rosso: [
{ name: "QuestRoller", img: null, tone: "#FF4438", solid: true, tags: ["illu", "ux", "game", "art"], year: "2026",
subtitle: "A dice-rolling mini-game living in the red home",
description: "",
gallery: 2 },
{ name: "Nintendo DSi Homebrew GifCam", img: null, tone: "#C7C7C7", solid: true, tags: ["visual"], year: "2025",
subtitle: "Homebrew camera app for Nintendo DSi",
description: "",
gallery: 2 }]
};
// ─── Experience (used by both themes) ──────────────────────────────────────
const WORK_HISTORY = [
{ co: "NeaVision", role: "Art Director", dates: "June 2025 — June 2026", clients: [
["Vertis S.G.R", "Private Equity & Venture Capital"], ["UniVertis", "Business School"], ["IPE Business School", "Business School"], ["Stoà Business School", "Business School"], ["ForMare", "Maritime Shipping & Finance"], ["Progetto Civico Italia — Ercolano", "Political Campaign"], ["Ciclope Beach", "Beach Club Events"], ["Talia", "Restaurant"], ["Sequoia", "Restaurant"]] },
{ co: "Overcome", role: "Art Director", dates: "Oct 2024 — June 2025", clients: [
["Museo Maradona", "Sport Museum"], ["FulFilledOne", "Logistics & Transport"]] },
{ co: "Fatelardo", role: "Visual / Motion Designer", dates: "Oct 2023 — Oct 2024", clients: [
["Capatoast", "Food Chain"], ["Puok", "Food Chain"], ["Supermercati Piccolo", "Supermarket Chain"], ["Grrrinta", "Fast Food"], ["Bricklane", "Restaurant"], ["Panamar", "Restaurant"], ["Santeribs", "Restaurant"], ["Saomaki Sushi", "Restaurant"]] },
{ co: "ZuZuWork", role: "Visual Designer", dates: "June 2023 — Oct 2023", clients: [
["Molini Ambrosio", "Flour Milling Industry"], ["Cesto Bakery", "Award-winning Bakery"], ["TuttoPizza", "Pizza Festival"], ["Pomodoreria", "Italian Tomato Brand"]] }];
const EDUCATION = [
{ title: "Design della Comunicazione Multimediale", school: "Accademia di Belle Arti di Napoli", years: "2023 — 2025", kind: "Master" },
{ title: "Design della Comunicazione Multimediale", school: "Accademia di Belle Arti di Napoli", years: "2020 — 2023", kind: "Bachelor" }];
// ─── Helpers ───────────────────────────────────────────────────────────────
function Pill({ kind, size = "sm", children }) {
const t = TAGS[kind] || TAGS.visual;
const s = size === "lg" ?
{ fontSize: 12, padding: "4px 11px", letterSpacing: ".01em" } :
{ fontSize: 10.5, padding: "3px 9px", letterSpacing: ".01em" };
// "art" tag is outlined/transparent — use the current text color so it
// stays readable on either dark (BLU) or light (ROSSO) portfolio bg.
const themeAware = kind === "art";
return (
{children ?? t.label});
}
// Permanently-baked media for slots the user filled by drag-drop. Extracted
// from localStorage into real project files so they survive export/publish
// and appear identically on every machine. Keyed by slotId.
const BAKED_MEDIA = {
"hero-anim-blu-top": { type: "image", url: "assets/dropped/hero-anim-blu-top.svg" },
"hero-anim-rosso-top": { type: "image", url: "assets/dropped/hero-anim-rosso-top.png" },
"hand-footer-blu": { type: "image", url: "assets/dropped/hand-footer-blu.png" },
"hand-footer-rosso": { type: "image", url: "assets/dropped/hand-footer-blu.png", whiten: true, force: true },
"cta-animation-blu": { type: "video", url: "assets/dropped/cta-animation-blu.webm" },
"cta-animation-rosso": { type: "video", url: "assets/dropped/cta-animation-rosso.mp4" },
};
// True once the intro video has finished — project media wait for it so the
// first visit isn't fighting the intro for bandwidth.
function useIntroDone() {
const [ok, setOk] = React.useState(!!window.__introDone);
React.useEffect(() => {
if (ok) return;
const on = () => setOk(true);
window.addEventListener("intro-done", on);
return () => window.removeEventListener("intro-done", on);
}, [ok]);
return ok;
}
// ─── Network-aware media ──────────────────────────────────────────────────
// Light JPG posters (≈10–70 KB) show instantly; the video streams in behind
// them. On slow / data-saver connections videos don't download until tapped.
const POSTERS = new Set(["menu-v2","logo-loop","logo-intro","v06","v07b","limited-v2","v08","v09","v10","v11","v13","v14","v15","v16","grazie"]);
function posterFor(url) {
const m = /assets\/capatoast\/([\w-]+)\.mp4$/.exec(url || "");
return m && POSTERS.has(m[1]) ? `assets/capatoast/posters/${m[1]}.jpg` : undefined;
}
const SLOW_NET = (() => {
const c = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (!c) return false;
return !!c.saveData || /(^|-)2g|3g/.test(c.effectiveType || "") || (c.downlink > 0 && c.downlink < 1.5);
})();
window.__SLOW_NET = SLOW_NET;
// ─── VideoGovernor — only videos actually on screen decode and play; the rest
// pause. Ten 1080p loops playing at once starve the decoder and make single
// videos stall, especially on phones.
function VideoGovernor() {
React.useEffect(() => {
const io = new IntersectionObserver((es) => es.forEach((e) => {
const v = e.target;
if (v.controls) return; // user-driven player
if (e.isIntersecting) { if (window.__SLOW_NET && !v.dataset.user) return; const p = v.play(); if (p && p.catch) p.catch(() => {}); }
else v.pause();
}), { threshold: 0.15 });
const seen = new WeakSet();
const scan = () => document.querySelectorAll("#root video").forEach((v) => {
if (seen.has(v)) return; seen.add(v);
v.setAttribute("playsinline", ""); v.muted = v.muted || !v.controls;
io.observe(v);
});
const mo = new MutationObserver(scan);
mo.observe(document.getElementById("root"), { childList: true, subtree: true });
scan();
return () => { mo.disconnect(); io.disconnect(); };
}, []);
return null;
}
// ─── Museo Maradona case study — self-contained web component (shadow DOM),
// loaded once on first open. Assets live next to the script in museo-maradona/.
function MaradonaEmbed() {
React.useEffect(() => {
if (customElements.get("maradona-case-study") || document.querySelector("script[data-mm-cs]")) return;
const s = document.createElement("script");
s.src = "museo-maradona/maradona-case-study.js";
s.setAttribute("data-mm-cs", "");
document.body.appendChild(s);
}, []);
return (
);
}
// ─── PlayDie — floating die button on the red home: double-tap starts the Quest.
function PlayDie({ show, invite = false, onSwitch }) {
const [hop, setHop] = React.useState(0);
const last = React.useRef(0);
// Hidden while a Quest is running and the red header is on screen.
const [quest, setQuest] = React.useState(false);
const [heroVis, setHeroVis] = React.useState(true);
React.useEffect(() => {
const on = (e) => { if (e.data && typeof e.data.quest === "boolean") setQuest(e.data.quest); };
window.addEventListener("message", on);
return () => window.removeEventListener("message", on);
}, []);
React.useEffect(() => {
if (!show) return;
const el = document.querySelector(".hero-screen");
if (!el || !("IntersectionObserver" in window)) return;
const io = new IntersectionObserver(([e]) => setHeroVis(e.intersectionRatio > 0.25), { threshold: [0, .25, .5, 1] });
io.observe(el);
return () => io.disconnect();
}, [show]);
// Invite mode (blue page): show only while "Let's Keep in Touch" is on screen.
const [ctaVis, setCtaVis] = React.useState(false);
React.useEffect(() => {
if (!show || !invite) return;
// Visible from Work History onward (down to the CTA and footer).
let raf = 0;
const check = () => {
raf = 0;
const el = document.querySelector(".ow-title") || document.querySelector(".pf-archive") || document.querySelector(".pf-narrow") || document.querySelector(".cta-wrap");
setCtaVis(!!el && el.getBoundingClientRect().top < window.innerHeight * 0.85);
};
const on = () => { if (!raf) raf = requestAnimationFrame(check); };
window.addEventListener("scroll", on, { passive: true, capture: true });
window.addEventListener("resize", on);
const t = setTimeout(check, 300);
return () => { clearTimeout(t); cancelAnimationFrame(raf); window.removeEventListener("scroll", on, { capture: true }); window.removeEventListener("resize", on); };
}, [show, invite]);
const hidden = invite ? !ctaVis : (quest && heroVis);
// Re-run the roll-in each time the die (re)appears.
const [entry, setEntry] = React.useState(0);
const wasHidden = React.useRef(true);
React.useEffect(() => {
if (!show) { wasHidden.current = true; return; }
if (wasHidden.current && !hidden) setEntry((n) => n + 1);
wasHidden.current = hidden;
}, [show, hidden]);
if (!show) return null;
const start = () => {
if (invite && onSwitch) { onSwitch(); return; }
const root = document.getElementById("root");
if (root && root.scrollTop > 0) root.scrollTo({ top: 0, behavior: "smooth" });
window.scrollTo({ top: 0, behavior: "smooth" });
setTimeout(() => {
const fr = document.querySelector('iframe[src^="hero-rosso.html"]');
if (fr && fr.contentWindow) fr.contentWindow.postMessage({ cmd: "startQuest" }, "*");
}, 450);
};
const tap = () => {
const t = performance.now();
if (t - last.current < 340) { last.current = 0; start(); }
else { last.current = t; setHop((h) => h + 1); }
};
return ReactDOM.createPortal(
, document.body);
}
// ─── Very Cool Italian Gestures — self-contained slide deck in an iframe that
// reports its own height, so it reads as part of the page (no inner scroll).
function GesturesEmbed() {
const [h, setH] = React.useState(0);
React.useEffect(() => {
const on = (e) => { if (e.data && e.data.vcigHeight) setH(e.data.vcigHeight); };
window.addEventListener("message", on);
return () => window.removeEventListener("message", on);
}, []);
return (
);
}
// ─── Archive — every other client, grouped. Masonry of images and loops at
// their natural proportions; media load lazily as they near the screen.
const ARCHIVE = [{"c":"Merendina","s":"","i":[["v","assets/archive/merendina/logo-animation.mp4",1,1.778],["i","assets/archive/merendina/carta-pizza.jpg",null,0.75],["i","assets/archive/merendina/ingredienti.jpg",null,1],["i","assets/archive/merendina/maglie.jpg",null,0.75],["i","assets/archive/merendina/tatoo.jpg",null,0.75]]},{"c":"Grrrinta","s":"Fast Food","i":[["v","assets/archive/grrrinta/grrinta-monitor-esterno-1.mp4",1,3.241],["v","assets/archive/grrrinta/grrinta-monitor-esterno-2.mp4",1,3.241],["v","assets/archive/grrrinta/grrinta-monitor-interno-1.mp4",1,1.778],["v","assets/archive/grrrinta/grrinta-ruggito-logo.mp4",null,0.8]]},{"c":"Gate 20","s":"","i":[["v","assets/archive/gate-20/gate20-menu-monitor-best-of.mp4",1,1.778],["v","assets/archive/gate-20/comparsa-logo.mp4",null,0.8],["v","assets/archive/gate-20/gate-20-menu-inspo.mp4",null,0.8],["v","assets/archive/gate-20/gate-20.mp4",null,0.8]]},{"c":"Bricklane","s":"Restaurant","i":[["v","assets/archive/bricklane/bricklane-new-logo.mp4",null,0.8],["v","assets/archive/bricklane/bricklane-logo-animation.mp4",2,0.563],["s",["assets/archive/bricklane/bri-deliverytavola-disegno-1-copia-15.png","assets/archive/bricklane/bri-glovotavola-disegno-1-copia-11.png","assets/archive/bricklane/bri-glovotavola-disegno-1-copia-12.png","assets/archive/bricklane/bri-nuove-storietavola-disegno-1-copia-16-2x.png","assets/archive/bricklane/bri-nuove-storietavola-disegno-1-copia-17-2x.png","assets/archive/bricklane/bri-storietavola-disegno-1-copia-21.png"],2,0.563],["s",["assets/archive/bricklane/tavola-da-disegno-3.png","assets/archive/bricklane/tavola-disegno-1-copia-33.png","assets/archive/bricklane/britavola-disegno-1-copia-4.png","assets/archive/bricklane/bri-yellow-submarinetavola-disegno-1-copia-5.png"],null,0.8],["i","assets/archive/bricklane/panini-bricktavola-disegno-1-copia.png",2,0.563],["i","assets/archive/bricklane/onion.png",2,0.563]]},{"c":"Comunik Hat","s":"","i":[["v","assets/archive/comunik-hat/4-2.mp4",null,0.8],["v","assets/archive/comunik-hat/5-2.mp4",null,0.8],["v","assets/archive/comunik-hat/monogram.mp4",null,0.804],["i","assets/archive/comunik-hat/3.jpg",null,0.8],["i","assets/archive/comunik-hat/img-7756.jpg",null,0.8],["i","assets/archive/comunik-hat/color-of-hat.png",null,0.8],["i","assets/archive/comunik-hat/hat-stadio.png",null,0.714]]},{"c":"Puok","s":"Food Chain","i":[["v","assets/archive/puok/gift-card.mp4",null,0.8],["v","assets/archive/puok/monitor-puok.mp4",2,0.563],["v","assets/archive/puok/puo-campagna-baby-glovo-back-to-school-animazion.mp4",null,0.8],["v","assets/archive/puok/puo-campagna-baby-glovo-back-to-school-animazion-b.mp4",null,0.8],["v","assets/archive/puok/puo-napoli-in-un-panino.mp4",2,0.563],["v","assets/archive/puok/puo-storia-compleanno.mp4",2,0.563],["v","assets/archive/puok/puo-video-imbustiamo-la-felicit.mp4",2,0.563],["v","assets/archive/puok/puok-glovo.mp4",2,0.563],["i","assets/archive/puok/battlestar-galacticatavola-disegno-1-copia-19.png",2,0.563],["i","assets/archive/puok/battlestar-galacticatavola-disegno-1-copia-20.png",2,0.563],["i","assets/archive/puok/battlestar-galacticatavola-disegno-1-copia-21.png",2,0.563],["i","assets/archive/puok/battlestar-galacticatavola-disegno-1-copia-23.png",2,0.563],["i","assets/archive/puok/battlestar-galacticatavola-disegno-1-copia-73.png",null,1],["i","assets/archive/puok/puo-glovo-babypuoktavola-disegno-1-copia-14.png",null,0.8],["i","assets/archive/puok/puo-glovo-babypuoktavola-disegno-1-copia-15.png",2,0.563],["i","assets/archive/puok/puo-nennella-moptavola-disegno-1-copia-22.png",2,0.563],["i","assets/archive/puok/puo-nennella-moptavola-disegno-127-copia-9.png",2,0.563]],"big":1},{"c":"Del Gallo","s":"","i":[["v","assets/archive/del-gallo/del-gallo-logo-animation.mp4",null,0.8]]},{"c":"Santeribs","s":"Restaurant","i":[["v","assets/archive/santeribs/santeribs-logo.mp4",null,0.8],["v","assets/archive/santeribs/santeribs-teriyaki-ribs-video.mp4",2,0.563],["v","assets/archive/santeribs/santeribs-video-menu.mp4",null,0.8]]}];
// Fast alternating stills, like a GIF.
function ArchFlip({ srcs, ms = 420 }) {
const [i, setI] = React.useState(0);
React.useEffect(() => { const t = setInterval(() => setI((n) => (n + 1) % srcs.length), ms); return () => clearInterval(t); }, [srcs.length, ms]);
return (
{srcs.map((s, k) => )}
);
}
// Justified rows computed in JS: tiles keep their real aspect ratio, every
// row is exactly the container width, and a short last row is merged into
// the previous one so nothing is left empty or oversized.
function ArchJustified({ items, big = false }) {
const ref = React.useRef(null);
const [W, setW] = React.useState(0);
React.useEffect(() => {
const el = ref.current; if (!el) return;
const ro = new ResizeObserver(([e]) => setW(Math.floor(e.contentRect.width)));
ro.observe(el); return () => ro.disconnect();
}, []);
const desk = W >= 640, gap = desk ? 14 : 8, target = (desk ? 380 : 230) * (big ? 1.45 : 1);
let rows = [];
if (W) {
let cur = [], sum = 0;
items.forEach((it) => {
// Horizontal pieces always get a full row of their own.
if (it[3] > 1.15) { if (cur.length) { rows.push(cur); cur = []; sum = 0; } rows.push([it]); return; }
cur.push(it); sum += it[3];
if (sum * target + gap * (cur.length - 1) >= W) { rows.push(cur); cur = []; sum = 0; }
});
if (cur.length) {
const fill = cur.reduce((n, x) => n + x[3], 0) * target / W;
if (fill < 0.35 && rows.length) rows[rows.length - 1] = rows[rows.length - 1].concat(cur); else rows.push(cur);
}
}
const maxH = typeof window !== "undefined" ? window.innerHeight * 0.7 : 600;
return (
{rows.map((row, ri) => {
const sr = row.reduce((n, x) => n + x[3], 0);
let h = (W - gap * (row.length - 1)) / sr;
const capped = h > maxH; if (capped) h = maxH;
return (
{g.s && {g.s}}
{g.i.length} {g.i.length === 1 ? "piece" : "pieces"}
{/* Justified rows: every tile keeps its original proportions; tiles in a
row share one height and the row fills the width exactly. */}
)}
);
}
// ─── SiteLoader — bottom-right pulsing ring while visible media is loading.
// Colorful on black/white grounds, cream on the red grounds of the ROSSO theme.
function SiteLoader() {
const [on, setOn] = React.useState(false);
const [cream, setCream] = React.useState(false);
React.useEffect(() => {
let showT = 0;
const vh = () => window.innerHeight, vw = () => window.innerWidth;
const visible = (el) => { const b = el.getBoundingClientRect(); return b.width > 0 && b.bottom > 0 && b.top < vh() && b.right > 0 && b.left < vw(); };
const tick = () => {
if (!window.__introDone) { setOn(false); return; }
let busy = false;
document.querySelectorAll("#root video").forEach((v) => { if (!busy && v.readyState < 3 && visible(v)) busy = true; });
if (!busy) document.querySelectorAll("#root img").forEach((im) => { if (!busy && !im.complete && visible(im)) busy = true; });
if (busy) { if (!showT) showT = setTimeout(() => setOn(true), 250); }
else { clearTimeout(showT); showT = 0; setOn(false); }
// Background under the loader → pick the right variant.
let el = document.elementFromPoint(vw() - 40, vh() - 40), red = false;
while (el && el !== document.documentElement) {
const c = getComputedStyle(el).backgroundColor, m = c.match(/\d+(\.\d+)?/g);
if (m && (m.length < 4 || +m[3] > 0.5)) { red = +m[0] > 190 && +m[1] < 130 && +m[2] < 130; break; }
el = el.parentElement;
}
setCream(red);
};
const iv = setInterval(tick, 300);
tick();
return () => { clearInterval(iv); clearTimeout(showT); };
}, []);
return ReactDOM.createPortal(
{[0,1,2,3,4,5,6,7,8,9].map((n) => )}
, document.body);
}
// ─── MediaSlot — drop zone that accepts images, GIF, MP4 / WebM ────────────
function MediaSlot({ slotId, theme, placeholder = "Drop animation, GIF or MP4", shape = "rounded", radius = 22, frame = "default", wave = false, fit = "cover", defaultMedia = null, style }) {
const [media, setMedia] = React.useState(null); // { type, url, name }
const [over, setOver] = React.useState(false);
const inputRef = React.useRef(null);
const boxRef = React.useRef(null);
const [near0, setNear] = React.useState(false);
const introOk = useIntroDone();
const near = near0 && introOk;
React.useEffect(() => {
const el = boxRef.current;
if (!el || !("IntersectionObserver" in window)) { setNear(true); return; }
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setNear(true); io.disconnect(); } }, { rootMargin: "900px 0px" });
io.observe(el);
return () => io.disconnect();
}, []);
const depthRef = React.useRef(0);
// Restore from localStorage. Also check legacy keys from before slotIds
// included the theme suffix, so older drops still come back. CRITICAL:
// always reset state when slotId changes — otherwise switching themes
// leaves the previous theme's media visible if the new theme is empty.
React.useEffect(() => {
try {
// current key first
let raw = localStorage.getItem(`media-slot-${slotId}`);
// then strip "-blu" / "-rosso" from the id and try again
if (!raw) {
const legacyId = slotId.replace(/-(blu|rosso)(-|$)/, "$2").replace(/-$/, "");
if (legacyId !== slotId) {
raw = localStorage.getItem(`media-slot-${legacyId}`);
// migrate it forward so the new theme key picks it up next time
if (raw) {
try {localStorage.setItem(`media-slot-${slotId}`, raw);} catch (e) {}
}
}
}
setMedia(raw ? JSON.parse(raw) : null);
} catch (e) {setMedia(null);}
}, [slotId]);
const ingest = (file) => {
if (!file) return;
const isVideo = /^video\//.test(file.type);
const isImage = /^image\//.test(file.type);
if (!isVideo && !isImage) return;
const reader = new FileReader();
reader.onload = () => {
const m = { type: isVideo ? "video" : "image", url: reader.result, name: file.name };
setMedia(m);
try {localStorage.setItem(`media-slot-${slotId}`, JSON.stringify(m));}
catch (e) {/* file too big for localStorage — session only */}
};
reader.readAsDataURL(file);
};
const clear = (e) => {
e?.stopPropagation();
setMedia(null);
try {localStorage.removeItem(`media-slot-${slotId}`);} catch (e) {}
};
const borderRadius =
shape === "circle" ? "50%" :
shape === "pill" ? 9999 :
radius;
const fg = theme?.heroFg || theme?.portfolioFg || "#0E0E0E";
const isDark = theme?.key === "blu" || /[a-f]/i.test(""); // crude check
const dashedBorder = theme?.key === "blu" ?
"rgba(255,255,255,.3)" :
"rgba(0,0,0,.22)";
const bg = theme?.key === "blu" ? "rgba(255,255,255,.05)" : "rgba(0,0,0,.04)";
// display = user-dropped media (priority) or defaultMedia fallback.
// hasUser = the dropped state, used to gate the "remove" button.
// hasContent = anything to render (drops the dashed placeholder).
const baked = BAKED_MEDIA[slotId];
const display = (baked && baked.force ? baked : null) || media || defaultMedia || baked || null;
const hasUser = !!media;
const hasContent = !!display;
// frame="none": when filled, drop bg/border/overflow so the media floats
// free (no circular crop, no background). Empty state keeps the dashed
// placeholder so the drop target is still discoverable.
const isFloating = frame === "none" && hasContent;
const mediaStyle = {
width: "100%",
height: "100%",
display: "block",
objectFit: fit,
animation: wave && hasContent ? "handwave 2.2s ease-in-out infinite" : "none",
transformOrigin: "70% 80%"
};
return (
);
}
function Hand({ accent, tint, size = 64 }) {
// Material front_hand symbol, tinted
return (
);
}
const FOLDER_MASK = 'url("data:image/svg+xml,' + encodeURIComponent('') + '")';
// Folder-shape image card. width determines proportional size (129:91 + 7 top extra)
function FolderCard({ img, video, gallery, tone, name, tags, fit = "cover", solid = false, accent, theme, width = 150, onClick, focus }) {
const introOk = useIntroDone();
// The folder has a tab from y=0 to y=7 (proportional). With width W, h = W * 91/129.
const h = width * (91 / 129);
const clipId = `fc-${name.replace(/\W+/g, '')}`;
// Slideshow source list: every media of the project (hero video, gallery
// items, image-group images), falling back to the cover image.
const slides = React.useMemo(() => {
const out = [];
const isVid = (u) => /\.(mp4|webm|mov|ogg)(\?.*)?$/i.test(u || "");
if (video) out.push({ type: "video", url: video });
if (Array.isArray(gallery)) {
gallery.forEach((it) => {
if (it.url && (it.type === "video" || isVid(it.url))) out.push({ type: "video", url: it.url });
});
}
// No animations at all → fall back to the cover so the folder isn't empty.
if (!out.length && img) out.push({ type: isVid(img) ? "video" : "image", url: img });
return out.slice(0, 1);
}, [img, video, gallery]);
const [slide, setSlide] = React.useState(0);
React.useEffect(() => {
if (slides.length < 2) return;
const t = setInterval(() => setSlide((s) => (s + 1) % slides.length), 1400);
return () => clearInterval(t);
}, [slides.length]);
const cur = slides[slide % Math.max(slides.length, 1)];
return (
);
}
// Checker pattern decoration (8×2 grid of small squares)
function Checkers({ accent, rows = 2, cols = 8, sz = 14, gap = 0, opacity = 1 }) {
const cells = [];
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const on = (r + c) % 2 === 0;
cells.push(
);
}
}
return (
{cells}
);
}
// ─── Top swipe bar ─────────────────────────────────────────────────────────
function SwipeBar({ theme, accent, idx, setIdx }) {
return (
← Swipe →
{[0, 1].map((i) =>
);
}
// ─── Cycling greetings (hero + footer) ─────────────────────────────────────
// Flat lists so the wheel scrolls through ONE shared menu of greetings.
// Order is fixed; each row is one entry ahead of the next.
const HELLOS = ["Ciao", "Hello", "Hola", "Bonjour", "你好"];
const BYES = ["Ciao", "Bye", "Adios", "Au revoir", "再见"];
// On ROSSO the footer is narrower (hand on the right), so "Au revoir"
// crops. Use a shorter list there.
const BYES_ROSSO = BYES.filter((w) => w !== "Au revoir");
// Legacy lists left here in case anything still references them by name
const HELLO_LISTS = [HELLOS, HELLOS, HELLOS];
const BYE_LISTS = [BYES, BYES, BYES];
function useCyclingWord(list, interval) {
const [i, setI] = React.useState(0);
React.useEffect(() => {
const t = setInterval(() => setI((v) => (v + 1) % list.length), interval);
return () => clearInterval(t);
}, [list, interval]);
return [list[i], i];
}
// ─── Greeting wheel — iOS-picker-style scrolling list of greetings ────────
// One shared list. Each tick, the current word moves up one slot. The
// middle slot is largest and gets the colored bar. Above/below are smaller
// and faded (top and bottom rows).
function GreetingWheel({ words, theme, accent, baseSize, barColor, interval = 2400, align = "left", weight = "auto" }) {
// step is monotonic (never wraps) so each rendered item has a unique
// absolute index. React keys by absIdx → the same DOM node moves smoothly
// from row to row as step advances, instead of jumping when the modulo
// wraps. Items at rel=±2 are invisible buffers so entry/exit happen
// off-screen (no pop).
const [step, setStep] = React.useState(0);
const N = words.length;
React.useEffect(() => {
const t = setInterval(() => setStep((s) => s + 1), interval);
return () => clearInterval(t);
}, [interval]);
// weight: "auto" uses 800/600 (bold). "light" uses 300/200 (Inter Light).
const midW = weight === "light" ? 300 : 800;
const sideW = weight === "light" ? 200 : 600;
const lineH = Math.round(baseSize * 0.86);
const viewportH = lineH * 3 + 4;
const RANGE = 2;
const items = [];
for (let i = -RANGE; i <= RANGE; i++) {
const absIdx = step + i;
const realIdx = (absIdx % N + N) % N;
items.push({ rel: i, absIdx, word: words[realIdx] });
}
// Visible only at rel = -1, 0, 1. ±2 are buffers (opacity 0).
const opAt = (rel) => {
const d = Math.abs(rel);
if (d === 0) return 1;
if (d === 1) return 0.45;
return 0;
};
const sizeAt = (rel) => {
const d = Math.abs(rel);
if (d === 0) return baseSize;
if (d === 1) return Math.round(baseSize * 0.62);
return Math.round(baseSize * 0.5);
};
return (
);
}
// ─── Tab content ───────────────────────────────────────────────────────────
function AboutPanel({ theme }) {
// Each line is its own block so text-wrap: balance applies per group
// and we avoid orphan words on the third (longest) line.
const lineCss = {
display: "block",
textWrap: "balance",
WebkitHyphens: "none",
hyphens: "none"
};
return (
Multimedia Designer and Art Director
Focused on Visual Identity and Motion Design
Clear, expressive
and human-centered visual systems.
);
}
function ExperiencePanel({ theme, accent }) {
return (
{/* Folder tab — protrudes above the section, like the project cards */}
Portfolio
);
}
// ─── Portfolio grid ────────────────────────────────────────────────────────
// Hue (0–360) and saturation (0–1) of a #rrggbb color.
function hexHS(hex) {
const m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
if (!m) return null;
const n = parseInt(m[1], 16), rr = (n >> 16 & 255) / 255, gg = (n >> 8 & 255) / 255, bb = (n & 255) / 255;
const mx = Math.max(rr, gg, bb), mn = Math.min(rr, gg, bb), d = mx - mn;
let h = 0;
if (d) h = mx === rr ? ((gg - bb) / d) % 6 : mx === gg ? (bb - rr) / d + 2 : (rr - gg) / d + 4;
return { h: (h * 60 + 360) % 360, s: mx ? d / mx : 0 };
}
// Index of the header-palette color whose hue is closest to the project's
// tone. Neutral (gray) tones fall back to the first color.
function nearestPalIdx(tone) {
const t = hexHS(tone);
if (!t || t.s < .15) return 0;
let best = 0, bestD = Infinity;
WAVE_PAL.forEach(([c], i) => {
const p = hexHS(c);
const d = Math.min(Math.abs(p.h - t.h), 360 - Math.abs(p.h - t.h));
if (d < bestD) { bestD = d; best = i; }
});
return best;
}
function PortfolioGrid({ projects, theme, accent, onOpen, palette = "refined" }) {
const glowPal = palette === "original" ? WAVE_PAL : WAVE_PAL_REFINED;
// Single column — one project per row. Only the folder whose center is
// nearest the middle of the visible scroll area is "focused".
const wrapRef = React.useRef(null);
const [focusIdx, setFocusIdx] = React.useState(-1);
const mouseRef = React.useRef(null);
const [edge, setEdge] = React.useState(null);
const [glows, setGlows] = React.useState([]);
// One edge glow at a time: each focus change starts a new layer (bright,
// then decaying while idle); the previous layer fades out.
const [layers, setLayers] = React.useState([]);
const layerSeq = React.useRef(0);
React.useEffect(() => {
if (focusIdx < 0) return;
const c = (palette === "original" ? WAVE_PAL : WAVE_PAL_REFINED)[nearestPalIdx(projects[focusIdx].tone)][0];
const id = ++layerSeq.current;
setLayers((ls) => [...ls.slice(-1).map((l) => ({ ...l, out: true })), { id, c, out: false }]);
}, [focusIdx, palette]);
React.useEffect(() => {
let raf = 0;
const measure = () => {
raf = 0;
const wrap = wrapRef.current;
if (!wrap) return;
const root = document.getElementById("root");
const scrollsInside = root && root.scrollHeight > root.clientHeight + 1 && getComputedStyle(root).overflowY !== "visible";
const box = scrollsInside ? root.getBoundingClientRect() : { top: 0, height: window.innerHeight };
const mid = box.top + box.height / 2;
const rr = scrollsInside ? root.getBoundingClientRect() : { left: 0, width: window.innerWidth, top: 0, height: window.innerHeight };
setEdge({ left: rr.left, width: rr.width, top: rr.top, height: rr.height });
let best = -1, bestD = Infinity;
const gl = [];
const useMouse = window.matchMedia("(min-width: 900px) and (hover: hover)").matches && mouseRef.current;
[...wrap.children].forEach((el, i) => {
const b = el.getBoundingClientRect();
if (b.bottom < box.top || b.top > box.top + box.height) return;
const cy = b.top + b.height * 0.4;
const d = Math.abs(cy - mid);
const w = Math.max(0, 1 - d / (box.height * 0.35));
if (w > 0) gl.push({ i, y: cy - box.top, w });
const dd = useMouse ? Math.hypot(b.left + b.width / 2 - mouseRef.current.x, cy - mouseRef.current.y) : d;
if (dd < bestD) { bestD = dd; best = i; }
});
setFocusIdx(best);
setGlows(gl);
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(measure); };
const onMouse = (e) => { mouseRef.current = { x: e.clientX, y: e.clientY }; onScroll(); };
measure();
window.addEventListener("scroll", onScroll, { passive: true, capture: true });
window.addEventListener("resize", onScroll);
window.addEventListener("mousemove", onMouse, { passive: true });
return () => { window.removeEventListener("scroll", onScroll, { capture: true }); window.removeEventListener("resize", onScroll); window.removeEventListener("mousemove", onMouse); cancelAnimationFrame(raf); };
}, [projects.length]);
const main = projects.filter((p) => !p.archive);
const archive = projects.filter((p) => p.archive);
return (
<>
{main.map((p, i) =>
onOpen(p)} />
)}
{archive.length > 0 &&
{archive.map((p, i) =>
onOpen(p)} />
)}
Logos, motion and social work for other clients.
}
);
}
// Grows slightly and glows in its own color while it sits in the middle
// band of the scroll viewport.
function FocusFolder({ glow, on, children }) {
const [tone, light] = glow;
// The ring plays to completion even if focus moves on mid-animation.
const [ring, setRing] = React.useState(0);
const prevOn = React.useRef(false);
React.useEffect(() => {
if (on && !prevOn.current) setRing((n) => n + 1);
prevOn.current = on;
}, [on]);
const [ringLive, setRingLive] = React.useState(false);
React.useEffect(() => { if (ring) setRingLive(true); }, [ring]);
return (
{/* Faint, tight, constant glow around the focused folder */}
{/* One-shot ring on entering focus: background-colored core, light
only at the edge, expanding outward and fading away. */}
{React.cloneElement(children, { focus: !!on })}
);
}
// ─── Case Study (full page) ─────────────────────────────────────────────
function CaseStudy({ project, allProjects, theme, accent, themeKey, onOpen, onClose }) {
if (!project) return null;
const idx = allProjects.findIndex(p => p.name === project.name);
const otherWorks = allProjects.filter((_, i) => i !== idx);
// The big hero folder — bigger than the grid card. ~346 wide fits 390 viewport.
const HERO_W = 346;
// Museo Maradona: pure black page down to Other Works, then a soft fade
// back to the theme background.
const isMM = project.embed === "maradona";
const pageBg = isMM ? "#000" : theme.portfolioBg;
return (
{/* Top bar */}
Case Study
{project.embed !== "archive" && <>
{/* Hero — uploadable image/video slot (defaults to the project's
own media). No folder shape, no name caption, no tags — those
live just below. */}
))}
{/* Gallery — predefined media items, or empty slots when gallery is a
number. Items with a `url` render the asset directly; items without
render a drop slot. Each item can declare its own aspect ratio. */}
{(() => {
// Normalize to array of items.
const g = project.gallery;
const items = Array.isArray(g)
? g
: Array.from({ length: g || 2 }, () => ({}));
return items.map((it, i) => {
const ratio = it.ratio || "16 / 9";
// Text block — a standalone paragraph rendered inside the gallery
// grid so the author can split the case-study narrative around
// media items.
if (it.type === "text") {
return (
{it.content}
);
}
// image-group: a shared horizontal carousel for multiple images
// that share a theme. Renders as one gallery slot.
if (it.type === "image-group" && Array.isArray(it.images)) {
return (
{it.caption && (
{it.caption}
)}
);
}
if (it.type === "quote") {
return (
{/* Contact rimando — Instagram + Email matching the home CTA. */}
{/* Footer */}
);
}
// Center one folder card, with the previous/next ones peeking out at half
// opacity. Tap a side card to focus it. Dots beneath.
// Pointer/touch swipeable with smooth follow-the-finger drag + spring snap.
function OtherWorksCarousel({ works, theme, accent, onOpen }) {
const [focus, setFocus] = React.useState(0);
const [drag, setDrag] = React.useState(0); // px, >0 = swiping right
const startRef = React.useRef(null);
const N = works.length;
if (N === 0) return null;
const SPACING = 200;
const commit = (delta) => {
if (Math.abs(delta) > SPACING * 0.28) {
setFocus(f => ((f + (delta < 0 ? 1 : -1)) % N + N) % N);
}
setDrag(0);
};
const handlers = {
onPointerDown: (e) => {
if (e.button !== undefined && e.button !== 0) return;
startRef.current = { x: e.clientX, y: e.clientY, captured: false, id: e.pointerId };
},
onPointerMove: (e) => {
const s = startRef.current;
if (!s) return;
const dx = e.clientX - s.x;
const dy = e.clientY - s.y;
if (!s.captured) {
if (Math.abs(dx) > 6 && Math.abs(dx) > Math.abs(dy)) {
s.captured = true;
try { e.currentTarget.setPointerCapture?.(s.id); } catch (_) {}
} else if (Math.abs(dy) > 8) {
startRef.current = null;
return;
} else {
return;
}
}
const clamped = Math.max(-SPACING * 1.2, Math.min(SPACING * 1.2, dx));
setDrag(clamped);
},
onPointerUp: (e) => {
const s = startRef.current;
if (!s) return;
const dx = e.clientX - s.x;
startRef.current = null;
if (s.captured) commit(dx);
else setDrag(0);
},
onPointerCancel: () => { startRef.current = null; setDrag(0); },
onLostPointerCapture: () => { startRef.current = null; setDrag(0); },
};
// Render a ±2 window so the incoming card slides in smoothly.
const RANGE = 2;
const cards = [];
for (let rel = -RANGE; rel <= RANGE; rel++) {
if (N === 1 && rel !== 0) continue;
if (N === 2 && (rel === 2 || rel === -2 || rel === 1)) continue;
const i = ((focus + rel) % N + N) % N;
cards.push({ rel, i });
}
return (
e.preventDefault()}
className="ow-track"
style={{
position: "relative",
height: 260,
touchAction: "pan-y",
cursor: drag ? "grabbing" : "grab",
userSelect: "none",
}}>
{cards.map(({ rel, i }) => {
// Drag right (positive dx) = pull previous card toward center → effRel goes negative
const dragRel = drag / SPACING;
const effRel = rel + dragRel;
const absEff = Math.abs(effRel);
const isCenter = absEff < 0.5;
// size: 188 at center, 152 at neighbors, smoothly interpolated
const w = Math.max(152, 188 - Math.min(absEff, 1) * 36);
// opacity: full at center, .22 at neighbor, 0 at rel=2
const op = absEff <= 1
? 1 - absEff * 0.78
: Math.max(0, 0.22 - (absEff - 1) * 0.22);
return (
{
if (Math.abs(drag) > 4) return;
if (isCenter) onOpen(works[i]);
else setFocus(i);
}}
/>
);
})}
{/* dots */}
{works.map((_, i) => (
);
}
function slugify(s) {
return s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
}
// ─── ImageGroupCarousel ────────────────────────────────────────────────
// Snap-scroll horizontal gallery for several images sharing one slot.
// Includes prev/next arrow buttons so swiping with mouse is one-tap easy.
function ImageGroupCarousel({ images, ratio = "16 / 9", theme, accent }) {
const scrollRef = React.useRef(null);
const [active, setActive] = React.useState(0);
const N = images.length;
const onScroll = () => {
const el = scrollRef.current;
if (!el) return;
const i = Math.round(el.scrollLeft / el.clientWidth);
if (i !== active && i >= 0 && i < N) setActive(i);
};
const goTo = (i) => {
const el = scrollRef.current;
if (!el) return;
const clamped = Math.max(0, Math.min(N - 1, i));
el.scrollTo({ left: clamped * el.clientWidth, behavior: "smooth" });
};
const arrowStyle = (side) => ({
position: "absolute",
top: "50%",
[side]: 8,
transform: "translateY(-50%)",
width: 36, height: 36,
borderRadius: "50%",
background: "rgba(0,0,0,.55)",
color: "#fff",
border: "none",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
backdropFilter: "blur(8px)",
transition: "background 160ms, opacity 160ms",
opacity: .9,
zIndex: 2,
});
return (
{images.map((src, i) => (
))}
{/* Prev / next arrows — hidden at the edges */}
{active > 0 && (
)}
{active < N - 1 && (
)}
{images.map((_, i) => (
);
}
// ─── Contact CTA (used on every case study, after Other Works) ────────────
// Smaller variant of the home CTA: no animation slot, just the two pill
// buttons. Title is light italic to keep the page airy and consistent with
// the home's "Let's Keep in Touch".
function ContactCTA({ theme, accent }) {
return (
{/* Animation slot — drop a Lottie/GIF/PNG; replaces the “Let's Keep in Touch” title */}
{/* ROSSO: the checkerboard is baked into the video — mask it with
the page white (positions in % of the 1920×1080 frame). */}
{theme.key === "rosso" && [
{ left: "8%", top: "10%", width: "28%", height: "14%" },
{ left: "62.4%", top: "75.8%", width: "28%", height: "13.8%" }
].map((m, k) =>
)}
);
}
// ─── Footer (mirror hero with cycling byes in many languages) ─────────────
function Footer({ theme, accent }) {
const barColor = theme.key === "blu" ? accent : "#fff";
return (
{/* Folder tab — protrudes above the footer like the portfolio section.
Fill matches the footer bg so the seam disappears. */}
Footer
{/* Waving hand — same slot mechanic as the hero. Drop a light-blue
(azzurra) hand animation here. Per-theme. */}
Designed by me, vibecoded with love
);
}
// ─── Root ──────────────────────────────────────────────────────────────────
function App() {
const [t, setTweak] = useTweaks(TWEAKS_DEFAULTS);
const [idx, setIdx] = useState(0); // 0 = blu, 1 = rosso
const [tab, setTab] = useState(null);
const [openProject, setOpenProject] = useState(null);
// Live background color of the red hero (spells recolor it) — keeps the
// page behind the Portfolio tab seamless with the game.
const [rossoBg, setRossoBg] = useState("#ff4438");
useEffect(() => {
const on = (e) => { if (e.data && typeof e.data.heroBg === "string") setRossoBg(e.data.heroBg); };
window.addEventListener("message", on);
return () => window.removeEventListener("message", on);
}, []);
React.useLayoutEffect(() => {
const root = document.getElementById("root");
if (root) root.scrollTop = 0;
document.documentElement.scrollTop = 0; document.body.scrollTop = 0;
window.scrollTo(0, 0);
}, [openProject]);
const themeKey = idx === 0 ? "blu" : "rosso";
const theme = THEMES[themeKey];
const accent = themeKey === "blu" ? t.bluAccent : t.rossoAccent;
const heroTheme = themeKey === "blu" ? theme : { ...theme, heroFg: "#fff", barColor: "rgba(255,255,255,.9)", dotInactive: "rgba(255,255,255,.4)", handTint: "#fff" };
const projects = PROJECTS[themeKey];
// ─ Swipe gesture: horizontal pan toggles theme. Live finger-follow with
// a transform so the swipe feels responsive on mobile, then snaps. ─────
const startRef = useRef(null);
const [swipeDX, setSwipeDX] = useState(0);
const [swiping, setSwiping] = useState(false);
const onPointerDown = (e) => {
startRef.current = { x: e.clientX, y: e.clientY, captured: false, id: e.pointerId, t: Date.now() };
};
const onPointerMove = (e) => {
const s = startRef.current;
if (!s) return;
const dx = e.clientX - s.x;
const dy = e.clientY - s.y;
if (!s.captured) {
// Capture as soon as horizontal intent is clear (lower threshold,
// looser ratio → triggers earlier and more reliably on touch).
if (Math.abs(dx) > 10 && Math.abs(dx) > Math.abs(dy)) {
s.captured = true;
setSwiping(true);
try { e.currentTarget.setPointerCapture?.(s.id); } catch (_) {}
} else if (Math.abs(dy) > 12) {
// Vertical scroll wins — abandon the gesture.
startRef.current = null;
return;
} else {
return;
}
}
// Resist swiping past the available direction (rubber-band at the edges).
let eff = dx;
if ((dx < 0 && idx === 1) || (dx > 0 && idx === 0)) eff = dx * 0.25;
setSwipeDX(eff);
};
const finish = (e) => {
const s = startRef.current;
startRef.current = null;
if (!s) { setSwipeDX(0); setSwiping(false); return; }
const dx = (e && e.clientX != null) ? e.clientX - s.x : swipeDX;
const dt = Date.now() - s.t;
const fast = Math.abs(dx) / Math.max(dt, 1) > 0.45; // px/ms flick
const past = Math.abs(dx) > 55;
if (s.captured && (fast || past) && Math.abs(dx) > 24) {
if (dx < 0 && idx === 0) setIdx(1);
else if (dx > 0 && idx === 1) setIdx(0);
}
setSwipeDX(0);
setSwiping(false);
};
const onPointerUp = finish;
// Blue-page die → staged hop to the Quest so the user stays oriented:
// 1) the page swipes out to the left like a real swipe, 2) the red page
// slides in, 3) a smooth scroll back up to the header, 4) the Quest starts.
const jumpToQuest = () => {
const W = window.innerWidth;
setSwiping(false);
setSwipeDX(-W * 0.9);
setTimeout(() => {
setSwiping(true);
setIdx(1);
setSwipeDX(W * 0.9);
requestAnimationFrame(() => requestAnimationFrame(() => { setSwiping(false); setSwipeDX(0); }));
setTimeout(() => {
const root = document.getElementById("root");
const sc = root && root.scrollHeight > root.clientHeight + 1 && getComputedStyle(root).overflowY !== "visible" ? root : null;
const from = sc ? sc.scrollTop : window.scrollY;
const dur = Math.min(1400, 500 + from * 0.25);
const t0 = performance.now();
const ease = (t) => 1 - Math.pow(1 - t, 3);
const step = (now) => {
const k = Math.min(1, (now - t0) / dur), y = from * (1 - ease(k));
if (sc) sc.scrollTop = y; else window.scrollTo(0, y);
if (k < 1) requestAnimationFrame(step);
else {
let n = 0;
const ping = () => {
const fr = document.querySelector('iframe[src^="hero-rosso.html"]');
if (fr && fr.contentWindow) fr.contentWindow.postMessage({ cmd: "startQuest" }, "*");
if (++n < 5) setTimeout(ping, 300);
};
setTimeout(ping, 250);
}
};
requestAnimationFrame(step);
}, 520);
}, 340);
};
// ─ Reset tab to about when switching themes
useEffect(() => {setTab(null);}, [idx]);
// Animation key: when theme changes, re-mount content tree
return (
{/* Conditional: home OR case study (mutually exclusive — keeps the
wrapper height bounded so there's no leftover black space below). */}
{openProject ? (
{ setOpenProject(p); }}
onClose={() => setOpenProject(null)}
/>
) : (
{themeKey === "blu" ? : }
{false &&
<>
}
{true ?
:
}
{false &&
I'm Giovanni Iacomino, a multidisciplinary designer turning ideas into distinctive visuals, identities, and digital experiences.
}
{false &&
Scrollkeyboard_arrow_down
}
{/* Portfolio section — darker on blu. Top-left flat: the folder tab
inside PortfolioHeader fills that corner & pokes up like a Mac folder. */}