feat: update HomeAboutMe component to use Link for external URLs and improve description formatting

Author: pphatdev

src/app/(home)/sections/home-aboutme.tsx

@@ -9,12 +9,12 @@ import Link from 'next/link';
 export const HomeAboutMe = () => {
     const title = "About me!";
 
-    const description = `My name is <span className="text-primary font-semibold">Leat Sophat</span>, also known as <span className="text-primary font-semibold">PPhat</span>.
-        I'm a Senior Front-end Developer at <a href="https://turbotech.com.kh/" target="_blank" rel="noopener noreferrer">TURBOTECH CO., LTD</a>, and as a Freelance UI/UX Designer.
-        I'm from <a href="https://en.wikipedia.org/wiki/Phnom_Penh" target="_blank" rel="noopener noreferrer">Phnom Penh, Cambodia</a>.
+    const description = <p> My name is <span className="text-primary font-semibold">Leat Sophat</span>, also known as <span className="text-primary font-semibold">PPhat</span>.
+        I'm a Senior Front-end Developer at <Link href="https://turbotech.com.kh/" target="_blank" rel="noopener noreferrer">TURBOTECH CO., LTD</Link>, and as a Freelance UI/UX Designer.
+        I'm from <Link href="https://en.wikipedia.org/wiki/Phnom_Penh" target="_blank" rel="noopener noreferrer">Phnom Penh, Cambodia</Link>.
 
         I started my career as a Front-end Developer in 2021, and I have a passion for creating beautiful and functional user interfaces. I love to learn new technologies and improve my skills every day. I am also a big fan of open-source projects and I enjoy contributing to the community. I believe that sharing knowledge is the key to success in this field.
-    `;
+    </p>;
 
     return (
         <div className="max-w-5xl flex flex-col relative items-center my-20 justify-center mx-auto">

src/components/ui/title.tsx

@@ -1,9 +1,10 @@
 import { cn } from "@lib/utils";
+import type { ReactNode } from "react";
 
 export const Title = ({ as = 'h2', title, description, className }: {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
     title: string[],
-    description?: string
+    description?: string | ReactNode
     className?: string
 }) => {
 
@@ -18,11 +19,19 @@ export const Title = ({ as = 'h2', title, description, className }: {
                 {middleWords} <span className="text-left bg-background  bg-clip-text bg-no-repeat text-transparent bg-gradient-to-r from-sky-500 via-teal-500 to-green-500 [text-shadow:0_0_rgba(0,0,0,0.1)]"> {lastWord}</span>
             </Heading>
 
-            {description && <p className="max-md:mb-0 px-5 my-5 text-left text-foreground/90 tracking-normal [&>*]:hover:transition-all [&>a]:text-primary [&>a]:hover:font-semibold"
-                dangerouslySetInnerHTML={
-                    { __html: description.replace(/\n/g, '<br />'), }
-                }
-            />}
+            {typeof description === 'string' && description && (
+                <p
+                    className="max-md:mb-0 px-5 my-5 text-left text-foreground/90 tracking-normal [&>*]:hover:transition-all [&>a]:text-primary [&>a]:hover:font-semibold"
+                    dangerouslySetInnerHTML={{
+                        __html: description.replace(/\n/g, '<br />'),
+                    }}
+                />
+            )}
+            {typeof description !== 'string' && description && (
+                <div className="max-md:mb-0 px-5 my-5 text-left text-foreground/90 tracking-normal [&>*]:hover:transition-all [&>a]:text-primary [&>a]:hover:font-semibold">
+                    {description}
+                </div>
+            )}
         </div>
     );
 }