Skip to content

Commit e07cd7f

Browse files
ShinnHlaingShinnHlaing
committed
💄 style(profile): update UI/UX
1 parent d8c52f8 commit e07cd7f

1 file changed

Lines changed: 75 additions & 4 deletions

File tree

‎content/profile/shinnhlaing.mdx‎

Lines changed: 75 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,81 @@ tags:
1313
- Tailwindcss
1414
---
1515

16-
##### A web developer who focused on modern frontend ecosystems and creating seamless user journeys.
16+
import { FaGithub } from "react-icons/fa6";
17+
import { CiLinkedin } from "react-icons/ci";
18+
import { FaDiscord } from "react-icons/fa";
19+
import { Braces, Blocks, MonitorSmartphone, Radar } from "lucide-react";
1720

18-
> Always learning, always building. `🍴🍋‍🟩❔✅`
1921

20-
**_React & Next.js enthusiast | Crafting responsive, user-centric websites._**
22+
<section id="about" className={`py-10 px-6 transition-colors duration-500`}>
23+
<div className="max-w-7xl mx-auto px-6 py-4">
24+
<div className="">
25+
<div className="grid md:grid-cols-2 gap-6 items-center">
26+
<div className="flex flex-col gap-6">
27+
<div
28+
className={`w-60 h-60 mx-auto relative transition-all duration-1000 delay-200`}
29+
>
2130

22-
Connect with me | gmail => [shinhlaing.htp@gmail.com](mailto:shinhlaing.htp@gmail.com) | discord => [shinnhlaing](https://discord.com/users/757793285237506058)
31+
<img
32+
src="https://avatars.githubusercontent.com/u/88526467?v=4"
33+
alt="Profile Photo"
34+
className="w-full h-full object-cover rounded-full"
35+
/>
36+
</div>
37+
<div className={`text-md flex flex-col gap-3 transition-all duration-1000 delay-300`}>
38+
<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.
39+
I specialize in Javascript, React, TypeScript, and modern CSS frameworks to build scalable, performant applications.</p>
40+
<p className={`text-sm md:text-[16px] text-gray-600 transition-all duration-500`}>
41+
Connect with me | <a href="mailto:shinhlaing.htp@gmail.com" className="text-purple-800">shinhlaing.htp@gmail.com</a>
42+
</p>
43+
<div className="flex space-x-4">
44+
<a
45+
href="https://github.com/ShinnHlaing" target="_blank" rel="noopener noreferrer"
46+
className="text-purple-800 cursor-pointer transition-colors"
47+
>
48+
<FaGithub className='text-2xl' />
49+
</a>
50+
<a
51+
href="https://discord.com/users/757793285237506058" target="_blank" rel="noopener noreferrer"
52+
className="text-purple-800 cursor-pointer transition-colors"
53+
>
54+
<FaDiscord className='text-2xl' />
55+
</a>
56+
<a
57+
href="#"
58+
className="text-purple-800 cursor-pointer transition-colors" target="_blank" rel="noopener noreferrer"
59+
>
60+
<CiLinkedin className='text-2xl' />
61+
</a>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
67+
68+
<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`}>
69+
<Braces className='text-purple-800' />
70+
<h3 className="font-semibold">Clean Code</h3>
71+
<p className="text-sm">Writing maintainable, scalable code following best practices</p>
72+
</div>
73+
<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 `}>
74+
<Blocks className='text-purple-800' />
75+
<h3 className="font-semibold">UI/UX Design</h3>
76+
<p className="text-sm">Creating intuitive interfaces with attention to detail</p>
77+
</div>
78+
<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 `}>
79+
<MonitorSmartphone className='text-purple-800' />
80+
<h3 className="font-semibold">Responsive</h3>
81+
<p className="text-sm">Mobile-first approach ensuring great experience on all devices</p>
82+
</div>
83+
<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`}>
84+
<Radar className='text-purple-800' />
85+
<h3 className="font-semibold">Performance</h3>
86+
<p className="text-sm">Optimizing for fast load times and smooth interactions</p>
87+
</div>
88+
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</section>

0 commit comments

Comments
 (0)