🔥 build(profile): add lwinmoepaing profile

.gitignore

@@ -36,4 +36,9 @@ yarn-error.log*
 next-env.d.ts
 
 # contentlayer
-.contentlayer
+.contentlayer
+
+# Dont need package locks
+yarn.lock
+package-lock.json
+pnpm-lock.yaml

content/profile/sample.mdx → content/profile/lwinmoepaing.mdx

@@ -1,16 +1,29 @@
 ---
-name: Sample
-description: I'm software developer
+name: Lwin Moe Paing
+description: I'm senior frontend engineers and looking for help with **Javascript Language to build Many Free Softwares to help people who can't afford to pay !!
+image: "https://avatars.githubusercontent.com/u/49163775?v=4"
+tags:
+  - Fullstack
+  - Frontend
+  - JavaScript
+  - ReactJS
+  - SolidJS
 ---
 
-<h3 align="left" className="flex flex-row mt-2">
+<div className="h-28 w-28 rounded-full overflow-hidden mx-auto">
+  <img src="https://avatars.githubusercontent.com/u/49163775?v=4" />
+</div>
+
+<h3 className="flex flex-row max-w-[240px] mt-5 mx-auto">
   <img
     src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/gitto.gif"
-    className="h-[20px] object-contain"
+    className="h-[20px] object-contain mr-2"
   />
   <span> Hi, I'm Lwin Moe Paing </span>
 </h3>
 
+<div className="container max-w-[720px] mx-auto">
+
 - 🤝 I’m looking for help with **Javascript Language to build Many Free Softwares to help people who can't afford to pay !!**
 - 💬 Ask me about **React, React Native & Nodejs.**
 - 📫 How to reach me **[email protected] (or) [facebook](https://www.facebook.com/lwin.im/)**
@@ -49,4 +62,6 @@ const Lwin = {
   architecture: ["Microservices", "Event-Driven", "Design System Pattern"],
   challenge: "Nothing in life is permanent. so i'm trying to be always humble",
 };
-```
+```
+
+</div>

contentlayer.config.ts

@@ -38,6 +38,11 @@ export const Blog = defineDocumentType(() => ({
 const profileFields: FieldDefs = {
   name: { type: "string", required: true },
   description: { type: "string" },
+  tags: {
+    type: "list",
+    of: { type: "string" },
+  },
+  image: { type: "string", required: false },
 };
 
 export const Profile = defineDocumentType(() => ({

src/app/profile/[slug]/page.tsx

@@ -24,6 +24,15 @@ export async function generateMetadata({
   return {
     title: `Profile | ${profile.name}`,
     description: `Profile | ${profile.description}`,
+    openGraph: {
+      title: `Profile | ${profile.name}`,
+      description: `Profile | ${profile.description}`,
+      image: profile.image
+        ? profile.image
+        : "https://mmswe.com/images/landing/galaxy.jpg",
+      siteName: `https://mmswe.com/profile/${slug}`,
+      type: "content"
+    },
   };
 }
 

src/app/profile/layout.tsx

@@ -1,10 +1,16 @@
 import Container from "@/components/Common/Container/Container";
+import { titleFont } from "@/fonts/fonts";
 import styles from "@/styles/styles";
+import { cn } from "@/utils";
 
 export default function ProfileLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <Container className={styles.paddingHelper}>{children}</Container>;
+  return (
+    <Container className={cn(styles.paddingHelper, titleFont.className)}>
+      {children}
+    </Container>
+  );
 }

src/components/Common/TitleText/TitleText.tsx

@@ -1,18 +1,20 @@
 import { titleFont, titleFontBold } from "@/fonts/fonts";
 import { cn } from "@/utils";
-import { PropsWithChildren } from "react";
+import { MouseEvent, PropsWithChildren } from "react";
 
 type TTitleText = PropsWithChildren<{
   className?: string;
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "p";
   isBold?: boolean;
+  onClick?: (event: MouseEvent) => void;
 }>;
 
 const TitleText: React.FC<TTitleText> = ({
   className = "",
   children,
   tag = "h1",
   isBold = false,
+  onClick,
 }) => {
   const Component = tag;
   return (
@@ -23,6 +25,7 @@ const TitleText: React.FC<TTitleText> = ({
         isBold && titleFontBold.className,
         className
       )}
+      onClick={onClick}
     >
       {children}
     </Component>

src/components/Profile/ProfileCardList/ProfileCardList.tsx

@@ -4,9 +4,14 @@ import TitleText from "@/components/Common/TitleText/TitleText";
 import SquareBox from "@/components/Ui/SquareBox/SquareBox";
 import { cn, generateColor } from "@/utils";
 import { Profile } from "contentlayer/generated";
+import Image from "next/image";
 import Link from "next/link";
 
-const ProfileCardList = ({ profiles }: { profiles: Profile[] }) => {
+type TPropsProfileCardList = {
+  profiles: Profile[];
+};
+
+const ProfileCardList = ({ profiles }: TPropsProfileCardList) => {
   return (
     <>
       {profiles.map((profile) => {
@@ -24,17 +29,47 @@ const ProfileCardList = ({ profiles }: { profiles: Profile[] }) => {
                 <div className="flex flex-row items-center  mb-2 space-x-2">
                   <div
                     className={cn(
-                      "flex justify-center items-center h-10 w-10 rounded-full",
+                      "flex justify-center items-center h-10 w-10 rounded-full overflow-hidden relative",
                       bgColor
                     )}
                   >
-                    {profile.name?.trim()?.[0]}
+                    {!!profile.image ? (
+                      <Image
+                        src={profile.image}
+                        className="h-10 w-10 object-fit"
+                        alt={profile.name}
+                        fill
+                      />
+                    ) : (
+                      profile.name?.trim()?.[0]
+                    )}
                   </div>
                   <TitleText tag="h4" className="text-base">
                     {profile.name}
                   </TitleText>
                 </div>
-                <TitleText tag="h4" className="text-sm">
+                <div className="mb-2">
+                  {profile.tags?.slice(0, 8)?.map((tag) => (
+                    <TitleText
+                      className={cn(
+                        "inline-block text-[10px] px-2 py-1 rounded-full mb-1 mr-[4px] bg-opacity-50 hover:bg-opacity-80",
+                        bgColor
+                      )}
+                      key={tag}
+                      tag="span"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        console.log(tag);
+                      }}
+                    >
+                      {tag}
+                    </TitleText>
+                  ))}
+                </div>
+                <TitleText
+                  tag="h4"
+                  className="text-sm  md:overflow-hidden md:text-ellipsis md:line-clamp-3"
+                >
                   {profile.description}
                 </TitleText>
               </SquareBox>