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,47 +68,58 @@ 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 */}
+        {/* Social Links */}
-      <nav aria-label="Contact" className="flex gap-5 text-neutral-300">
+        <nav aria-label="Contact" className="flex gap-5 text-neutral-300">
-        <CopyButton
+          <CopyButton
-          value={email}
+            value={email}
-          label="Copy email"
+            label="Copy email"
-          className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
-        >
-          <IconMailFilled size={32} />
-        </CopyButton>
-        <CopyButton
-          value={phone}
-          label="Copy phone"
-          className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
-        >
-          <IconPhoneFilled size={32} />
-        </CopyButton>
-        <Tooltip text="LinkedIn">
-          <a
-            href={linkedIn}
-            target="_blank"
-            rel="noreferrer"
-            aria-label="LinkedIn"
             className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
           >
-            <IconBrandLinkedinFilled size={32} />
+            <IconMailFilled size={32} />
-          </a>
+          </CopyButton>
-        </Tooltip>
+          <CopyButton
-        <Tooltip text="Gitea">
+            value={phone}
-          <a
+            label="Copy phone"
-            href={gitea}
-            target="_blank"
-            rel="noreferrer"
-            aria-label="Gitea"
             className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
           >
-            <GiteaIcon size={32} />
+            <IconPhoneFilled size={32} />
-          </a>
+          </CopyButton>
-        </Tooltip>
+          <Tooltip text="LinkedIn">
-      </nav>
+            <a
+              href={linkedIn}
+              target="_blank"
+              rel="noreferrer"
+              aria-label="LinkedIn"
+              className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
+            >
+              <IconBrandLinkedinFilled size={32} />
+            </a>
+          </Tooltip>
+          <Tooltip text="Gitea">
+            <a
+              href={gitea}
+              target="_blank"
+              rel="noreferrer"
+              aria-label="Gitea"
+              className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
+            >
+              <GiteaIcon size={32} />
+            </a>
+          </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">
+        <ProjectCarousel screenshots={project.screenshots} />
-          {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>
       )}
 
       {/* Overview */}
       <section className="space-y-4">
         <SectionLabel label="Overview" />
-        <div className="space-y-4 text-[17px] leading-[1.65] text-neutral-200">
+        <div className="text-[17px] leading-[1.65] text-neutral-200">
-          {project.overview.map((paragraph) => (
+          {project.overview[0]}
-            <p key={paragraph}>{paragraph}</p>
+        </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>