feat: update app pages and layout

app/page.tsx

@@ -1,49 +1,22 @@
 import Hero from "@/components/content/Hero";
 import Testimonials from "@/components/content/Testimonials";
+import RotatingWord from "@/components/content/RotatingWord";
 import SectionLabel from "@/components/layout/SectionLabel";
 import AccentLink from "@/components/navigation/AccentLink";
-
-type Testimonial = {
-  name: string;
-  title: string;
-  avatar?: string;
-  quote: string;
-};
-
-const testimonialsData: Testimonial[] = [
-  {
-    name: "Sarah Chen",
-    title: "Senior Software Engineer · Patient Platforms",
-    quote:
-      "Working with Angel was the first time I saw someone treat Claude Code as a real engineering tool instead of a toy. He’d built half a workflow before the rest of us figured out it was possible.",
-  },
-  {
-    name: "Marcus Whitfield",
-    title: "Staff Frontend Engineer",
-    quote:
-      "He owned the component library end-to-end and ran the migration without breaking a single screen. Quiet shipper — you only notice his work when you go looking for it.",
-  },
-  {
-    name: "Priya Anand",
-    title: "Product Designer",
-    quote:
-      "Angel is the rare engineer who actually reads designs and asks questions when something feels off. Half my polish budget got returned to me on the projects he was on.",
-  },
-  {
-    name: "Daniel Okafor",
-    title: "Engineering Manager",
-    quote:
-      "He’s at his best when the problem doesn’t fit cleanly into one stack. I’d hand him an ambiguous brief and a week later he’d come back with a working prototype and a plan.",
-  },
-];
+import ProjectCard from "@/components/content/ProjectCard";
+import { testimonials, projects } from "@/constants";
 
 export default function HomePage() {
   return (
     <div>
       <Hero label="Angel Mankel">
-        <div className="space-y-5">
+        <div className="space-y-5 mb-4">
           <p className="font-serif italic text-3xl leading-[1.3]">
-            I’m a creator at heart.
+            I&apos;m{" "}
+            <RotatingWord
+              items={["a developer", "a creative", "a tinkerer"]}
+            />
+            .
           </p>
 
           <p className="text-[19px] leading-[1.65]">
@@ -52,16 +25,37 @@ export default function HomePage() {
           </p>
 
           <p className="text-[19px] leading-[1.65]">
-            I’m the kind of engineer who picks up whatever the problem needs and
-            keeps digging — into the code, and into the people it’s meant for.
-            The throughline isn’t a stack, it’s the curiosity.
+            I&apos;m the kind of engineer who picks up whatever the problem needs and
+            keeps digging — into the code, and into the people it&apos;s meant for.
+            The throughline isn&apos;t a stack, it&apos;s the curiosity.
           </p>
         </div>
+
+        <div>
+          <AccentLink label="About Me" link="/about" />
+        </div>
       </Hero>
-      <SectionLabel label="Selected Projects" />
-      <AccentLink label="See all projects" link="/projects" />
-      <SectionLabel label="What people say" />
-      <Testimonials items={testimonialsData} />
+      
+      {/* Projects */}
+      <div className="mt-20">
+        <SectionLabel label="Selected Projects" />
+
+        {projects.slice(0,3).map((project, index) => (
+          <ProjectCard key={index} {...project} />
+        ))}
+
+        <div className="mt-5">
+          <AccentLink label="See all projects" link="/projects" />
+        </div>
+      </div>
+      
+      {/* Testimonials */}
+      <div className="mt-20">
+        <SectionLabel label="What people say" />
+        <div className="mt-5">
+          <Testimonials items={testimonials} />
+        </div>
+      </div>
     </div>
   );
 }