/* global React, CONTENT, EXPERIENCE, COURSES, WRITINGS, HandDrawnScene,
SizingTab, ChemistryTab, DispatchTab, ParetoTab */
const { useState, useEffect } = React;
/* ============== HERO ============== */
const Hero = ({ lang }) => {
const t = CONTENT[lang].hero;
return (
<>
{/* FULL-SCREEN animated landing (no text) */}
{/* scroll hint */}
↓ scroll
{/* INTRO text moved to second scroll */}
ardiancandra.com · {t.tagline}
{t.name}
{t.subtitle}
);
};
/* ============== ABOUT ============== */
const About = ({ lang }) => {
const t = CONTENT[lang].about;
return (
{t.tag}
{t.title}
{t.body.map((p, i) => (
{p}
))}
{t.facts.map(([v, l], i) => (
))}
);
};
/* ============== SIMULATION SECTION ============== */
const Simulation = ({ lang }) => {
const t = CONTENT[lang].sim;
const [tab, setTab] = useState(0);
const Tabs = [SizingTab, ChemistryTab, DispatchTab, ParetoTab];
const Active = Tabs[tab];
return (
{t.tag}
{t.title}
{t.subtitle}
{t.tabs.map((label, i) => (
))}
);
};
/* ============== EXPERIENCE ============== */
const Experience = ({ lang }) => {
const t = CONTENT[lang].experience;
return (
{t.tag}
{t.title}
{EXPERIENCE.map((e, i) => (
{e.role}
{e.org}
{e.bullets[lang].map((b, j) => - {b}
)}
))}
);
};
/* ============== COURSES ============== */
const Courses = ({ lang }) => {
const t = CONTENT[lang].courses;
return (
{t.tag}
{t.title}
{COURSES.map((c, i) => (
KTH · Project {String(i + 1).padStart(2, '0')}
{c.title}
{c.desc[lang]}
{c.tags.map((tag, j) => {tag})}
))}
);
};
/* ============== WRITINGS ============== */
const Writings = ({ lang }) => {
const t = CONTENT[lang].writings;
return (
{t.tag}
{t.title}
{WRITINGS.map((w, i) => (
{w.kind === 'featured' &&
}
{w.kind === 'impact' &&
}
{w.kind === 'research' &&
}
{w.kicker}
{w.status}
{w.title}
{w.body[lang]}
{w.tags.map((tag, j) => {tag})}
))}
);
};
/* visuals for writing cards — minimal, on-theme, no AI slop */
const WritingFeatureVisual = () => (
);
const WritingImpactVisual = () => (
);
const WritingResearchVisual = ({ i }) => {
const hues = ['#52B788', '#F4A261', '#264653', '#C44536'];
const c = hues[i % hues.length];
return (
);
};
/* ============== FOOTER / CONTACT ============== */
const Contact = ({ lang }) => {
const t = CONTENT[lang].contact;
return (
);
};
window.Hero = Hero;
window.About = About;
window.Simulation = Simulation;
window.Experience = Experience;
window.Courses = Courses;
window.Writings = Writings;
window.Contact = Contact;