// ============================================================================
// pages.jsx — routes
//
// Home : full-bleed cover image (Tiago Madaleno style)
// Sobre : about with a short bio
// Trabalhos : categories with project lists (Clara de Cápua style)
// Obra : title + small caption + vertical stack of images
// Exposições / Contacto / CV : clean lists
//
// No hairlines. No bold copy. Nav is the only place with bold text.
// ============================================================================
const { useState: useStateP, useMemo: useMemoP, useEffect: useEffectP } = React;
function Placeholder({ ratio, style: extra }) {
return (
imagem
);
}
// ============================================================================
// HOME
// ============================================================================
function PageHome({ lang }) {
const [openSection, setOpenSection] = useStateP(null);
useEffectP(() => {
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = ''; };
}, []);
const artisticSections = [
{
key: 'fotos',
label: lang === 'pt' ? 'FOTOS' : 'PHOTOS',
items: WORKS.filter(w => (w.categories || []).includes('fotoperformance')),
getHref: w => `#/obra/${w.id}`,
getLabel: w => w.title,
},
{
key: 'video',
label: 'VÍDEOS',
items: WORKS.filter(w => (w.categories || []).includes('videoperformance')),
getHref: w => `#/obra/${w.id}`,
getLabel: w => w.title,
},
{
key: 'happening',
label: 'HAPPENING',
items: WORKS.filter(w => (w.categories || []).includes('happening')),
getHref: w => `#/obra/${w.id}`,
getLabel: w => w.title,
},
{
key: 'sons',
label: lang === 'pt' ? 'SONS' : 'SOUNDS',
items: SOUNDS,
getHref: s => `#/som/${s.id}`,
getLabel: s => s.title[lang],
},
{
key: 'exposicoes',
label: lang === 'pt' ? 'EXPOSIÇÕES' : 'EXHIBITIONS',
items: EXHIBITIONS,
getHref: e => `#/exposicao/${e.id}`,
getLabel: e => e.title[lang],
},
];
const sobre = { key: 'sobre', label: lang === 'pt' ? 'SOBRE' : 'ABOUT', href: '#/sobre' };
const contacto = { key: 'contacto', label: lang === 'pt' ? 'CONTACTO' : 'CONTACT', href: '#/contacto' };
const cv = { key: 'cv', label: 'CV', href: '#/cv' };
// Order: FOTOS · VÍDEOS · HAPPENING · SONS · EXPOSIÇÕES · SOBRE · CONTACTO · CV
const allSections = [
artisticSections[0], // fotos
artisticSections[1], // vídeos
artisticSections[2], // happening
artisticSections[3], // sons
artisticSections[4], // exposicoes
sobre,
contacto,
cv,
];
return (
<>
{/* Big centered nav */}
{allSections.map(sec => (
sec.items ? setOpenSection(sec.key) : setOpenSection(null)}
onMouseLeave={() => setOpenSection(null)}
>
{sec.href ? (
{sec.label}
) : (
{sec.label}
)}
{sec.items && (
)}
))}
{/* Name + tagline overlay at bottom-left */}
carolina leal
{lang === 'pt' ? 'artista visual' : 'visual artist'}
);
}
// ============================================================================
// SOBRE
// ============================================================================
function PageSobre({ lang }) {
const t = T[lang];
const paras = ABOUT[lang];
return (
{t.sobre.heading}
{paras.map((p, i) => (
{p}
))}
{t.sobre.bioTitle}
{t.sobre.bio}
);
}
// ============================================================================
// TRABALHOS — Clara de Cápua style: categories as plain headings, projects
// listed underneath as plain links.
// ============================================================================
function PageTrabalhos({ lang, category }) {
const t = T[lang];
const groups = useMemoP(() => {
if (category) {
const cat = CATEGORIES.find(c => c.id === category);
if (!cat) return [];
return [{ cat, works: WORKS.filter(w => (w.categories || []).includes(cat.id)) }];
}
return CATEGORIES.map(cat => ({
cat,
works: WORKS.filter(w => (w.categories || []).includes(cat.id)),
}));
}, [category]);
return (
{category
? (groups[0]?.cat?.[lang] || t.nav.trabalhos).toLowerCase()
: t.nav.trabalhos.toLowerCase()}
{groups.map((g) => (
);
}
function WorksGroup({ group, lang, showHeading }) {
if (!group.works.length) return null;
return (
{showHeading && (
{group.cat[lang]}
)}
);
}
// ============================================================================
// OBRA — title + caption + vertical stack of images, with description after.
// One special case: the TV interaction for "corpo-transparente".
// ============================================================================
function PageObra({ lang, id }) {
const t = T[lang];
const work = WORKS.find(w => w.id === id);
if (!work) {
return (
);
}
const primaryCat = (work.categories || [])[0];
const cat = CATEGORIES.find(c => c.id === primaryCat);
const idx = WORKS.findIndex(w => w.id === work.id);
const prev = idx > 0 ? WORKS[idx - 1] : null;
const next = idx < WORKS.length - 1 ? WORKS[idx + 1] : null;
const catLabels = (work.categories || [])
.map(id => (CATEGORIES.find(c2 => c2.id === id) || {})[lang])
.filter(Boolean)
.join(' · ');
return (
{/* Breadcrumb */}
{/* Header */}
{/* Body */}
{/* Description + ficha técnica (Clara-style: simple text block, no boxes) */}
{work.description[lang]}
{work.medium &&
{lang === 'pt' ? 'Mapa interativo' : 'Interactive map'}
)}
/>
)}
{work.youtubeUrl && (
{lang === 'pt' ? 'Ver playlist no YouTube' : 'Watch playlist on YouTube'}
)}
/>
)}
{/* Prev / next — text only, no rows or boxes */}
{label.toLowerCase()}
{value}
);
}
function getVimeoId(src) {
if (!src) return null;
const m = src.match(/vimeo\.com\/(?:video\/)?(\d+)/);
return m ? m[1] : null;
}
function VideoBlock({ src }) {
const containerRef = React.useRef(null);
const [shouldLoad, setShouldLoad] = React.useState(false);
const vimeoId = getVimeoId(src);
React.useEffect(() => {
const el = containerRef.current;
if (!el) return;
if (!('IntersectionObserver' in window)) { setShouldLoad(true); return; }
const observer = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) { setShouldLoad(true); observer.disconnect(); } },
{ rootMargin: '400px 0px' }
);
observer.observe(el);
return () => observer.disconnect();
}, []);
return (
{shouldLoad ? (
vimeoId ? (
) : (
)
) : (
)}
{bars.map((bar, i) => (
))}
{title}
);
}
function Slider({ items, renderItem, lang }) {
const [idx, setIdx] = useStateP(0);
const total = items.length;
if (total === 0) return null;
const prev = () => setIdx(i => (i - 1 + total) % total);
const next = () => setIdx(i => (i + 1) % total);
return (
{renderItem(items[idx], idx)}
{total > 1 && (
<>
‹
›
)}
{total > 1 && (
{idx + 1} / {total}
)}
);
}
function ObraBody({ work, lang }) {
const hasImages = work.images && work.images.length > 0;
const hasVideos = work.videos && work.videos.length > 0;
if (!hasImages && !hasVideos) {
return (
{lang === 'pt'
? 'imagens em produção. documentação disponível em breve.'
: 'images in production. documentation available soon.'}
);
}
if (work.id === 'tudo-e-nada' && hasImages) {
const imgs = work.images.slice(0, 3);
return (
{imgs.map((img, i) => (
))}
{hasVideos && work.videos[0] && (
)}
);
}
// --- limites-corporais: two series, each a slider ---
if (work.id === 'limites-corporais' && work.series) {
return (
{work.series.map((serie, si) => (
{serie.label[lang]}
(
))}
(
item.type === 'video' ? (
{g1.length > 0 && (
{g1.map((img, i) =>
)}
)}
{g2.length > 0 && (
{g2.map((img, i) =>
)}
)}
{g3.length > 0 && (
{g3.map((img, i) =>
)}
)}
{vids.length > 0 && (
)}
{firstImg && (
)}
{(secondImg || thirdImg) && (
{secondImg &&
}
{thirdImg &&
}
)}
{restImgs.length > 0 && (
{restImgs.map((img, i) => (
))}
)}
{imagesFirst ? imagesEl : videosEl}
{imagesFirst ? videosEl : imagesEl}
);
}
// ============================================================================
// EXPOSIÇÕES — text list grouped by year, Clara-style (no boxes)
// ============================================================================
function PageExposicoes({ lang }) {
const t = T[lang];
const grouped = useMemoP(() => {
const m = new Map();
EXHIBITIONS.forEach(e => {
if (!m.has(e.year)) m.set(e.year, []);
m.get(e.year).push(e);
});
return Array.from(m.entries()).sort((a, b) => b[0].localeCompare(a[0]));
}, []);
return (
{t.expos.title.toLowerCase()}
{grouped.map(([year, items]) => (
))}
);
}
// ============================================================================
// CONTACTO — clean list, no boxes
// ============================================================================
function PageContacto({ lang }) {
const t = T[lang];
return (
{t.contact.title.toLowerCase()}
);
}
function ContactRow({ label, children }) {
return (
{label.toLowerCase()}
{children}
);
}
// ============================================================================
// CV
// ============================================================================
function PageCV({ lang }) {
const t = T[lang];
return (
{CV.map((sec, i) => (
{sec.section[lang].toLowerCase()}
{sec.items.map((it, j) => (
{it.date || ''}
{it[lang]}
))}
))}
{t.cv.updated}
);
}
function CVLine({ label, value }) {
return (
{label}
{value}
);
}
// ============================================================================
// EXPOSIÇÃO INDIVIDUAL
// ============================================================================
function PageExposicao({ lang, id }) {
const t = T[lang];
const expo = EXHIBITIONS.find(e => e.id === id);
if (!expo) {
return (
{lang === 'pt' ? 'Exposição não encontrada.' : 'Exhibition not found.'}
);
}
const expoImages = Array.isArray(expo.images) ? expo.images : [];
const [firstExpImg, secondExpImg, thirdExpImg, ...restExpImgs] = expoImages;
return (
{/* Breadcrumb */}
{/* Header */}
{/* Photo grid */}
{firstExpImg &&
}
{(secondExpImg || thirdExpImg) && (
{secondExpImg &&
}
{thirdExpImg &&
}
)}
{restExpImgs.length > 0 && (
{restExpImgs.map((img, i) => (
))}
)}
{/* Description */}
{expo.description && (expo.description[lang]) ? (
{expo.description[lang]}
) : (
{lang === 'pt' ? 'descrição em preparação.' : 'description in preparation.'}
)}
{/* Ficha técnica */}
{t.nav.sons.toLowerCase()}
);
}
function LiveWaveform({ audioRef, seed }) {
const canvasRef = React.useRef(null);
const rafRef = React.useRef(null);
const stateRef = React.useRef({ analyser: null, audioCtx: null, initialized: false });
React.useEffect(() => {
const audio = audioRef.current;
if (!audio) return;
const s = stateRef.current;
function setup() {
if (s.initialized) {
if (s.audioCtx && s.audioCtx.state === 'suspended') s.audioCtx.resume();
return;
}
s.initialized = true;
const AudioCtx = window.AudioContext || window.webkitAudioContext;
if (!AudioCtx) return;
s.audioCtx = new AudioCtx();
const source = s.audioCtx.createMediaElementSource(audio);
s.analyser = s.audioCtx.createAnalyser();
s.analyser.fftSize = 256;
s.analyser.smoothingTimeConstant = 0.82;
source.connect(s.analyser);
s.analyser.connect(s.audioCtx.destination);
}
function drawFrame() {
const canvas = canvasRef.current;
if (!canvas || !s.analyser) return;
rafRef.current = requestAnimationFrame(drawFrame);
const W = canvas.offsetWidth || 800;
if (canvas.width !== W) canvas.width = W;
const H = canvas.height;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, W, H);
const buf = new Uint8Array(s.analyser.frequencyBinCount);
s.analyser.getByteFrequencyData(buf);
const barCount = 80;
const gap = 2;
const barW = (W - gap * (barCount - 1)) / barCount;
for (let i = 0; i < barCount; i++) {
const idx = Math.floor(i * buf.length / barCount);
const v = buf[idx] / 255;
const h = Math.max(2, v * H);
const opacity = 0.1 + v * 0.75;
ctx.fillStyle = `rgba(26,26,26,${opacity.toFixed(2)})`;
ctx.fillRect(i * (barW + gap), (H - h) / 2, barW, h);
}
}
function drawIdle() {
cancelAnimationFrame(rafRef.current);
const canvas = canvasRef.current;
if (!canvas) return;
const W = canvas.offsetWidth || 800;
if (canvas.width !== W) canvas.width = W;
const H = canvas.height;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, W, H);
const barCount = 80;
const gap = 2;
const barW = (W - gap * (barCount - 1)) / barCount;
for (let i = 0; i < barCount; i++) {
const h = 2 + Math.abs(Math.sin(i * 0.4 + seed * 2) * 10);
ctx.fillStyle = 'rgba(26,26,26,0.12)';
ctx.fillRect(i * (barW + gap), (H - h) / 2, barW, h);
}
}
function onPlay() { setup(); drawFrame(); }
function onPause() { cancelAnimationFrame(rafRef.current); drawIdle(); }
function onEnded() { cancelAnimationFrame(rafRef.current); drawIdle(); }
audio.addEventListener('play', onPlay);
audio.addEventListener('pause', onPause);
audio.addEventListener('ended', onEnded);
setTimeout(drawIdle, 30);
return () => {
cancelAnimationFrame(rafRef.current);
audio.removeEventListener('play', onPlay);
audio.removeEventListener('pause', onPause);
audio.removeEventListener('ended', onEnded);
try { if (s.audioCtx) s.audioCtx.close(); } catch(e) {}
s.analyser = null; s.audioCtx = null; s.initialized = false;
};
}, []);
return (
{sound.title[lang].toLowerCase()}
{sound.year}
{sound.description[lang]}
{sound.duration &&
);
}
Object.assign(window, {
PageHome, PageSobre, PageTrabalhos, PageObra, PageExposicoes, PageExposicao, PageContacto, PageCV, PageSons, PageSom
});