Skip to content

Commit a01f097

Browse files
phothinmgphothinmg
authored
🔥 build(profile): add phothinmaung profile (#275)
1 parent 9fb05b6 commit a01f097

1 file changed

Lines changed: 206 additions & 0 deletions

File tree

‎content/profile/phothinmaung.mdx‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
---
2+
name: Pho Thin Maung
3+
description: A programming enthusiast.
4+
image: "https://susee.phothin.dev/logo/phothin/logo-330.webp"
5+
tags:
6+
- TypeScript
7+
- JavaScript
8+
---
9+
10+
{/* The projects */}
11+
export const projects = [
12+
{
13+
title: "Thetkarit",
14+
summary:
15+
"A dual-language (TypeScript/JavaScript and C++) library for Burmese calendar calculations and astronomical computations.",
16+
github: "https://github.com/phothinmg/thetkarits",
17+
},
18+
{
19+
title: "Susee",
20+
summary:
21+
"Susee is a simple TypeScript bundler for library packages.",
22+
github: "https://github.com/phothinmg/susee",
23+
npm: "https://www.npmjs.com/package/susee",
24+
},
25+
{
26+
title: "Mhaehko",
27+
summary:
28+
"A static analysis tool designed to examine TypeScript and JavaScript projects and produce dependency graphs,using TypeScript APIs.",
29+
github: "https://github.com/phothinmg/mhaehko",
30+
npm: "https://www.npmjs.com/package/mhaehko",
31+
},
32+
];
33+
34+
{/* The Crafts */}
35+
export const labs = [
36+
{
37+
title:
38+
"Sunrise and sunset times for capitals of states and regions in Myanmar",
39+
url: "https://phothinmg.github.io/crafts/mm-daytime.html",
40+
summary: "ပြည်နယ်နှင့်တိုင်းမြို့တော်များ၏နေဝင်နေထွက်ချိန်များ",
41+
},
42+
{
43+
title: "Get Maharbote from Birthday",
44+
url: "https://phothinmg.github.io/crafts/maharbote.html",
45+
summary:
46+
"မိမိမွေးနေ့မှမဟာဘုတ်အဖွားဇာတာခွင် , သက်ရောက်ဂြိုလ် နှင့် သက်ရောက်လက်ကျန်နှစ်ကိုသိရှိနိုင်ပါသည်",
47+
},
48+
];
49+
50+
{/* The Components */}
51+
52+
export const ProjectCard = ({ title, summary, github, npm }) => {
53+
return (
54+
<div className="rounded-lg overflow-hidden shadow-lg border border-solid border-[#367236] last:mb-0">
55+
<div className="p-[20px]">
56+
<h4
57+
className="mb-[10px] text-[#ababab] font-semibold"
58+
style={{ fontSize: "clamp(1.18rem, calc(1.13rem + 0.24vw), 1.32rem)" }}
59+
>
60+
{title}
61+
</h4>
62+
</div>
63+
<div className="min-h-[150px] text-left p-[20px]">
64+
<p>{summary}</p>
65+
</div>
66+
<div className="flex items-center flex-wrap gap-[10px] p-[20px]">
67+
<a
68+
href={github}
69+
target="_blank"
70+
aria-label={title}
71+
rel="noopener noreferrer"
72+
>
73+
<img
74+
alt="GitHub Badge"
75+
src="https://img.shields.io/badge/github-repo-blue?style=for-the-badge&logo=github"
76+
fetchPriority="high"
77+
width="120"
78+
height="50"
79+
/>
80+
</a>
81+
82+
{npm && (
83+
<a
84+
href={npm}
85+
target="_blank"
86+
aria-label={title}
87+
rel="noopener noreferrer"
88+
>
89+
<img
90+
alt="NPM Badge"
91+
src="https://img.shields.io/badge/npm-package-red?style=for-the-badge&logo=npm"
92+
fetchPriority="high"
93+
width="120"
94+
height="50"
95+
/>
96+
</a>
97+
)}
98+
</div>
99+
</div>
100+
101+
);
102+
};
103+
104+
export const DevLabCard = ({ title, url, summary }) => {
105+
return (
106+
<div className="p-[20px] mt-0 mr-0 ml-0 mb-[1.5em] rounded-lg overflow-hidden shadow-lg border-2 border-solid border-[#367236] last:mb-0">
107+
<a
108+
href={url}
109+
className="no-underline cursor-pointer text-[#71b4eb] font-semibold hover:text-[#ff9800] mb-[10px]"
110+
style={{ fontSize: "clamp(1.09rem, calc(1.07rem + 0.11vw), 1.15rem)" }}
111+
>
112+
{title}
113+
</a>
114+
<p
115+
className="font-myanmar text-[#ababab] mt-[10px]"
116+
style={{ fontSize: "clamp(0.85rem, 0.7897rem + 0.2804vw, 1rem)" }}
117+
>
118+
{summary}
119+
</p>
120+
</div>
121+
);
122+
};
123+
124+
{/* Mdx Body */}
125+
126+
<div className="my-0 mx-auto py-0 px-[20px] max-w-[70rem]">
127+
<div className="flex items-center gap-[50px] max-[768px]:flex-col">
128+
<div className="flex-1 rounded-lg overflow-hidden shadow-md">
129+
<img
130+
className="block rounded-full"
131+
src={"https://susee.phothin.dev/logo/phothin/logo-330.webp"}
132+
srcSet="https://susee.phothin.dev/logo/phothin/logo-330.webp 330w, https://susee.phothin.dev/logo/phothin/logo-495.webp 495w, https://susee.phothin.dev/logo/phothin/logo-660.webp 660w"
133+
width={"330"}
134+
height={"330"}
135+
fetchPriority="high"
136+
/>
137+
</div>
138+
<div className="flex-1">
139+
<h3 className="text-[#ababab] font-semibold" style={{ fontSize: "clamp(1.29rem, calc(1.2rem + 0.41vw), 1.51rem)" }}>
140+
Mingalarpar
141+
</h3>
142+
<p className='mt-[10px]'>I'm Pho Thin Maung, a programming enthusiast from Myanmar. </p>
143+
144+
<div className="flex items-center flex-wrap gap-[10px] mt-[10px] ">
145+
<p>Reach me on : </p>
146+
<a
147+
href="https://github.com/phothinmg"
148+
className="no-underline cursor-pointer hover:text-[#ff9800]"
149+
>
150+
<svg
151+
role="img"
152+
viewBox="0 0 24 24"
153+
xmlns="http://www.w3.org/2000/svg"
154+
width="18"
155+
height="18"
156+
>
157+
<title>GitHub</title>
158+
<path
159+
fill="currentColor"
160+
fillOpacity="0.7"
161+
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
162+
></path>
163+
</svg>
164+
</a>
165+
<a
166+
href="mailto:phothinmg@disroot.org"
167+
className="no-underline cursor-pointer hover:text-[#ff9800]"
168+
>
169+
<svg
170+
role="img"
171+
viewBox="0 0 24 24"
172+
xmlns="http://www.w3.org/2000/svg"
173+
width="18"
174+
height="18"
175+
>
176+
<title>Disroot Mail</title>
177+
<path
178+
fill="currentColor"
179+
fillOpacity="0.7"
180+
d="M3.976 2.856C2.321 3.296.603 4.491.122 5.536c-.144.315-.164.885-.04 1.133.178.35.343.384 1.387.24.817-.11 1.085-.117 1.985-.055 1.106.076 1.594.213 1.882.522.172.179 3.75 9.033 3.813 9.418.11.694-.234 1.312-1.189 2.143-.797.687-.927.907-.824 1.381.151.666.508.982 1.113.982.508 0 2.095-.268 3.297-.55 3.476-.817 6.437-1.923 8.504-3.173 1.944-1.168 3.25-2.555 3.765-3.984.15-.433.178-.618.185-1.326 0-.975-.11-1.38-.536-1.958-.858-1.16-1.8-2.005-3.338-2.988-2.96-1.902-3.778-2.294-6.67-3.215-2.521-.803-5.358-1.318-7.728-1.394-1.017-.027-1.147-.02-1.752.144zm9.411 6.526c1.477.563 2.823 1.47 4.554 3.07.838.777 1.024 1.072 1.058 1.732.076 1.23-.597 2.033-2.088 2.507-.708.22-2.191.536-2.253.474-.02-.014 0-.13.041-.254.048-.13.062-.447.048-.749-.027-.433-.096-.68-.364-1.319-.179-.433-.708-1.91-1.175-3.283l-.851-2.5.22.047c.123.028.487.151.81.275z"
181+
></path>
182+
</svg>
183+
</a>
184+
</div>
185+
</div>
186+
187+
</div>
188+
</div>
189+
<section className='py-[80px] px-[20px]'>
190+
<div className='flex h-[100px] items-center justify-center'>
191+
<h2 className='text-[#ababab] font-semibold' style={{fontSize:"clamp(1.4rem, calc(1.28rem + 0.61vw), 1.73rem)"}}>Projects</h2>
192+
</div>
193+
<div className='grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-[30px]'>
194+
{projects.map((project) => (
195+
<ProjectCard key={project.title} {...project} />
196+
))}
197+
</div>
198+
</section>
199+
<section className='py-[80px] px-[20px]'>
200+
<div className='flex h-[100px] items-center justify-center'>
201+
<h2 className='text-[#ababab] font-semibold' style={{fontSize:"clamp(1.4rem, calc(1.28rem + 0.61vw), 1.73rem)"}}>Dev Lab</h2>
202+
</div>
203+
{labs.map((lab)=>(
204+
<DevLabCard key={lab.title} {...lab} />
205+
))}
206+
</section>

0 commit comments

Comments
 (0)