Skip to content

🔥 build(profile): add myo_thu_ko profile #260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lwinmoepaing merged 1 commit into from
Mar 22, 2026
Merged

🔥 build(profile): add myo_thu_ko profile #260

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
327 changes: 327 additions & 0 deletions content/profile/myothuko.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,327 @@
---
name: Myo Thu Ko
description: Senior Frontend Engineer with 6+ years building scalable, high-performance web apps in FinTech & e-commerce. React, Next.js, TypeScript specialist.
image: "https://github.com/myothuko98.png"
tags:
- React
- Next.js
- TypeScript
- JavaScript
- Tailwind CSS
- Redux
- React Query
- Node.js
- NestJS
- AWS
- Frontend
- FinTech
---

<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 rounded-2xl overflow-hidden font-mono">

{/* ── Hero ── */}
<div className="relative px-6 pt-10 pb-8 border-b border-slate-700/50">

{/* Terminal bar */}
<div className="flex items-center gap-2 mb-6">
<span className="h-3 w-3 rounded-full bg-red-500"></span>
<span className="h-3 w-3 rounded-full bg-yellow-500"></span>
<span className="h-3 w-3 rounded-full bg-green-500"></span>
<span className="ml-3 text-slate-400 text-xs">~/myothuko — profile.tsx</span>
</div>

<div className="flex flex-col md:flex-row items-start md:items-center gap-6">

{/* Avatar with glowing ring */}
<div className="relative flex-shrink-0">
<div className="absolute inset-0 rounded-full bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-600 blur-md opacity-60 scale-110"></div>
<img
src="https://github.com/myothuko98.png"
alt="Myo Thu Ko"
className="relative h-24 w-24 rounded-full border-2 border-slate-700 object-cover"
onError={(e) => { e.currentTarget.src = "https://ui-avatars.com/api/?name=MTK&background=0f172a&color=22d3ee&size=96&bold=true"; }}
/>
</div>

{/* Name & title */}
<div className="flex-1">
<div className="text-slate-400 text-xs mb-1">
<span className="text-cyan-400">const</span>{" "}
<span className="text-yellow-300">engineer</span>{" "}
<span className="text-slate-400">=</span>{" "}
<span className="text-green-400">"Myo Thu Ko"</span><span className="text-slate-400">;</span>
</div>
<h1 className="text-2xl md:text-3xl font-bold text-white tracking-tight">Myo Thu Ko</h1>
<div className="text-cyan-400 text-sm mt-1 font-semibold">Senior Frontend Engineer</div>
<div className="text-slate-400 text-xs mt-1">React · Next.js · TypeScript · FinTech & E-Commerce</div>


</div>

{/* Links */}
<div className="flex flex-col gap-2 text-xs">
<a href="https://www.myothuko.dev" target="_blank" rel="noopener noreferrer"
className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-cyan-400 hover:text-cyan-300 transition-colors">
myothuko.dev
</a>
<a href="https://github.com/myothuko98" target="_blank" rel="noopener noreferrer"
className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-slate-300 hover:text-white transition-colors">
myothuko98
</a>
<a href="https://www.linkedin.com/in/myo-thu-ko/" target="_blank" rel="noopener noreferrer"
className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-blue-400 hover:text-blue-300 transition-colors">
LinkedIn
</a>
</div>
</div>
</div>

{/* ── Stats Bar ── */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-slate-700/30 border-b border-slate-700/50">
<div className="bg-slate-900/60 px-5 py-4 text-center">
<div className="text-2xl font-bold text-cyan-400">6+</div>
<div className="text-slate-400 text-xs mt-0.5">Years Exp.</div>
</div>
<div className="bg-slate-900/60 px-5 py-4 text-center">
<div className="text-2xl font-bold text-purple-400">40%</div>
<div className="text-slate-400 text-xs mt-0.5">Faster API</div>
</div>
<div className="bg-slate-900/60 px-5 py-4 text-center">
<div className="text-2xl font-bold text-yellow-400">40%</div>
<div className="text-slate-400 text-xs mt-0.5">Load Time ↓</div>
</div>
<div className="bg-slate-900/60 px-5 py-4 text-center">
<div className="text-2xl font-bold text-emerald-400">5+</div>
<div className="text-slate-400 text-xs mt-0.5">Features Shipped</div>
</div>
</div>

{/* ── Body ── */}
<div className="p-6 space-y-8">

{/* About */}
<div>
<div className="flex items-center gap-2 mb-4">
<span className="text-cyan-400 text-sm font-bold">{"// about_me"}</span>
<div className="flex-1 h-px bg-slate-700/50"></div>
</div>
<div className="text-slate-300 text-sm leading-relaxed">
Senior Frontend Engineer with <span className="text-cyan-400 font-semibold">6+ years</span> of experience building
scalable, high-performance web applications in <span className="text-yellow-400 font-semibold">FinTech</span>,
<span className="text-yellow-400 font-semibold">E-Commerce</span> and <span className="text-yellow-400 font-semibold">Digital Banking</span>. Proven track record optimizing user experience
through performance tuning, state management, and modern tooling. Strong collaborator with product, design, and backend teams.
</div>
</div>

{/* Tech Stack */}
<div>
<div className="flex items-center gap-2 mb-4">
<span className="text-cyan-400 text-sm font-bold">{"// tech_stack"}</span>
<div className="flex-1 h-px bg-slate-700/50"></div>
</div>
<div className="space-y-3">
<div>
<span className="text-slate-500 text-xs block mb-2">Frontend</span>
<div className="flex flex-wrap gap-2">
{["React", "Next.js", "TypeScript", "JavaScript (ES6+)", "HTML5", "CSS3", "Tailwind CSS"].map(t => (
<span key={t} className="text-xs bg-blue-950 border border-blue-800 text-blue-300 rounded-md px-2.5 py-1">{t}</span>
))}
</div>
</div>
<div>
<span className="text-slate-500 text-xs block mb-2">State & Data</span>
<div className="flex flex-wrap gap-2">
{["Redux", "Tanstack Query", "Zustand", "React Hook Form", "Context API"].map(t => (
<span key={t} className="text-xs bg-purple-950 border border-purple-800 text-purple-300 rounded-md px-2.5 py-1">{t}</span>
))}
</div>
</div>
<div>
<span className="text-slate-500 text-xs block mb-2">Backend & Cloud</span>
<div className="flex flex-wrap gap-2">
{["Node.js", "NestJS", "REST APIs", "MongoDB", "Postgresql", "SQL", "AWS", "DigitalOcean"].map(t => (
<span key={t} className="text-xs bg-emerald-950 border border-emerald-800 text-emerald-300 rounded-md px-2.5 py-1">{t}</span>
))}
</div>
</div>
<div>
<span className="text-slate-500 text-xs block mb-2">Testing & DevOps</span>
<div className="flex flex-wrap gap-2">
{["Jest", "Cypress", "React Testing Library", "GitHub Actions", "CI/CD", "Webpack"].map(t => (
<span key={t} className="text-xs bg-rose-950 border border-rose-800 text-rose-300 rounded-md px-2.5 py-1">{t}</span>
))}
</div>
</div>
</div>
</div>

{/* Experience */}
<div>
<div className="flex items-center gap-2 mb-4">
<span className="text-cyan-400 text-sm font-bold">{"// experience"}</span>
<div className="flex-1 h-px bg-slate-700/50"></div>
</div>
<div className="space-y-4">

{/* Accenture */}
<div className="relative pl-4 border-l-2 border-cyan-700">
<div className="absolute left-[-5px] top-1 h-2 w-2 rounded-full bg-cyan-400"></div>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 mb-2">
<div>
<div className="text-white font-semibold text-sm">Senior React Developer</div>
<div className="text-cyan-400 text-xs">Accenture SE Asia · Maybank MY & SG</div>
</div>
<span className="text-slate-500 text-xs bg-slate-800 rounded px-2 py-0.5 whitespace-nowrap">Jun 2024 – Dec 2025</span>
</div>
<ul className="text-slate-400 text-xs space-y-1 list-none">
<li>→ Implemented React Query caching → <span className="text-emerald-400 font-semibold">40% faster API response</span></li>
<li>→ Code splitting & lazy loading → <span className="text-emerald-400 font-semibold">~40% page load reduction</span></li>
<li>→ Offloaded heavy computations to Service Workers → eliminated UI freezes</li>
<li>→ Mentored 3+ junior engineers, automated deployments via GitHub Actions</li>
</ul>
</div>

{/* AYA */}
<div className="relative pl-4 border-l-2 border-purple-700">
<div className="absolute left-[-5px] top-1 h-2 w-2 rounded-full bg-purple-400"></div>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 mb-2">
<div>
<div className="text-white font-semibold text-sm">Software Engineer</div>
<div className="text-purple-400 text-xs">AYA Innovations Lab</div>
</div>
<span className="text-slate-500 text-xs bg-slate-800 rounded px-2 py-0.5 whitespace-nowrap">Dec 2022 – May 2024</span>
</div>
<ul className="text-slate-400 text-xs space-y-1">
<li>→ Built AYA Pay Wallet & BNPL platform (React, Next.js, Node.js, MongoDB)</li>
<li>→ Developed merchant & admin portals for payment management</li>
</ul>
</div>

{/* Vidya */}
<div className="relative pl-4 border-l-2 border-yellow-700">
<div className="absolute left-[-5px] top-1 h-2 w-2 rounded-full bg-yellow-400"></div>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 mb-2">
<div>
<div className="text-white font-semibold text-sm">Technical Team Lead</div>
<div className="text-yellow-400 text-xs">Vidya Media Myanmar</div>
</div>
<span className="text-slate-500 text-xs bg-slate-800 rounded px-2 py-0.5 whitespace-nowrap">Nov 2021 – Nov 2022</span>
</div>
<ul className="text-slate-400 text-xs space-y-1">
<li>→ Led team building learning platform (React, React Native, Node.js)</li>
<li>→ Owned sprint planning, code standards & team mentoring</li>
</ul>
</div>

{/* Dinger */}
<div className="relative pl-4 border-l-2 border-slate-600">
<div className="absolute left-[-5px] top-1 h-2 w-2 rounded-full bg-slate-400"></div>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 mb-2">
<div>
<div className="text-white font-semibold text-sm">Frontend / System Developer</div>
<div className="text-slate-400 text-xs">Dinger</div>
</div>
<span className="text-slate-500 text-xs bg-slate-800 rounded px-2 py-0.5 whitespace-nowrap">Dec 2019 – Oct 2021</span>
</div>
<ul className="text-slate-400 text-xs space-y-1">
<li>→ Built Dinger Shop e-commerce platform & Payment Gateway SaaS</li>
<li>→ Implemented multi-channel payment integration (banking, mobile wallets)</li>
</ul>
</div>
</div>
</div>

{/* Projects */}
<div>
<div className="flex items-center gap-2 mb-4">
<span className="text-cyan-400 text-sm font-bold">{"// featured_projects"}</span>
<div className="flex-1 h-px bg-slate-700/50"></div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">

<div className="bg-slate-800/50 border border-slate-700 rounded-xl p-4 hover:border-cyan-700 transition-colors">
<div className="flex items-start justify-between mb-2">
<div className="text-white text-sm font-semibold">Maybank Campaign Management System</div>
<span className="text-emerald-400 text-xs">↗</span>
</div>
<div className="text-slate-400 text-xs leading-relaxed mb-3">Responsive marketing ops platform with dynamic components, reusable data tables & visualizations. Shipped on time, zero prod incidents.</div>
<div className="flex flex-wrap gap-1">
{["Next.js", "TypeScript", "React Query", "Tailwind CSS"].map(t => (
<span key={t} className="text-xs bg-slate-900 text-slate-400 border border-slate-600 rounded px-1.5 py-0.5">{t}</span>
))}
</div>
</div>

<div className="bg-slate-800/50 border border-slate-700 rounded-xl p-4 hover:border-purple-700 transition-colors">
<div className="flex items-start justify-between mb-2">
<div className="text-white text-sm font-semibold">Maybank Workflow Engine Platform</div>
<span className="text-emerald-400 text-xs">↗</span>
</div>
<div className="text-slate-400 text-xs leading-relaxed mb-3">Full-stack configuration platform for workflow automation. Frontend for creating/managing business rules with NestJS backend APIs.</div>
<div className="flex flex-wrap gap-1">
{["Next.js", "NestJS", "TypeScript"].map(t => (
<span key={t} className="text-xs bg-slate-900 text-slate-400 border border-slate-600 rounded px-1.5 py-0.5">{t}</span>
))}
</div>
</div>

<div className="bg-slate-800/50 border border-slate-700 rounded-xl p-4 hover:border-yellow-700 transition-colors">
<div className="flex items-start justify-between mb-2">
<div className="text-white text-sm font-semibold">Dinger Payment Gateway</div>
<span className="text-emerald-400 text-xs">↗</span>
</div>
<div className="text-slate-400 text-xs leading-relaxed mb-3">SaaS payment gateway for merchants with multi-channel payments (banking, mobile wallets) and seamless redirection middleware.</div>
<div className="flex flex-wrap gap-1">
{["React", "Next.js", "Redux", "Kotlin", "Java Spring Boot"].map(t => (
<span key={t} className="text-xs bg-slate-900 text-slate-400 border border-slate-600 rounded px-1.5 py-0.5">{t}</span>
))}
</div>
</div>

<div className="bg-slate-800/50 border border-slate-700 rounded-xl p-4 hover:border-emerald-700 transition-colors">
<div className="flex items-start justify-between mb-2">
<div className="text-white text-sm font-semibold">Buy Now Pay Later (BNPL)</div>
<span className="text-emerald-400 text-xs">↗</span>
</div>
<div className="text-slate-400 text-xs leading-relaxed mb-3">E-commerce BNPL platform with client management, merchant integration, product catalog & customer application workflows.</div>
<div className="flex flex-wrap gap-1">
{["React", "Next.js", "Node.js", "MongoDB", "Formio"].map(t => (
<span key={t} className="text-xs bg-slate-900 text-slate-400 border border-slate-600 rounded px-1.5 py-0.5">{t}</span>
))}
</div>
</div>

</div>
</div>

{/* Education */}
<div>
<div className="flex items-center gap-2 mb-3">
<span className="text-cyan-400 text-sm font-bold">{"// education"}</span>
<div className="flex-1 h-px bg-slate-700/50"></div>
</div>
<div className="flex items-center gap-3 bg-slate-800/40 border border-slate-700 rounded-lg px-4 py-3">
<span className="text-2xl">🎓</span>
<div>
<div className="text-white text-sm font-semibold">B.C.Sc — Software Engineering</div>
<div className="text-slate-400 text-xs">University of Computer Studies, Yangon · Graduated Feb 2020</div>
</div>
</div>
</div>

{/* Footer */}
<div className="flex flex-col sm:flex-row items-center justify-between pt-2 border-t border-slate-700/50 gap-3">
<div className="text-slate-600 text-xs font-mono">// open to Frontend & Full-stack roles</div>
<div className="flex gap-3">
<a href="https://www.myothuko.dev" target="_blank" rel="noopener noreferrer"
className="text-xs text-cyan-400 hover:text-cyan-300 underline underline-offset-2 transition-colors">
Portfolio ↗
</a>
<a href="mailto:myothuko2012@gmail.com"
className="text-xs text-slate-400 hover:text-white underline underline-offset-2 transition-colors">
Email ↗
</a>
</div>
</div>
</div>
</div>
Loading