🔥 build(profile): add yehtetaung profile

content/profile/lwinmoepaing.mdx

@@ -6,7 +6,7 @@ tags:
   - Fullstack
   - Frontend
   - JavaScript
-  - ReactJS 
+  - ReactJS
   - SolidJS
 ---
 
@@ -15,39 +15,52 @@ import ContriSquareBox from "@/components/Contributors/ContriSquareBox/ContriSqu
 import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
 
 <div className="lwinmoepaing">
-  <div className="flex flex-col md:flex-row">
-    <div className="md:w-6/12 mb-5 flex flex-col justify-center items-center">
-      <div className="h-28 w-28 rounded-3xl overflow-hidden mx-auto">
-        <img src="https://avatars.githubusercontent.com/u/49163775?v=4" />
-      </div>
-      <SpacingDivider size="sm"/>
-      <h3 className="flex flex-row max-w-[240px] mx-auto">
-        <img
-          src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/gitto.gif"
-          className="h-[20px] object-contain mr-2"
-        />
-        <span> Hi, I'm Lwin Moe Paing </span>
-      </h3>
-      <SpacingDivider size="sm"/>
-      <Counter />
-      <SpacingDivider size="sm"/>
-      <ContriSquareBox>
-        <p className="text-center text-sm mb-2"><img className="h-5 inline-block mr-1 relative -top-1" src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"/>I’m looking for help with Javascript Language to build Many Free Softwares to help people who can't afford to pay!!</p>
-        <p className="text-center text-sm mb-2"><img className="h-5 inline-block mr-1 relative -top-1" src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"/>How to reach me **[email protected] (or) [facebook](https://www.facebook.com/lwin.im/)**</p>
-      </ContriSquareBox>
-    </div>
-    <div className="flex flex-1 flex-row justify-center items-center">
-      <div className="ph-container">
-        <div className="phone">
-          <div className="notch-container">
-            <div className="notch"></div>
-          </div>
-          <iframe
-            src="https://lwinmoepaing.github.io/"
-            className="h-full relative"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div> 
+	<div className="flex flex-col md:flex-row">
+		<div className="md:w-6/12 mb-5 flex flex-col justify-center items-center">
+			<div className="h-28 w-28 rounded-3xl overflow-hidden mx-auto">
+				<img src="https://avatars.githubusercontent.com/u/49163775?v=4" />
+			</div>
+			<SpacingDivider size="sm" />
+			<h3 className="flex flex-row max-w-[240px] mx-auto">
+				<img
+					src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/gitto.gif"
+					className="h-[20px] object-contain mr-2"
+				/>
+				<span> Hi, I'm Lwin Moe Paing </span>
+			</h3>
+			<SpacingDivider size="sm" />
+			<Counter />
+			<SpacingDivider size="sm" />
+			<ContriSquareBox>
+				<p className="text-center text-sm mb-2">
+					<img
+						className="h-5 inline-block mr-1 relative -top-1"
+						src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"
+					/>
+					I’m looking for help with Javascript Language to build Many Free Softwares
+					to help people who can't afford to pay!!
+				</p>
+				<p className="text-center text-sm mb-2">
+					<img
+						className="h-5 inline-block mr-1 relative -top-1"
+						src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"
+					/>
+					How to reach me **[email protected] (or) [facebook](https://www.facebook.com/lwin.im/)**
+				</p>
+			</ContriSquareBox>
+		</div>
+		<div className="flex flex-1 flex-row justify-center items-center">
+			<div className="ph-container">
+				<div className="phone">
+					<div className="notch-container">
+						<div className="notch"></div>
+					</div>
+					<iframe
+						src="https://lwinmoepaing.github.io/"
+						className="h-full relative"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

content/profile/yehtetaung.mdx

@@ -0,0 +1,24 @@
+---
+name: Ye Htet Aung
+description: I'm full stack developer with 1 year of experience.
+image: "https://avatars.githubusercontent.com/u/66383566?v=4"
+tags:
+  - FullStack
+  - JavaScript
+  - TypeScript
+  - ReactJS
+  - React Native
+  - NextJS
+  - NodeJS
+  - ExpressJS
+  - MySQL
+  - MongoDB
+  - Firebase
+  - Prisma
+---
+
+import YeHtetAung from "@/components/Contributors/YeHtetAung/App";
+
+<div className="p-10">
+	<YeHtetAung />
+</div>

src/app/profile/page.tsx

@@ -8,29 +8,29 @@ import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
 import ProfileCardList from "@/components/Profile/ProfileCardList/ProfileCardList";
 
 export const metadata: Metadata = {
-  title: `Profile List | ${APP_CONFIG.title}`,
-  description: APP_CONFIG.description,
-  openGraph: {
-    title: `Profile List | ${APP_CONFIG.title}`,
-    description: APP_CONFIG.description,
-    images: "https://mmswe.com/images/landing/galaxy.jpg",
-  },
+	title: `Profile List | ${APP_CONFIG.title}`,
+	description: APP_CONFIG.description,
+	openGraph: {
+		title: `Profile List | ${APP_CONFIG.title}`,
+		description: APP_CONFIG.description,
+		images: "https://mmswe.com/images/landing/galaxy.jpg",
+	},
 };
 
 const getAllProfileList = async () => {
-  return allProfiles;
+	return allProfiles;
 };
 
 const ProfileListPage = async () => {
-  const profiles = await getAllProfileList();
+	const profiles = await getAllProfileList();
 
-  return (
-    <PageTransitionWrapper>
-      <Container>
-        <ProfileCardList profiles={profiles} />
-        <SpacingDivider size="lg" />
-      </Container>
-    </PageTransitionWrapper>
-  );
+	return (
+		<PageTransitionWrapper>
+			<Container>
+				<ProfileCardList profiles={profiles} />
+				<SpacingDivider size="lg" />
+			</Container>
+		</PageTransitionWrapper>
+	);
 };
 export default ProfileListPage;

src/components/Contributors/YeHtetAung/App.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import Skills from "./components/Skills";
+import Intro from "./components/Intro";
+import Profile from "./components/Profile";
+import Projects from "./components/Projects";
+
+const YeHtetAung = () => {
+	return (
+		<div className="md:flex">
+			<Profile />
+			<div className="container">
+				<Intro />
+				<Skills />
+				<Projects />
+			</div>
+		</div>
+	);
+};
+
+export default YeHtetAung;

src/components/Contributors/YeHtetAung/components/Intro.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Intro = () => {
+	return (
+		<div>
+			<h2 className="text_shadows">Ye Htet Aung</h2>
+			<span className="text-lg">
+				I&apos;m full stack developer with 1 year of experience. Now I currently
+				working with React, React Native, Nextjs and Nodejs.
+			</span>
+		</div>
+	);
+};
+
+export default Intro;

src/components/Contributors/YeHtetAung/components/Profile.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable @next/next/no-img-element */
+import React from "react";
+import { Profile } from "../types";
+
+import { FaLinkedin, FaFacebook, FaGithub } from "react-icons/fa";
+import { SiGmail } from "react-icons/si";
+
+const Profile = () => {
+	const profiles: Profile[] = [
+		{
+			title: "Zen",
+			url: "https://github.com/yellhtetaung",
+			icon: FaGithub,
+			iconColor: "#1F2328",
+		},
+		{
+			title: "Ye Htet Aung",
+			url: "https://www.facebook.com/yehtetaungxzen",
+			icon: FaFacebook,
+			iconColor: "#0765FF",
+		},
+		{
+			title: "Ye Htet Aung",
+			url: "https://www.linkedin.com/in/yellhtetaung2488/",
+			icon: FaLinkedin,
+			iconColor: "#0B65C2",
+		},
+		{
+			title: "[email protected]",
+			url: "mailto:[email protected]",
+			icon: SiGmail,
+			iconColor: "#000000",
+		},
+	];
+
+	return (
+		<div className="w-full md:w-1/2 mb-10 md:me-5 md:mb-0 flex flex-col items-center">
+			<img
+				src="https://yehtetaung-dev.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-image.c39e72b0.jpg&w=384&q=95"
+				className="w-[160px] h-[160px] border-4 rounded-full object-cover"
+				alt="yehtetaung"
+			/>
+
+			<div className="w-full h-full p-5 mt-10 flex justify-center gap-5 md:justify-start md:gap-0 md:flex-col md:bg-[rgba(255,255,255,0.6)] md:backdrop-blur-3xl md:rounded-xl md:shadow-xl">
+				{profiles.map((profile) => (
+					<a
+						href={profile.url}
+						target="_blank"
+						key={profile.url}
+						className="my-3 flex items-center gap-3 hover:scale-125 md:hover:scale-100"
+					>
+						<profile.icon
+							className="text-2xl"
+							style={{ color: profile.iconColor }}
+						/>
+						<span className="text-black text-sm hover:text-cyan-800 hidden md:inline">
+							{profile.title}
+						</span>
+					</a>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default Profile;

src/components/Contributors/YeHtetAung/components/Projects.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Projects = () => {
+	return (
+		<div className="w-full mt-10">
+			<h4 className="text-2xl font-bold my-5">Projects</h4>
+			<span>Comming Soon....</span>
+		</div>
+	);
+};
+
+export default Projects;

src/components/Contributors/YeHtetAung/components/Skills.tsx

@@ -0,0 +1,68 @@
+import { Skills } from "../types";
+import {
+	TbBrandTypescript,
+	TbBrandTailwind,
+	TbBrandBootstrap,
+	TbBrandMongodb,
+	TbBrandNextjs,
+	TbBrandHtml5,
+	TbBrandCss3,
+	TbBrandMysql,
+	TbBrandJavascript,
+	TbBrandReact,
+	TbBrandReactNative,
+	TbBrandNodejs,
+	TbBrandPrisma,
+	TbBrandFigma,
+	TbBrandUbuntu,
+	TbBrandGithub,
+} from "react-icons/tb";
+
+const SkillsComponent = () => {
+	const skills: Skills[] = [
+		{ title: "html", bg: "#DC4A25", icon: TbBrandHtml5 },
+		{ title: "css", bg: "#244BDD", icon: TbBrandCss3 },
+		{ title: "javascript", bg: "#EFD81A", icon: TbBrandJavascript, text: true },
+		{
+			title: "typescript",
+			bg: "#3077C6",
+			icon: TbBrandTypescript,
+		},
+		{ title: "tailwindcss", bg: "#38BDF8", icon: TbBrandTailwind },
+		{ title: "bootstrap", bg: "#7A10F7", icon: TbBrandBootstrap },
+		{ title: "react", bg: "#0A7EA3", icon: TbBrandReact },
+		{ title: "react native", bg: "#0A7EA3", icon: TbBrandReactNative },
+		{ title: "nextjs", bg: "#000000", icon: TbBrandNextjs },
+		{ title: "nodejs", bg: "#509F43", icon: TbBrandNodejs },
+		{ title: "mysql", bg: "#3E6E93", icon: TbBrandMysql },
+		{ title: "mongodb", bg: "#00EC64", icon: TbBrandMongodb, text: true },
+		{ title: "prisma", bg: "#2D3748", icon: TbBrandPrisma },
+		{ title: "figma", bg: "#2B2F41", icon: TbBrandFigma },
+		{ title: "linux", bg: "#DE4F21", icon: TbBrandUbuntu },
+		{ title: "github", bg: "#1F2229", icon: TbBrandGithub },
+	];
+
+	return (
+		<div className="w-full mt-10">
+			<h4 className="text-2xl font-bold my-5">Skills</h4>
+
+			<div className="flex flex-wrap gap-3">
+				{skills.map((skill) => (
+					<div
+						key={skill.title}
+						className="flex gap-2 justify-center items-center p-2 rounded-full text-sm uppercase font-semibold cursor-pointer hover:scale-110 transition-all shadow-lg"
+						style={{
+							background: skill.bg,
+							color: skill.text ? "black" : "white",
+						}}
+					>
+						<skill.icon className="text-xl" />
+						{skill.title}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default SkillsComponent;

src/components/Contributors/YeHtetAung/types.d.ts

@@ -0,0 +1,13 @@
+export interface Skills {
+	title: string;
+	bg?: string;
+	text?: boolean;
+	icon?: any;
+}
+
+export interface Profile {
+	title: string;
+	url: string;
+	icon?: any;
+	iconColor?: string;
+}