diff --git a/app/components/About.tsx b/app/components/About.tsx new file mode 100644 index 0000000..53d98ba --- /dev/null +++ b/app/components/About.tsx @@ -0,0 +1,55 @@ +import Image from "next/image"; + +export function About() { + return ( +
+
+ {/* Left: section label */} + + [ About ] + + + {/* Right: text + portrait */} +
+ {/* Text block with corner brackets */} +
+ {/* Left brackets */} +
+ + +
+ + {/* Text */} +

+ 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. +

+ + {/* Right brackets */} +
+ + +
+
+ + {/* Portrait */} +
+ 002 +
+ Portrait +
+
+
+
+
+ ); +} diff --git a/app/components/Tagline.tsx b/app/components/Tagline.tsx new file mode 100644 index 0000000..1e0c9d9 --- /dev/null +++ b/app/components/Tagline.tsx @@ -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 ( +
+ {/* Top: label + divider */} +
+ + [ 8+ years in industry ] + +
+
+ + {/* Staggered text block */} +
+ {/* Line 1: "A CREATIVE DIRECTOR /" + "001" */} +
+ A creative director   / + 001 +
+ + {/* Line 2: "PHOTOGRAPHER" — indented */} +
+ Photographer +
+ + {/* Line 3: "BORN & RAISED" — indented further */} +
+ + Born{" "} + &{" "} + raised + +
+ + {/* Line 4: "ON THE SOUTH SIDE" — no indent */} +
+ on the south side +
+ + {/* Line 5: "OF CHICAGO." + "[ creative freelancer ]" label */} +
+ of chicago. + + [ creative freelancer ] + +
+
+
+ ); +} diff --git a/app/globals.css b/app/globals.css index f1addae..d025f8a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -10,6 +10,7 @@ --color-foreground: var(--foreground); --font-sans: var(--font-inter); --font-mono: var(--font-geist-mono); + --font-playfair: var(--font-playfair); } @media (prefers-color-scheme: dark) { diff --git a/app/layout.tsx b/app/layout.tsx index 4e50b9a..c446187 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Inter, Geist_Mono } from "next/font/google"; +import { Inter, Geist_Mono, Playfair_Display } from "next/font/google"; import "./globals.css"; const inter = Inter({ @@ -7,6 +7,12 @@ const inter = Inter({ subsets: ["latin"], }); +const playfair = Playfair_Display({ + variable: "--font-playfair", + subsets: ["latin"], + style: ["italic"], +}); + const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], @@ -25,7 +31,7 @@ export default function RootLayout({ return ( {children} diff --git a/app/page.tsx b/app/page.tsx index d481ba9..87abfb3 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,9 +1,13 @@ import { Hero } from "./components/Hero"; +import { Tagline } from "./components/Tagline"; +import { About } from "./components/About"; export default function Home() { return (
+ +
); } diff --git a/public/about-portrait.jpg b/public/about-portrait.jpg new file mode 100644 index 0000000..13c6901 Binary files /dev/null and b/public/about-portrait.jpg differ diff --git a/public/bracket-bl.svg b/public/bracket-bl.svg new file mode 100644 index 0000000..e431a52 --- /dev/null +++ b/public/bracket-bl.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/bracket-br.svg b/public/bracket-br.svg new file mode 100644 index 0000000..e431a52 --- /dev/null +++ b/public/bracket-br.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/bracket-tl.svg b/public/bracket-tl.svg new file mode 100644 index 0000000..2944cec --- /dev/null +++ b/public/bracket-tl.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/bracket-tr.svg b/public/bracket-tr.svg new file mode 100644 index 0000000..2944cec --- /dev/null +++ b/public/bracket-tr.svg @@ -0,0 +1,3 @@ + + +