Skip to content

Commit 4d932b5

Browse files
Tomoe-12Tomoe-12
authored
🔥 build(Profile Created): i just create my profile (#284)
1 parent df31479 commit 4d932b5

1 file changed

Lines changed: 351 additions & 0 deletions

File tree

‎content/profile/khunthihan.mdx‎

Lines changed: 351 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,351 @@
1+
---
2+
name: Khun Thi Han
3+
description: I'm a Final Year Computer Science Student passionate about full-stack web development and cybersecurity, building real-world applications with the MERN stack and Next.js.
4+
image: "https://github.com/Tomoe-12.png"
5+
tags:
6+
- JavaScript
7+
- TypeScript
8+
- React.js
9+
- Next.js
10+
- Node.js
11+
- PHP
12+
- Python
13+
- Java
14+
- MongoDB
15+
- MySQL
16+
- Tailwind CSS
17+
---
18+
19+
<main className="w-full font-mono">
20+
<div className="border border-[#2a2a3a] bg-[#0d0d1a] rounded-2xl relative shadow-2xl overflow-hidden">
21+
22+
{/* Mac title bar */}
23+
<div className="flex items-center gap-2 px-4 py-3 bg-[#111122] border-b border-[#2a2a3a]">
24+
<span className="w-3 h-3 rounded-full bg-[#ff5f57]" style={{boxShadow:"0 0 6px #ff5f57"}}></span>
25+
<span className="w-3 h-3 rounded-full bg-[#febc2e]" style={{boxShadow:"0 0 6px #febc2e"}}></span>
26+
<span className="w-3 h-3 rounded-full bg-[#28c840]" style={{boxShadow:"0 0 6px #28c840"}}></span>
27+
<span className="flex-1 text-center text-[11px] text-[#445566] tracking-widest select-none">
28+
khun-thi-han.mdx — Portfolio
29+
</span>
30+
</div>
31+
32+
<div className="px-5 md:px-10 py-6">
33+
34+
{/* SECTION 1 — Hero */}
35+
<div className="border-b border-[#1e2a3a] pb-8">
36+
<div className="flex flex-col md:flex-row items-center md:items-start gap-6">
37+
38+
{/* Avatar */}
39+
<div className="relative shrink-0">
40+
<div className="w-[120px] h-[120px] rounded-full overflow-hidden border-2 border-[#00ffb4]"
41+
style={{boxShadow:"0 0 20px rgba(0,255,180,0.3)", animation:"avatarPulse 3s ease-in-out infinite"}}>
42+
<img src="https://github.com/Tomoe-12.png" className="w-full h-full object-cover" />
43+
</div>
44+
<span className="absolute bottom-2 right-2 w-3 h-3 rounded-full bg-[#00ffb4]"
45+
style={{animation:"blinkDot 1.4s ease-in-out infinite", boxShadow:"0 0 6px #00ffb4"}}>
46+
</span>
47+
</div>
48+
49+
{/* Text */}
50+
<div className="flex-1 text-center md:text-left">
51+
<div className="inline-block bg-[#0e2a1e] border border-[#00ffb4] text-[#00ffb4] text-xs px-4 py-2 rounded-xl mb-4 relative"
52+
style={{animation:"fadeSlideDown 0.6s ease both"}}>
53+
<span className="absolute -bottom-2 left-4 w-0 h-0"
54+
style={{borderLeft:"8px solid transparent", borderRight:"8px solid transparent", borderTop:"8px solid #00ffb4"}} />
55+
<p>Hey there! Nice to meet you.</p>
56+
<p>I build things for the web.</p>
57+
</div>
58+
59+
<h1 className="text-2xl font-bold text-white mb-1" style={{animation:"fadeSlideUp 0.5s ease 0.1s forwards"}}>
60+
Khun Thi Han
61+
</h1>
62+
63+
<p className="text-[#556677] text-xs tracking-widest uppercase mb-3" style={{animation:"fadeSlideUp 0.5s ease 0.2s both"}}>
64+
Final Year CS Student · Full-Stack Developer
65+
</p>
66+
67+
<p className="text-[#8899aa] text-sm leading-relaxed max-w-[420px]" style={{animation:"fadeSlideUp 0.5s ease 0.3s both"}}>
68+
Studying at{" "}
69+
<span className="text-[#00ffb4]">University of Computer Studies, Taunggyi</span>
70+
{" "}with a growing passion for{" "}
71+
<span className="text-[#7b6fff]">cybersecurity</span>{" "}
72+
and secure application development.
73+
</p>
74+
</div>
75+
76+
{/* GIF */}
77+
<div className="shrink-0 hidden md:block">
78+
<img
79+
src="https://media.tenor.com/km-lY7Mlqc4AAAAj/typing-pepe-the-frog.gif"
80+
className="w-[100px] h-[100px] rounded-2xl"
81+
style={{filter:"drop-shadow(0 0 8px rgba(0,255,180,0.3))"}}
82+
/>
83+
</div>
84+
</div>
85+
86+
{/* Tags */}
87+
<div className="flex flex-wrap gap-2 mt-6" style={{animation:"fadeSlideUp 0.5s ease 0.4s both"}}>
88+
{["JavaScript","TypeScript","React.js","Next.js","Node.js","PHP","Python","Java","MongoDB","MySQL","Tailwind CSS"].map((tag, i) => (
89+
<span key={i} className="text-[11px] px-3 py-1 rounded-full text-[#a8f0d8]"
90+
style={{
91+
background:"rgba(0,255,180,0.06)",
92+
border:"1px solid rgba(0,255,180,0.2)",
93+
animation:`tagFloat ${2 + (i % 4) * 0.3}s ease-in-out infinite`,
94+
animationDelay:`${i * 0.07}s`,
95+
}}>
96+
{tag}
97+
</span>
98+
))}
99+
</div>
100+
</div>
101+
102+
{/* SECTION 2 — Tech Stack + Skills */}
103+
<div className="grid grid-cols-4 gap-6 items-start border-b border-[#1e2a3a] py-8"
104+
style={{animation:"fadeSlideUp 0.6s ease 0.2s both"}}>
105+
106+
<div className="col-span-full md:col-span-1 flex justify-center">
107+
<img
108+
src="https://media.tenor.com/2sMGmDqHQKIAAAAi/computer-coding.gif"
109+
className="w-full max-w-[140px] rounded-2xl"
110+
style={{filter:"drop-shadow(0 0 10px rgba(123,111,255,0.4))"}}
111+
/>
112+
</div>
113+
114+
<div className="col-span-full md:col-span-3 space-y-5">
115+
<h2 className="font-bold text-white text-sm">🚀 Current Tech Stack</h2>
116+
117+
<div className="flex flex-wrap gap-4">
118+
{[
119+
{src:"https://raw.githubusercontent.com/github/explore/master/topics/nextjs/nextjs.png", label:"Next.js"},
120+
{src:"https://raw.githubusercontent.com/github/explore/master/topics/javascript/javascript.png", label:"JS"},
121+
{src:"https://raw.githubusercontent.com/github/explore/master/topics/typescript/typescript.png", label:"TS"},
122+
{src:"https://raw.githubusercontent.com/github/explore/master/topics/react/react.png", label:"React"},
123+
{src:"https://raw.githubusercontent.com/github/explore/master/topics/nodejs/nodejs.png", label:"Node"},
124+
{src:"https://raw.githubusercontent.com/github/explore/master/topics/mongodb/mongodb.png", label:"Mongo"},
125+
{src:"https://raw.githubusercontent.com/github/explore/master/topics/mysql/mysql.png", label:"MySQL"},
126+
].map((tech, i) => (
127+
<div key={i} className="flex flex-col items-center gap-1">
128+
<img src={tech.src} style={{width:"32px", height:"32px", borderRadius:"8px"}} />
129+
<span className="text-[9px] text-[#445566]">{tech.label}</span>
130+
</div>
131+
))}
132+
</div>
133+
134+
<h2 className="font-bold text-white text-sm pt-2">💡 Skill Proficiency</h2>
135+
136+
<div className="space-y-3">
137+
{[
138+
{name:"Next.js / React", pct:88, color:"#00ffb4"},
139+
{name:"JavaScript / TypeScript", pct:85, color:"#7b6fff"},
140+
{name:"Node.js / MERN Stack", pct:85, color:"#5bc8ff"},
141+
{name:"PHP / MySQL", pct:82, color:"#f472b6"},
142+
{name:"Python / Java", pct:50, color:"#fbbf24"},
143+
].map((s, i) => (
144+
<div key={i}>
145+
<div className="flex justify-between mb-1">
146+
<span className="text-[11px] text-[#7788aa]">{s.name}</span>
147+
<span className="text-[11px]" style={{color:s.color}}>{s.pct}%</span>
148+
</div>
149+
<div className="h-[3px] bg-[#1e2a3a] rounded-full overflow-hidden">
150+
<div style={{
151+
height:"100%", borderRadius:"999px", width:`${s.pct}%`,
152+
background:s.color,
153+
boxShadow:`0 0 6px ${s.color}80`,
154+
animation:`barGrow 1.2s ease ${i * 0.15}s both`,
155+
}} />
156+
</div>
157+
</div>
158+
))}
159+
</div>
160+
</div>
161+
</div>
162+
163+
{/* SECTION 3 — Education */}
164+
{/* COMMENTED OUT - Education section
165+
<div className="grid grid-cols-4 gap-6 items-start border-b border-[#1e2a3a] py-8"
166+
style={{animation:"fadeSlideUp 0.6s ease 0.3s both"}}>
167+
168+
<div className="col-span-full md:col-span-1 flex justify-center">
169+
<img
170+
src="https://media.tenor.com/rePDfDWO3XoAAAAi/this-is-fine.gif"
171+
className="w-full max-w-[140px] rounded-2xl"
172+
style={{filter:"drop-shadow(0 0 8px rgba(91,200,255,0.35))"}}
173+
/>
174+
</div>
175+
176+
<div className="col-span-full md:col-span-3 space-y-3">
177+
<h2 className="font-bold text-white text-sm mb-4">🎓 Education</h2>
178+
{[
179+
{title:"Bachelor of Computer Science (B.C.Sc)", place:"University of Computer Studies Taunggyi", period:"Jun 2022 – Present"},
180+
{title:"KBZPay × Huawei Developer Bootcamp", place:"Certificate — AppCube Mini App Development", period:"Jan – Mar 2026"},
181+
{title:"ACS Education Program", place:"Basic and Advanced Course", period:"Feb – Jul 2025"},
182+
].map((edu, i) => (
183+
<div key={i} className="flex justify-between items-start rounded-xl p-3"
184+
style={{background:"rgba(255,255,255,0.02)", border:"1px solid rgba(91,200,255,0.12)"}}>
185+
<div>
186+
<p className="text-[13px] font-semibold text-[#ddeeff] mb-0.5">{edu.title}</p>
187+
<p className="text-[11px] text-[#445566]">{edu.place}</p>
188+
</div>
189+
<span className="text-[10px] text-[#5bc8ff] whitespace-nowrap ml-3 mt-0.5 px-2 py-1 rounded-full"
190+
style={{background:"rgba(91,200,255,0.08)", border:"1px solid rgba(91,200,255,0.2)"}}>
191+
{edu.period}
192+
</span>
193+
</div>
194+
))}
195+
</div>
196+
</div>
197+
*/}
198+
199+
{/* SECTION 4 — About (code block as styled div) */}
200+
<div className="grid grid-cols-4 gap-6 items-start border-b border-[#1e2a3a] py-8"
201+
style={{animation:"fadeSlideUp 0.6s ease 0.4s both"}}>
202+
203+
<div className="col-span-full md:col-span-1 flex justify-center">
204+
<img
205+
src="https://media.tenor.com/ongULa4VHQcAAAAj/crying-pepe-the-frog.gif"
206+
className="w-full max-w-[140px] rounded-2xl"
207+
style={{filter:"drop-shadow(0 0 8px rgba(196,168,248,0.35))"}}
208+
/>
209+
</div>
210+
211+
<div className="col-span-full md:col-span-3">
212+
<h2 className="font-bold text-white text-sm mb-4">🧑‍💻 About Me</h2>
213+
214+
<div className="rounded-xl overflow-hidden border border-[#2a2a3a] text-[12px]"
215+
style={{background:"#0a0a14"}}>
216+
<div className="flex items-center gap-2 px-3 py-2 bg-[#111122] border-b border-[#2a2a3a]">
217+
<span className="w-2 h-2 rounded-full bg-[#ff5f57]"></span>
218+
<span className="w-2 h-2 rounded-full bg-[#febc2e]"></span>
219+
<span className="w-2 h-2 rounded-full bg-[#28c840]"></span>
220+
<span className="ml-2 text-[10px] text-[#334455]">about_me.ts</span>
221+
</div>
222+
<div className="p-4 text-[12px] leading-relaxed overflow-x-auto" style={{fontFamily:"monospace"}}>
223+
<p><span style={{color:"#7b6fff"}}>interface</span> <span style={{color:"#5bc8ff"}}>Developer</span> {"{"}</p>
224+
<p>&nbsp;&nbsp;<span style={{color:"#a8f0d8"}}>name</span><span style={{color:"#00ffb4"}}>:</span> <span style={{color:"#fbbf24"}}>string</span>;</p>
225+
<p>&nbsp;&nbsp;<span style={{color:"#a8f0d8"}}>location</span><span style={{color:"#00ffb4"}}>:</span> <span style={{color:"#fbbf24"}}>string</span>;</p>
226+
<p>&nbsp;&nbsp;<span style={{color:"#a8f0d8"}}>stack</span><span style={{color:"#00ffb4"}}>:</span> <span style={{color:"#fbbf24"}}>string</span>[];</p>
227+
<p>&nbsp;&nbsp;<span style={{color:"#a8f0d8"}}>interests</span><span style={{color:"#00ffb4"}}>:</span> <span style={{color:"#fbbf24"}}>string</span>[];</p>
228+
<p>{"}"}</p>
229+
<p className="mt-2"><span style={{color:"#7b6fff"}}>const</span> <span style={{color:"#00ffb4"}}>me</span><span style={{color:"#ffffff"}}>:</span> <span style={{color:"#5bc8ff"}}>Developer</span> <span style={{color:"#00ffb4"}}>=</span> {"{"}</p>
230+
<p>&nbsp;&nbsp;<span style={{color:"#a8f0d8"}}>name</span><span style={{color:"#00ffb4"}}>:</span> <span style={{color:"#f472b6"}}>"Khun Thi Han"</span>,</p>
231+
<p>&nbsp;&nbsp;<span style={{color:"#a8f0d8"}}>location</span><span style={{color:"#00ffb4"}}>:</span> <span style={{color:"#f472b6"}}>"Taunggyi, Myanmar"</span>,</p>
232+
<p>&nbsp;&nbsp;<span style={{color:"#a8f0d8"}}>stack</span><span style={{color:"#00ffb4"}}>:</span> [<span style={{color:"#f472b6"}}>"Next.js"</span>, <span style={{color:"#f472b6"}}>"React"</span>, <span style={{color:"#f472b6"}}>"Node.js"</span>],</p>
233+
<p>&nbsp;&nbsp;<span style={{color:"#a8f0d8"}}>interests</span><span style={{color:"#00ffb4"}}>:</span> [<span style={{color:"#f472b6"}}>"Cybersecurity"</span>, <span style={{color:"#f472b6"}}>"Web Dev"</span>],</p>
234+
<p>{"}"}</p>
235+
</div>
236+
</div>
237+
238+
{/* Soft skills + languages */}
239+
<div className="flex flex-wrap gap-6 mt-5">
240+
<div>
241+
<p className="text-[10px] text-[#445566] uppercase tracking-widest mb-2">Soft Skills</p>
242+
<div className="flex flex-wrap gap-2">
243+
{["Public Relations","Teamwork","Time Management","Communication","Critical Thinking"].map((s, i) => (
244+
<span key={i} className="text-[11px] px-3 py-1 rounded-full text-[#c4a8f8]"
245+
style={{background:"rgba(120,80,255,0.08)", border:"1px solid rgba(120,80,255,0.25)"}}>
246+
{s}
247+
</span>
248+
))}
249+
</div>
250+
</div>
251+
<div>
252+
<p className="text-[10px] text-[#445566] uppercase tracking-widest mb-2">Languages</p>
253+
<div className="flex gap-2">
254+
{[{flag:"🇬🇧", lang:"English"}, {flag:"🇲🇲", lang:"Burmese"}].map((item, i) => (
255+
<div key={i} className="flex items-center gap-2 px-3 py-1.5 rounded-xl"
256+
style={{background:"rgba(244,114,182,0.06)", border:"1px solid rgba(244,114,182,0.2)"}}>
257+
<span style={{fontSize:"16px"}}>{item.flag}</span>
258+
<span className="text-[12px] text-[#f9a8d4]">{item.lang}</span>
259+
</div>
260+
))}
261+
</div>
262+
</div>
263+
</div>
264+
</div>
265+
</div>
266+
267+
{/* SECTION 5 — Contact */}
268+
<div className="grid grid-cols-4 gap-6 items-start pt-8"
269+
style={{animation:"fadeSlideUp 0.6s ease 0.5s both"}}>
270+
271+
<div className="col-span-full md:col-span-1 flex justify-center">
272+
<img
273+
src="https://media.tenor.com/2sMGmDqHQKIAAAAi/computer-coding.gif"
274+
className="w-full max-w-[120px] rounded-2xl"
275+
style={{filter:"drop-shadow(0 0 8px rgba(0,255,180,0.25))"}}
276+
/>
277+
</div>
278+
279+
<div className="col-span-full md:col-span-3">
280+
<h2 className="font-bold text-white text-sm mb-3">📡 Get in Touch</h2>
281+
<p className="text-[13px] text-[#7788aa] mb-1">
282+
Email:{" "}
283+
<a href="mailto:khunthihan.official@gmail.com" className="text-[#00ffb4] font-semibold break-all">
284+
khunthihan.official@gmail.com
285+
</a>
286+
</p>
287+
<p className="text-[13px] text-[#7788aa] mb-1">
288+
Phone:{" "}
289+
<a href="tel:+959785146940" className="text-[#00ffb4] font-semibold">
290+
+959-785-146-940
291+
</a>
292+
</p>
293+
<p className="text-[13px] text-[#7788aa] mb-4">
294+
Portfolio:{" "}
295+
<a href="https://khunthihan.vercel.app/" className="text-[#7b6fff] font-semibold">
296+
khunthihan.vercel.app
297+
</a>
298+
</p>
299+
<div className="flex items-center gap-4 text-[13px]">
300+
<a href="https://github.com/Tomoe-12/" target="_blank" className="text-[#556677] hover:text-[#00ffb4] underline">
301+
GitHub
302+
</a>
303+
<a href="https://www.linkedin.com/in/khun-thi-han-b698a0382/" target="_blank" className="text-[#556677] hover:text-[#5bc8ff] underline">
304+
LinkedIn
305+
</a>
306+
<a href="https://khunthihan.vercel.app/" target="_blank" className="text-[#556677] hover:text-[#7b6fff] underline">
307+
Portfolio
308+
</a>
309+
</div>
310+
</div>
311+
</div>
312+
313+
</div>
314+
315+
{/* Status bar */}
316+
<div className="flex items-center justify-between px-4 py-2 bg-[#0a0a14] border-t border-[#1e2a3a] text-[10px] text-[#334455]">
317+
<span className="flex items-center gap-2">
318+
<span style={{width:"6px", height:"6px", borderRadius:"50%", background:"#28c840", display:"inline-block", boxShadow:"0 0 4px #28c840"}} />
319+
khun-thi-han.mdx
320+
</span>
321+
<span>UTF-8 · TypeScript JSX</span>
322+
<span>⚡ Open to Work</span>
323+
</div>
324+
</div>
325+
326+
<style>{`
327+
@keyframes fadeSlideDown {
328+
from { opacity:0; transform:translateY(-16px); }
329+
to { opacity:1; transform:translateY(0); }
330+
}
331+
@keyframes fadeSlideUp {
332+
from { opacity:0; transform:translateY(20px); }
333+
to { opacity:1; transform:translateY(0); }
334+
}
335+
@keyframes avatarPulse {
336+
0%,100% { box-shadow:0 0 0 0 rgba(0,255,180,0.4),0 0 0 0 rgba(0,255,180,0.1); }
337+
50% { box-shadow:0 0 0 8px rgba(0,255,180,0.1),0 0 0 16px rgba(0,255,180,0.04); }
338+
}
339+
@keyframes blinkDot {
340+
0%,100% { opacity:1; }
341+
50% { opacity:0; }
342+
}
343+
@keyframes tagFloat {
344+
0%,100% { transform:translateY(0px); }
345+
50% { transform:translateY(-3px); }
346+
}
347+
@keyframes barGrow {
348+
from { width:0%; }
349+
}
350+
`}</style>
351+
</main>

0 commit comments

Comments
 (0)