Skip to content

Commit 7d1ac14

Browse files
Ivan-mixIvan-mix
committed
🔥 build(create new profile): create new profile
1 parent 8f3d07a commit 7d1ac14

1 file changed

Lines changed: 279 additions & 0 deletions

File tree

‎content/profile/naingaungkhant.mdx‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
---
2+
name: Naing Aung Khant
3+
description: Frontend engineer focused on responsive web apps and cross-platform mobile development with React, Next.js, and Flutter.
4+
image: "https://github.com/Ivan-mix.png"
5+
tags:
6+
- Frontend Architecture
7+
- React.js
8+
- Next.js
9+
- Flutter
10+
- TypeScript
11+
- TailwindCSS
12+
- JavaScript
13+
- Java
14+
- C++
15+
- Dart
16+
- Node.js
17+
---
18+
19+
<div className="mx-auto w-full max-w-5xl space-y-8">
20+
<section className="relative overflow-hidden rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.18),transparent_30%),radial-gradient(circle_at_bottom_right,rgba(251,113,133,0.14),transparent_28%),linear-gradient(135deg,#0b0d12_0%,#11131a_45%,#0a0b10_100%)] px-6 py-8 shadow-[0_35px_100px_rgba(0,0,0,0.45)] md:px-10 md:py-10">
21+
<div className="absolute inset-y-0 left-[2.25rem] hidden w-px bg-white/10 md:block" />
22+
<div className="relative grid gap-8 md:grid-cols-[minmax(0,1fr)_260px] md:gap-10">
23+
<div className="md:pl-8">
24+
<p className="mb-4 font-mono text-[11px] uppercase tracking-[0.38em] text-prism-cyan">
25+
Profile / Editorial Edition
26+
</p>
27+
<h1 className="mb-4 text-5xl font-black uppercase leading-[0.92] tracking-[-0.04em] text-white md:text-7xl">
28+
Naing
29+
<br />
30+
Aung Khant
31+
</h1>
32+
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.22em] text-zinc-300">
33+
Frontend Engineer
34+
<span className="text-prism-rose">/</span>
35+
Cross-Platform Builder
36+
</div>
37+
<p className="max-w-2xl text-base leading-8 text-zinc-300 md:text-lg">
38+
I design and build responsive digital experiences across web and
39+
mobile. My work focuses on clean interfaces, maintainable frontend
40+
structure, and thoughtful implementation with React, Next.js,
41+
Flutter, and modern UI tooling.
42+
</p>
43+
44+
<div className="mt-8 grid gap-4 sm:grid-cols-3">
45+
<div className="border-l-2 border-prism-cyan pl-4">
46+
<p className="text-3xl font-black text-white">1+</p>
47+
<p className="mt-1 text-xs uppercase tracking-[0.22em] text-zinc-500">
48+
Years Building
49+
</p>
50+
</div>
51+
<div className="border-l-2 border-prism-violet pl-4">
52+
<p className="text-3xl font-black text-white">2</p>
53+
<p className="mt-1 text-xs uppercase tracking-[0.22em] text-zinc-500">
54+
Projects Delivered
55+
</p>
56+
</div>
57+
<div className="border-l-2 border-prism-rose pl-4">
58+
<p className="text-3xl font-black text-white">MM</p>
59+
<p className="mt-1 text-xs uppercase tracking-[0.22em] text-zinc-500">
60+
Based in Yangon
61+
</p>
62+
</div>
63+
</div>
64+
65+
<div className="mt-8 flex flex-wrap gap-3">
66+
<a
67+
href="https://github.com/Ivan-mix"
68+
target="_blank"
69+
rel="noopener noreferrer"
70+
className="rounded-full border border-prism-cyan/30 bg-prism-cyan/10 px-4 py-2 text-sm font-semibold text-prism-cyan no-underline transition hover:border-prism-cyan/60 hover:bg-prism-cyan/20"
71+
>
72+
GitHub
73+
</a>
74+
<a
75+
href="https://www.linkedin.com/in/naing-aung-khant-3695773ab/"
76+
target="_blank"
77+
rel="noopener noreferrer"
78+
className="rounded-full border border-prism-violet/30 bg-prism-violet/10 px-4 py-2 text-sm font-semibold text-prism-violet no-underline transition hover:border-prism-violet/60 hover:bg-prism-violet/20"
79+
>
80+
LinkedIn
81+
</a>
82+
<a
83+
href="https://www.facebook.com/share/18BcpS7Hnh/?mibextid=wwXIfr"
84+
target="_blank"
85+
rel="noopener noreferrer"
86+
className="rounded-full border border-prism-rose/30 bg-prism-rose/10 px-4 py-2 text-sm font-semibold text-prism-rose no-underline transition hover:border-prism-rose/60 hover:bg-prism-rose/20"
87+
>
88+
Facebook
89+
</a>
90+
<a
91+
href="mailto:naingaungkhant345@gmail.com"
92+
className="rounded-full border border-white/15 bg-white/5 px-4 py-2 text-sm font-semibold text-white no-underline transition hover:border-white/30 hover:bg-white/10"
93+
>
94+
Email
95+
</a>
96+
</div>
97+
</div>
98+
99+
<aside className="relative">
100+
<div className="absolute -inset-4 rounded-[32px] bg-gradient-to-b from-prism-cyan/10 via-transparent to-prism-rose/10 blur-2xl" />
101+
<div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-white/[0.04]">
102+
<img
103+
src="https://github.com/Ivan-mix.png"
104+
alt="Naing Aung Khant portrait"
105+
className="h-[320px] w-full object-cover"
106+
/>
107+
<div className="space-y-4 p-5">
108+
<div className="flex items-center gap-2 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-300">
109+
<span className="h-2 w-2 rounded-full bg-emerald-400" />
110+
<span className="">Available for Work</span>
111+
</div>
112+
<div className="space-y-3 text-sm text-zinc-300">
113+
<p className="m-0">Location: Yangon, Myanmar</p>
114+
</div>
115+
</div>
116+
</div>
117+
</aside>
118+
</div>
119+
</section>
120+
121+
<section className="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
122+
<div className="rounded-[30px] border border-white/10 bg-surface/70 p-7">
123+
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-violet">
124+
About
125+
</p>
126+
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
127+
Building clear products with modern frontend craft
128+
</h2>
129+
<p className="mt-5 text-zinc-300">
130+
I enjoy translating ideas into practical, user-friendly interfaces that
131+
work smoothly across devices. My background in both web and mobile
132+
development helps me think about consistency, responsiveness, and
133+
usability from the start of the design and implementation process.
134+
</p>
135+
<p className="text-zinc-300">
136+
I care about scalable components, strong visual polish, and
137+
collaboration-friendly code. I am especially motivated by projects that
138+
combine interface quality with real-world usefulness.
139+
</p>
140+
</div>
141+
142+
<div className="rounded-[30px] border border-white/10 bg-[linear-gradient(180deg,rgba(167,139,250,0.10),rgba(255,255,255,0.03))] p-7">
143+
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-rose">
144+
Focus
145+
</p>
146+
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
147+
What I bring
148+
</h2>
149+
<ul className="mt-5 ml-0 list-none space-y-3">
150+
<li className="mt-0 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-zinc-300">
151+
Responsive UI implementation across desktop and mobile
152+
</li>
153+
<li className="mt-0 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-zinc-300">
154+
Reusable frontend structure with modern component patterns
155+
</li>
156+
<li className="mt-0 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-zinc-300">
157+
Cross-platform product thinking with Flutter and React ecosystems
158+
</li>
159+
<li className="mt-0 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-zinc-300">
160+
Strong interest in UI quality, clarity, and performance
161+
</li>
162+
</ul>
163+
</div>
164+
</section>
165+
166+
<section className="grid gap-6 lg:grid-cols-2">
167+
<div className="rounded-[30px] border border-white/10 bg-surface/70 p-7">
168+
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-cyan">
169+
Stack
170+
</p>
171+
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
172+
Core Technologies
173+
</h2>
174+
<div className="mt-6 flex flex-wrap gap-3">
175+
{["React.js", "Next.js", "Flutter", "TypeScript", "JavaScript", "TailwindCSS", "Java", "C++", "Dart"].map((skill) => (
176+
<span
177+
key={skill}
178+
className="rounded-full border border-prism-cyan/20 bg-prism-cyan/10 px-3 py-1.5 text-sm font-medium text-zinc-100"
179+
>
180+
{skill}
181+
</span>
182+
))}
183+
</div>
184+
</div>
185+
186+
<div className="rounded-[30px] border border-white/10 bg-surface/70 p-7">
187+
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-violet">
188+
Learning
189+
</p>
190+
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
191+
Exploring Next
192+
</h2>
193+
<div className="mt-6 flex flex-wrap gap-3">
194+
{["Node.js", "Firebase", "Figma", "Scalable UI Systems", "Frontend Performance"].map((item) => (
195+
<span
196+
key={item}
197+
className="rounded-full border border-prism-violet/20 bg-prism-violet/10 px-3 py-1.5 text-sm font-medium text-zinc-100"
198+
>
199+
{item}
200+
</span>
201+
))}
202+
</div>
203+
</div>
204+
</section>
205+
206+
<section className="rounded-[30px] border border-white/10 bg-surface/70 p-7">
207+
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-cyan">
208+
Experience
209+
</p>
210+
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
211+
Professional Journey
212+
</h2>
213+
<div className="mt-8 space-y-6">
214+
<div className="grid gap-3 border-l border-white/10 pl-5 md:grid-cols-[140px_minmax(0,1fr)]">
215+
<p className="m-0 font-mono text-xs uppercase tracking-[0.22em] text-prism-cyan">
216+
2024 - Present
217+
</p>
218+
<div>
219+
<h3 className="m-0 text-xl text-white">Frontend Developer</h3>
220+
<p className="mt-3 text-zinc-300">
221+
Building responsive web applications with React.js and TailwindCSS,
222+
with a strong focus on maintainability, clean structure, and smooth
223+
user interaction.
224+
</p>
225+
</div>
226+
</div>
227+
<div className="grid gap-3 border-l border-white/10 pl-5 md:grid-cols-[140px_minmax(0,1fr)]">
228+
<p className="m-0 font-mono text-xs uppercase tracking-[0.22em] text-prism-violet">
229+
2023 - 2024
230+
</p>
231+
<div>
232+
<h3 className="m-0 text-xl text-white">Junior Developer</h3>
233+
<p className="mt-3 text-zinc-300">
234+
Developed cross-platform mobile applications with Flutter and
235+
contributed to UI implementation, product flow refinement, and
236+
practical state management.
237+
</p>
238+
</div>
239+
</div>
240+
</div>
241+
</section>
242+
243+
<section className="rounded-[30px] border border-white/10 bg-[linear-gradient(135deg,rgba(251,113,133,0.08),rgba(24,24,27,0.65),rgba(34,211,238,0.08))] p-7">
244+
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-rose">
245+
Selected Work
246+
</p>
247+
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
248+
Todo List Dashboard
249+
</h2>
250+
<div className="mt-5 grid gap-6 md:grid-cols-[1.1fr_0.9fr]">
251+
<div>
252+
<p className="text-zinc-300">
253+
A task management interface built with HTML, CSS, Tailwind, and
254+
JavaScript. The project reflects practical frontend fundamentals:
255+
clean layout, readable interaction flow, and a simple but effective
256+
product experience.
257+
</p>
258+
<a
259+
href="https://github.com/Ivan-mix/todo-list"
260+
target="_blank"
261+
rel="noopener noreferrer"
262+
className="mt-5 inline-flex items-center rounded-full border border-white/15 bg-white/5 px-4 py-2 text-sm font-semibold text-white no-underline transition hover:border-white/30 hover:bg-white/10"
263+
>
264+
View GitHub Project
265+
</a>
266+
</div>
267+
<div className="rounded-[24px] border border-white/10 bg-black/15 p-5">
268+
<p className="m-0 font-mono text-xs uppercase tracking-[0.22em] text-zinc-500">
269+
Project Notes
270+
</p>
271+
<ul className="mt-4 ml-0 list-none space-y-3">
272+
<li className="mt-0 text-zinc-300">Built with HTML, CSS, Tailwind, and JavaScript</li>
273+
<li className="mt-0 text-zinc-300">Focused on usability and visual clarity</li>
274+
<li className="mt-0 text-zinc-300">Represents practical frontend problem-solving</li>
275+
</ul>
276+
</div>
277+
</div>
278+
</section>
279+
</div>

0 commit comments

Comments
 (0)