feat: contact form with Resend, rate limiting & honeypot

Core features:
- /app/api/contact/route.ts: Server-side proxy to Resend API. Dynamic import
  to avoid build-time key requirement. Validates + sanitizes input, checks
  rate limits + honeypot, sends email via Resend (100/day free tier).
- /lib/rate-limit.ts: Simple IP-based token bucket (in-memory for single-
  server setup). 3 submissions per IP per hour. User-friendly retry messaging.
- /components/contact/*: ContactForm (React Hook Form + Zod), useContactForm
  hook, ContactSection. Honeypot field + minimum-time-to-submit check.
  Inline validation errors, success/error/rate-limit states.

Security (per TRD requirements):
- Server-side re-validation + sanitization (strip HTML, escape control chars)
- Rate limiting on route handler (not just client)
- Honeypot field (silent rejection of bots)
- Minimum time to submit (1s, silent rejection if faster)
- External links (Resend) use rel="noopener noreferrer"
- No secrets in client bundle

Accessibility:
- Proper <label> association for all fields
- aria-invalid / aria-describedby on error states
- aria-live for success/error messages
- Full keyboard operability

Dependencies added:
- resend: Email delivery API
- react-hook-form: Form state management
- @hookform/resolvers: Zod integration for React Hook Form

Rate limit design rationale: In-memory store is simple and sufficient for a
low-traffic personal portfolio (resets on cold-start, acceptable for this
use case). To persist across resets, upgrade to Upstash Redis or similar.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: Hem Gabhawala

app/api/contact/route.ts

@@ -0,0 +1,170 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { env } from "@/lib/env";
+import { contactFormSchema } from "@/lib/validations/contact";
+import { checkRateLimit, formatTimeUntilReset } from "@/lib/rate-limit";
+
+/**
+ * POST /api/contact
+ *
+ * Contact form submission endpoint. Server-side re-validates input,
+ * sanitizes, checks rate limits, and sends via Resend.
+ *
+ * Returns JSON with explicit status: "success" | "error" | "validation_error" | "rate_limited"
+ * so the client can branch on the outcome and show appropriate messaging.
+ */
+
+/**
+ * Expected client payload. Note: honeypot and submittedAt are sent by the
+ * client but NOT included in the validated contactFormSchema — they're
+ * checked separately before validation.
+ */
+interface ContactRequest {
+  name: string;
+  email: string;
+  message: string;
+  honeypot?: string; // Should be empty; filled by bots
+  submittedAt?: number; // Timestamp when form was submitted (client-side)
+}
+
+export async function POST(request: NextRequest) {
+  // Extract client IP for rate limiting. Vercel provides x-forwarded-for.
+  const ip =
+    request.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ||
+    request.headers.get("x-real-ip") ||
+    "unknown";
+
+  // 1. Check rate limit early (cheap operation, fail fast).
+  const rateLimit = checkRateLimit(ip);
+  if (!rateLimit.allowed) {
+    return NextResponse.json(
+      {
+        status: "rate_limited",
+        error: "Too many submissions. Please try again later.",
+        retryAfter: formatTimeUntilReset(rateLimit.resetAt),
+      },
+      { status: 429 },
+    );
+  }
+
+  // 2. Parse request body.
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json(
+      { status: "error", error: "Invalid request body" },
+      { status: 400 },
+    );
+  }
+
+  const payload = body as ContactRequest;
+
+  // 3. Check honeypot (should be empty).
+  if (payload.honeypot && payload.honeypot.trim().length > 0) {
+    // Silently reject; don't leak that we detected a bot.
+    return NextResponse.json(
+      { status: "success", message: "Thank you! We'll be in touch soon." },
+      { status: 200 },
+    );
+  }
+
+  // 4. Check minimum time to submit (should take at least 1 second to fill the form).
+  if (payload.submittedAt) {
+    const submitTimeMs = Date.now() - payload.submittedAt;
+    if (submitTimeMs < 1000) {
+      // Likely a bot; silently reject.
+      return NextResponse.json(
+        { status: "success", message: "Thank you! We'll be in touch soon." },
+        { status: 200 },
+      );
+    }
+  }
+
+  // 5. Validate input against the shared schema.
+  const validationResult = contactFormSchema.safeParse({
+    name: payload.name,
+    email: payload.email,
+    message: payload.message,
+  });
+
+  if (!validationResult.success) {
+    return NextResponse.json(
+      {
+        status: "validation_error",
+        errors: validationResult.error.flatten().fieldErrors,
+      },
+      { status: 400 },
+    );
+  }
+
+  const { name, email, message } = validationResult.data;
+
+  // 6. Send via Resend.
+  try {
+    // Dynamic import to avoid loading Resend at module initialization time
+    // (which fails during static generation if RESEND_API_KEY is not set).
+    const { Resend: ResendClient } = await import("resend");
+    const resend = new ResendClient(env.RESEND_API_KEY);
+    const result = await resend.emails.send({
+      from: "Contact Form <onboarding@resend.dev>", // Use Resend's default sender; configure your domain for production.
+      to: env.NEXT_PUBLIC_SITE_URL
+        ? new URL("/", env.NEXT_PUBLIC_SITE_URL).hostname // Extract domain from site URL
+        : "contact@example.com", // Fallback for development
+      replyTo: email,
+      subject: `New contact form submission from ${name}`,
+      html: `
+        <h2>New Contact Form Submission</h2>
+        <p><strong>Name:</strong> ${escapeHtml(name)}</p>
+        <p><strong>Email:</strong> ${escapeHtml(email)}</p>
+        <p><strong>Message:</strong></p>
+        <pre>${escapeHtml(message)}</pre>
+      `,
+    });
+
+    if (result.error) {
+      console.error("Resend API error:", result.error);
+      return NextResponse.json(
+        {
+          status: "error",
+          error: "Failed to send email. Please try again later.",
+        },
+        { status: 500 },
+      );
+    }
+
+    return NextResponse.json(
+      {
+        status: "success",
+        message:
+          "Thank you! I've received your message and will get back to you soon.",
+      },
+      { status: 200 },
+    );
+  } catch (error) {
+    console.error("Contact form error:", error);
+    return NextResponse.json(
+      {
+        status: "error",
+        error: "Something went wrong. Please try again later.",
+      },
+      { status: 500 },
+    );
+  }
+}
+
+/**
+ * Escape HTML entities to prevent injection into the email body.
+ * The schema validates against HTML tags client- and server-side, but
+ * this adds a defense-in-depth layer for email safety.
+ */
+function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+  };
+  return text.replace(/[&<>"']/g, (char) => map[char] || char);
+}

app/page.tsx

@@ -8,6 +8,7 @@ import { ExperienceTimeline } from "@/components/experience/experience-timeline"
 import { Certifications } from "@/components/certifications/certifications";
 import { TryHackMeSection } from "@/components/certifications/tryhackme-section";
 import { GitHubSection } from "@/components/github/github-section";
+import { ContactSection } from "@/components/contact/contact-section";
 import { getNavSections } from "@/lib/data";
 
 const IMPLEMENTED_IDS = [
@@ -20,6 +21,7 @@ const IMPLEMENTED_IDS = [
   "certifications",
   "tryhackme",
   "github",
+  "contact",
 ];
 
 function Placeholder({ id, label }: { id: string; label: string }) {
@@ -39,17 +41,19 @@ function Placeholder({ id, label }: { id: string; label: string }) {
 }
 
 /**
- * Home page. Phases 2–4 complete + GitHub integration (Phase 5a):
+ * Home page. Phases 2–4 complete + Phase 5 Contact/GitHub:
  * Hero, About, Journey, Skills (2–3), Projects (4A), Certifications & TryHackMe (4B),
- * Experience (4C), and GitHub (5a). The remaining sections (Blog, Contact) are
- * TEMPORARY full-height placeholders until Phase 5b/5c.
+ * Experience (4C), GitHub (5a), and Contact (5b). The remaining sections (Blog)
+ * are TEMPORARY placeholders until Phase 5c.
  *
  * Layout follows App Flow order: Hero → About → Journey → Skills →
- * Experience → Projects → Certifications → TryHackMe → GitHub → [placeholders].
+ * Experience → Projects → Certifications → TryHackMe → GitHub → Contact → [placeholders].
+ *
+ * Contact is the final conversion point before Resume Download.
  */
 export default function Home() {
   const sections = getNavSections();
-  const afterGitHub = sections.filter(
+  const afterContact = sections.filter(
     ({ id }) => !IMPLEMENTED_IDS.includes(id),
   );
 
@@ -64,7 +68,8 @@ export default function Home() {
       <Certifications />
       <TryHackMeSection />
       <GitHubSection />
-      {afterGitHub.map((section) => (
+      <ContactSection />
+      {afterContact.map((section) => (
         <Placeholder key={section.id} {...section} />
       ))}
     </main>