/*! * © 2026 Paulo Oliveira · All Rights Reserved * Fingerprint: pf-paulo-2026-r5-projects-7c41ab * * /projects route — freelance portfolio with high-fidelity interactive demos. * Demos copy the visual style of the real apps (intranet, Branca, e-reader, * transcribe, jobs) but use ONLY mock English data — no real API calls, * no customer information. */ /* global React, PROFILE, TopBar, FooterBlock */ (function () { const { useState, useEffect, useMemo, useRef } = React; /* ───────── shared atoms ───────── */ function Tag({ children }) { return ( {children} ); } /* ═══════════════════════════════════════════════════════════════════ PROJECTS HERO — name + portrait + cert + nav links ═══════════════════════════════════════════════════════════════════ */ function ProjectsHero() { const [i, setI] = useState(0); // URLs sincronizadas com HERO_CERTS em src/sections.jsx — cada cert // aponta pra credencial específica no Microsoft Learn (não pra index // genérica). Atualizar nos dois lugares se mudar. const certs = [ { label: "Azure Solutions Architect", ribbon: "EXPERT", url: "https://learn.microsoft.com/api/credentials/share/en-us/goncalves/7CDD13E96A0B7115?sharingId=ABCF060CC0240657", }, { label: "DevOps Engineer Expert", ribbon: "EXPERT", url: "https://learn.microsoft.com/api/credentials/share/en-us/goncalves/D6BB088068EF1599?sharingId=ABCF060CC0240657", }, { label: "Azure Security Engineer", ribbon: "ASSOC", url: "https://learn.microsoft.com/en-us/users/goncalves/credentials/certification/azure-security-engineer?tab=credentials-tab", }, ]; useEffect(() => { const id = setInterval(() => setI((x) => (x + 1) % certs.length), 4500); return () => clearInterval(id); }, []); const c = certs[i]; return (
Paulo Oliveira
// IDENTITY
Paulo Oliveira
Cloud & IT Infrastructure Engineer · Vancouver, BC
{c.ribbon}
Microsoft Certified
{c.label}
✓ Verify ↗
↗ Contact LinkedIn ← Home
); } function PortfolioDivider() { return (
$ ls ~/portfolio

Portfolio

// freelance proof-of-work

Selected demos across web development, Microsoft 365 administration and cybersecurity. Each demo is a faithful copy of the real product UI, running with mock English data — no customer information is exposed.

); } function MenuTabs({ active, onChange }) { const tabs = [ { id: "web", label: "Web Projects" }, { id: "ms", label: "Microsoft Projects" }, { id: "sec", label: "Security Projects" }, ]; return (
{tabs.map((t) => { const a = active === t.id; return ( ); })}
); } /* ═══════════════════════════════════════════════════════════════════ DEMO MODAL — full-screen overlay ═══════════════════════════════════════════════════════════════════ */ function DemoModal({ open, title, onClose, children }) { useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [open]); if (!open) return null; return (
{ if (e.target === e.currentTarget) onClose(); }} style={{ position: "fixed", inset: 0, zIndex: 200, background: "rgba(0,0,0,0.78)", backdropFilter: "blur(6px)", padding: "20px", display: "flex", flexDirection: "column", animation: "fadeIn .25s ease", }}>
· demo · {title}
{children}
); } /* ═══════════════════════════════════════════════════════════════════ DEMO 1 · Intranet (faithful to ABC+ real design system) Tokens: navy #0B2545, blue #1E5BA8, soft #f2f4f7, panel #fff, border #d7dde5, Inter font. ═══════════════════════════════════════════════════════════════════ */ function DemoIntranetV1_Unused() { const [section, setSection] = useState("home"); const NAV = [ { group: "Main", items: [ { id: "home", label: "Home", icon: HomeIcon, badge: null }, ]}, { group: "Modules", items: [ { id: "hr", label: "Time Clock", icon: ClockIcon, badge: null }, { id: "at", label: "Technical Service", icon: WrenchIcon, badge: 38 }, { id: "rental", label: "Rentals", icon: BoxIcon, badge: null }, { id: "commercial",label: "Commercial", icon: TrendIcon, badge: null }, { id: "logistics", label: "Logistics", icon: TruckIcon, badge: null, accent: "#F97316" }, ]}, { group: "Communication", items: [ { id: "comms", label: "Suggestions", icon: ChatIcon, badge: 4 }, { id: "policies", label: "Policies", icon: BookIcon }, { id: "training", label: "Training", icon: CapIcon }, ]}, { group: "Administration", items: [ { id: "clients", label: "Client Database", icon: DbIcon }, { id: "users", label: "User Management", icon: UsersIcon }, { id: "audit", label: "Audit Log", icon: ShieldIcon }, { id: "settings", label: "Settings", icon: GearIcon }, ]}, ]; return (
{/* ───────── Sidebar ───────── */} {/* ───────── Body ───────── */}
{/* Top bar */}
Search clients, OS, contracts…
3 Demo User
DU
{section === "home" && } {section === "at" && } {section !== "home" && section !== "at" && }
); } /* ───────── Intranet · Home dashboard ───────── */ function IntranetHome() { return (
{/* Greeting */}

Good morning, Demo! 👋

Tuesday, April 30, 2026

{/* Hero gradient cards */}
} gradient="linear-gradient(135deg, #10B981 0%, #047857 100%)" shadow="0 14px 28px -10px rgba(5,150,105,0.45)" /> } gradient="linear-gradient(135deg, #F97316 0%, #C2410C 100%)" shadow="0 14px 28px -10px rgba(249,115,22,0.45)" /> } gradient="linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%)" shadow="0 14px 28px -10px rgba(29,78,216,0.45)" />
{/* Calendar + Notices */}
04/30 Today Tuesday
{/* Mini calendar */}
April 2026
{["S","M","T","W","T","F","S"].map((d,i) => (
{d}
))} {Array.from({ length: 35 }, (_, i) => { const day = i - 2; if (day < 1 || day > 30) return
; const isToday = day === 30; const hasTasks = [3, 7, 12, 18, 22, 25, 30].includes(day); const hasEvt = [5, 14, 21, 28].includes(day); return (
{day} {(hasTasks || hasEvt) && ( {hasTasks && } {hasEvt && } )}
); })}
{/* Tasks */}
Today's Tasks
3 done · 2 pending
{[ { text: "Call Northwest Power — quote follow-up", tag: "commercial", done: false }, { text: "Approve Yukon Mining repeater repair", tag: "at", done: false }, { text: "Send invoice to Pacific Logistics", tag: "rental", done: true }, { text: "Verify driver Carlos route #4", tag: "logistics", done: true }, { text: "Schedule monthly retro with Lucas", tag: "commercial", done: true }, ].map((t, i) => (
{t.done ? "✓" : ""} {TASK_TAG[t.tag].label} {t.text}
))}
{/* Notices column */}
Important Notices
{[ { ic: MegaIcon, bg: "rgba(99,102,241,.14)", fg: "#4338CA", title: "New Q3 Branding Guidelines", sub: "Please review the updated logo and color palette by next Monday.", t: "2 h ago" }, { ic: ShieldIcon2, bg: "rgba(16,185,129,.14)", fg: "#047857", title: "Security Training Mandatory", sub: "Phishing simulation results shared — module #3 expires May 15.", t: "yesterday" }, { ic: CalIcon, bg: "rgba(249,115,22,.14)", fg: "#C2410C", title: "Office Closed · Victoria Day", sub: "Monday, May 19 — emergency line will remain available 24h.", t: "2 d ago" }, ].map((n, i) => { const Ic = n.ic; return (
{n.title}
{n.sub}
{n.t}
); })}
{/* Rentals + Upcoming Events */}
Rentals 142 active
Recent Contracts
{[ { c: "Pacific Logistics", d: "04/22" }, { c: "Northwest Power Co.", d: "04/19" }, { c: "Granite Construction", d: "04/15" }, { c: "Coast Security Ltd.", d: "04/11" }, ].map((r) => (
{r.c} {r.d}
))}
Renewal
{[ { c: "Pacific Logistics", days: 12, danger: true }, { c: "Coast Security Ltd.", days: 27, danger: false }, { c: "Yukon Mining Group", days: 41, danger: false }, ].map((r) => (
{r.c} {r.days}d
))}
Upcoming Customer Events
{[ { src: "rental", t: "Northwest Power Co.", d: "05/04" }, { src: "comms", t: "Granite — quarterly review", d: "05/06" }, { src: "rental", t: "Coast Security pickup", d: "05/09" }, { src: "comms", t: "Pacific Logistics retro", d: "05/12" }, { src: "rental", t: "Yukon Mining radio audit", d: "05/14" }, ].map((e, i) => (
{e.src === "rental" ? "Rental" : "Suggestion"} {e.t} {e.d}
))}
{/* Daily Tip */}
Daily Tip 📡 Radio Communications
Check the battery before delivery
Always confirm full charge and run a transmission test before handing a radio over to the customer. Prevents avoidable support calls.
3 / 12
); } /* ───────── Intranet · Technical Service module ───────── */ function IntranetAT() { const tickets = [ { id: "1187", client: "Northwest Power Co.", radio: "MOTOTRBO XPR3500e", status: "In Diagnostic", color: "#F59E0B", days: 3 }, { id: "1188", client: "Pacific Logistics", radio: "DEM 400 (Mobile)", status: "Awaiting Quote", color: "#0891B2", days: 5 }, { id: "1189", client: "Yukon Mining Group", radio: "SLR 5700 Repeater", status: "In Repair", color: "#7C3AED", days: 8 }, { id: "1190", client: "Coast Security Ltd.", radio: "CP200d (Portable)", status: "Ready for Pickup",color: "#059669", days: 1 }, { id: "1191", client: "Granite Construction",radio: "SL 2600 (UHF)", status: "Approved", color: "#0B2545", days: 2 }, { id: "1192", client: "Aurora Logistics", radio: "XPR 7550e", status: "Awaiting Parts", color: "#DC2626", days: 12 }, ]; return (

Technical Service · Tickets

38 open tickets across 22 customers

Open service orders
{tickets.map((t) => ( ))}
OS # Client Equipment Days Status
OS-2026-{t.id} {t.client} {t.radio} 7 ? "#DC2626" : t.days > 3 ? "#D97706" : "#059669", fontWeight: 600 }}>{t.days}d ● {t.status} open ↗
); } function IntranetPlaceholder({ section }) { const labels = { hr: "Time Clock", rental: "Rentals", commercial: "Commercial", logistics: "Logistics", comms: "Suggestions", policies: "Policies", training: "Training", clients: "Client Database", users: "User Management", audit: "Audit Log", settings: "Settings", }; return (
Demo · placeholder
{labels[section] || section}

Fully wired in the real intranet (mobile-friendly forms, RBAC, kanban, CSV imports, real-time tracking). Demo focuses on Home + Technical Service to keep the preview snappy.

); } function HeroCardI({ title, subtitle, icon, gradient, shadow, onClick }) { return ( ); } const TASK_TAG = { at: { label: "Service", color: "#DC2626", bg: "#FEF2F2", border: "#FCA5A5" }, rental: { label: "Rental", color: "#2563EB", bg: "#EFF6FF", border: "#BFDBFE" }, logistics: { label: "Logistics", color: "#F97316", bg: "#FFF7ED", border: "#FED7AA" }, commercial: { label: "Commercial", color: "#059669", bg: "#ECFDF5", border: "#6EE7B7" }, }; const iIconBtn = { background: "transparent", border: "none", cursor: "pointer", padding: 4, color: "#1f2937", display: "grid", placeItems: "center" }; const iBtnPrim = { background: "#0B2545", color: "#fff", border: "none", borderRadius: 4, padding: "7px 14px", fontWeight: 600, fontSize: 12, cursor: "pointer", fontFamily: "Inter,sans-serif" }; const iBtnSec = { background: "#fff", color: "#4b5563", border: "1px solid #d7dde5", borderRadius: 4, padding: "7px 14px", fontWeight: 500, fontSize: 12, cursor: "pointer", fontFamily: "Inter,sans-serif" }; const iTh = { padding: "10px 16px", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em" }; const iTd = { padding: "12px 16px", color: "#1f2937" }; /* ═══════════════════════════════════════════════════════════════════ DEMO 2 · Branca Languages (faithful red + white + Branca image) ═══════════════════════════════════════════════════════════════════ */ function DemoLanguageSchool() { const [step, setStep] = useState("login"); // login | lang | grammar | lesson const [activeMode, setActiveMode] = useState("revisao"); // revisao | celpip | entrevista const [nbTab, setNbTab] = useState("notes"); // notes | rules | cards | glossary const [nbColor, setNbColor] = useState("#1e3a5f"); const [nbText, setNbText] = useState("Simple Present — habits & routines.\nShe drinks coffee every morning.\nI work in tech support, I help users every day.\n\nTime markers: always, usually, often, sometimes, rarely, never.\nThey come between the subject and the verb.\n\nThird person singular adds -s in the affirmative,\nbut uses do/does in negatives & questions.\n"); if (step === "login") { return (

Language School

Learn languages with someone who truly cares 🐾

Mascot

Language School · English · French · Spanish · Italian · Demo session — no real account needed

); } if (step === "lang") { const langs = [ { id: "en", flag: "🇨🇦", name: "English", sub: "CELPIP · Mock Interview · Grammar", active: true }, { id: "fr", flag: "🇫🇷", name: "Français", sub: "Coming soon", active: false }, { id: "es", flag: "🇪🇸", name: "Español", sub: "Coming soon", active: false }, { id: "it", flag: "🇮🇹", name: "Italiano", sub: "Coming soon", active: false }, ]; return (

Who's studying?

Pick a language to keep separate notes & progress

{langs.map((L) => { const baseStyle = { borderRadius: 24, padding: "32px 18px 26px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 8, transition: "all .2s ease", position: "relative", overflow: "hidden", }; if (L.active) { return ( ); } return (
{L.flag}
{L.name}
{L.sub}
SOON
); })}

Demo: only English is unlocked. Other languages are wired and waiting for content release.

); } /* Grammar topic list — full Branca-style layout Modes: Grammar (revisao) | CELPIP | Interview Only the first topic per mode is clickable; rest are grayed (preview) */ const TOPICS = { revisao: [ { id: "simple-present", title: "Simple Present", subtitle: "Facts, habits & routines", lvl: ["A1","A2","B1"], icon: "🌟", c: "#10B981" }, { id: "present-continuous", title: "Present Continuous", subtitle: "Actions happening right now", lvl: ["A1","A2"], icon: "🎬", c: "#3B82F6" }, { id: "simple-past", title: "Simple Past", subtitle: "Completed actions in the past", lvl: ["A2","B1"], icon: "📜", c: "#8B5CF6" }, { id: "past-continuous", title: "Past Continuous", subtitle: "Actions in progress in the past", lvl: ["B1"], icon: "⏪", c: "#EC4899" }, { id: "future", title: "Future Tenses", subtitle: "Will, going to & present continuous", lvl: ["A2","B1"], icon: "🚀", c: "#F59E0B" }, { id: "present-perfect", title: "Present Perfect", subtitle: "Past with present relevance", lvl: ["B1","B2"], icon: "🔗", c: "#EF4444" }, { id: "modal-verbs", title: "Modal Verbs", subtitle: "Can, should, must, might…", lvl: ["B1","B2"], icon: "🔑", c: "#0891B2" }, { id: "passive-voice", title: "Passive Voice", subtitle: "Focus on the action, not the actor", lvl: ["B2"], icon: "🔄", c: "#7C3AED" }, { id: "conditionals", title: "Conditionals", subtitle: "Real & hypothetical situations", lvl: ["B1","B2"], icon: "🧠", c: "#F97316" }, { id: "phrasal-verbs", title: "Phrasal Verbs", subtitle: "Common multi-word verbs", lvl: ["B1","B2","C1"], icon: "🧩", c: "#0EA5E9" }, { id: "reported-speech", title: "Reported Speech", subtitle: "Indirect speech with backshift", lvl: ["B2","C1"], icon: "💬", c: "#84CC16" }, { id: "advanced-register", title: "Advanced Register", subtitle: "Formal vs informal in context", lvl: ["C1"], icon: "🎓", c: "#6366F1" }, ], celpip: [ { id: "celpip-overview", title: "CELPIP — Exam Overview", subtitle: "Format, scoring & strategy", lvl: ["Test"], icon: "📋", c: "#0B2545" }, { id: "celpip-reading", title: "CELPIP Reading", subtitle: "Skimming, scanning, distractors", lvl: ["Test"], icon: "📖", c: "#3B82F6" }, { id: "celpip-listening", title: "CELPIP Listening", subtitle: "Audio strategy & note-taking", lvl: ["Test"], icon: "🎧", c: "#8B5CF6" }, { id: "celpip-speaking", title: "CELPIP Speaking", subtitle: "Fluency, pace and templates", lvl: ["Test"], icon: "🎤", c: "#EF4444" }, { id: "celpip-writing-email", title: "CELPIP Writing · Email", subtitle: "Email task structure", lvl: ["Test"], icon: "✉️", c: "#F59E0B" }, { id: "celpip-writing-survey", title: "CELPIP Writing · Survey", subtitle: "Opinion task structure", lvl: ["Test"], icon: "📊", c: "#10B981" }, { id: "celpip-vocabulary", title: "CELPIP High-Yield Vocab", subtitle: "Topic clusters and synonyms", lvl: ["Test"], icon: "📚", c: "#0891B2" }, { id: "celpip-supertips", title: "CELPIP Super-Tips", subtitle: "Common pitfalls and shortcuts", lvl: ["Test"], icon: "💡", c: "#7C3AED" }, ], entrevista: [ { id: "iv-tellme", title: "Tell Me About Yourself", subtitle: "Opening pitch · 60 sec script", lvl: ["IT","SLP","General"], icon: "👋", c: "#10B981" }, { id: "iv-strength", title: "Strengths & Weaknesses", subtitle: "STAR-method answers", lvl: ["IT","SLP","General"], icon: "💪", c: "#3B82F6" }, { id: "iv-conflict", title: "Conflict Resolution", subtitle: "Difficult coworker scenarios", lvl: ["IT","SLP","General"], icon: "⚖️", c: "#F59E0B" }, { id: "iv-tech", title: "Technical Deep-Dive", subtitle: "Stack & system design", lvl: ["IT"], icon: "🛠", c: "#7C3AED" }, { id: "iv-clinical", title: "Clinical Case Study", subtitle: "Patient scenarios · SLP track", lvl: ["SLP"], icon: "🩺", c: "#EF4444" }, { id: "iv-behavior", title: "Behavioral Questions", subtitle: "STAR · 7 common patterns", lvl: ["IT","SLP","General"], icon: "🧠", c: "#0891B2" }, { id: "iv-money", title: "Salary Negotiation", subtitle: "Anchoring and counter-offers", lvl: ["IT","SLP","General"], icon: "💰", c: "#84CC16" }, { id: "iv-questions",title: "Smart Questions to Ask", subtitle: "What to ask the interviewer", lvl: ["IT","SLP","General"], icon: "❓", c: "#6366F1" }, ], }; const modeMeta = { revisao: { label: "Grammar", desc: "Lessons & paged exercises", color: "#0f4c81", count: 38, complete: 12 }, celpip: { label: "CELPIP", desc: "Official Canadian test prep", color: "#c0392b", count: 8, complete: 1 }, entrevista: { label: "Interview", desc: "Mock interview with AI coach", color: "#7C3AED", count: 8, complete: 2 }, }; const list = TOPICS[activeMode]; const meta = modeMeta[activeMode]; if (step === "lesson") { const NB_TABS = [ { id: "notes", label: "Notes", icon: "📝", count: 6 }, { id: "rules", label: "Rules", icon: "📋", count: 1 }, { id: "cards", label: "Flashcards", icon: "🃏", count: 12 }, { id: "glossary", label: "Glossary", icon: "📖", count: 8 }, ]; return (
{/* Topbar */}
GRAMMAR Simple Present · Facts, habits & routines
🔥 4-day streak B1
{/* 2-column body — lesson + notebook */}
{/* Lesson column */}
{/* Hero */}
Lesson 1 · Grammar

Simple Present

Used for habits, routines, general truths and scheduled facts. The most common tense in everyday English.

{/* When to use */}
When to use it
  • Daily habits — I take the train every morning.
  • Repeated actions — She works from home on Fridays.
  • General facts — Water boils at 100°C.
  • Schedules and timetables — The flight leaves at 6:40.
{/* Conjugation table */}
Conjugation — verb "to work"
AFFIRMATIVE
I work
You work
He / She works
We work
They work
NEGATIVE
I don't work
You don't work
He / She doesn't work
We don't work
They don't work
QUESTION
Do I work?
Do you work?
Does he/she work?
Do we work?
Do they work?
💡 Watch out: third-person singular always adds -s in the affirmative, but does/doesn't takes the -s in negatives and questions.
{/* Time markers */}
Common time markers
{["always", "usually", "often", "sometimes", "rarely", "never", "every day", "on Mondays", "twice a week", "in the morning"].map((w) => ( {w} ))}
{/* Try it */}
Quick check
Exercise 1 of 8

Complete: "She _______ (drink) coffee every morning."

{["drink", "drinks", "is drinking", "drinked"].map((opt, i) => ( ))}
{/* Exercises section — fictional listening + reading */}
Exercises
Practice with audio and a short reading. Demo content.
2 / 8 completed
{/* Listening card */}
🎧
Listening — Maya's Morning
0:38 · narrated · slow pace
{/* Mock waveform */}
{Array.from({ length: 64 }, (_, i) => { const h = 4 + ((i * 31) % 24); const passed = i < 18; return ; })}
0:110:38
{/* Reading card */}
📄
Reading — Same scene, in writing
~ 60 words · A2–B1

Maya lives in Vancouver. She wakes up at six o'clock every weekday. She drinks black coffee, reads the news for ten minutes and walks her dog around the block. She doesn't take the bus — she rides her bike to the office. On Fridays she works from home and finishes her week with a long video call.

{/* Questions */}
Comprehension · 4 questions
{[ { q: "1. What time does Maya wake up on weekdays?", opts: ["At five o'clock", "At six o'clock", "At seven o'clock", "She doesn't say"], correct: 1, src: "🎧 + 📄", }, { q: "2. How does she go to work?", opts: ["She drives", "She takes the bus", "She rides her bike", "She walks"], correct: 2, src: "📄", }, { q: "3. The verb \"drinks\" in the reading is in the…", opts: ["Simple Present", "Present Continuous", "Simple Past", "Future"], correct: 0, src: "grammar focus", }, { q: "4. What does Maya do on Fridays?", opts: ["She goes to a meeting downtown", "She works from home", "She takes the day off", "She rides longer"], correct: 1, src: "🎧 + 📄", }, ].map((row, i) => (
{row.q} {row.src}
{row.opts.map((opt, j) => ( ))}
))}
💡 Tip — both the audio and the text describe a routine. Notice how every action uses Simple Present.
{/* Notebook column */}
{/* Notebook header */}
📓 My Notebook SAVED · 2s ago
{/* Tabs */}
{NB_TABS.map((t) => { const a = nbTab === t.id; return ( ); })}
{/* Tab content */}
{nbTab === "notes" && (
{/* Topic header pill */}
Topic · Simple Present
{/* Color picker */}
Color {[ { c: "#1e3a5f", n: "navy" }, { c: "#dc2626", n: "red" }, { c: "#059669", n: "green" }, { c: "#7c3aed", n: "purple" }, { c: "#d97706", n: "amber" }, { c: "#0f172a", n: "ink" }, ].map((p) => ( ))}
{/* Lined paper notebook */}