From a65189b3943668fbed3c8a6d3410b96b5e61d0c9 Mon Sep 17 00:00:00 2001
From: anusbutt <buttanus3@gmail.com>
Date: Fri, 14 Aug 2026 04:47:07 +0500
Subject: [PATCH] fix(portfolio): share contact rules and canonicalize site
 metadata

Reuse one dependency-free contact contract across the client and server, wire and test the existing honeypot, correct public documentation and canonical URL references, and clean the redundant ignore entry.
---
 .env.example                                  |  4 +-
 .gitignore                                    |  1 -
 CONTRIBUTING.md                               |  2 +-
 README.md                                     |  4 +-
 next-env.d.ts                                 |  4 +-
 src/app/page.tsx                              |  6 ++-
 .../sections/contact/ContactForm.tsx          | 42 +++++++++++++++----
 src/content/profile.ts                        |  4 +-
 src/server/contact/service.ts                 |  2 +-
 src/server/contact/validation.ts              | 17 ++++----
 src/shared/contact.ts                         | 20 +++++++++
 tests/contact.spec.ts                         | 40 ++++++++++++++++++
 tests/homepage.spec.ts                        |  3 ++
 tests/seo.spec.ts                             |  5 ++-
 14 files changed, 124 insertions(+), 30 deletions(-)
 create mode 100644 src/shared/contact.ts

diff --git a/.env.example b/.env.example
index 56c45c1..8682e4e 100644
--- a/.env.example
+++ b/.env.example
@@ -1,9 +1,9 @@
 # Public site URL used for canonical metadata, sitemap, and robots.
-NEXT_PUBLIC_SITE_URL=https://anusbutt.com
+NEXT_PUBLIC_SITE_URL=https://www.anasbutt.site
 
 # Resend API key. Keep this server-only and configure it in Vercel/local .env.local.
 RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxxx
 
 # Verified sender and destination addresses for the fixed portfolio contact workflow.
-CONTACT_FROM_EMAIL=portfolio@anusbutt.com
+CONTACT_FROM_EMAIL=portfolio@anasbutt.site
 CONTACT_TO_EMAIL=your-email@example.com
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index f8584b9..13b3b5d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,7 +25,6 @@ Thumbs.db
 # IDE
 .vscode/
 .idea/
-.vercel
 # Local Spec-Driven Development and agent workspace
 .agents/
 .claude/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 59d98be..3d8d3d6 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,6 @@
 # Contributing
 
-1. Read the feature specification and plan under specs/portfolio-architecture-refactor/ before making architectural changes.
+1. Read README.md and the relevant source files before making a change.
 2. Keep portfolio content in src/content and avoid duplicating identity values in components.
 3. Run npm run check and npm run test:e2e before opening a pull request.
 4. Preserve accessible keyboard navigation, reduced-motion behavior, responsive layout, and the existing visual identity.
diff --git a/README.md b/README.md
index 3da624b..72838fe 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 Personal portfolio for Anus Butt, an AI engineer and full-stack engineer building auditable agent systems, developer tools, and production web applications.
 
-Live site: https://anusbutt.com
+Live site: https://www.anasbutt.site
 
 ## Architecture
 
@@ -62,7 +62,7 @@ npm run check
 
 ## Deployment
 
-Deploy the repository to Vercel with the four environment variables configured in the project settings. Pushes to the main branch can use the included GitHub Actions checks as the merge gate. The contact limiter is intentionally an in-memory, per-instance guard suitable for low-volume portfolio traffic; a managed limiter would be the next step if abuse volume grows.
+Deploy the repository to Vercel with the four environment variables configured in the project settings. Pushes to the default branch can use the included GitHub Actions checks as the merge gate. The contact limiter is intentionally an in-memory, per-instance guard suitable for low-volume portfolio traffic; a managed limiter would be the next step if abuse volume grows.
 
 ## Contributing and security
 
diff --git a/next-env.d.ts b/next-env.d.ts
index a419cbe..ce4e94a 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-import "./.next/dev/types/root-params.d.ts";
+import "./.next/types/routes.d.ts";
+import "./.next/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c7a199a..0c0a43a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import { profile } from "@/content/profile";
+import { siteUrl } from "@/content/site";
 import Navbar from "@/components/layout/Navbar";
 import Hero from "@/components/sections/hero/Hero";
 import About from "@/components/sections/about/About";
@@ -14,6 +15,7 @@ const personJsonLd = {
   jobTitle: profile.title,
   address: { "@type": "PostalAddress", addressCountry: "Pakistan" },
   sameAs: profile.sameAs,
+  url: siteUrl.toString(),
 };
 
 export default function Home() {
@@ -21,7 +23,9 @@ export default function Home() {
     <main>
       <script
         type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(personJsonLd) }}
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(personJsonLd).replace(/</g, "\\u003c"),
+        }}
       />
       <Navbar />
       <Hero />
diff --git a/src/components/sections/contact/ContactForm.tsx b/src/components/sections/contact/ContactForm.tsx
index c4c1ce4..c7a7132 100644
--- a/src/components/sections/contact/ContactForm.tsx
+++ b/src/components/sections/contact/ContactForm.tsx
@@ -2,6 +2,7 @@
 
 import { useState, FormEvent } from "react";
 import { motion } from "framer-motion";
+import { CONTACT_FIELD_LIMITS, isValidContactEmail } from "@/shared/contact";
 
 interface FormErrors {
   name?: string;
@@ -13,6 +14,7 @@ export default function ContactForm() {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
+  const [website, setWebsite] = useState("");
   const [errors, setErrors] = useState<FormErrors>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
@@ -20,15 +22,20 @@ export default function ContactForm() {
 
   function validate(): FormErrors {
     const errs: FormErrors = {};
-    if (!name.trim()) errs.name = "Name is required";
-    else if (name.length > 100) errs.name = "Name must be 100 characters or less";
+    const trimmedName = name.trim();
+    const trimmedEmail = email.trim();
+    const trimmedMessage = message.trim();
 
-    if (!email.trim()) errs.email = "Email is required";
-    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
-      errs.email = "Please enter a valid email";
+    if (!trimmedName) errs.name = "Name is required";
+    else if (trimmedName.length > CONTACT_FIELD_LIMITS.name)
+      errs.name = "Name must be 100 characters or less";
 
-    if (!message.trim()) errs.message = "Message is required";
-    else if (message.length > 2000) errs.message = "Message must be 2000 characters or less";
+    if (!trimmedEmail) errs.email = "Email is required";
+    else if (!isValidContactEmail(trimmedEmail)) errs.email = "Please enter a valid email";
+
+    if (!trimmedMessage) errs.message = "Message is required";
+    else if (trimmedMessage.length > CONTACT_FIELD_LIMITS.message)
+      errs.message = "Message must be 2000 characters or less";
 
     return errs;
   }
@@ -50,7 +57,12 @@ export default function ContactForm() {
       const res = await fetch("/api/contact", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name: name.trim(), email: email.trim(), message: message.trim() }),
+        body: JSON.stringify({
+          name: name.trim(),
+          email: email.trim(),
+          message: message.trim(),
+          website,
+        }),
       });
 
       const data = await res.json();
@@ -61,6 +73,7 @@ export default function ContactForm() {
         setName("");
         setEmail("");
         setMessage("");
+        setWebsite("");
       } else {
         setStatus("error");
         setStatusMessage(data.message || "Failed to send message. Please try again.");
@@ -167,6 +180,19 @@ export default function ContactForm() {
             )}
           </div>
 
+          <div aria-hidden="true" className="sr-only">
+            <label htmlFor="website">Website</label>
+            <input
+              id="website"
+              name="website"
+              type="text"
+              value={website}
+              onChange={(e) => setWebsite(e.target.value)}
+              tabIndex={-1}
+              autoComplete="off"
+            />
+          </div>
+
           <button
             type="submit"
             disabled={isSubmitting}
diff --git a/src/content/profile.ts b/src/content/profile.ts
index 16e144f..b26690d 100644
--- a/src/content/profile.ts
+++ b/src/content/profile.ts
@@ -1,3 +1,5 @@
+const DEFAULT_SITE_URL = "https://www.anasbutt.site";
+
 export interface Profile {
   name: string;
   title: string;
@@ -17,7 +19,7 @@ export const profile: Profile = {
     "AI engineer and full-stack engineer building auditable agent systems, developer tools, and production web applications with TypeScript, Python, FastAPI, and PostgreSQL.",
   location: "Karachi, Pakistan",
   availability: "Open to AI & full-stack roles",
-  siteUrl: process.env.NEXT_PUBLIC_SITE_URL ?? "https://anusbutt.com",
+  siteUrl: process.env.NEXT_PUBLIC_SITE_URL ?? DEFAULT_SITE_URL,
   sameAs: [
     "https://github.com/anusbutt",
     "https://x.com/iamanusbutt",
diff --git a/src/server/contact/service.ts b/src/server/contact/service.ts
index 5793961..81b6d13 100644
--- a/src/server/contact/service.ts
+++ b/src/server/contact/service.ts
@@ -1,5 +1,5 @@
 import { getResend } from "@/server/email/resend";
-import type { ContactInput } from "@/server/contact/validation";
+import type { ContactInput } from "@/shared/contact";
 
 interface ContactConfig {
   from: string;
diff --git a/src/server/contact/validation.ts b/src/server/contact/validation.ts
index 066bd06..44e1264 100644
--- a/src/server/contact/validation.ts
+++ b/src/server/contact/validation.ts
@@ -1,8 +1,8 @@
-export interface ContactInput {
-  name: string;
-  email: string;
-  message: string;
-}
+import {
+  CONTACT_FIELD_LIMITS,
+  isValidContactEmail,
+  type ContactInput,
+} from "@/shared/contact";
 
 interface ContactPayload {
   name?: unknown;
@@ -12,7 +12,6 @@ interface ContactPayload {
 }
 
 const allowedKeys = new Set(["name", "email", "message", "website"]);
-const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -47,19 +46,19 @@ export function parseContactInput(value: unknown):
   if (input.name.length === 0) {
     return { ok: false, message: "Name is required." };
   }
-  if (input.name.length > 100) {
+  if (input.name.length > CONTACT_FIELD_LIMITS.name) {
     return { ok: false, message: "Name must be 100 characters or less." };
   }
   if (input.email.length === 0) {
     return { ok: false, message: "Email is required." };
   }
-  if (input.email.length > 254 || !emailPattern.test(input.email)) {
+  if (!isValidContactEmail(input.email)) {
     return { ok: false, message: "Please enter a valid email address." };
   }
   if (input.message.length === 0) {
     return { ok: false, message: "Message is required." };
   }
-  if (input.message.length > 2000) {
+  if (input.message.length > CONTACT_FIELD_LIMITS.message) {
     return { ok: false, message: "Message must be 2000 characters or less." };
   }
 
diff --git a/src/shared/contact.ts b/src/shared/contact.ts
new file mode 100644
index 0000000..7b3b5d2
--- /dev/null
+++ b/src/shared/contact.ts
@@ -0,0 +1,20 @@
+export interface ContactInput {
+  name: string;
+  email: string;
+  message: string;
+}
+
+export const CONTACT_FIELD_LIMITS = {
+  name: 100,
+  email: 254,
+  message: 2000,
+} as const;
+
+export const CONTACT_EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function isValidContactEmail(email: string): boolean {
+  return (
+    email.length <= CONTACT_FIELD_LIMITS.email &&
+    CONTACT_EMAIL_PATTERN.test(email)
+  );
+}
\ No newline at end of file
diff --git a/tests/contact.spec.ts b/tests/contact.spec.ts
index 0bf2af0..89229d5 100644
--- a/tests/contact.spec.ts
+++ b/tests/contact.spec.ts
@@ -18,12 +18,26 @@ test.describe("contact API boundary", () => {
     await expect(response.json()).resolves.toMatchObject({ success: false });
   });
 
+  test("rejects populated honeypot input", async ({ request }) => {
+    const response = await request.post("/api/contact", {
+      data: {
+        name: "Automated visitor",
+        email: "visitor@example.com",
+        message: "This should not be delivered.",
+        website: "https://bot.example/",
+      },
+    });
+    expect(response.status()).toBe(400);
+    await expect(response.json()).resolves.toEqual({ success: false, message: "Unable to process this request." });
+  });
+
   test("reports missing email configuration without exposing server details", async ({ request }) => {
     const response = await request.post("/api/contact", {
       data: {
         name: "Test visitor",
         email: "visitor@example.com",
         message: "Hello from an automated acceptance test.",
+        website: "",
       },
     });
     expect(response.status()).toBe(503);
@@ -32,4 +46,30 @@ test.describe("contact API boundary", () => {
       message: "Contact service is temporarily unavailable.",
     });
   });
+});
+
+test("submits the contact form with an empty honeypot", async ({ page }) => {
+  let requestBody: Record<string, unknown> | undefined;
+  await page.route("/api/contact", async (route) => {
+    requestBody = route.request().postDataJSON() as Record<string, unknown>;
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ success: true, message: "Message sent successfully." }),
+    });
+  });
+
+  await page.goto("/");
+  await page.locator("#name").fill("Test visitor");
+  await page.locator("#email").fill("visitor@example.com");
+  await page.locator("#message").fill("Hello from an automated acceptance test.");
+  await page.getByRole("button", { name: "Send message" }).click();
+
+  await expect(page.getByRole("status")).toHaveText("Message sent successfully! I'll get back to you soon.");
+  expect(requestBody).toMatchObject({
+    name: "Test visitor",
+    email: "visitor@example.com",
+    message: "Hello from an automated acceptance test.",
+    website: "",
+  });
 });
\ No newline at end of file
diff --git a/tests/homepage.spec.ts b/tests/homepage.spec.ts
index 2bac397..2ecadbc 100644
--- a/tests/homepage.spec.ts
+++ b/tests/homepage.spec.ts
@@ -86,6 +86,9 @@ test("homepage positioning and responsive layout", async ({ page }, testInfo) =>
   await contactHeading.scrollIntoViewIfNeeded();
   await expect(contactHeading).toBeVisible();
   await expect(page.getByText("Founder of Omniveer.", { exact: true })).toBeVisible();
+  await expect(page.locator("#website")).toBeAttached();
+  await expect(page.locator("#website").locator("..")).toHaveAttribute("aria-hidden", "true");
+  await expect(page.locator("#website")).toHaveAttribute("tabindex", "-1");
   await expect(
     page.locator("#contact").getByText("Duct Lead Qualifier", { exact: false }),
   ).toHaveCount(0);
diff --git a/tests/seo.spec.ts b/tests/seo.spec.ts
index 43ab572..6054e0f 100644
--- a/tests/seo.spec.ts
+++ b/tests/seo.spec.ts
@@ -3,15 +3,16 @@ import { expect, test } from "@playwright/test";
 test("metadata and SEO routes are available", async ({ request }) => {
   const robots = await request.get("/robots.txt");
   expect(robots.ok()).toBe(true);
-  expect(await robots.text()).toContain("Sitemap:");
+  expect(await robots.text()).toContain("Sitemap: https://www.anasbutt.site/sitemap.xml");
 
   const sitemap = await request.get("/sitemap.xml");
   expect(sitemap.ok()).toBe(true);
-  expect(await sitemap.text()).toContain("<loc>");
+  expect(await sitemap.text()).toContain("<loc>https://www.anasbutt.site/</loc>");
 
   const response = await request.get("/");
   expect(response.ok()).toBe(true);
   const html = await response.text();
   expect(html).toContain('rel="canonical"');
+  expect(html).toContain("https://www.anasbutt.site");
   expect(html).toContain('property="og:title"');
 });
\ No newline at end of file