selodev.com — React + Vite portfolio with auto-generated SEO
React/Vite single-page app with structured data, an auto-generated sitemap, and a Resend-backed contact endpoint. Deployed on Netlify with HSTS, strict CSP, and pre-built security headers.
Client: Personal · Timeline: 2026
Stack: React 18, Vite 6, Tailwind CSS, Framer Motion, react-helmet-async, Netlify Functions, Resend, JSON-LD graph, Auto sitemap, Hardened Netlify Function
Problem
- Needed a maintainable showcase site with strong SEO defaults so individual project pages rank without bespoke per-page work.
- Wanted a contact path that filters bots without standing up infrastructure or pulling in a SaaS form provider.
Approach
- Built on React 18 + Vite 6 with code-splitting per route — every page module lazy-loaded behind Suspense.
- Centralized portfolio data in a plain JS module so content edits are one-file diffs.
- Wrote a JSON-LD graph (Website + Organization + Person) that merges with per-page schema in react-helmet-async.
- Generated sitemap.xml in a postbuild step so the deploy artifact ships it as a static file.
- Built the contact form on a single Netlify Function with honeypot, per-IP rate limit, HTML escaping, and a Resend fallback that logs when no API key is set.
Results
- Lean single-page React app shipped from one codebase with shared layout primitives and an ErrorBoundary on case studies.
- Strict CSP, HSTS preload, X-Frame-Options DENY, and a Permissions-Policy configured in netlify.toml.
- JSON-LD, Open Graph, and canonical tags rendered on every routed page through one SEO component.
What you can verify
- Repo README documents install, build, and the postbuild sitemap generator.
- Security headers live in netlify.toml — visible in any HEAD request against the live site.