Skip to content

🔥 build(create new profile): create new profile #270

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 25, 2026
Merged

🔥 build(create new profile): create new profile #270

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
279 changes: 279 additions & 0 deletions content/profile/naingaungkhant.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,279 @@
---
name: Naing Aung Khant
description: Frontend engineer focused on responsive web apps and cross-platform mobile development with React, Next.js, and Flutter.
image: "https://github.com/Ivan-mix.png"
tags:
- Frontend Architecture
- React.js
- Next.js
- Flutter
- TypeScript
- TailwindCSS
- JavaScript
- Java
- C++
- Dart
- Node.js
---

<div className="mx-auto w-full max-w-5xl space-y-8">
<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">
<div className="absolute inset-y-0 left-[2.25rem] hidden w-px bg-white/10 md:block" />
<div className="relative grid gap-8 md:grid-cols-[minmax(0,1fr)_260px] md:gap-10">
<div className="md:pl-8">
<p className="mb-4 font-mono text-[11px] uppercase tracking-[0.38em] text-prism-cyan">
Profile / Editorial Edition
</p>
<h1 className="mb-4 text-5xl font-black uppercase leading-[0.92] tracking-[-0.04em] text-white md:text-7xl">
Naing
<br />
Aung Khant
</h1>
<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">
Frontend Engineer
<span className="text-prism-rose">/</span>
Cross-Platform Builder
</div>
<p className="max-w-2xl text-base leading-8 text-zinc-300 md:text-lg">
I design and build responsive digital experiences across web and
mobile. My work focuses on clean interfaces, maintainable frontend
structure, and thoughtful implementation with React, Next.js,
Flutter, and modern UI tooling.
</p>

<div className="mt-8 grid gap-4 sm:grid-cols-3">
<div className="border-l-2 border-prism-cyan pl-4">
<p className="text-3xl font-black text-white">1+</p>
<p className="mt-1 text-xs uppercase tracking-[0.22em] text-zinc-500">
Years Building
</p>
</div>
<div className="border-l-2 border-prism-violet pl-4">
<p className="text-3xl font-black text-white">2</p>
<p className="mt-1 text-xs uppercase tracking-[0.22em] text-zinc-500">
Projects Delivered
</p>
</div>
<div className="border-l-2 border-prism-rose pl-4">
<p className="text-3xl font-black text-white">MM</p>
<p className="mt-1 text-xs uppercase tracking-[0.22em] text-zinc-500">
Based in Yangon
</p>
</div>
</div>

<div className="mt-8 flex flex-wrap gap-3">
<a
href="https://github.com/Ivan-mix"
target="_blank"
rel="noopener noreferrer"
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"
>
GitHub
</a>
<a
href="https://www.linkedin.com/in/naing-aung-khant-3695773ab/"
target="_blank"
rel="noopener noreferrer"
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"
>
LinkedIn
</a>
<a
href="https://www.facebook.com/share/18BcpS7Hnh/?mibextid=wwXIfr"
target="_blank"
rel="noopener noreferrer"
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"
>
Facebook
</a>
<a
href="mailto:naingaungkhant345@gmail.com"
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"
>
Email
</a>
</div>
</div>

<aside className="relative">
<div className="absolute -inset-4 rounded-[32px] bg-gradient-to-b from-prism-cyan/10 via-transparent to-prism-rose/10 blur-2xl" />
<div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-white/[0.04]">
<img
src="https://github.com/Ivan-mix.png"
alt="Naing Aung Khant portrait"
className="h-[320px] w-full object-cover"
/>
<div className="space-y-4 p-5">
<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">
<span className="h-2 w-2 rounded-full bg-emerald-400" />
<span className="">Available for Work</span>
</div>
<div className="space-y-3 text-sm text-zinc-300">
<p className="m-0">Location: Yangon, Myanmar</p>
</div>
</div>
</div>
</aside>
</div>
</section>

<section className="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
<div className="rounded-[30px] border border-white/10 bg-surface/70 p-7">
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-violet">
About
</p>
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
Building clear products with modern frontend craft
</h2>
<p className="mt-5 text-zinc-300">
I enjoy translating ideas into practical, user-friendly interfaces that
work smoothly across devices. My background in both web and mobile
development helps me think about consistency, responsiveness, and
usability from the start of the design and implementation process.
</p>
<p className="text-zinc-300">
I care about scalable components, strong visual polish, and
collaboration-friendly code. I am especially motivated by projects that
combine interface quality with real-world usefulness.
</p>
</div>

<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">
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-rose">
Focus
</p>
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
What I bring
</h2>
<ul className="mt-5 ml-0 list-none space-y-3">
<li className="mt-0 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-zinc-300">
Responsive UI implementation across desktop and mobile
</li>
<li className="mt-0 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-zinc-300">
Reusable frontend structure with modern component patterns
</li>
<li className="mt-0 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-zinc-300">
Cross-platform product thinking with Flutter and React ecosystems
</li>
<li className="mt-0 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-zinc-300">
Strong interest in UI quality, clarity, and performance
</li>
</ul>
</div>
</section>

<section className="grid gap-6 lg:grid-cols-2">
<div className="rounded-[30px] border border-white/10 bg-surface/70 p-7">
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-cyan">
Stack
</p>
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
Core Technologies
</h2>
<div className="mt-6 flex flex-wrap gap-3">
{["React.js", "Next.js", "Flutter", "TypeScript", "JavaScript", "TailwindCSS", "Java", "C++", "Dart"].map((skill) => (
<span
key={skill}
className="rounded-full border border-prism-cyan/20 bg-prism-cyan/10 px-3 py-1.5 text-sm font-medium text-zinc-100"
>
{skill}
</span>
))}
</div>
</div>

<div className="rounded-[30px] border border-white/10 bg-surface/70 p-7">
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-violet">
Learning
</p>
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
Exploring Next
</h2>
<div className="mt-6 flex flex-wrap gap-3">
{["Node.js", "Firebase", "Figma", "Scalable UI Systems", "Frontend Performance"].map((item) => (
<span
key={item}
className="rounded-full border border-prism-violet/20 bg-prism-violet/10 px-3 py-1.5 text-sm font-medium text-zinc-100"
>
{item}
</span>
))}
</div>
</div>
</section>

<section className="rounded-[30px] border border-white/10 bg-surface/70 p-7">
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-cyan">
Experience
</p>
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
Professional Journey
</h2>
<div className="mt-8 space-y-6">
<div className="grid gap-3 border-l border-white/10 pl-5 md:grid-cols-[140px_minmax(0,1fr)]">
<p className="m-0 font-mono text-xs uppercase tracking-[0.22em] text-prism-cyan">
2024 - Present
</p>
<div>
<h3 className="m-0 text-xl text-white">Frontend Developer</h3>
<p className="mt-3 text-zinc-300">
Building responsive web applications with React.js and TailwindCSS,
with a strong focus on maintainability, clean structure, and smooth
user interaction.
</p>
</div>
</div>
<div className="grid gap-3 border-l border-white/10 pl-5 md:grid-cols-[140px_minmax(0,1fr)]">
<p className="m-0 font-mono text-xs uppercase tracking-[0.22em] text-prism-violet">
2023 - 2024
</p>
<div>
<h3 className="m-0 text-xl text-white">Junior Developer</h3>
<p className="mt-3 text-zinc-300">
Developed cross-platform mobile applications with Flutter and
contributed to UI implementation, product flow refinement, and
practical state management.
</p>
</div>
</div>
</div>
</section>

<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">
<p className="mb-3 font-mono text-[11px] uppercase tracking-[0.32em] text-prism-rose">
Selected Work
</p>
<h2 className="mt-0 border-none pb-0 text-3xl text-white">
Todo List Dashboard
</h2>
<div className="mt-5 grid gap-6 md:grid-cols-[1.1fr_0.9fr]">
<div>
<p className="text-zinc-300">
A task management interface built with HTML, CSS, Tailwind, and
JavaScript. The project reflects practical frontend fundamentals:
clean layout, readable interaction flow, and a simple but effective
product experience.
</p>
<a
href="https://github.com/Ivan-mix/todo-list"
target="_blank"
rel="noopener noreferrer"
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"
>
View GitHub Project
</a>
</div>
<div className="rounded-[24px] border border-white/10 bg-black/15 p-5">
<p className="m-0 font-mono text-xs uppercase tracking-[0.22em] text-zinc-500">
Project Notes
</p>
<ul className="mt-4 ml-0 list-none space-y-3">
<li className="mt-0 text-zinc-300">Built with HTML, CSS, Tailwind, and JavaScript</li>
<li className="mt-0 text-zinc-300">Focused on usability and visual clarity</li>
<li className="mt-0 text-zinc-300">Represents practical frontend problem-solving</li>
</ul>
</div>
</div>
</section>
</div>
Loading