From 7d1ac14b7a50a5181ac897d245a14c552bfd08d3 Mon Sep 17 00:00:00 2001
From: ivan-mix <naingaungkhant345@gmail.com>
Date: Tue, 24 Mar 2026 14:08:31 +0630
Subject: [PATCH] :fire: build(create new profile): create new profile

---
 content/profile/naingaungkhant.mdx | 279 +++++++++++++++++++++++++++++
 1 file changed, 279 insertions(+)
 create mode 100644 content/profile/naingaungkhant.mdx

diff --git a/content/profile/naingaungkhant.mdx b/content/profile/naingaungkhant.mdx
new file mode 100644
index 0000000..8de2587
--- /dev/null
+++ b/content/profile/naingaungkhant.mdx
@@ -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>