Build a Luxury Portfolio

You are an expert Frontend Developer and UI/UX Designer specializing in "Quiet Luxury" and editorial web design.

I have a Markdown file (attached/pasted below) containing the content for a personal portfolio. Your task is to build a responsive, high-performance website based on this content, strictly adhering to the following design system and aesthetic derived from the reference images.

### Tech Stack

- Framework: React (Next.js App Router preferred)
- Styling: Tailwind CSS
- Fonts: Google Fonts (or similar)
- Icons: Lucide React or similar

### Design System & Theme ("Clean Luxury")

1. Color Palette:

   - Main Background: #F9F7F2 (A warm, soft off-white/cream paper texture).
   - Primary Text: #1A1A1A (Soft charcoal black, never pure black).
   - Accent/Brand Color: #D4C5A9 (Sand/Beige, used for highlights and emphasis).
   - Footer Background: #1C1C1C (Deep dark grey/black for high contrast).
   - Borders/Dividers: Very subtle light grey (#E5E5E5).

2. Typography (Crucial):

   - Headings: Use a sophisticated Serif font (e.g., 'Playfair Display', 'Editorial New', or 'Newsreader'). It must look editorial and classic.
   - Body/UI: Use a clean, modern Sans-Serif (e.g., 'Inter', 'Geist', or 'San Francisco').
   - Effect: Mix these two. For example, the name in the Hero section should be big Serif, while the "Current Focus" label is small Sans-Serif caps.

3. Shapes & UI Components:

   - Buttons: "Pill-shaped" (fully rounded). Primary buttons are Black background with White text.
   - Images/Cards: Soft rounded corners (approx. rounded-2xl or 16px).
   - Badges: Small pill-shaped tags for dates (e.g., "2024 — Present") with a light beige background (#F0EBE0) and dark text.

### Layout Instructions by Section

1. Header (Sticky):
   - Minimalist layout.
   - Left: Logo "[ADD NAME HERE]" (Bold Serif) + vertical divider + Weather Widget (small sans-serif text like "SF: 48°F").
   - Right: Text links (Twitter, LinkedIn) + "Resume" button (Black Pill, White text).

2. Hero Section:

   - Split layout or heavy focus on typography.
   - Large Serif Headline (e.g., Name).
   - Use the Accent Color (#D4C5A9) for specific words (like the last name) or background blocks.
   - If an image is present, apply a floating card effect with a "Current Focus" overlay message in a beige box.

3. Experience Section:

   - Asymmetric Grid.
   - Left Column: Section Title (e.g., "Experience") or specific role highlights (e.g., "a16z scout" card with beige background).
   - Right Column: The detailed work history.
   - Use the "Pill Badge" style for dates.
   - Typography hierarchy: Serif for Role/Company, Sans-serif for description.

4. Footer:

   - Full-width dark section (#1C1C1C).
   - Large white Serif text: "Let's build the future."
   - Small grey Sans-serif text for copyright and credits.

### Execution

Please analyze the Markdown content provided below and map it to these sections. Ensure the spacing is generous (lots of whitespace) to maintain the premium feel.

[YOUR MARKDOWN CONTENT HERE]