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.