/*! * © 2026 Paulo Oliveira · All Rights Reserved * Fingerprint: pf-paulo-2026-r3-d4c602ab */ /* global React, PROFILE, EXPERIENCE, SKILLS, CERTS, EDUCATION, TRAITS, Pill, TypeLine, CopyBtn, SectionHead, Brackets, SideRail, TopBar, Marquee */ const { useState: useStateS, useEffect: useEffectS } = React; // ───────── Microsoft Cert Badge Rotator (3 certs, auto + manual) ───────── const HERO_CERTS = [ { label: "Azure Solutions Architect", sub: "✓ Expert · Verify ↗", url: "https://learn.microsoft.com/api/credentials/share/en-us/goncalves/7CDD13E96A0B7115?sharingId=ABCF060CC0240657", ribbon: "EXPERT", }, { label: "DevOps Engineer Expert", sub: "✓ Expert · Verify ↗", url: "https://learn.microsoft.com/api/credentials/share/en-us/goncalves/D6BB088068EF1599?sharingId=ABCF060CC0240657", ribbon: "EXPERT", }, { label: "Azure Security Engineer", sub: "✓ Associate · Verify ↗", url: "https://learn.microsoft.com/en-us/users/goncalves/credentials/certification/azure-security-engineer?tab=credentials-tab", ribbon: "ASSOC", }, ]; function CertBadge() { const [i, setI] = React.useState(0); const [paused, setPaused] = React.useState(false); const total = HERO_CERTS.length; React.useEffect(() => { if (paused) return; const id = setInterval(() => setI((x) => (x + 1) % total), 5000); return () => clearInterval(id); }, [paused, total]); const c = HERO_CERTS[i]; const go = (delta) => setI((x) => (x + delta + total) % total); return (
setPaused(true)} onMouseLeave={() => setPaused(false)} > {c.ribbon}
Microsoft Certified
{c.label}
{c.sub}
{/* discreet manual prev/next */}
{HERO_CERTS.map((_, j) => ( ))}
); } // ───────── Hero ───────── function Hero() { return (
{PROFILE.status}
SCROLL TO NAVIGATE
↓
PAULO
OLIVEIRA_
Paulo Oliveira
// PROFILE
{">"} {PROFILE.role} — 9+ years across Microsoft 365, Azure identity & security, Intune endpoint management, and enterprise IT infrastructure. Currently based in Vancouver, BC.
↗ Contact me LinkedIn
); } // ───────── Contact Directory side-card ───────── function ContactDirectory() { const items = [ { label: "Current Location", value: PROFILE.location, status: "Active", copy: false }, { label: "Email", value: PROFILE.email, copy: true }, { label: "LinkedIn", value: PROFILE.linkedin, copy: true, href: PROFILE.linkedinUrl }, ]; return (
// SYSTEM / COMMUNICATIONS

Contact Directory

● ONLINE
{items.map((it, i) => (
{it.label}
{it.href ? ( {it.value} ) : ( it.value )} {it.status && ( ● {it.status} )}
{it.copy && }
))}
Connection: Secure ID: 2026-SYS
); } // ───────── Summary section ───────── function Summary() { return (
paulo@azure-cloud:~/summary — zsh —
$ whoami --verbose

{PROFILE.summary}

$ ls ~/traits_
{TRAITS.map((t) => {t})}
{PROFILE.metrics.map((m) => (
{m.v}
{m.l}
))}
); } // ───────── Experience timeline ───────── function Experience() { const itemsRef = React.useRef([]); React.useEffect(() => { const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduce) { itemsRef.current.forEach((el) => el && el.classList.add("is-visible")); return; } const io = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("is-visible"); } else if (entry.boundingClientRect.top > 0) { // user scrolled back up past it — dim again so the reveal replays entry.target.classList.remove("is-visible"); } }); }, { threshold: 0.28, rootMargin: "0px 0px -8% 0px" } ); itemsRef.current.forEach((el) => el && io.observe(el)); return () => io.disconnect(); }, []); const renderChip = (s) => { const url = (window.TECH_DOCS || {})[s]; if (url) { return ( {s} ); } return {s}; }; return (
{EXPERIENCE.map((job, i) => (
(itemsRef.current[i] = el)}>

{job.companyUrl ? ( {job.company} ) : ( job.company )}

{job.partner && ( — {job.partner} )} {job.current && ( ● Active )}
{job.role}
{job.location}
Period
{job.period}
    {job.bullets.map((b, j) => (
  • ▹ {b}
    • ))}
{job.stack.map(renderChip)}
))}
); } // ───────── Skills grid ───────── function Skills() { return (
{SKILLS.map((g, i) => (
›

{g.title}

{String(g.items.length).padStart(2, "0")}
{g.items.map((it) => {it})}
))}
); } // Track mouse for skill-card glow position if (typeof window !== "undefined" && !window.__skillGlowBound) { window.__skillGlowBound = true; document.addEventListener("mousemove", (e) => { const card = e.target.closest && e.target.closest(".skill-card"); if (!card) return; const r = card.getBoundingClientRect(); card.style.setProperty("--mx", ((e.clientX - r.left) / r.width * 100) + "%"); card.style.setProperty("--my", ((e.clientY - r.top) / r.height * 100) + "%"); }); } // ───────── Certifications (infinite auto-rotating carousel, 2s) ───────── function Certifications() { const trackRef = React.useRef(null); const [active, setActive] = React.useState(0); const [paused, setPaused] = React.useState(false); const userScrolling = React.useRef(false); const scrollTimeout = React.useRef(null); // Programmatic scroll (instant for wrap, smooth otherwise) const goTo = (i, behavior = "smooth") => { const t = trackRef.current; if (!t) return; const idx = ((i % CERTS.length) + CERTS.length) % CERTS.length; userScrolling.current = false; t.scrollTo({ left: idx * t.clientWidth, behavior }); setActive(idx); }; const onScroll = () => { const t = trackRef.current; if (!t) return; userScrolling.current = true; clearTimeout(scrollTimeout.current); scrollTimeout.current = setTimeout(() => { const i = Math.round(t.scrollLeft / t.clientWidth); if (i !== active) setActive(i); userScrolling.current = false; }, 80); }; // Infinite auto-advance every 2s, pause on hover/focus React.useEffect(() => { if (paused) return; const id = setInterval(() => { goTo(active + 1, "smooth"); }, 2000); return () => clearInterval(id); }, [active, paused]); return (

Active credentials — click any card to verify directly on the issuer's site.

setPaused(true)} onMouseLeave={() => setPaused(false)} onFocusCapture={() => setPaused(true)} onBlurCapture={() => setPaused(false)} > {/* Arrows — always enabled (infinite); hidden on touch viewports via CSS */} {/* Track */}
{CERTS.map((c, i) => (
{/* corner ID */}
{String(i + 1).padStart(2, "0")} / {String(CERTS.length).padStart(2, "0")}
{/* LEFT — big badge */}
{/* Microsoft logo for MS certs */} {c.issuer === "Microsoft" && (
)} {c.issuer === "Amazon Web Services" && (
aws
)}
{c.code}
{c.level}
{/* scan dots */}
{/* RIGHT — text */}
▸ {c.issuer}

{c.title}

{c.desc}

{c.skills.map((s) => ( {s} ))}
✓ ACTIVE · VERIFIED view credential ↗
))}
{/* Pagination dots */}
{CERTS.map((c, i) => ( ))}
[ {String(active + 1).padStart(2, "0")} / {String(CERTS.length).padStart(2, "0")} ] · {CERTS[active].title.toUpperCase()} {paused ? "⏸ paused" : "▶ auto"}
{/* progress bar */}
); } // ───────── Education ───────── function Education() { return (
{EDUCATION.map((e, i) => (
{String(i + 1).padStart(2, "0")}
{e.school}
{e.degree} — {e.location}
{e.period}
))}
); } // ───────── Footer ───────── function FooterBlock() { return ( ); } Object.assign(window, { Hero, ContactDirectory, Summary, Experience, Skills, Certifications, Education, FooterBlock });