Stage 12: About Page

app/about/page.tsx

@@ -0,0 +1,44 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { siteConfig } from "@/config/site";
+
+export default async function AboutPage() {
+  return (
+    <div className="container max-w-6xl py-6 lg:py-10">
+      <div className="flex flex-col items-start gap-4 md:flex-row md:justify-between md:gap-8">
+        <div className="flex-1 space-x-4">
+          <h1 className="inline-block font-black text-4xl lg:text-5xl">
+            About Me
+          </h1>
+        </div>
+      </div>
+      <hr className="my-8" />
+      <div className="flex flex-col md:flex-row gap-8 items-center md:items-start">
+        <div className="min-w-48 max-w-48 flex flex-col gap-2">
+          <Avatar className="h-48 w-48">
+            <AvatarImage src="/avatar.png" alt={siteConfig.author} />
+            <AvatarFallback>JIH</AvatarFallback>
+          </Avatar>
+          <h2 className="text-2xl font-bold text-center break-words">
+            {siteConfig.author}
+          </h2>
+          <p className="text-muted-foreground text-center break-words">
+            Senior Consultant
+          </p>
+        </div>
+        <p className="text-muted-foreground text-lg py-4">
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum
+          consequatur laudantium eaque fugiat, unde debitis, assumenda corporis
+          animi beatae non neque quibusdam porro tenetur, laboriosam in ducimus
+          ut amet voluptate commodi praesentium ex. Error iusto sed in hic quod,
+          quasi numquam libero dicta modi adipisci, obcaecati aut beatae
+          asperiores non excepturi facere magni suscipit facilis aliquid?
+          Dolorum, fuga facere sapiente autem dolor blanditiis nam, placeat,
+          provident ratione sequi commodi corporis! Saepe eos consequatur nulla
+          minima earum sunt pariatur perspiciatis iusto tempore est dolor quam
+          maiores alias cum aspernatur impedit at obcaecati esse ad quas error
+          ducimus, minus dicta totam? Aut?
+        </p>
+      </div>
+    </div>
+  );
+}

components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",