From d8c52f851bf4d5505e91bc1043684f5ca93f61bf Mon Sep 17 00:00:00 2001
From: ShinnHlaing <hlaingthazinphoo.hp@gmail.com>
Date: Thu, 19 Mar 2026 01:17:58 +0630
Subject: [PATCH 1/2] :fire: build(profile): add shinnhlaing profile

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

diff --git a/content/profile/shinnhlaing.mdx b/content/profile/shinnhlaing.mdx
new file mode 100644
index 0000000..1c99c5a
--- /dev/null
+++ b/content/profile/shinnhlaing.mdx
@@ -0,0 +1,22 @@
+---
+name: Shinn Hlaing
+description: Hello Mr/Ms, I'm a frontend developer who love to create seamless and futuristic design.
+image: "https://avatars.githubusercontent.com/u/88526467?v=4"
+tags:
+  - Javascript
+  - Typescript
+  - Next.js
+  - React
+  - MySql
+  - PostgreSql
+  - Prisma
+  - Tailwindcss
+---
+
+##### A web developer who focused on modern frontend ecosystems and creating seamless user journeys.
+
+> Always learning, always building. `🍴🍋‍🟩❔✅`
+
+**_React & Next.js enthusiast | Crafting responsive, user-centric websites._**
+
+Connect with me | gmail => [shinhlaing.htp@gmail.com](mailto:shinhlaing.htp@gmail.com) | discord => [shinnhlaing](https://discord.com/users/757793285237506058)

From e07cd7f8a14c851e0aae4170dfaaf4f750f47571 Mon Sep 17 00:00:00 2001
From: ShinnHlaing <hlaingthazinphoo.hp@gmail.com>
Date: Wed, 25 Mar 2026 23:32:14 +0630
Subject: [PATCH 2/2] :lipstick: style(profile): update UI/UX

---
 content/profile/shinnhlaing.mdx | 79 +++++++++++++++++++++++++++++++--
 1 file changed, 75 insertions(+), 4 deletions(-)

diff --git a/content/profile/shinnhlaing.mdx b/content/profile/shinnhlaing.mdx
index 1c99c5a..1098d71 100644
--- a/content/profile/shinnhlaing.mdx
+++ b/content/profile/shinnhlaing.mdx
@@ -13,10 +13,81 @@ tags:
   - Tailwindcss
 ---
 
-##### A web developer who focused on modern frontend ecosystems and creating seamless user journeys.
+import { FaGithub } from "react-icons/fa6";
+import { CiLinkedin } from "react-icons/ci";
+import { FaDiscord } from "react-icons/fa";
+import { Braces, Blocks, MonitorSmartphone, Radar } from "lucide-react";
 
-> Always learning, always building. `🍴🍋‍🟩❔✅`
 
-**_React & Next.js enthusiast | Crafting responsive, user-centric websites._**
+<section id="about" className={`py-10 px-6  transition-colors duration-500`}>
+            <div className="max-w-7xl mx-auto px-6 py-4">
+                <div className="">
+                    <div className="grid md:grid-cols-2 gap-6 items-center">
+                        <div className="flex flex-col gap-6">
+                            <div
+                                className={`w-60 h-60 mx-auto relative  transition-all duration-1000 delay-200`}
+                            >
 
-Connect with me | gmail => [shinhlaing.htp@gmail.com](mailto:shinhlaing.htp@gmail.com) | discord => [shinnhlaing](https://discord.com/users/757793285237506058)
+                                <img
+                                    src="https://avatars.githubusercontent.com/u/88526467?v=4"
+                                    alt="Profile Photo"
+                                    className="w-full h-full object-cover rounded-full"
+                                />
+                            </div>
+                            <div className={`text-md  flex flex-col gap-3 transition-all duration-1000 delay-300`}>
+                                <p className={`text-sm md:text-[16px] text-gray-600 transition-all duration-500`}>A web developer who focused on modern frontend ecosystems and creating seamless user journeys.
+                                    I specialize in Javascript, React, TypeScript, and modern CSS frameworks to build scalable, performant applications.</p>
+                                <p className={`text-sm md:text-[16px] text-gray-600 transition-all duration-500`}>
+                                  Connect with me | <a href="mailto:shinhlaing.htp@gmail.com" className="text-purple-800">shinhlaing.htp@gmail.com</a> 
+                                </p>
+                                <div className="flex space-x-4">
+                                    <a
+                                        href="https://github.com/ShinnHlaing" target="_blank" rel="noopener noreferrer"
+                                        className="text-purple-800 cursor-pointer  transition-colors"
+                                    >
+                                        <FaGithub className='text-2xl' />
+                                    </a>
+                                    <a
+                                        href="https://discord.com/users/757793285237506058" target="_blank" rel="noopener noreferrer"
+                                        className="text-purple-800 cursor-pointer transition-colors"
+                                    >
+                                        <FaDiscord className='text-2xl' />
+                                    </a>
+                                    <a
+                                        href="#"
+                                        className="text-purple-800 cursor-pointer transition-colors" target="_blank" rel="noopener noreferrer"
+                                    >
+                                        <CiLinkedin className='text-2xl' />
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            
+                                <div  className={`bg-transparent text-gray-600 hover:-translate-y-2 px-3 py-5 rounded-lg shadow-sm flex flex-col md:items-start md:text-start items-center text-center gap-3 transition-all duration-300`}>
+                                    <Braces className='text-purple-800' />
+                                    <h3 className="font-semibold">Clean Code</h3>
+                                    <p className="text-sm">Writing maintainable, scalable code following best practices</p>
+                                </div>
+                                <div  className={`bg-transparent text-gray-600 hover:-translate-y-2 px-3 py-5 rounded-lg shadow-sm flex flex-col md:items-start md:text-start items-center text-center gap-3 transition-all duration-300 `}>
+                                    <Blocks className='text-purple-800' />
+                                    <h3 className="font-semibold">UI/UX Design</h3>
+                                    <p className="text-sm">Creating intuitive interfaces with attention to detail</p>
+                                </div>
+                                <div  className={`bg-transparent text-gray-600 hover:-translate-y-2 px-3 py-5 rounded-lg shadow-sm flex flex-col md:items-start md:text-start items-center text-center gap-3 transition-all duration-300 `}>
+                                    <MonitorSmartphone className='text-purple-800' />
+                                    <h3 className="font-semibold">Responsive</h3>
+                                    <p className="text-sm">Mobile-first approach ensuring great experience on all devices</p>
+                                </div>
+                                <div  className={`bg-transparent text-gray-600 hover:-translate-y-2 px-3 py-5 rounded-lg shadow-sm flex flex-col md:items-start md:text-start items-center text-center gap-3 transition-all duration-300`}>
+                                    <Radar className='text-purple-800' />
+                                    <h3 className="font-semibold">Performance</h3>
+                                    <p className="text-sm">Optimizing for fast load times and smooth interactions</p>
+                                </div>
+                          
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
\ No newline at end of file