Add tooltip to projects in the my work section

src/components/landing/discord-status.tsx

@@ -104,7 +104,7 @@ const BannerAvatar = ({
 const Bio = ({ bio }: { bio: string }): ReactElement => (
     <SimpleTooltip content={bio}>
         <div className="p-2 bg-zinc-100 dark:bg-zinc-950/65 text-sm rounded-xl">
-            {truncateText(bio, 15)}
+            {truncateText(bio, 10)}
         </div>
     </SimpleTooltip>
 );

src/components/landing/nav-content/my-work.tsx

@@ -10,6 +10,7 @@ import Project from "@/types/project";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import Image from "next/image";
 import { truncateText } from "@/lib/utils";
+import SimpleTooltip from "@/components/ui/simple-tooltip";
 
 const projects: Project[] = [
     {
@@ -76,12 +77,16 @@ const MyWork = (): ReactElement => {
     return (
         <ScrollArea className="h-[17.75rem]">
             <div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
-                {projects.map((project, index) => (
-                    <Link
+                {projects.map((project: Project, index: number) => (
+                    <SimpleTooltip
                         key={index}
-                        href={project.link || "#"}
-                        target="_blank"
+                        content={
+                            <p className="max-w-[23rem] text-center">
+                                {project.description}
+                            </p>
+                        }
                     >
+                        <Link href={project.link || "#"} target="_blank">
                             <MagicCard
                                 className="w-[15rem] lg:w-[25rem] p-3.5 opacity-95"
                                 gradientColor={
@@ -104,12 +109,16 @@ const MyWork = (): ReactElement => {
                                     </div>
                                     <div className="flex gap-1 text-sm">
                                         <span className="text-green-400/80">
-                                        {project.startDate.format("MMM YYYY")}
+                                            {project.startDate.format(
+                                                "MMM YYYY"
+                                            )}
                                         </span>
                                         🞄
                                         {project.endDate ? (
                                             <span className="text-red-400/80">
-                                            {project.endDate.format("MMM YYYY")}
+                                                {project.endDate.format(
+                                                    "MMM YYYY"
+                                                )}
                                             </span>
                                         ) : (
                                             <span className="text-green-400/80">
@@ -125,6 +134,7 @@ const MyWork = (): ReactElement => {
                                 </p>
                             </MagicCard>
                         </Link>
+                    </SimpleTooltip>
                 ))}
             </div>
         </ScrollArea>