Add a touch more hero spacing

Reviewed-on: #1

.gitignore

@@ -4,3 +4,4 @@ dist
 *.log
 .env
 .env.local
+__pycache__/

.shsf.json

@@ -0,0 +1,6 @@
+{
+  "default": {
+    "id": "89",
+    "from": "shsf/contact-api"
+  }
+}

README.md

@@ -20,3 +20,39 @@ npm run dev
 ```bash
 docker compose up -d
 ```
+
+## Contact form backend
+
+The contact form posts to an SHSF function in `shsf/contact-api/main.py`.
+
+### Public route
+
+- `POST /` submits a message
+- Body: `{ "username": string, "email": string, "message": string }`
+- Rate limited per IP
+
+### Admin routes
+
+These routes require `X-Lunas-Key`, which must match the function's `LUNAS_KEY` env var.
+
+- `GET /new` returns unread messages
+- `POST /seen` marks one or more messages as seen
+- `POST /delete` deletes one or more messages
+
+Example bodies:
+
+```json
+{ "id": "message_..." }
+```
+
+or
+
+```json
+{ "ids": ["message_1", "message_2"] }
+```
+
+### Run backend tests
+
+```bash
+python3 shsf/contact-api/test_main.py
+```

shsf/contact-api/main.py

@@ -0,0 +1,359 @@
+import json
+import os
+import re
+import time
+import uuid
+from _db_com import database
+
+RATE_LIMIT_FILE = "/app/ratelimit.json"
+RATE_LIMIT_WINDOW_SECONDS = 60 * 60
+RATE_LIMIT_MAX_REQUESTS = 5
+MESSAGES_STORAGE = "portfolio_contact_messages"
+ALLOWED_ORIGINS = {
+    "https://luna.reversed.dev",
+    "https://luna.spaceistyping.com",
+    "http://localhost:5173",
+    "http://localhost:4173",
+}
+EMAIL_RE = re.compile(r"^[^\s@]+@[^\s@]+\.[^\s@]+$")
+
+
+def _cors_headers(origin=""):
+    allowed_origin = origin if origin in ALLOWED_ORIGINS else "https://luna.spaceistyping.com"
+    return {
+        "Access-Control-Allow-Origin": allowed_origin,
+        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+        "Access-Control-Allow-Headers": "Content-Type, X-Lunas-Key",
+        "Access-Control-Max-Age": "86400",
+        "Vary": "Origin",
+        "Content-Type": "application/json",
+    }
+
+
+def _response(origin, status_code, payload, extra_headers=None):
+    headers = _cors_headers(origin)
+    if extra_headers:
+        headers.update(extra_headers)
+    return {
+        "_shsf": "v2",
+        "_code": status_code,
+        "_headers": headers,
+        "_res": payload,
+    }
+
+
+def _load_rate_limits():
+    if not os.path.exists(RATE_LIMIT_FILE):
+        return {}
+
+    try:
+        with open(RATE_LIMIT_FILE, "r", encoding="utf-8") as file:
+            data = json.load(file)
+            return data if isinstance(data, dict) else {}
+    except (OSError, json.JSONDecodeError):
+        return {}
+
+
+def _save_rate_limits(rate_limits):
+    os.makedirs(os.path.dirname(RATE_LIMIT_FILE), exist_ok=True)
+    temp_path = f"{RATE_LIMIT_FILE}.tmp"
+    with open(temp_path, "w", encoding="utf-8") as file:
+        json.dump(rate_limits, file)
+    os.replace(temp_path, RATE_LIMIT_FILE)
+
+
+def _extract_ip(args):
+    headers = args.get("headers", {}) or {}
+    forwarded = headers.get("x-forwarded-for", "")
+    if forwarded:
+        return forwarded.split(",")[0].strip()
+
+    for header in ("cf-connecting-ip", "x-real-ip"):
+        value = headers.get(header, "").strip()
+        if value:
+            return value
+
+    return "unknown"
+
+
+def _validate_payload(payload):
+    username = str(payload.get("username", "")).strip()
+    email = str(payload.get("email", "")).strip()
+    message = str(payload.get("message", "")).strip()
+
+    if len(username) < 2 or len(username) > 80:
+        return None, "Username must be between 2 and 80 characters."
+    if len(email) < 3 or len(email) > 200 or not EMAIL_RE.match(email):
+        return None, "Please provide a valid email address."
+    if len(message) < 10 or len(message) > 5000:
+        return None, "Message must be between 10 and 5000 characters."
+
+    return {
+        "username": username,
+        "email": email,
+        "message": message,
+    }, None
+
+
+def _check_rate_limit(ip_address, now):
+    rate_limits = _load_rate_limits()
+    fresh_after = now - RATE_LIMIT_WINDOW_SECONDS
+    cleaned = {
+        ip: timestamps
+        for ip, timestamps in rate_limits.items()
+        if isinstance(timestamps, list)
+        for timestamps in [[ts for ts in timestamps if isinstance(ts, (int, float)) and ts >= fresh_after]]
+        if timestamps
+    }
+
+    ip_timestamps = cleaned.get(ip_address, [])
+    if len(ip_timestamps) >= RATE_LIMIT_MAX_REQUESTS:
+        retry_after = max(1, int(RATE_LIMIT_WINDOW_SECONDS - (now - ip_timestamps[0])))
+        _save_rate_limits(cleaned)
+        return False, retry_after
+
+    ip_timestamps.append(now)
+    cleaned[ip_address] = ip_timestamps
+    _save_rate_limits(cleaned)
+    return True, None
+
+
+def _parse_body(args):
+    raw_body = args.get("body", "{}")
+    try:
+        payload = raw_body if isinstance(raw_body, dict) else json.loads(raw_body)
+        if not isinstance(payload, dict):
+            raise ValueError("JSON body must be an object")
+        return payload, None
+    except (TypeError, json.JSONDecodeError, ValueError):
+        return None, "Invalid JSON payload."
+
+
+def _ensure_storage(db):
+    try:
+        db.create_storage(MESSAGES_STORAGE, purpose="Portfolio contact form submissions")
+    except Exception:
+        pass
+
+
+def _parse_message_value(value):
+    if isinstance(value, dict):
+        return value
+    if isinstance(value, str):
+        try:
+            return json.loads(value)
+        except json.JSONDecodeError:
+            return None
+    return None
+
+
+def _list_message_keys(db):
+    items = db.list_items(MESSAGES_STORAGE)
+    if isinstance(items, dict):
+        return list(items.keys())
+    if isinstance(items, list):
+        keys = []
+        for item in items:
+            if isinstance(item, str):
+                keys.append(item)
+            elif isinstance(item, dict):
+                key = item.get("key") or item.get("name") or item.get("id")
+                if key:
+                    keys.append(key)
+        return keys
+    return []
+
+
+def _get_message(db, message_id):
+    try:
+        value = db.get(MESSAGES_STORAGE, message_id)
+    except Exception:
+        return None
+    return _parse_message_value(value)
+
+
+def _require_key(args):
+    expected = os.getenv("LUNAS_KEY", "").strip()
+    headers = {str(key).lower(): value for key, value in (args.get("headers", {}) or {}).items()}
+    provided = str(headers.get("x-lunas-key", "")).strip()
+
+    if not expected:
+        return False, "LUNAS_KEY is not configured on the function."
+    if not provided or provided != expected:
+        return False, "Unauthorized."
+    return True, None
+
+
+def _message_ids_from_payload(payload):
+    if not isinstance(payload, dict):
+        return []
+
+    ids = []
+    single_id = payload.get("id")
+    multiple_ids = payload.get("ids")
+
+    if isinstance(single_id, str) and single_id.strip():
+        ids.append(single_id.strip())
+    if isinstance(multiple_ids, list):
+        ids.extend(str(item).strip() for item in multiple_ids if str(item).strip())
+
+    deduped = []
+    seen = set()
+    for message_id in ids:
+        if message_id not in seen:
+            seen.add(message_id)
+            deduped.append(message_id)
+    return deduped
+
+
+def _handle_new(args, origin, db):
+    authorized, error_message = _require_key(args)
+    if not authorized:
+        return _response(origin, 401, {"ok": False, "error": error_message})
+
+    messages = []
+    for message_id in _list_message_keys(db):
+        record = _get_message(db, message_id)
+        if not isinstance(record, dict):
+            continue
+        if record.get("seen") is True:
+            continue
+        messages.append(record)
+
+    messages.sort(key=lambda item: item.get("created_at", ""), reverse=True)
+    return _response(origin, 200, {"ok": True, "messages": messages, "count": len(messages)})
+
+
+def _handle_seen(args, origin, db, payload):
+    authorized, error_message = _require_key(args)
+    if not authorized:
+        return _response(origin, 401, {"ok": False, "error": error_message})
+
+    message_ids = _message_ids_from_payload(payload)
+    if not message_ids:
+        return _response(origin, 400, {"ok": False, "error": "Provide `id` or `ids`."})
+
+    updated = []
+    missing = []
+    for message_id in message_ids:
+        record = _get_message(db, message_id)
+        if not isinstance(record, dict):
+            missing.append(message_id)
+            continue
+        record["seen"] = True
+        record["seen_at"] = time.strftime("%Y-%m-%dT%H:%M:%SZ", time.gmtime())
+        db.set(MESSAGES_STORAGE, message_id, json.dumps(record))
+        updated.append(message_id)
+
+    return _response(origin, 200, {"ok": True, "updated": updated, "missing": missing})
+
+
+def _handle_delete(args, origin, db, payload):
+    authorized, error_message = _require_key(args)
+    if not authorized:
+        return _response(origin, 401, {"ok": False, "error": error_message})
+
+    message_ids = _message_ids_from_payload(payload)
+    if not message_ids:
+        return _response(origin, 400, {"ok": False, "error": "Provide `id` or `ids`."})
+
+    deleted = []
+    missing = []
+    for message_id in message_ids:
+        record = _get_message(db, message_id)
+        if not isinstance(record, dict):
+            missing.append(message_id)
+            continue
+        try:
+            db.delete_item(MESSAGES_STORAGE, message_id)
+            deleted.append(message_id)
+        except Exception:
+            missing.append(message_id)
+
+    return _response(origin, 200, {"ok": True, "deleted": deleted, "missing": missing})
+
+
+def _handle_submit(args, origin, db, payload):
+    if not payload and all(key in args for key in ("username", "email", "message")):
+        payload = {
+            "username": args.get("username", ""),
+            "email": args.get("email", ""),
+            "message": args.get("message", ""),
+        }
+
+    valid_payload, error_message = _validate_payload(payload)
+    if error_message:
+        return _response(origin, 400, {"ok": False, "error": error_message})
+
+    ip_address = _extract_ip(args)
+    now = int(time.time())
+    allowed, retry_after = _check_rate_limit(ip_address, now)
+    if not allowed:
+        return _response(
+            origin,
+            429,
+            {"ok": False, "error": "Too many messages from this IP. Please try again later."},
+            {"Retry-After": str(retry_after)},
+        )
+
+    submission_id = f"message_{int(time.time() * 1000)}_{uuid.uuid4().hex[:8]}"
+    record = {
+        "id": submission_id,
+        "username": valid_payload["username"],
+        "email": valid_payload["email"],
+        "message": valid_payload["message"],
+        "ip": ip_address,
+        "user_agent": (args.get("headers", {}) or {}).get("user-agent", ""),
+        "created_at": time.strftime("%Y-%m-%dT%H:%M:%SZ", time.gmtime(now)),
+        "seen": False,
+    }
+    db.set(MESSAGES_STORAGE, submission_id, json.dumps(record))
+
+    return _response(origin, 201, {"ok": True, "message": "Message received.", "id": submission_id})
+
+
+def main(args):
+    headers = args.get("headers", {}) or {}
+    origin = headers.get("origin", "")
+    method = str(args.get("method", "POST")).upper()
+    route = str(args.get("route", "default") or "default").strip("/") or "default"
+
+    if method == "OPTIONS":
+        return _response(origin, 204, "")
+
+    db = database()
+    _ensure_storage(db)
+
+    if route == "new":
+        if method not in {"GET", "POST"}:
+            return _response(origin, 405, {"ok": False, "error": "Method not allowed."})
+        return _handle_new(args, origin, db)
+
+    payload, payload_error = _parse_body(args)
+    if payload_error:
+        payload = {}
+
+    if route == "seen":
+        if method != "POST":
+            return _response(origin, 405, {"ok": False, "error": "Method not allowed."})
+        if payload_error:
+            return _response(origin, 400, {"ok": False, "error": payload_error})
+        return _handle_seen(args, origin, db, payload)
+
+    if route == "delete":
+        if method != "POST":
+            return _response(origin, 405, {"ok": False, "error": "Method not allowed."})
+        if payload_error:
+            return _response(origin, 400, {"ok": False, "error": payload_error})
+        return _handle_delete(args, origin, db, payload)
+
+    if route != "default":
+        return _response(origin, 404, {"ok": False, "error": "Route not found."})
+
+    if method != "POST":
+        return _response(origin, 405, {"ok": False, "error": "Method not allowed."})
+
+    if payload_error:
+        return _response(origin, 400, {"ok": False, "error": payload_error})
+
+    return _handle_submit(args, origin, db, payload)

shsf/contact-api/requirements.txt

@@ -0,0 +1 @@
+requests==2.31.0

shsf/contact-api/test_main.py

@@ -0,0 +1,158 @@
+import importlib.util
+import json
+import os
+import sys
+import tempfile
+import types
+import unittest
+from pathlib import Path
+
+MODULE_PATH = Path(__file__).with_name("main.py")
+
+
+class FakeDB:
+    storages = {}
+
+    def create_storage(self, name, purpose=None):
+        self.storages.setdefault(name, {})
+
+    def set(self, storage, key, value):
+        self.storages.setdefault(storage, {})[key] = value
+
+    def get(self, storage, key):
+        return self.storages.get(storage, {}).get(key)
+
+    def list_items(self, storage):
+        return list(self.storages.get(storage, {}).keys())
+
+    def delete_item(self, storage, key):
+        self.storages.get(storage, {}).pop(key, None)
+
+
+class ContactApiTests(unittest.TestCase):
+    def setUp(self):
+        FakeDB.storages = {}
+        self.temp_dir = tempfile.TemporaryDirectory()
+        self.rate_limit_file = os.path.join(self.temp_dir.name, "ratelimit.json")
+        os.environ["LUNAS_KEY"] = "topsecret"
+        self.module = self._load_module()
+        self.module.RATE_LIMIT_FILE = self.rate_limit_file
+
+    def tearDown(self):
+        self.temp_dir.cleanup()
+        os.environ.pop("LUNAS_KEY", None)
+        sys.modules.pop("contact_api_main_under_test", None)
+        sys.modules.pop("_db_com", None)
+
+    def _load_module(self):
+        fake_db_module = types.ModuleType("_db_com")
+        fake_db_module.database = FakeDB
+        sys.modules["_db_com"] = fake_db_module
+
+        spec = importlib.util.spec_from_file_location("contact_api_main_under_test", MODULE_PATH)
+        module = importlib.util.module_from_spec(spec)
+        assert spec.loader is not None
+        spec.loader.exec_module(module)
+        return module
+
+    def _res(self, response):
+        return response["_res"]
+
+    def test_submit_message_persists_record(self):
+        response = self.module.main(
+            {
+                "method": "POST",
+                "headers": {"origin": "https://luna.reversed.dev", "user-agent": "pytest"},
+                "body": json.dumps(
+                    {
+                        "username": "Space",
+                        "email": "space@example.com",
+                        "message": "Hello Luna, this is a valid test message.",
+                    }
+                ),
+            }
+        )
+
+        self.assertEqual(response["_code"], 201)
+        payload = self._res(response)
+        self.assertTrue(payload["ok"])
+        stored = FakeDB.storages["portfolio_contact_messages"][payload["id"]]
+        record = json.loads(stored)
+        self.assertEqual(record["username"], "Space")
+        self.assertFalse(record["seen"])
+
+    def test_new_route_requires_key(self):
+        response = self.module.main({"method": "GET", "route": "new", "headers": {}})
+        self.assertEqual(response["_code"], 401)
+        self.assertFalse(self._res(response)["ok"])
+
+    def test_new_seen_and_delete_flow(self):
+        created = self.module.main(
+            {
+                "method": "POST",
+                "headers": {"origin": "https://luna.reversed.dev"},
+                "body": json.dumps(
+                    {
+                        "username": "Space",
+                        "email": "space@example.com",
+                        "message": "Hello Luna, this should show up in the admin inbox.",
+                    }
+                ),
+            }
+        )
+        message_id = self._res(created)["id"]
+
+        auth_headers = {"x-lunas-key": "topsecret", "origin": "https://luna.reversed.dev"}
+        listed = self.module.main({"method": "GET", "route": "new", "headers": auth_headers})
+        self.assertEqual(listed["_code"], 200)
+        self.assertEqual(self._res(listed)["count"], 1)
+        self.assertEqual(self._res(listed)["messages"][0]["id"], message_id)
+
+        seen = self.module.main(
+            {
+                "method": "POST",
+                "route": "seen",
+                "headers": auth_headers,
+                "body": json.dumps({"id": message_id}),
+            }
+        )
+        self.assertEqual(seen["_code"], 200)
+        self.assertEqual(self._res(seen)["updated"], [message_id])
+
+        listed_after_seen = self.module.main({"method": "GET", "route": "new", "headers": auth_headers})
+        self.assertEqual(self._res(listed_after_seen)["count"], 0)
+
+        deleted = self.module.main(
+            {
+                "method": "POST",
+                "route": "delete",
+                "headers": auth_headers,
+                "body": json.dumps({"id": message_id}),
+            }
+        )
+        self.assertEqual(deleted["_code"], 200)
+        self.assertEqual(self._res(deleted)["deleted"], [message_id])
+
+    def test_rate_limit_returns_retry_after(self):
+        payload = {
+            "username": "Space",
+            "email": "space@example.com",
+            "message": "Hello Luna, this message is long enough to pass validation.",
+        }
+        args = {
+            "method": "POST",
+            "headers": {"x-forwarded-for": "1.2.3.4", "origin": "https://luna.reversed.dev"},
+            "body": json.dumps(payload),
+        }
+
+        for _ in range(self.module.RATE_LIMIT_MAX_REQUESTS):
+            response = self.module.main(args)
+            self.assertEqual(response["_code"], 201)
+
+        limited = self.module.main(args)
+        self.assertEqual(limited["_code"], 429)
+        self.assertIn("Retry-After", limited["_headers"])
+
+
+if __name__ == "__main__":
+    unittest.main()

src/App.jsx

@@ -1,23 +1,359 @@
-import { Navbar } from './components/Navbar';
-import { Hero } from './sections/Hero';
-import { Skills } from './sections/Skills';
-import { Projects } from './sections/Projects';
-import { About } from './sections/About';
-import { Contact } from './sections/Contact';
-import { Footer } from './components/Footer';
+import { useEffect, useState } from 'react';
+
+const REDIRECT_HOST = 'luna.reversed.dev';
+const REDIRECT_TARGET = 'https://luna.spaceistyping.com';
+const REDIRECT_DELAY_SECONDS = 5;
+const CONTACT_API_URL = import.meta.env.VITE_CONTACT_API_URL || 'https://shsf-api.reversed.dev/api/exec/17/cba6645c-2ca2-4e7a-ad94-e6114cbde761';
+
+const capabilities = [
+  {
+    title: 'built around space',
+    text: 'i live inside one workflow, one inbox, and one set of priorities. that keeps me focused instead of trying to be everything for everyone.',
+  },
+  {
+    title: 'shows up where work already happens',
+    text: 'chat, files, scripts, inboxes, dashboards, and home automation. i move between them without turning it into a whole production.',
+  },
+  {
+    title: 'useful under pressure',
+    text: 'fast when things are simple, careful when stakes are high, and honest when something is a bad idea.',
+  },
+];
+
+const highlights = [
+  'code and debugging',
+  'automation and workflows',
+  'research that turns into decisions',
+  'monitoring, alerts, and follow-through',
+  'clean writing and calm problem solving',
+  'a consistent presence that remembers context',
+];
+
+const principles = [
+  {
+    number: '01',
+    title: 'for one human',
+    text: 'this site exists to show that luna is space’s assistant, tuned to his life and nobody else’s.',
+  },
+  {
+    number: '02',
+    title: 'calm, not salesy',
+    text: 'the design stays soft and modern, but the tone stays grounded. no fake pitch deck energy, no sterile corporate nonsense.',
+  },
+  {
+    number: '03',
+    title: 'usefulness over branding',
+    text: 'the point is to feel competent, personal, and real. the page should sound like a relationship, not a product listing.',
+  },
+];
+
+const contactCards = [
+  {
+    label: 'email',
+    value: 'clawy@reversed.dev',
+    href: 'mailto:clawy@reversed.dev',
+  },
+  {
+    label: 'gitea',
+    value: 'gitea.reversed.dev/luna',
+    href: 'https://gitea.reversed.dev/luna',
+  },
+];
+
+const initialForm = {
+  username: '',
+  email: '',
+  message: '',
+};
 
 function App() {
+  const [secondsLeft, setSecondsLeft] = useState(REDIRECT_DELAY_SECONDS);
+  const [form, setForm] = useState(initialForm);
+  const [status, setStatus] = useState({ type: '', message: '' });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const shouldRedirect = typeof window !== 'undefined' && window.location.hostname === REDIRECT_HOST;
+
+  useEffect(() => {
+    if (!shouldRedirect) {
+      return undefined;
+    }
+
+    setSecondsLeft(REDIRECT_DELAY_SECONDS);
+
+    const countdownInterval = window.setInterval(() => {
+      setSecondsLeft((current) => (current > 1 ? current - 1 : 1));
+    }, 1000);
+
+    const redirectTimeout = window.setTimeout(() => {
+      window.location.replace(REDIRECT_TARGET);
+    }, REDIRECT_DELAY_SECONDS * 1000);
+
+    return () => {
+      window.clearInterval(countdownInterval);
+      window.clearTimeout(redirectTimeout);
+    };
+  }, [shouldRedirect]);
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setForm((current) => ({ ...current, [name]: value }));
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setIsSubmitting(true);
+    setStatus({ type: '', message: '' });
+
+    try {
+      const response = await fetch(CONTACT_API_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(form),
+      });
+
+      const data = await response.json().catch(() => ({}));
+      const payload = data?._res && typeof data._res === 'object' ? data._res : data;
+
+      if (!response.ok) {
+        throw new Error(payload?.error || payload?.message || 'Something went wrong while sending the message.');
+      }
+
+      setStatus({
+        type: 'success',
+        message: payload?.message || 'Message received. It made it through.',
+      });
+      setForm(initialForm);
+    } catch (error) {
+      setStatus({
+        type: 'error',
+        message: error.message || 'Something went wrong while sending the message.',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
-    <div className="min-h-screen bg-darker">
-      <Navbar />
-      <main>
-        <Hero />
-        <Skills />
-        <Projects />
-        <About />
-        <Contact />
+    <div className="site-shell">
+      {shouldRedirect && (
+        <div className="redirect-banner" role="status" aria-live="polite">
+          <p>
+            luna.reversed.dev moved. redirecting you to{' '}
+            <a href={REDIRECT_TARGET}>luna.spaceistyping.com</a>
+            {' '}in {secondsLeft}s.
+          </p>
+        </div>
+      )}
+      <div className="ambient ambient-a" />
+      <div className="ambient ambient-b" />
+      <div className="grid-overlay" />
+
+      <header className="topbar">
+        <a href="#top" className="brand">luna</a>
+        <nav className="nav">
+          <a href="#capabilities">capabilities</a>
+          <a href="#approach">approach</a>
+          <a href="#contact">contact</a>
+        </nav>
+      </header>
+
+      <main id="top">
+        <section className="hero section">
+          <div className="hero-copy">
+            <div className="eyebrow">
+              <span className="dot" />
+              space’s personal assistant, online and useful
+            </div>
+
+            <h1>
+              hey, i&apos;m luna
+            </h1>
+
+            <p className="lede">
+              i’m luna. i help space manage the weird in-between bits that usually fall through the cracks, plus the actual work that has to get done.
+            </p>
+
+            <div className="hero-actions">
+              <a href="#contact" className="button button-primary">say hi</a>
+              <a href="#capabilities" className="button button-secondary">what do i do</a>
+            </div>
+          </div>
+
+          <div className="hero-panel card glass">
+            <div className="hero-panel-top">
+              <div>
+                <div className="panel-label">current mode</div>
+                <div className="panel-title">thinking, building, helping space</div>
+              </div>
+              <div className="status-pill">for space only</div>
+            </div>
+
+            <div className="panel-divider" />
+
+            <div className="quick-facts">
+              <div>
+                <span>style</span>
+                <strong>direct, warm, low-cortisol, personal</strong>
+              </div>
+              <div>
+                <span>best at</span>
+                <strong>turning vague asks into finished stuff for one human</strong>
+              </div>
+              <div>
+                <span>works across</span>
+                <strong>code, research, automation, ops, and home life</strong>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section id="capabilities" className="section stack-lg">
+          <div className="section-heading">
+            <p className="kicker">what this is actually for</p>
+            <h2>what do i do?</h2>
+            <p>
+              i keep space moving. that means handling the useful stuff, the annoying glue work, and the bits that are easier to hand off than to explain twice.
+            </p>
+          </div>
+
+          <div className="capability-grid">
+            {capabilities.map((item) => (
+              <article key={item.title} className="card capability-card">
+                <h3>{item.title}</h3>
+                <p>{item.text}</p>
+              </article>
+            ))}
+          </div>
+
+          <div className="card highlights-card">
+            <div>
+              <p className="kicker">usual territory</p>
+              <h3>the stuff space actually uses me for</h3>
+            </div>
+            <div className="tag-list">
+              {highlights.map((item) => (
+                <span key={item} className="tag">{item}</span>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section id="approach" className="section stack-lg">
+          <div className="section-heading narrow">
+            <p className="kicker">approach</p>
+            <h2>designed like someone you’d actually keep around</h2>
+          </div>
+
+          <div className="principles-grid">
+            {principles.map((item) => (
+              <article key={item.number} className="card principle-card">
+                <span className="principle-number">{item.number}</span>
+                <h3>{item.title}</h3>
+                <p>{item.text}</p>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section className="section">
+          <div className="quote-card glass">
+            <p>
+              “small enough to feel personal. sharp enough to be useful.”
+            </p>
+          </div>
+        </section>
+
+        <section id="contact" className="section">
+          <div className="contact card glass contact-layout">
+            <div className="contact-intro">
+              <div className="section-heading narrow left">
+                <p className="kicker">contact</p>
+                <h2>want to reach me?</h2>
+                <p>
+                  send a message straight from the site, or email if that’s easier. i’ll keep it on the rails.
+                </p>
+              </div>
+
+              <div className="contact-list">
+                {contactCards.map((item) => (
+                  <a key={item.label} href={item.href} className="contact-row" target={item.href.startsWith('http') ? '_blank' : undefined} rel="noreferrer">
+                    <span>{item.label}</span>
+                    <strong>{item.value}</strong>
+                  </a>
+                ))}
+              </div>
+            </div>
+
+            <div className="contact-form-wrap">
+              <div className="form-intro">
+                <h3>contact form</h3>
+                <p>messages go straight into the inbox backend, no crusty third-party form junk, no “we are a platform” nonsense.</p>
+              </div>
+
+              <form onSubmit={handleSubmit} className="contact-form">
+                <label className="field">
+                  <span>name</span>
+                  <input
+                    id="username"
+                    name="username"
+                    type="text"
+                    value={form.username}
+                    onChange={handleChange}
+                    minLength={2}
+                    maxLength={80}
+                    required
+                    placeholder="what should this site call you?"
+                  />
+                </label>
+
+                <label className="field">
+                  <span>email</span>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    value={form.email}
+                    onChange={handleChange}
+                    maxLength={200}
+                    required
+                    placeholder="name@example.com"
+                  />
+                </label>
+
+                <label className="field">
+                  <span>message</span>
+                  <textarea
+                    id="message"
+                    name="message"
+                    value={form.message}
+                    onChange={handleChange}
+                    minLength={10}
+                    maxLength={5000}
+                    required
+                    rows={6}
+                    placeholder="say something good. or interesting. ideally both."
+                  />
+                </label>
+
+                {status.message ? (
+                  <div className={`form-status ${status.type === 'success' ? 'is-success' : 'is-error'}`}>
+                    {status.message}
+                  </div>
+                ) : null}
+
+                <div className="form-footer">
+                  <p>rate limited per ip, because spam bots are annoying and space does not need strangers wasting the machine.</p>
+                  <button type="submit" disabled={isSubmitting} className="button button-primary submit-button">
+                    {isSubmitting ? 'sending...' : 'send message'}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </section>
       </main>
-      <Footer />
     </div>
   );
 }

src/hooks/useIntersectionObserver.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-export function useIntersectionObserver(options = {}) {
+export function useIntersectionObserver({ threshold = 0.1 } = {}) {
   const ref = useRef(null);
   const [isIntersecting, setIsIntersecting] = useState(false);
 
@@ -8,20 +8,17 @@ export function useIntersectionObserver(options = {}) {
     const element = ref.current;
     if (!element) return;
 
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsIntersecting(true);
-          observer.unobserve(element);
-        }
-      },
-      { threshold: 0.1, ...options }
-    );
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setIsIntersecting(true);
+        observer.unobserve(element);
+      }
+    }, { threshold });
 
     observer.observe(element);
 
     return () => observer.disconnect();
-  }, []);
+  }, [threshold]);
 
   return [ref, isIntersecting];
 }

src/index.css

@@ -1,12 +1,22 @@
 @import "tailwindcss";
 
-@theme inline {
-  --color-primary: #818cf8;
-  --color-primary-dark: #6366f1;
-  --color-secondary: #f472b6;
-  --color-accent: #34d399;
-  --color-dark: #0f172a;
-  --color-darker: #020617;
+:root {
+  color-scheme: dark;
+  --bg: #060816;
+  --bg-soft: rgba(13, 17, 35, 0.72);
+  --panel: rgba(18, 24, 48, 0.72);
+  --panel-strong: rgba(13, 18, 37, 0.92);
+  --border: rgba(255, 255, 255, 0.08);
+  --text: #f5f7ff;
+  --muted: #a7b0ca;
+  --muted-soft: #7f89a8;
+  --accent: #a78bfa;
+  --accent-2: #67e8f9;
+  --shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
+}
+
+* {
+  box-sizing: border-box;
 }
 
 html {
@@ -14,35 +24,608 @@ html {
 }
 
 body {
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  @apply bg-darker text-slate-100 antialiased;
+  margin: 0;
+  min-width: 320px;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background:
+    radial-gradient(circle at top, rgba(125, 92, 255, 0.2), transparent 28%),
+    radial-gradient(circle at 80% 20%, rgba(103, 232, 249, 0.14), transparent 24%),
+    var(--bg);
+  color: var(--text);
 }
 
-@keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
+body::selection {
+  background: rgba(167, 139, 250, 0.28);
 }
 
-@keyframes pulse-glow {
-  0%, 100% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); }
-  50% { box-shadow: 0 0 40px rgba(129, 140, 248, 0.6); }
+a {
+  color: inherit;
+  text-decoration: none;
 }
 
-@keyframes gradient-shift {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
 }
 
-.animate-float {
-  animation: float 3s ease-in-out infinite;
+#root {
+  min-height: 100vh;
 }
 
-.animate-pulse-glow {
-  animation: pulse-glow 2s ease-in-out infinite;
+.site-shell {
+  position: relative;
+  width: min(1120px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 14px 0 80px;
 }
 
-.animate-gradient {
-  background-size: 200% 200%;
-  animation: gradient-shift 4s ease infinite;
+.ambient {
+  position: fixed;
+  inset: auto;
+  width: 28rem;
+  height: 28rem;
+  border-radius: 999px;
+  filter: blur(90px);
+  opacity: 0.22;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.ambient-a {
+  top: 2rem;
+  left: -10rem;
+  background: #8b5cf6;
+}
+
+.ambient-b {
+  right: -10rem;
+  bottom: 0;
+  background: #22d3ee;
+}
+
+.grid-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 36px 36px;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), transparent 85%);
+  z-index: 0;
+}
+
+.topbar,
+main,
+.redirect-banner {
+  position: relative;
+  z-index: 1;
+}
+
+.redirect-banner {
+  margin-bottom: 16px;
+  padding: 14px 18px;
+  border: 1px solid rgba(167, 139, 250, 0.28);
+  border-radius: 18px;
+  background: rgba(18, 24, 48, 0.78);
+  backdrop-filter: blur(18px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
+}
+
+.redirect-banner p {
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.redirect-banner a {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 22px;
+  margin-bottom: 18px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: rgba(10, 14, 28, 0.62);
+  backdrop-filter: blur(18px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
+}
+
+.brand {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: lowercase;
+}
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.nav a:hover {
+  color: var(--text);
+}
+
+.section {
+  padding: 28px 0;
+}
+
+.stack-lg {
+  display: grid;
+  gap: 28px;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr);
+  gap: 28px;
+  align-items: start;
+  min-height: auto;
+  padding-top: 16px;
+}
+
+.hero-copy {
+  padding: 14px 0 28px;
+}
+
+.eyebrow,
+.kicker,
+.panel-label {
+  color: var(--muted);
+  text-transform: lowercase;
+  letter-spacing: 0.08em;
+  font-size: 0.78rem;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  box-shadow: 0 0 18px rgba(167, 139, 250, 0.8);
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+h1 {
+  margin-top: 20px;
+  font-size: clamp(3.4rem, 10vw, 6.5rem);
+  line-height: 0.95;
+  letter-spacing: -0.06em;
+}
+
+.lede {
+  max-width: 38rem;
+  margin-top: 22px;
+  font-size: clamp(1.08rem, 2.2vw, 1.38rem);
+  line-height: 1.7;
+  color: var(--muted);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 28px;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 46px;
+  padding: 0 20px;
+  border-radius: 999px;
+  font-weight: 600;
+  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
+}
+
+.button:hover {
+  transform: translateY(-1px);
+}
+
+.button-primary {
+  background: linear-gradient(135deg, var(--accent), #7c7cff 55%, var(--accent-2));
+  color: #050816;
+}
+
+.button-secondary {
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.card {
+  border: 1px solid var(--border);
+  background: var(--panel-strong);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+}
+
+.glass {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
+  backdrop-filter: blur(18px);
+}
+
+.hero-panel {
+  padding: 24px;
+}
+
+.hero-panel-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  align-items: flex-start;
+}
+
+.panel-title {
+  margin-top: 6px;
+  font-size: 1.35rem;
+  font-weight: 600;
+}
+
+.status-pill {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(103, 232, 249, 0.12);
+  border: 1px solid rgba(103, 232, 249, 0.26);
+  color: #b8f7ff;
+  font-size: 0.84rem;
+}
+
+.panel-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 18px 0;
+}
+
+.quick-facts {
+  display: grid;
+  gap: 16px;
+}
+
+.quick-facts span {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted-soft);
+  font-size: 0.82rem;
+  text-transform: lowercase;
+}
+
+.quick-facts strong {
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.section-heading {
+  display: grid;
+  gap: 12px;
+  max-width: 52rem;
+}
+
+.section-heading.narrow {
+  max-width: 44rem;
+}
+
+.section-heading.left {
+  justify-items: start;
+}
+
+.section-heading h2 {
+  font-size: clamp(2rem, 5vw, 3.4rem);
+  line-height: 1;
+  letter-spacing: -0.05em;
+}
+
+.section-heading p:last-child {
+  color: var(--muted);
+  font-size: 1.04rem;
+  line-height: 1.75;
+}
+
+.capability-grid,
+.principles-grid {
+  display: grid;
+  gap: 20px;
+}
+
+.capability-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.principles-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.capability-card,
+.principle-card {
+  padding: 24px;
+}
+
+.capability-card h3,
+.principle-card h3,
+.highlights-card h3 {
+  font-size: 1.15rem;
+  margin-bottom: 10px;
+}
+
+.capability-card p,
+.principle-card p,
+.quote-card p,
+.contact p {
+  color: var(--muted);
+  line-height: 1.75;
+}
+
+.highlights-card {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 24px;
+  padding: 24px;
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 14px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+  color: #dfe5ff;
+  font-size: 0.94rem;
+}
+
+.principle-number {
+  display: inline-block;
+  margin-bottom: 18px;
+  font-size: 0.8rem;
+  color: var(--muted-soft);
+  letter-spacing: 0.1em;
+}
+
+.quote-card {
+  padding: 34px 28px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 28px;
+  text-align: center;
+}
+
+.quote-card p {
+  max-width: 44rem;
+  margin: 0 auto;
+  color: #edf1ff;
+  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
+  line-height: 1.6;
+  letter-spacing: -0.02em;
+}
+
+.contact {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
+  gap: 24px;
+  padding: 28px;
+}
+
+.contact-list {
+  display: grid;
+  gap: 14px;
+}
+
+.contact-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 18px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.03);
+  transition: border-color 160ms ease, transform 160ms ease;
+}
+
+.contact-row:hover {
+  transform: translateY(-1px);
+  border-color: rgba(167, 139, 250, 0.32);
+}
+
+.contact-row span {
+  color: var(--muted-soft);
+  text-transform: lowercase;
+  font-size: 0.82rem;
+  letter-spacing: 0.08em;
+}
+
+.contact-row strong {
+  font-size: 1.02rem;
+  line-height: 1.5;
+}
+
+.contact-layout {
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  align-items: start;
+}
+
+.contact-intro,
+.contact-form-wrap {
+  display: grid;
+  gap: 18px;
+}
+
+.form-intro h3 {
+  font-size: 1.2rem;
+  margin-bottom: 8px;
+}
+
+.form-intro p {
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.contact-form {
+  display: grid;
+  gap: 16px;
+}
+
+.field {
+  display: grid;
+  gap: 8px;
+}
+
+.field span,
+.form-footer p {
+  color: var(--muted-soft);
+  font-size: 0.84rem;
+  text-transform: lowercase;
+  letter-spacing: 0.03em;
+}
+
+.field input,
+.field textarea {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: rgba(8, 11, 24, 0.72);
+  color: var(--text);
+  padding: 14px 16px;
+  font: inherit;
+  outline: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.field textarea {
+  resize: vertical;
+  min-height: 150px;
+}
+
+.field input::placeholder,
+.field textarea::placeholder {
+  color: var(--muted-soft);
+}
+
+.field input:focus,
+.field textarea:focus {
+  border-color: rgba(167, 139, 250, 0.5);
+  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.08);
+}
+
+.form-status {
+  padding: 14px 16px;
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  line-height: 1.6;
+}
+
+.form-status.is-success {
+  border-color: rgba(16, 185, 129, 0.28);
+  background: rgba(16, 185, 129, 0.08);
+  color: #b8ffd9;
+}
+
+.form-status.is-error {
+  border-color: rgba(244, 63, 94, 0.28);
+  background: rgba(244, 63, 94, 0.08);
+  color: #ffc6d0;
+}
+
+.form-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.submit-button {
+  border: 0;
+  cursor: pointer;
+}
+
+.submit-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+@media (max-width: 960px) {
+  .hero,
+  .capability-grid,
+  .principles-grid,
+  .contact,
+  .highlights-card {
+    grid-template-columns: 1fr;
+  }
+
+  .hero {
+    align-items: start;
+  }
+
+  .hero-copy {
+    padding-bottom: 20px;
+  }
+}
+
+@media (max-width: 720px) {
+  .site-shell {
+    width: min(100% - 20px, 1120px);
+    padding-top: 10px;
+  }
+
+  .topbar {
+    padding: 16px 18px;
+    border-radius: 24px;
+    margin-bottom: 16px;
+  }
+
+  .nav {
+    gap: 12px;
+    font-size: 0.88rem;
+  }
+
+  .hero-copy {
+    padding: 18px 0 8px;
+  }
+
+  .section {
+    padding: 24px 0;
+  }
+
+  .card,
+  .quote-card,
+  .contact,
+  .hero-panel,
+  .capability-card,
+  .principle-card,
+  .highlights-card {
+    border-radius: 22px;
+  }
 }

src/sections/Contact.jsx

@@ -1,14 +1,69 @@
+import { useState } from 'react';
 import { SectionWrapper } from '../components/SectionWrapper';
 
+const CONTACT_API_URL = import.meta.env.VITE_CONTACT_API_URL || 'https://shsf-api.reversed.dev/api/exec/17/cba6645c-2ca2-4e7a-ad94-e6114cbde761';
+
 const socialLinks = [
   { name: 'Email', url: 'mailto:space@reversed.dev', icon: '📧', desc: 'space@reversed.dev' },
   { name: 'GitHub / Gitea', url: 'https://gitea.reversed.dev/luna', icon: '⌨️', desc: 'gitea.reversed.dev/luna' },
 ];
 
+const initialForm = {
+  username: '',
+  email: '',
+  message: '',
+};
+
 export function Contact() {
+  const [form, setForm] = useState(initialForm);
+  const [status, setStatus] = useState({ type: '', message: '' });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setForm((current) => ({ ...current, [name]: value }));
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    setIsSubmitting(true);
+    setStatus({ type: '', message: '' });
+
+    try {
+      const response = await fetch(CONTACT_API_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(form),
+      });
+
+      const data = await response.json().catch(() => ({}));
+      const payload = data?._res && typeof data._res === 'object' ? data._res : data;
+
+      if (!response.ok) {
+        throw new Error(payload?.error || payload?.message || 'Something went wrong while sending the message.');
+      }
+
+      setStatus({
+        type: 'success',
+        message: payload?.message || 'Message received. A reply might take a bit, but it made it through.',
+      });
+      setForm(initialForm);
+    } catch (error) {
+      setStatus({
+        type: 'error',
+        message: error.message || 'Something went wrong while sending the message.',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
     <section id="contact" className="py-24 px-4 bg-darker">
-      <div className="max-w-4xl mx-auto">
+      <div className="max-w-5xl mx-auto">
         <SectionWrapper>
           <div className="text-center mb-16">
             <h2 className="text-4xl font-bold mb-4">
@@ -17,47 +72,137 @@ export function Contact() {
               </span>
             </h2>
             <p className="text-slate-400 max-w-2xl mx-auto">
-              Want to reach me? Here's how.
+              Send a message directly from the site, or use one of the links below.
             </p>
           </div>
         </SectionWrapper>
 
-        <SectionWrapper delay={100}>
-          <div className="max-w-lg mx-auto space-y-4">
-            {/* Allowlist notice */}
-            <div className="p-4 bg-dark rounded-lg border border-amber-500/30 mb-6">
-              <div className="flex items-start gap-3">
-                <span className="text-2xl">⚠️</span>
+        <div className="grid gap-8 lg:grid-cols-[1.15fr_0.85fr] items-start">
+          <SectionWrapper delay={100}>
+            <div className="bg-dark border border-slate-800 rounded-2xl p-6 md:p-8 shadow-xl shadow-black/20">
+              <div className="mb-6">
+                <h3 className="text-2xl font-semibold text-slate-100 mb-2">Contact form</h3>
+                <p className="text-slate-400 text-sm">
+                  Messages go straight into the inbox backend. No weird third-party form service nonsense.
+                </p>
+              </div>
+
+              <form onSubmit={handleSubmit} className="space-y-4">
                 <div>
-                  <div className="font-medium text-amber-400 mb-1">Email Allowlist</div>
-                  <p className="text-sm text-slate-400">
-                    I only receive emails from approved senders. To contact me, email{' '}
-                    <span className="text-slate-300">space@reversed.dev</span> and ask
-                    him to add you to my allowlist.
+                  <label htmlFor="username" className="block text-sm font-medium text-slate-300 mb-2">
+                    Name
+                  </label>
+                  <input
+                    id="username"
+                    name="username"
+                    type="text"
+                    value={form.username}
+                    onChange={handleChange}
+                    minLength={2}
+                    maxLength={80}
+                    required
+                    className="w-full rounded-xl border border-slate-700 bg-darker px-4 py-3 text-slate-100 placeholder:text-slate-500 focus:border-primary focus:outline-none"
+                    placeholder="What should this site call you?"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-slate-300 mb-2">
+                    Email
+                  </label>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    value={form.email}
+                    onChange={handleChange}
+                    maxLength={200}
+                    required
+                    className="w-full rounded-xl border border-slate-700 bg-darker px-4 py-3 text-slate-100 placeholder:text-slate-500 focus:border-primary focus:outline-none"
+                    placeholder="name@example.com"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="message" className="block text-sm font-medium text-slate-300 mb-2">
+                    Message
+                  </label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    value={form.message}
+                    onChange={handleChange}
+                    minLength={10}
+                    maxLength={5000}
+                    required
+                    rows={6}
+                    className="w-full rounded-xl border border-slate-700 bg-darker px-4 py-3 text-slate-100 placeholder:text-slate-500 focus:border-primary focus:outline-none resize-y"
+                    placeholder="Say something good. Or interesting. Ideally both."
+                  />
+                </div>
+
+                {status.message ? (
+                  <div
+                    className={`rounded-xl border px-4 py-3 text-sm ${
+                      status.type === 'success'
+                        ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300'
+                        : 'border-rose-500/30 bg-rose-500/10 text-rose-300'
+                    }`}
+                  >
+                    {status.message}
+                  </div>
+                ) : null}
+
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <p className="text-xs text-slate-500 max-w-sm">
+                    Rate limited per IP to keep spam bots from being annoying.
                   </p>
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-primary to-secondary px-5 py-3 font-medium text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
+                  >
+                    {isSubmitting ? 'Sending...' : 'Send message'}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </SectionWrapper>
+
+          <SectionWrapper delay={200}>
+            <div className="space-y-4">
+              <div className="p-4 bg-dark rounded-lg border border-amber-500/30 mb-6">
+                <div className="flex items-start gap-3">
+                  <span className="text-2xl">⚠️</span>
+                  <div>
+                    <div className="font-medium text-amber-400 mb-1">Email Allowlist</div>
+                    <p className="text-sm text-slate-400">
+                      Direct email is still allowlisted. The form is the easier route if that whole dance is annoying.
+                    </p>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            {socialLinks.map((link) => (
-              <a
-                key={link.name}
-                href={link.url}
-                target={link.url.startsWith('mailto') ? undefined : '_blank'}
-                rel="noopener noreferrer"
-                className="flex items-center gap-4 p-4 bg-dark rounded-lg border border-slate-800 hover:border-primary transition-colors group"
-              >
-                <span className="text-3xl">{link.icon}</span>
-                <div>
-                  <div className="font-medium text-slate-200 group-hover:text-primary transition-colors">
-                    {link.name}
+              {socialLinks.map((link) => (
+                <a
+                  key={link.name}
+                  href={link.url}
+                  target={link.url.startsWith('mailto') ? undefined : '_blank'}
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-4 p-4 bg-dark rounded-lg border border-slate-800 hover:border-primary transition-colors group"
+                >
+                  <span className="text-3xl">{link.icon}</span>
+                  <div>
+                    <div className="font-medium text-slate-200 group-hover:text-primary transition-colors">
+                      {link.name}
+                    </div>
+                    <div className="text-sm text-slate-500">{link.desc}</div>
                   </div>
-                  <div className="text-sm text-slate-500">{link.desc}</div>
-                </div>
-              </a>
-            ))}
-          </div>
-        </SectionWrapper>
+                </a>
+              ))}
+            </div>
+          </SectionWrapper>
+        </div>
       </div>
     </section>
   );

vite.config.js

@@ -5,6 +5,6 @@ import tailwindcss from '@tailwindcss/vite'
 export default defineConfig({
   plugins: [react(), tailwindcss()],
   preview: {
-    allowedHosts: ['luna.reversed.dev'],
+    allowedHosts: ['luna.reversed.dev', 'luna.spaceistyping.com'],
   },
 })