Skip to content

Commit 682eff4

Browse files
ShinnHlaingShinnHlaing
authored
💄 style(profile): update UI/UX (#272)
* 🔥 build(profile): add shinnhlaing profile * 💄 style(profile): update UI/UX
1 parent 2d2d93f commit 682eff4

1 file changed

Lines changed: 93 additions & 0 deletions

File tree

‎content/profile/shinnhlaing.mdx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
name: Shinn Hlaing
3+
description: Hello Mr/Ms, I'm a frontend developer who love to create seamless and futuristic design.
4+
image: "https://avatars.githubusercontent.com/u/88526467?v=4"
5+
tags:
6+
- Javascript
7+
- Typescript
8+
- Next.js
9+
- React
10+
- MySql
11+
- PostgreSql
12+
- Prisma
13+
- Tailwindcss
14+
---
15+
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";
20+
21+
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+
>
30+
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)