// ════════════════════════════════════════════════════════════════ // RECRUITER VIEW — plain-language, recruiter-friendly portfolio. // Same facts as the developer theme, translated out of engineer-speak. // ════════════════════════════════════════════════════════════════ function recScrollTo(id) { const el = document.getElementById(id); if (!el) return; const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: 'smooth' }); } // simple stroke icons (standard UI iconography) const Ico = { layers: (p) => , card: (p) => , rocket: (p) => , check: (p) => , spark: (p) => , arrow: (p) => , ext: (p) => , mail: (p) => , }; // ─── theme switch (top, always visible) ───────────────────────────── function ThemeSwitch({ theme, setTheme, showHint }) { const isRec = theme === 'recruiter'; return (
{showHint && (
{isRec ? 'Switch to Terminal view ↗' : 'Switch to Light view ↗'}
)} ); } // ─── top bar ──────────────────────────────────────────────────────── function RecTop() { const links = [ ['work', 'My work'], ['experience', 'Experience'], ['skills', 'Strengths'], ['about', 'About'], ]; return (
{ e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}> T Thwin Zan
); } // ─── hero ─────────────────────────────────────────────────────────── function RecHero() { return (
Open to new roles · Available June 2026

I build software that
people rely on every day.

I'm Thwin Zan — a software engineer who designs, builds, and launches complete web products from start to finish. I've worked on payment systems used by millions of people, and I build and run my own products on the side.

{ e.preventDefault(); recScrollTo('work'); }}> See my work {Ico.arrow()} {Ico.mail()} Email me
Currently
Software Engineer at Capital One
); } // ─── trust strip ──────────────────────────────────────────────────── function RecTrust() { return (
Trusted to build at
Capital One United Wholesale Mortgage
); } // ─── what I do ────────────────────────────────────────────────────── function RecDo() { const items = [ { n: 'i', ico: Ico.layers, h: 'Build complete products', p: 'From the first idea to the finished website, I handle the whole thing — what you see on screen, the behind-the-scenes logic, and everything in between.' }, { n: 'ii', ico: Ico.card, h: 'Make payments work', p: 'I specialise in the tricky, important parts like taking payments online — making sure money moves safely and correctly, every single time.' }, { n: 'iii', ico: Ico.rocket, h: 'Ship real, working software', p: "I don't just make demos. I launch products that real people and businesses use today — and I keep them running smoothly." }, ]; return (
What I do

In plain English, here's how I help.

{items.map((it, i) => (
{it.n}
{it.ico()}

{it.h}

{it.p}

))}
); } // ─── featured work ────────────────────────────────────────────────── function RecFeatured() { const points = [ 'Every restaurant gets its own branded website', 'Customers browse the menu and pay in a few taps', 'Payments go directly and securely to each restaurant', 'Designed, built, and launched entirely by me', ]; return (
Featured work · Live online

An online ordering website for restaurants.

Fork & Merge

I designed and built a complete platform that lets restaurants take orders and payments online. Each restaurant gets its own branded website, and the money goes straight to them — safely and automatically. It's live and in use today.

    {points.map((p) => (
  • {Ico.check()}{p}
    • ))}
Visit the live website {Ico.ext()}
🔒 food.devtzan.com
); } // ─── experience ───────────────────────────────────────────────────── function RecExperience() { const rows = [ { when: '2024 — Now', co: 'Capital One', role: 'Software Engineer · Card & Payments', blurb: "I help build the systems that process credit and debit card payments for millions of customers — the technology that quietly makes every purchase work, and that people only notice when it doesn't.", }, { when: '2023 — 2024', co: 'United Wholesale Mortgage', role: 'Software Engineer · Employee Platform', blurb: 'I built internal tools and a company platform used every day by thousands of employees, owning each feature from idea to finished product.', }, ]; return (
Experience

Where I've done the work.

{rows.map((r) => (
{r.when}

{r.co}

{r.role}

{r.blurb}

))}
); } // ─── strengths + tools ────────────────────────────────────────────── function RecSkills() { const strengths = [ ['Builds the whole thing', 'Comfortable across the entire product — design, the screens people see, and the engine behind them.'], ['Handles the high-stakes parts', "Years of experience with payments and money movement, where mistakes aren't an option."], ['Moves fast, finishes', 'Big-company discipline paired with the speed of someone who ships their own products.'], ['Makes complex feel simple', 'Turns complicated technology into something clear and easy to use.'], ]; const tools = ['Web development', 'Online payments', 'Databases', 'Cloud hosting', 'Security & login', 'Email systems', 'TypeScript', 'React']; return (
Strengths

What I bring to a team.

{strengths.map(([b, s]) => (
{Ico.check()} {b}. {s}
))}

Areas & tools I work with

{tools.map((t) => {t})}

Happy to go deeper on any of these — just ask.

); } // ─── about ────────────────────────────────────────────────────────── function RecAbout() { return (
“I love building things that are genuinely useful — and making complicated technology feel simple.”

I've had the chance to work at large companies on systems used by millions of people, and I also build and run my own products on the side — from the first sketch all the way to a live, paying website.

That mix gives me both the discipline of big-company engineering and the speed and ownership of someone used to shipping on their own. I care about the details that make software dependable, and about keeping the experience simple for the people using it.

); } // ─── contact ──────────────────────────────────────────────────────── function RecContact() { return (
Let's talk

Looking for someone who can build it
and ship it? Let's chat.

I'm currently open to new opportunities. The best way to reach me is by email — I'd genuinely love to hear from you.

{Ico.mail()} hi@devtzan.com LinkedIn {Ico.ext()} See my code {Ico.ext()}
); } function RecFooter() { return ( ); } // ─── recruiter view assembly + scroll reveal ──────────────────────── function RecruiterView() { React.useEffect(() => { const root = document.querySelector('.rec'); if (!root) return; const els = [...document.querySelectorAll('.rec [data-reveal]')]; if (!els.length) return; const reveal = (el) => el.classList.add('is-in'); const inView = (el) => { const r = el.getBoundingClientRect(); return r.top < window.innerHeight * 0.92 && r.bottom > 0; }; // turn on the hidden start-state, then immediately reveal whatever is // already on screen so the first paint animates in (not stuck hidden). root.setAttribute('data-anim', 'on'); requestAnimationFrame(() => els.forEach((el) => { if (inView(el)) reveal(el); })); let io = null; if ('IntersectionObserver' in window) { io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); els.forEach((el) => io.observe(el)); } // belt-and-suspenders: a scroll listener reveals anything entering view, // in case the observer is unreliable in the host environment. const onScroll = () => { let remaining = false; els.forEach((el) => { if (el.classList.contains('is-in')) return; if (inView(el)) reveal(el); else remaining = true; }); if (!remaining) window.removeEventListener('scroll', onScroll); }; window.addEventListener('scroll', onScroll, { passive: true }); // final safety net: never leave anything hidden const safety = setTimeout(() => els.forEach(reveal), 4500); return () => { if (io) io.disconnect(); window.removeEventListener('scroll', onScroll); clearTimeout(safety); }; }, []); return (
); } Object.assign(window, { ThemeSwitch, RecruiterView });