Form Update

src/pages/contact.astro

@@ -16,14 +16,13 @@ import Icon from "@components/Icon.astro";
 import SectionHeader from "@components/layout/SectionHeader.astro";
 import Placeholder from "@components/layout/Placeholder.astro";
 import ContactForm from "@components/professional/ContactForm.tsx";
+import ObfuscatedEmail from "@components/ObfuscatedEmail.astro";
+
+// Email is rendered separately via <ObfuscatedEmail> so the plaintext address
+// never appears in the HTML source. The other entries are plain links.
+const emailAddress = "contact@gregkilmer.com";
 
 const professional = [
-  {
-    icon: "email-outline",
-    label: "Email",
-    href: "",
-    hint: "Kilmer.GM@Gmail.com",
-  },
   {
     icon: "linkedin",
     label: "LinkedIn",
@@ -56,11 +55,19 @@ const social = [
     hint: "Server link, if public.",
   },
 ];
+
+// Turnstile site key. Public per Cloudflare (safe to ship to the client), but
+// read here server-side and passed as a prop so it never needs the PUBLIC_
+// prefix and stays consistent with TURNSTILE_SECRET_KEY. Undefined when
+// Turnstile is not configured, which makes ContactForm skip the widget entirely.
+const turnstileSiteKey = import.meta.env.TURNSTILE_SITE_KEY as
+  string | undefined;
 ---
 
 <BaseLayout
   title="Contact"
   description="Reach Greg Kilmer for cloud development, SAP BTP, technical leadership, or just to debate the best Gundam series or find a fourth for game night."
+  noindex={true}
 >
   <section class="container-prose flex flex-col gap-10 pt-28 sm:pt-32">
     <Reveal>
@@ -86,6 +93,33 @@ const social = [
             Professional
           </h2>
           <ul class="flex flex-col gap-3">
+            {
+              /* Email: rendered via ObfuscatedEmail so the address is not in
+                the HTML source. JS decodes it into a mailto: on click. */
+            }
+            <li class="card flex items-center gap-3">
+              <span
+                class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
+                style="background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent);"
+                aria-hidden="true"
+              >
+                <Icon name="email-outline" class="h-5 w-5" />
+              </span>
+              <span class="flex flex-col gap-0.5">
+                <span
+                  class="font-sans text-sm font-semibold"
+                  style="color: var(--color-text);"
+                >
+                  Email
+                </span>
+                <span class="text-xs" style="color: var(--color-text-subtle);">
+                  <ObfuscatedEmail
+                    address={emailAddress}
+                    class="font-mono uppercase tracking-[0.1em]"
+                  />
+                </span>
+              </span>
+            </li>
             {
               professional.map((item) => (
                 <li class="card flex items-center gap-3">
@@ -193,7 +227,7 @@ const social = [
             Prefer a form? Drop a note and it will land in my inbox.
           </p>
         </div>
-        <ContactForm client:idle />
+        <ContactForm client:idle turnstileSiteKey={turnstileSiteKey} />
       </section>
     </Reveal>
   </div>