feat: updated app pages

2026-05-28 17:46:49 -07:00
parent 0fe7c10b1e
commit 8b6393795e
4 changed files with 292 additions and 95 deletions
@@ -0,0 +1,130 @@
+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";
+
+export function generateStaticParams() {
+  return projects.map((project) => ({ slug: project.slug }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const project = projects.find((p) => p.slug === slug);
+
+  if (!project) return { title: "Project — Angel Mankel" };
+
+  return {
+    title: `${project.title} — Angel Mankel`,
+    description: project.description,
+  };
+}
+
+export default async function ProjectPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const project = projects.find((p) => p.slug === slug);
+
+  if (!project) notFound();
+
+  return (
+    <div className="space-y-14">
+      <Link
+        href="/projects"
+        className="inline-flex items-center gap-1 text-sm text-neutral-400 transition-colors hover:text-neutral-200"
+      >
+        <IconArrowNarrowLeft size={18} />
+        All projects
+      </Link>
+
+      <Hero label={project.title} subtitle={project.description}>
+        <div className="space-y-5">
+          <p className="text-md text-neutral-400">
+            {project.year} — {project.stack.join(" · ")}
+          </p>
+
+          <a
+            href={project.liveUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-2 rounded-lg border border-neutral-700 px-4 py-2 text-[15px] font-medium transition-colors hover:border-neutral-500"
+            style={{ color: colors.accent }}
+          >
+            Open live app
+            <IconExternalLink size={18} />
+          </a>
+        </div>
+      </Hero>
+
+      {/* 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>
+      )}
+
+      {/* 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>
+      </section>
+
+      {/* What I learned */}
+      <section className="space-y-4">
+        <SectionLabel label="What I learned" />
+        <ul className="space-y-2 text-[15px] leading-[1.65] text-neutral-200">
+          {project.learned.map((item) => (
+            <li
+              key={item}
+              className="before:mr-2 before:text-neutral-600 before:content-['–']"
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      {/* What I'd do differently */}
+      <section className="space-y-4">
+        <SectionLabel label="What I'd do differently" />
+        <ul className="space-y-2 text-[15px] leading-[1.65] text-neutral-200">
+          {project.improvements.map((item) => (
+            <li
+              key={item}
+              className="before:mr-2 before:text-neutral-600 before:content-['–']"
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}