Add Portfolio section (node-id 1:110) — Selected Work

Two-column masonry grid with 4 project cards, frosted-glass category tags, CTA callout, and offset right column matching Figma design. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-30 11:55:17 +00:00
parent f674b72e7a
commit f5a2519701
7 changed files with 158 additions and 0 deletions
@@ -0,0 +1,151 @@
+import Image from "next/image";
+
+const projects = [
+  {
+    title: "Surfers Paradise",
+    tags: ["Social Media", "Photography"],
+    image: "/portfolio-1.jpg",
+    tall: true,
+  },
+  {
+    title: "Cyberpunk Caffe",
+    tags: ["Social Media", "Photography"],
+    image: "/portfolio-2.jpg",
+    tall: false,
+  },
+  {
+    title: "Agency 976",
+    tags: ["Social Media", "Photography"],
+    image: "/portfolio-3.jpg",
+    tall: false,
+  },
+  {
+    title: "Minimal Playground",
+    tags: ["Social Media", "Photography"],
+    image: "/portfolio-4.jpg",
+    tall: true,
+  },
+];
+
+function ArrowIcon() {
+  return (
+    <div className="size-8 shrink-0 flex items-center justify-center -rotate-90">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src="/arrow-diagonal.svg" alt="" className="size-8" />
+    </div>
+  );
+}
+
+function ProjectCard({
+  title,
+  tags,
+  image,
+  tall,
+}: {
+  title: string;
+  tags: string[];
+  image: string;
+  tall: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-[10px]">
+      <div
+        className={`relative w-full overflow-hidden ${
+          tall ? "h-[400px] md:h-[744px]" : "h-[360px] md:h-[699px]"
+        }`}
+      >
+        <Image src={image} alt={title} fill className="object-cover" />
+        <div className="absolute bottom-4 left-4 flex gap-3">
+          {tags.map((tag) => (
+            <span
+              key={tag}
+              className="backdrop-blur-[10px] bg-white/30 px-2 py-1 rounded-3xl text-sm font-medium text-[#111] tracking-[-0.04em]"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      </div>
+      <div className="flex items-center justify-between">
+        <p className="font-black text-black uppercase text-[36px] tracking-[-0.04em] leading-[1.1]">
+          {title}
+        </p>
+        <ArrowIcon />
+      </div>
+    </div>
+  );
+}
+
+export function Portfolio() {
+  return (
+    <section className="bg-white px-4 md:px-8 py-20">
+      {/* Header */}
+      <div className="flex items-start justify-between mb-[61px]">
+        <div className="flex items-start gap-3">
+          <h2 className="font-light text-black uppercase leading-[0.86] text-[clamp(48px,6.67vw,96px)] tracking-[-0.08em]">
+            Selected
+            <br />
+            Work
+          </h2>
+          <span className="font-mono text-sm text-[#1f1f1f] leading-[1.1] mt-2">
+            004
+          </span>
+        </div>
+        <div className="hidden md:flex h-[110px] items-center justify-center w-4">
+          <span className="-rotate-90 whitespace-nowrap font-mono text-sm text-[#1f1f1f] uppercase">
+            [ portfolio ]
+          </span>
+        </div>
+      </div>
+
+      {/* Mobile: single column */}
+      <div className="flex flex-col gap-10 md:hidden">
+        {projects.map((p) => (
+          <ProjectCard key={p.title} {...p} />
+        ))}
+      </div>
+
+      {/* Desktop: two-column */}
+      <div className="hidden md:flex gap-6 items-start">
+        {/* Left column */}
+        <div className="flex-1 flex flex-col gap-10">
+          <ProjectCard {...projects[0]} />
+          <ProjectCard {...projects[1]} />
+          {/* CTA callout */}
+          <div className="flex gap-3 items-stretch">
+            {/* Left bracket pair */}
+            <div className="flex flex-col justify-between w-6 shrink-0">
+              <img src="/bracket-tl.svg" alt="" className="w-4 h-4" />
+              <img src="/bracket-bl.svg" alt="" className="w-4 h-4 -rotate-90" />
+            </div>
+            {/* Content */}
+            <div className="flex flex-col gap-3 py-3 flex-1">
+              <p className="italic text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3]">
+                Discover how my creativity transforms ideas into impactful
+                digital experiences — schedule a call with me to get started.
+              </p>
+              <button className="self-start bg-black text-white text-sm font-medium tracking-[-0.04em] px-4 py-3 rounded-3xl">
+                Let&apos;s talk
+              </button>
+            </div>
+            {/* Right bracket pair */}
+            <div className="flex flex-col justify-between w-6 shrink-0">
+              <img src="/bracket-tr.svg" alt="" className="w-4 h-4 rotate-90" />
+              <img
+                src="/bracket-br.svg"
+                alt=""
+                className="w-4 h-4 rotate-180"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Right column (offset down) */}
+        <div className="flex-1 flex flex-col gap-[117px] pt-[240px]">
+          <ProjectCard {...projects[2]} />
+          <ProjectCard {...projects[3]} />
+        </div>
+      </div>
+    </section>
+  );
+}