add tagline and about sections

2026-06-30 11:43:55 +00:00
parent c4771ee1da
commit 68c615010c
10 changed files with 133 additions and 2 deletions
@@ -0,0 +1,55 @@
+import Image from "next/image";
+
+export function About() {
+  return (
+    <section className="bg-white px-4 md:px-8 py-20">
+      <div className="flex flex-col md:flex-row items-start justify-between gap-12">
+        {/* Left: section label */}
+        <span className="font-mono text-sm text-[#1f1f1f] uppercase leading-[1.1] shrink-0">
+          [ About ]
+        </span>
+
+        {/* Right: text + portrait */}
+        <div className="flex flex-col md:flex-row items-end gap-8 flex-1">
+          {/* Text block with corner brackets */}
+          <div className="flex-1 flex items-stretch gap-3">
+            {/* Left brackets */}
+            <div className="flex flex-col justify-between shrink-0 w-4">
+              <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>
+
+            {/* Text */}
+            <p className="flex-1 text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3] py-3">
+              Placeholder paragraph one. This is where you introduce yourself
+              — your background, your passion for your craft, and what drives
+              you creatively. Two to three sentences work best here.{" "}
+              Placeholder paragraph two. Here you can describe your technical
+              approach, how you collaborate with clients, or what sets your
+              work apart from others in your field.
+            </p>
+
+            {/* Right brackets */}
+            <div className="flex flex-col justify-between shrink-0 w-4">
+              <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>
+
+          {/* Portrait */}
+          <div className="flex flex-col items-start gap-6 shrink-0">
+            <span className="font-mono text-sm text-[#1f1f1f]">002</span>
+            <div className="relative w-full md:w-[436px] h-[400px] md:h-[614px] overflow-hidden">
+              <Image
+                src="/about-portrait.jpg"
+                alt="Portrait"
+                fill
+                className="object-cover object-center"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,53 @@
+export function Tagline() {
+  const textClass =
+    "font-light text-black uppercase leading-[0.84] tracking-[-0.08em] " +
+    "text-[clamp(40px,6.67vw,96px)]";
+
+  return (
+    <section className="bg-white px-4 md:px-8 py-[120px]">
+      {/* Top: label + divider */}
+      <div className="flex flex-col gap-3 items-end mb-6">
+        <span className="font-mono text-sm text-[#1f1f1f] uppercase leading-[1.1]">
+          [ 8+ years in industry ]
+        </span>
+        <hr className="w-full border-t border-[#1f1f1f]" />
+      </div>
+
+      {/* Staggered text block */}
+      <div className="flex flex-col gap-2">
+        {/* Line 1: "A CREATIVE DIRECTOR   /" + "001" */}
+        <div className="flex items-start gap-3">
+          <span className={textClass}>A creative director&nbsp;&nbsp;&nbsp;/</span>
+          <span className="font-mono text-sm text-[#1f1f1f] mt-1 shrink-0">001</span>
+        </div>
+
+        {/* Line 2: "PHOTOGRAPHER" — indented */}
+        <div className="md:pl-[214px]">
+          <span className={textClass}>Photographer</span>
+        </div>
+
+        {/* Line 3: "BORN & RAISED" — indented further */}
+        <div className="md:pl-[610px]">
+          <span className={textClass}>
+            Born{" "}
+            <em style={{ fontFamily: "var(--font-playfair)" }}>&amp;</em>{" "}
+            raised
+          </span>
+        </div>
+
+        {/* Line 4: "ON THE SOUTH SIDE" — no indent */}
+        <div>
+          <span className={textClass}>on the south side</span>
+        </div>
+
+        {/* Line 5: "OF CHICAGO." + "[ creative freelancer ]" label */}
+        <div className="flex items-start gap-4 md:pl-[606px]">
+          <span className={textClass}>of chicago.</span>
+          <span className="hidden md:block font-mono text-sm text-[#1f1f1f] shrink-0 translate-y-[26px]">
+            [ creative freelancer ]
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+}