feat: update app pages and styles

app/about/page.tsx

@@ -27,7 +27,7 @@ export const metadata: Metadata = {
 
 export default function AboutPage() {
   return (
-    <div className="space-y-14">
+    <div className="flex flex-col gap-12">
       
 			{/* Hero Section */}
 			<Hero label="About">
@@ -68,7 +68,17 @@ export default function AboutPage() {
         </ul>
       </section>
 
-      <AccentLink link="/Angel_Mankel_Resume_2026.pdf" label="Download CV (PDF)" download />
+      <div className="flex flex-col gap-6">
+        <AccentLink link="/Angel_Mankel_Resume_2026.pdf" label="Download Resume (PDF)" download />
+        
+        <div className="flex flex-col gap-2 text-neutral-300">
+          <p>
+            <span className="font-bold">Email:</span> {email}
+          </p>
+          <p>
+            <span className="font-bold">Phone:</span> {phone}
+          </p>
+        </div>
 
         {/* Social Links */}
         <nav aria-label="Contact" className="flex gap-5 text-neutral-300">
@@ -110,5 +120,6 @@ export default function AboutPage() {
           </Tooltip>
         </nav>
       </div>
+    </div>
   );
 }

app/globals.css

@@ -16,3 +16,12 @@ body {
   background: var(--background);
   color: var(--foreground);
 }
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-fade-in {
+  animation: fade-in 400ms ease;
+}

app/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Hero from "@/components/content/Hero";
 import Testimonials from "@/components/content/Testimonials";
 import RotatingWord from "@/components/content/RotatingWord";

app/projects/[slug]/page.tsx

@@ -1,11 +1,11 @@
 import type { Metadata } from "next";
-import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { IconArrowNarrowLeft, IconExternalLink } from "@tabler/icons-react";
 import Hero from "@/components/content/Hero";
 import SectionLabel from "@/components/layout/SectionLabel";
 import { colors, projects } from "@/constants";
+import ProjectCarousel from "@/components/content/ProjectCarousel";
 
 export function generateStaticParams() {
   return projects.map((project) => ({ slug: project.slug }));
@@ -48,7 +48,7 @@ export default async function ProjectPage({
       </Link>
 
       <Hero label={project.title} subtitle={project.description}>
-        <div className="space-y-5">
+        <div className="space-y-3">
           <p className="text-md text-neutral-400">
             {project.year} — {project.stack.join(" · ")}
           </p>
@@ -68,31 +68,22 @@ export default async function ProjectPage({
 
       {/* Screenshots */}
       {project.screenshots.length > 0 && (
-        <section className="space-y-4">
-          {project.screenshots.map((shot) => (
-            <div
-              key={shot.src}
-              className="overflow-hidden rounded-xl border border-neutral-800"
-            >
-              <Image
-                src={shot.src}
-                alt={shot.alt}
-                width={1200}
-                height={750}
-                className="h-auto w-full"
-              />
-            </div>
-          ))}
-        </section>
+        <ProjectCarousel screenshots={project.screenshots} />
       )}
 
       {/* Overview */}
       <section className="space-y-4">
         <SectionLabel label="Overview" />
-        <div className="space-y-4 text-[17px] leading-[1.65] text-neutral-200">
-          {project.overview.map((paragraph) => (
-            <p key={paragraph}>{paragraph}</p>
-          ))}
+        <div className="text-[17px] leading-[1.65] text-neutral-200">
+          {project.overview[0]}
+        </div>
+      </section>
+
+      {/* Problem Solved */}
+      <section className="space-y-4">
+        <SectionLabel label="Problem Solved" />
+        <div className="text-[17px] leading-[1.65] text-neutral-200">
+          {project.overview[1]}
         </div>
       </section>