Skip to content

Commit 079e194

Browse files
myothuko98myothuko98
authored
🔥 build(profile): add myo_thu_ko profile (#260)
1 parent eebdfac commit 079e194

1 file changed

Lines changed: 327 additions & 0 deletions

File tree

‎content/profile/myothuko.mdx‎

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
---
2+
name: Myo Thu Ko
3+
description: Senior Frontend Engineer with 6+ years building scalable, high-performance web apps in FinTech & e-commerce. React, Next.js, TypeScript specialist.
4+
image: "https://github.com/myothuko98.png"
5+
tags:
6+
- React
7+
- Next.js
8+
- TypeScript
9+
- JavaScript
10+
- Tailwind CSS
11+
- Redux
12+
- React Query
13+
- Node.js
14+
- NestJS
15+
- AWS
16+
- Frontend
17+
- FinTech
18+
---
19+
20+
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 rounded-2xl overflow-hidden font-mono">
21+
22+
{/* ── Hero ── */}
23+
<div className="relative px-6 pt-10 pb-8 border-b border-slate-700/50">
24+
25+
{/* Terminal bar */}
26+
<div className="flex items-center gap-2 mb-6">
27+
<span className="h-3 w-3 rounded-full bg-red-500"></span>
28+
<span className="h-3 w-3 rounded-full bg-yellow-500"></span>
29+
<span className="h-3 w-3 rounded-full bg-green-500"></span>
30+
<span className="ml-3 text-slate-400 text-xs">~/myothuko — profile.tsx</span>
31+
</div>
32+
33+
<div className="flex flex-col md:flex-row items-start md:items-center gap-6">
34+
35+
{/* Avatar with glowing ring */}
36+
<div className="relative flex-shrink-0">
37+
<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>
38+
<img
39+
src="https://github.com/myothuko98.png"
40+
alt="Myo Thu Ko"
41+
className="relative h-24 w-24 rounded-full border-2 border-slate-700 object-cover"
42+
onError={(e) => { e.currentTarget.src = "https://ui-avatars.com/api/?name=MTK&background=0f172a&color=22d3ee&size=96&bold=true"; }}
43+
/>
44+
</div>
45+
46+
{/* Name & title */}
47+
<div className="flex-1">
48+
<div className="text-slate-400 text-xs mb-1">
49+
<span className="text-cyan-400">const</span>{" "}
50+
<span className="text-yellow-300">engineer</span>{" "}
51+
<span className="text-slate-400">=</span>{" "}
52+
<span className="text-green-400">"Myo Thu Ko"</span><span className="text-slate-400">;</span>
53+
</div>
54+
<h1 className="text-2xl md:text-3xl font-bold text-white tracking-tight">Myo Thu Ko</h1>
55+
<div className="text-cyan-400 text-sm mt-1 font-semibold">Senior Frontend Engineer</div>
56+
<div className="text-slate-400 text-xs mt-1">React · Next.js · TypeScript · FinTech & E-Commerce</div>
57+
58+
59+
</div>
60+
61+
{/* Links */}
62+
<div className="flex flex-col gap-2 text-xs">
63+
<a href="https://www.myothuko.dev" target="_blank" rel="noopener noreferrer"
64+
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">
65+
myothuko.dev
66+
</a>
67+
<a href="https://github.com/myothuko98" target="_blank" rel="noopener noreferrer"
68+
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">
69+
myothuko98
70+
</a>
71+
<a href="https://www.linkedin.com/in/myo-thu-ko/" target="_blank" rel="noopener noreferrer"
72+
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">
73+
LinkedIn
74+
</a>
75+
</div>
76+
</div>
77+
</div>
78+
79+
{/* ── Stats Bar ── */}
80+
<div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-slate-700/30 border-b border-slate-700/50">
81+
<div className="bg-slate-900/60 px-5 py-4 text-center">
82+
<div className="text-2xl font-bold text-cyan-400">6+</div>
83+
<div className="text-slate-400 text-xs mt-0.5">Years Exp.</div>
84+
</div>
85+
<div className="bg-slate-900/60 px-5 py-4 text-center">
86+
<div className="text-2xl font-bold text-purple-400">40%</div>
87+
<div className="text-slate-400 text-xs mt-0.5">Faster API</div>
88+
</div>
89+
<div className="bg-slate-900/60 px-5 py-4 text-center">
90+
<div className="text-2xl font-bold text-yellow-400">40%</div>
91+
<div className="text-slate-400 text-xs mt-0.5">Load Time ↓</div>
92+
</div>
93+
<div className="bg-slate-900/60 px-5 py-4 text-center">
94+
<div className="text-2xl font-bold text-emerald-400">5+</div>
95+
<div className="text-slate-400 text-xs mt-0.5">Features Shipped</div>
96+
</div>
97+
</div>
98+
99+
{/* ── Body ── */}
100+
<div className="p-6 space-y-8">
101+
102+
{/* About */}
103+
<div>
104+
<div className="flex items-center gap-2 mb-4">
105+
<span className="text-cyan-400 text-sm font-bold">{"// about_me"}</span>
106+
<div className="flex-1 h-px bg-slate-700/50"></div>
107+
</div>
108+
<div className="text-slate-300 text-sm leading-relaxed">
109+
Senior Frontend Engineer with <span className="text-cyan-400 font-semibold">6+ years</span> of experience building
110+
scalable, high-performance web applications in <span className="text-yellow-400 font-semibold">FinTech</span>,
111+
<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
112+
through performance tuning, state management, and modern tooling. Strong collaborator with product, design, and backend teams.
113+
</div>
114+
</div>
115+
116+
{/* Tech Stack */}
117+
<div>
118+
<div className="flex items-center gap-2 mb-4">
119+
<span className="text-cyan-400 text-sm font-bold">{"// tech_stack"}</span>
120+
<div className="flex-1 h-px bg-slate-700/50"></div>
121+
</div>
122+
<div className="space-y-3">
123+
<div>
124+
<span className="text-slate-500 text-xs block mb-2">Frontend</span>
125+
<div className="flex flex-wrap gap-2">
126+
{["React", "Next.js", "TypeScript", "JavaScript (ES6+)", "HTML5", "CSS3", "Tailwind CSS"].map(t => (
127+
<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>
128+
))}
129+
</div>
130+
</div>
131+
<div>
132+
<span className="text-slate-500 text-xs block mb-2">State & Data</span>
133+
<div className="flex flex-wrap gap-2">
134+
{["Redux", "Tanstack Query", "Zustand", "React Hook Form", "Context API"].map(t => (
135+
<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>
136+
))}
137+
</div>
138+
</div>
139+
<div>
140+
<span className="text-slate-500 text-xs block mb-2">Backend & Cloud</span>
141+
<div className="flex flex-wrap gap-2">
142+
{["Node.js", "NestJS", "REST APIs", "MongoDB", "Postgresql", "SQL", "AWS", "DigitalOcean"].map(t => (
143+
<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>
144+
))}
145+
</div>
146+
</div>
147+
<div>
148+
<span className="text-slate-500 text-xs block mb-2">Testing & DevOps</span>
149+
<div className="flex flex-wrap gap-2">
150+
{["Jest", "Cypress", "React Testing Library", "GitHub Actions", "CI/CD", "Webpack"].map(t => (
151+
<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>
152+
))}
153+
</div>
154+
</div>
155+
</div>
156+
</div>
157+
158+
{/* Experience */}
159+
<div>
160+
<div className="flex items-center gap-2 mb-4">
161+
<span className="text-cyan-400 text-sm font-bold">{"// experience"}</span>
162+
<div className="flex-1 h-px bg-slate-700/50"></div>
163+
</div>
164+
<div className="space-y-4">
165+
166+
{/* Accenture */}
167+
<div className="relative pl-4 border-l-2 border-cyan-700">
168+
<div className="absolute left-[-5px] top-1 h-2 w-2 rounded-full bg-cyan-400"></div>
169+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 mb-2">
170+
<div>
171+
<div className="text-white font-semibold text-sm">Senior React Developer</div>
172+
<div className="text-cyan-400 text-xs">Accenture SE Asia · Maybank MY & SG</div>
173+
</div>
174+
<span className="text-slate-500 text-xs bg-slate-800 rounded px-2 py-0.5 whitespace-nowrap">Jun 2024 – Dec 2025</span>
175+
</div>
176+
<ul className="text-slate-400 text-xs space-y-1 list-none">
177+
<li>→ Implemented React Query caching → <span className="text-emerald-400 font-semibold">40% faster API response</span></li>
178+
<li>→ Code splitting & lazy loading → <span className="text-emerald-400 font-semibold">~40% page load reduction</span></li>
179+
<li>→ Offloaded heavy computations to Service Workers → eliminated UI freezes</li>
180+
<li>→ Mentored 3+ junior engineers, automated deployments via GitHub Actions</li>
181+
</ul>
182+
</div>
183+
184+
{/* AYA */}
185+
<div className="relative pl-4 border-l-2 border-purple-700">
186+
<div className="absolute left-[-5px] top-1 h-2 w-2 rounded-full bg-purple-400"></div>
187+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 mb-2">
188+
<div>
189+
<div className="text-white font-semibold text-sm">Software Engineer</div>
190+
<div className="text-purple-400 text-xs">AYA Innovations Lab</div>
191+
</div>
192+
<span className="text-slate-500 text-xs bg-slate-800 rounded px-2 py-0.5 whitespace-nowrap">Dec 2022 – May 2024</span>
193+
</div>
194+
<ul className="text-slate-400 text-xs space-y-1">
195+
<li>→ Built AYA Pay Wallet & BNPL platform (React, Next.js, Node.js, MongoDB)</li>
196+
<li>→ Developed merchant & admin portals for payment management</li>
197+
</ul>
198+
</div>
199+
200+
{/* Vidya */}
201+
<div className="relative pl-4 border-l-2 border-yellow-700">
202+
<div className="absolute left-[-5px] top-1 h-2 w-2 rounded-full bg-yellow-400"></div>
203+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 mb-2">
204+
<div>
205+
<div className="text-white font-semibold text-sm">Technical Team Lead</div>
206+
<div className="text-yellow-400 text-xs">Vidya Media Myanmar</div>
207+
</div>
208+
<span className="text-slate-500 text-xs bg-slate-800 rounded px-2 py-0.5 whitespace-nowrap">Nov 2021 – Nov 2022</span>
209+
</div>
210+
<ul className="text-slate-400 text-xs space-y-1">
211+
<li>→ Led team building learning platform (React, React Native, Node.js)</li>
212+
<li>→ Owned sprint planning, code standards & team mentoring</li>
213+
</ul>
214+
</div>
215+
216+
{/* Dinger */}
217+
<div className="relative pl-4 border-l-2 border-slate-600">
218+
<div className="absolute left-[-5px] top-1 h-2 w-2 rounded-full bg-slate-400"></div>
219+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 mb-2">
220+
<div>
221+
<div className="text-white font-semibold text-sm">Frontend / System Developer</div>
222+
<div className="text-slate-400 text-xs">Dinger</div>
223+
</div>
224+
<span className="text-slate-500 text-xs bg-slate-800 rounded px-2 py-0.5 whitespace-nowrap">Dec 2019 – Oct 2021</span>
225+
</div>
226+
<ul className="text-slate-400 text-xs space-y-1">
227+
<li>→ Built Dinger Shop e-commerce platform & Payment Gateway SaaS</li>
228+
<li>→ Implemented multi-channel payment integration (banking, mobile wallets)</li>
229+
</ul>
230+
</div>
231+
</div>
232+
</div>
233+
234+
{/* Projects */}
235+
<div>
236+
<div className="flex items-center gap-2 mb-4">
237+
<span className="text-cyan-400 text-sm font-bold">{"// featured_projects"}</span>
238+
<div className="flex-1 h-px bg-slate-700/50"></div>
239+
</div>
240+
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
241+
242+
<div className="bg-slate-800/50 border border-slate-700 rounded-xl p-4 hover:border-cyan-700 transition-colors">
243+
<div className="flex items-start justify-between mb-2">
244+
<div className="text-white text-sm font-semibold">Maybank Campaign Management System</div>
245+
<span className="text-emerald-400 text-xs">↗</span>
246+
</div>
247+
<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>
248+
<div className="flex flex-wrap gap-1">
249+
{["Next.js", "TypeScript", "React Query", "Tailwind CSS"].map(t => (
250+
<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>
251+
))}
252+
</div>
253+
</div>
254+
255+
<div className="bg-slate-800/50 border border-slate-700 rounded-xl p-4 hover:border-purple-700 transition-colors">
256+
<div className="flex items-start justify-between mb-2">
257+
<div className="text-white text-sm font-semibold">Maybank Workflow Engine Platform</div>
258+
<span className="text-emerald-400 text-xs">↗</span>
259+
</div>
260+
<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>
261+
<div className="flex flex-wrap gap-1">
262+
{["Next.js", "NestJS", "TypeScript"].map(t => (
263+
<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>
264+
))}
265+
</div>
266+
</div>
267+
268+
<div className="bg-slate-800/50 border border-slate-700 rounded-xl p-4 hover:border-yellow-700 transition-colors">
269+
<div className="flex items-start justify-between mb-2">
270+
<div className="text-white text-sm font-semibold">Dinger Payment Gateway</div>
271+
<span className="text-emerald-400 text-xs">↗</span>
272+
</div>
273+
<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>
274+
<div className="flex flex-wrap gap-1">
275+
{["React", "Next.js", "Redux", "Kotlin", "Java Spring Boot"].map(t => (
276+
<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>
277+
))}
278+
</div>
279+
</div>
280+
281+
<div className="bg-slate-800/50 border border-slate-700 rounded-xl p-4 hover:border-emerald-700 transition-colors">
282+
<div className="flex items-start justify-between mb-2">
283+
<div className="text-white text-sm font-semibold">Buy Now Pay Later (BNPL)</div>
284+
<span className="text-emerald-400 text-xs">↗</span>
285+
</div>
286+
<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>
287+
<div className="flex flex-wrap gap-1">
288+
{["React", "Next.js", "Node.js", "MongoDB", "Formio"].map(t => (
289+
<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>
290+
))}
291+
</div>
292+
</div>
293+
294+
</div>
295+
</div>
296+
297+
{/* Education */}
298+
<div>
299+
<div className="flex items-center gap-2 mb-3">
300+
<span className="text-cyan-400 text-sm font-bold">{"// education"}</span>
301+
<div className="flex-1 h-px bg-slate-700/50"></div>
302+
</div>
303+
<div className="flex items-center gap-3 bg-slate-800/40 border border-slate-700 rounded-lg px-4 py-3">
304+
<span className="text-2xl">🎓</span>
305+
<div>
306+
<div className="text-white text-sm font-semibold">B.C.Sc — Software Engineering</div>
307+
<div className="text-slate-400 text-xs">University of Computer Studies, Yangon · Graduated Feb 2020</div>
308+
</div>
309+
</div>
310+
</div>
311+
312+
{/* Footer */}
313+
<div className="flex flex-col sm:flex-row items-center justify-between pt-2 border-t border-slate-700/50 gap-3">
314+
<div className="text-slate-600 text-xs font-mono">// open to Frontend & Full-stack roles</div>
315+
<div className="flex gap-3">
316+
<a href="https://www.myothuko.dev" target="_blank" rel="noopener noreferrer"
317+
className="text-xs text-cyan-400 hover:text-cyan-300 underline underline-offset-2 transition-colors">
318+
Portfolio ↗
319+
</a>
320+
<a href="mailto:myothuko2012@gmail.com"
321+
className="text-xs text-slate-400 hover:text-white underline underline-offset-2 transition-colors">
322+
Email ↗
323+
</a>
324+
</div>
325+
</div>
326+
</div>
327+
</div>

0 commit comments

Comments
 (0)