Contact (React)

A modern, responsive contact page built with React + Vite.

Features

• Polished UI (light/dark theme toggle)
• Social links section (Facebook / Instagram / LinkedIn)
• Contact details with copy-to-clipboard helpers
• Contact form with validation, autosave draft, and success/error states
• Configurable submission:
  • If VITE_CONTACT_ENDPOINT is set → POST JSON to that endpoint
  • Else if EmailJS env vars are set → send via EmailJS (no mail client opens)
  • Otherwise → shows a configuration error (no mailto: fallback)

Getting Started

1. Install dependencies

npm install

2. Run locally

npm run dev

3. Build for production

npm run build

4. Preview the production build

npm run preview

Configuration

Edit your details in:

• src/config/contact.js

Optional environment variables:

• VITE_CONTACT_ENDPOINT — if set, the form will POST JSON to this URL.

Vercel (recommended)

This repo includes a Vercel Serverless Function at /api/contact (see api/contact.js).

In production, if VITE_CONTACT_ENDPOINT is not set, the app will default to sending to /api/contact.

1. Create a Resend account + API key

2. In Vercel Project Settings → Environment Variables, add:

• VITE_CONTACT_ENDPOINT = /api/contact
• RESEND_API_KEY
• CONTACT_TO_EMAIL (where you want to receive messages)
• CONTACT_FROM_EMAIL (must be a verified sender/domain in Resend)

Optional (basic spam protection):

• RATE_LIMIT_WINDOW_SECONDS (default: 600)
• RATE_LIMIT_MAX (default: 5)

Optional (stronger spam protection): Cloudflare Turnstile

• VITE_TURNSTILE_SITE_KEY (client)
• TURNSTILE_SECRET_KEY (server)

When TURNSTILE_SECRET_KEY is set, the API requires a valid Turnstile token.

Note: this rate limit is best-effort (in-memory per serverless instance). For stronger rate limiting across all instances, use a shared store like Vercel KV/Upstash.

Local note: Vite's npm run dev will not run Vercel functions. For local end-to-end testing, use Vercel CLI (vercel dev) or point VITE_CONTACT_ENDPOINT at a hosted endpoint.

EmailJS (optional, client-side email sending without opening Gmail):

• VITE_EMAILJS_SERVICE_ID
• VITE_EMAILJS_TEMPLATE_ID
• VITE_EMAILJS_PUBLIC_KEY

Example .env:

VITE_CONTACT_ENDPOINT=https://your-api.example.com/contact

EmailJS example .env:

VITE_EMAILJS_SERVICE_ID=service_xxx
VITE_EMAILJS_TEMPLATE_ID=template_xxx
VITE_EMAILJS_PUBLIC_KEY=your_public_key

Legacy page

Your original static HTML was preserved at:

• /legacy/index.html