// React app for landing page. Uses window.PORTO_DATA from data.js. const { useState, useEffect, useRef } = React; const D = window.PORTO_DATA; // ── Icons (inline SVG) ───────────────────────────────────── const Icon = { github: ( ), mail: ( ), wa: ( ), download: ( ), arrow: ( ), back: ( ), linkedin: ( ), }; // ── Reveal-on-scroll ─────────────────────────────────────── function useReveal() { const ref = useRef(null); useEffect(() => { if (!ref.current) return; const obs = new IntersectionObserver( (entries) => entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('is-visible'); }), { threshold: 0.12, rootMargin: '0px 0px -40px 0px' } ); obs.observe(ref.current); return () => obs.disconnect(); }, []); return ref; } function Reveal({ children, delay = 0, as: Tag = 'div', className = '', ...rest }) { const ref = useReveal(); return ( {children} ); } // ── Scrollspy: track section closest to a trigger line near top of viewport ─ function useScrollspy(ids) { const [active, setActive] = useState(ids[0]); useEffect(() => { function update() { const triggerLine = window.innerHeight * 0.35; let current = ids[0]; for (const id of ids) { const el = document.getElementById(id); if (!el) continue; const top = el.getBoundingClientRect().top; if (top - triggerLine <= 0) current = id; } setActive(current); } update(); window.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update); return () => { window.removeEventListener('scroll', update); window.removeEventListener('resize', update); }; }, [ids.join(',')]); return active; } // ── Side / hero ──────────────────────────────────────────── function Side() { const navItems = [ { id: 'about', label: 'About' }, { id: 'work', label: 'Work' }, { id: 'experience', label: 'Experience' }, { id: 'skills', label: 'Skills' }, { id: 'contact', label: 'Contact' }, ]; const active = useScrollspy(navItems.map((n) => n.id)); return ( ); } // ── About ───────────────────────────────────────────────── function About() { return (
01 · About
{D.intro.map((p, i) => ( {p} ))} {D.about.map((p, i) => ( {p} ))}
); } // ── Work / Projects ─────────────────────────────────────── function Work() { return (
02 · Selected Work
{D.projects.map((p, i) => (
{p.year}
{p.title} ↗
{p.kicker}

{p.summary}

{p.stack.map((s) => {s})}
))}
); } // ── Experience ──────────────────────────────────────────── function Experience() { return (
03 · Experience
{D.experience.map((e, i) => (
{e.period}

{e.role}

{e.company}
{e.location}
    {e.bullets.map((b, j) =>
  • {b}
    • )}
))} {D.education.map((ed, i) => (
{ed.period}

{ed.school}

{ed.program}
Education
 ))}
); } // ── Skills ──────────────────────────────────────────────── function Skills() { return (
04 · Skills & Stack
{D.skills.map((g, i) => (

{g.group}

    {g.items.map((s) =>
  • {s}
    • )}
))}
); } // ── Contact ─────────────────────────────────────────────── function Contact() { return (
05 · Contact

Mau ngobrol soal proyek atau peluang kerja?

Boleh diskusi soal proyek, kolaborasi teknis, atau sekadar obrolan seputar otomasi industri dan enterprise web. Biasanya saya respons dalam 1×24 jam.

{Icon.mail}djalfin8@gmail.com {Icon.linkedin}LinkedIn {Icon.github}GitHub
© {new Date().getFullYear()} Djonathan Alfin Ellsyan Mustofa
); } // ── App ─────────────────────────────────────────────────── function App() { return (
); } ReactDOM.createRoot(document.getElementById('root')).render(); // Console easter egg for fellow devs console.log( '%c>_ hi 👋', 'font-family: monospace; font-size: 16px; color: #34d399; font-weight: 700;' ); console.log( '%cLooking for the source? https://github.com/Alfin712/PersonalPorto', 'font-family: monospace; font-size: 12px; color: #9a9aa3;' );