Skip to content

Commit 81ff7e6

Browse files
sudochitswe-v2sudochitswe-v2
committed
🔥 build(profile): add sudochitswe profile
1 parent 9fb05b6 commit 81ff7e6

3 files changed

Lines changed: 432 additions & 0 deletions

File tree

‎content/profile/sudochitswe.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
name: Chit Swe
3+
description: Backend-focus full stack developer, expertise in C#/.NET platform.
4+
image: "https://avatars.githubusercontent.com/u/172891448?v=4"
5+
tags:
6+
- C#
7+
- .NET Core
8+
- RDBMS
9+
- Docker
10+
- Linux
11+
- Reactjs
12+
- Winform
13+
---
14+
15+
import Sudochitswe from "@/components/Contributors/sudochitswe/Sudochitswe";
16+
17+
<Sudochitswe />

‎src/components/Contributors/sudochitswe/Sudochitswe.tsx‎

Lines changed: 323 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,323 @@
1+
"use client";
2+
/* eslint-disable @next/next/no-img-element */
3+
4+
import { motion, type Variants } from "motion/react";
5+
import React from "react";
6+
import { FaGithub, FaFacebook, FaEnvelope, FaLinkedin } from "react-icons/fa";
7+
import { BsBrowserSafari, BsTerminal, BsBox, BsHddRack } from "react-icons/bs";
8+
import {
9+
personalInfo,
10+
aboutData,
11+
skillsData,
12+
projectsData,
13+
experienceData,
14+
} from "./data";
15+
16+
// ─── Animation Variants ─────────────────────────────────
17+
18+
const EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1];
19+
20+
const fadeUp: Variants = {
21+
hidden: { opacity: 0, y: 28 },
22+
visible: {
23+
opacity: 1,
24+
y: 0,
25+
transition: { duration: 0.5, ease: EASE_OUT },
26+
},
27+
};
28+
29+
const stagger: Variants = {
30+
hidden: {},
31+
visible: { transition: { staggerChildren: 0.08 } },
32+
};
33+
34+
const scaleIn: Variants = {
35+
hidden: { opacity: 0, scale: 0.85 },
36+
visible: {
37+
opacity: 1,
38+
scale: 1,
39+
transition: { duration: 0.5, ease: EASE_OUT },
40+
},
41+
};
42+
43+
// ─── Section Header ─────────────────────────────────────
44+
45+
function SectionHeader({ title, icon }: { title: string; icon: React.ReactNode }) {
46+
return (
47+
<div className="flex items-center gap-3 mb-8">
48+
<span className="text-emerald-400">{icon}</span>
49+
<h2 className="text-lg sm:text-xl font-display font-bold text-zinc-100 whitespace-nowrap">
50+
{title}
51+
</h2>
52+
<div className="flex-1 h-px bg-gradient-to-r from-emerald-500/20 to-transparent" />
53+
</div>
54+
);
55+
}
56+
57+
// ─── Hero Section ───────────────────────────────────────
58+
59+
function HeroSection() {
60+
return (
61+
<motion.section
62+
initial="hidden"
63+
animate="visible"
64+
variants={stagger}
65+
className="text-center mb-14"
66+
>
67+
<motion.div variants={scaleIn} className="mb-5 inline-block">
68+
<div className="relative">
69+
<div className="absolute -inset-1 bg-gradient-to-br from-green-600/30 via-green-500/10 to-green-400/20 rounded-full blur-md" />
70+
<div className="relative bg-black rounded-full p-1 border-2 border-green-500/40">
71+
<img
72+
src={personalInfo.avatar}
73+
alt={personalInfo.name}
74+
className="w-28 h-28 sm:w-32 sm:h-32 rounded-full object-cover"
75+
/>
76+
</div>
77+
<div className="absolute -bottom-1 -right-1 bg-green-600 text-black text-[10px] font-bold px-2 py-0.5 rounded-full border-2 border-black">
78+
sudo
79+
</div>
80+
</div>
81+
</motion.div>
82+
83+
<motion.h1
84+
variants={fadeUp}
85+
className="text-3xl sm:text-4xl font-bold text-green-400 mb-1.5 font-mono"
86+
>
87+
<span className="text-zinc-500">root@</span>
88+
{personalInfo.name.replace(" ", "-").toLowerCase()}
89+
<span className="text-zinc-500">:</span>
90+
<span className="text-blue-400">~</span>
91+
<span className="text-zinc-500">$</span> whoami
92+
</motion.h1>
93+
94+
<motion.p
95+
variants={fadeUp}
96+
className="text-green-500/70 text-sm tracking-wide mb-4 font-mono"
97+
>
98+
<span className="text-zinc-600">#</span> {personalInfo.title}
99+
</motion.p>
100+
101+
<motion.div variants={fadeUp} className="flex flex-wrap justify-center gap-2 mb-8">
102+
{personalInfo.tags.map((tag, i) => (
103+
<span
104+
key={i}
105+
className="px-3 py-1.5 rounded-none bg-black border border-green-500/30 text-green-400 text-xs font-mono"
106+
>
107+
<span className="text-blue-400">export</span> SKILL_{i}=<span className="text-amber-400">
108+
&quot;{tag}&quot;
109+
</span>
110+
</span>
111+
))}
112+
</motion.div>
113+
114+
<motion.div
115+
variants={fadeUp}
116+
className="relative max-w-2xl mx-auto bg-black/90 backdrop-blur-sm border border-green-500/30 rounded-none p-6 sm:p-8 text-left font-mono text-sm overflow-x-auto"
117+
>
118+
{/* Terminal content */}
119+
<div className="space-y-1">
120+
<div className="text-zinc-500">
121+
<span className="text-green-400">$</span> cat about.txt
122+
</div>
123+
<div className="text-green-300/90 leading-relaxed border-l-2 border-green-500/30 pl-4">
124+
{aboutData.description}
125+
</div>
126+
<div className="text-zinc-500">
127+
<span className="text-green-400 animate-pulse">▋</span>
128+
</div>
129+
</div>
130+
</motion.div>
131+
132+
<motion.div variants={fadeUp} className="flex flex-wrap justify-center gap-3 mt-8">
133+
{[
134+
{
135+
href: personalInfo.social.github,
136+
icon: <FaGithub size={14} />,
137+
},
138+
{
139+
href: personalInfo.social.facebook,
140+
icon: <FaFacebook size={14} />,
141+
},
142+
{
143+
href: personalInfo.social.linkedin,
144+
icon: <FaLinkedin size={14} />,
145+
},
146+
{
147+
href: personalInfo.website,
148+
icon: <BsBrowserSafari size={14} />,
149+
},
150+
].map((link, i) => (
151+
<motion.a
152+
key={i}
153+
href={link.href}
154+
target={link.href.startsWith("mailto") ? undefined : "_blank"}
155+
rel="noopener noreferrer"
156+
whileHover={{ y: -2 }}
157+
whileTap={{ scale: 0.97 }}
158+
className="flex items-center gap-2 px-3 py-2 rounded-none bg-black border border-green-500/30 text-green-400 text-[11px] font-mono hover:bg-green-500/10 hover:border-green-400/50 transition-all duration-200"
159+
>
160+
{link.icon}
161+
<span className="text-zinc-600">$</span>
162+
<span className="text-blue-400">curl</span>
163+
<span className="text-amber-400">{link.href}</span>
164+
</motion.a>
165+
))}
166+
</motion.div>
167+
</motion.section>
168+
);
169+
}
170+
171+
172+
function SkillsSection() {
173+
const skillIcons = [<BsTerminal key="backend" />, <BsHddRack key="database" />, <BsBox key="devops" />, <BsBrowserSafari key="frontend" />];
174+
175+
return (
176+
<section className="mb-14">
177+
<SectionHeader title="./skills.sh" icon={<BsTerminal />} />
178+
<motion.div
179+
initial="hidden"
180+
animate="visible"
181+
variants={stagger}
182+
className="grid grid-cols-1 sm:grid-cols-2 gap-4"
183+
>
184+
{skillsData.categories.map((category, i) => (
185+
<motion.div
186+
key={i}
187+
variants={fadeUp}
188+
className="bg-black border border-green-500/20 rounded-none p-5 hover:border-green-400/40 transition-colors duration-200"
189+
>
190+
<div className="flex items-center gap-2 mb-3">
191+
<span className="text-green-400">{skillIcons[i]}</span>
192+
<h3 className="text-sm font-display font-semibold text-green-300 font-mono">
193+
{category.name}
194+
</h3>
195+
</div>
196+
<div className="flex flex-wrap gap-2">
197+
{category.skills.map((skill, j) => (
198+
<span
199+
key={j}
200+
className="px-2.5 py-1 rounded-none bg-green-500/5 border border-green-500/20 text-green-400 text-[11px] font-mono hover:bg-green-500/15 hover:border-green-400/40 transition-colors duration-200"
201+
>
202+
{skill}
203+
</span>
204+
))}
205+
</div>
206+
</motion.div>
207+
))}
208+
</motion.div>
209+
</section>
210+
);
211+
}
212+
213+
214+
function ProjectsSection() {
215+
return (
216+
<section className="mb-14">
217+
<SectionHeader title="./projects/" icon={<BsBrowserSafari />} />
218+
<motion.div
219+
initial="hidden"
220+
animate="visible"
221+
variants={stagger}
222+
className="grid gap-4"
223+
>
224+
{projectsData.projects.map((project, i) => (
225+
<motion.div
226+
key={i}
227+
variants={fadeUp}
228+
whileHover={{ y: -2 }}
229+
className="group bg-black border border-green-500/20 rounded-none p-5 hover:border-green-400/40 transition-all duration-300"
230+
>
231+
<h3 className="text-[15px] font-display font-semibold text-green-300 mb-2 group-hover:text-green-200 transition-colors duration-200 flex items-center gap-2 font-mono">
232+
<span className="text-blue-400">./</span>
233+
{project.title.toLowerCase().replace(/\s+/g, "-")}
234+
</h3>
235+
236+
<p className="text-zinc-500 text-sm leading-relaxed mb-3 font-mono">
237+
<span className="text-zinc-600">#</span> {project.description}
238+
</p>
239+
240+
<div className="flex flex-wrap gap-1.5 font-mono">
241+
<span className="text-blue-400 text-[10px]">tech_stack</span>
242+
<span className="text-zinc-500 text-[10px]">=</span>
243+
<span className="text-zinc-500 text-[10px]">[</span>
244+
{project.tech.map((tech, j) => (
245+
<span
246+
key={j}
247+
className="text-amber-400 text-[10px]"
248+
>
249+
&quot;{tech}&quot;{j < project.tech.length - 1 && <span className="text-zinc-500">, </span>}
250+
</span>
251+
))}
252+
<span className="text-zinc-500 text-[10px]">]</span>
253+
</div>
254+
</motion.div>
255+
))}
256+
</motion.div>
257+
</section>
258+
);
259+
}
260+
261+
262+
function ExperienceTimeline() {
263+
return (
264+
<section>
265+
<SectionHeader title="/var/log/experience.log" icon={<BsHddRack />} />
266+
<motion.div
267+
initial="hidden"
268+
animate="visible"
269+
variants={stagger}
270+
className="relative ml-3 sm:ml-4 pl-7 sm:pl-8"
271+
>
272+
<div className="absolute left-0 top-1 bottom-1 w-px bg-gradient-to-b from-green-500/50 via-green-500/30 to-transparent" />
273+
274+
{experienceData.experiences.map((exp, i) => (
275+
<motion.div
276+
key={i}
277+
variants={fadeUp}
278+
className="relative mb-5 last:mb-0"
279+
>
280+
<div className="absolute -left-[1.85rem] sm:-left-[2.1rem] top-[18px] w-[9px] h-[9px] rounded-sm bg-green-500 border-2 border-black z-10" />
281+
282+
<div className="bg-black border border-green-500/20 rounded-none p-4 sm:p-5 hover:border-green-400/40 transition-colors duration-200 font-mono">
283+
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-0.5 sm:gap-4 mb-1.5">
284+
<div className="min-w-0">
285+
<h3 className="text-sm font-display font-semibold text-green-300">
286+
<span className="text-zinc-600">[</span>
287+
<span className="text-blue-400">INFO</span>
288+
<span className="text-zinc-600">]</span> {exp.company}
289+
</h3>
290+
<p className="text-xs text-green-400/80">{exp.position}</p>
291+
</div>
292+
<span className="text-[11px] text-zinc-600 whitespace-nowrap flex-shrink-0">
293+
{exp.date}
294+
</span>
295+
</div>
296+
297+
{exp.description && (
298+
<p className="text-xs text-zinc-500 leading-relaxed mt-2">
299+
{exp.description}
300+
</p>
301+
)}
302+
303+
</div>
304+
</motion.div>
305+
))}
306+
</motion.div>
307+
</section>
308+
);
309+
}
310+
311+
312+
const Sudochitswe: React.FC = () => {
313+
return (
314+
<div className="max-w-2xl mx-auto py-6 sm:py-10">
315+
<HeroSection />
316+
<SkillsSection />
317+
<ProjectsSection />
318+
<ExperienceTimeline />
319+
</div>
320+
);
321+
};
322+
323+
export default Sudochitswe;

0 commit comments

Comments
 (0)