Alexey Belov
← All projects

Lyudmila Miraeva

A business-card site for a transpersonal psychologist: design, frontend, email integration, and SEO — from markup to production.

Next.jsReactTypeScriptCSS ModulesNodemailerVercel

Task

Build a one-page business-card site for a practicing psychologist from a ready-made design: present areas of work, services and pricing, build trust through "about me" and "how sessions work" blocks, and — most importantly — make sure contact-form submissions reach the specialist directly by email, with no CRM or third-party form services.

Result

  • A turnkey landing page: a portrait photo, 6 areas of work, services with pricing, a "how sessions work" block, and real clickable contacts.
  • Form submissions land in the specialist's inbox automatically in real time — no need to manually monitor the site.
  • The page is SEO-ready from day one: structured data and OG tags for correct indexing and clean link previews when shared.
  • Fully responsive layout (desktop/mobile), ready for production deployment on Vercel with no further work.

Solution

  • Next.js (App Router) + React + TypeScript; all site content (services, areas of work, steps, contacts, numbers) lives in a single typed content.ts module — sections render from data instead of being hardcoded in JSX.
  • A design system built with CSS Modules and no UI framework: custom fonts via next/font (Cormorant Garamond + Mulish), a responsive grid, and custom SVG icons matching each area of work.
  • A contact form backed by a server Route Handler (/api/contact): the server validates the data and sends the email via Yandex SMTP (Nodemailer) straight to the specialist's inbox, with credentials passed through environment variables.
  • SEO out of the box: JSON-LD structured data (ProfessionalService + Person), meta tags and Open Graph via the Next.js Metadata API, and image optimization with next/image.