
Mel-or — Business Website & Developer Portfolio
A multilingual website combining business service pages with a personal developer portfolio, built with Next.js, React and TypeScript.
- Next.js
- React
- TypeScript
- CSS
- Google Apps Script
- Cloudflare Workers
- My role
- Developer — frontend and contact API
- My contribution
- Developed reusable page components, responsive navigation, localized content and a server-side contact endpoint.
- Technical challenge
- The same site needs Persian RTL and English/Dutch LTR layouts, consistent navigation and contact handling that keeps provider credentials on the server.
- Approach
- Shared React components use locale-based routes and JSON dictionaries to render content in each language. A Next.js Route Handler validates contact form submissions and forwards them to the email provider.
- Result
- Business pages and a developer profile are implemented in three languages, with a contact API and profile-specific metadata.
Read case study
Project context
Mel-or presents web services and a personal developer profile within one application. The implementation separates the profile’s identity and navigation while retaining shared layouts and reusable UI components.
Implementation
- Built custom React components for the homepage, service details, process steps, developer experience and contact form, styled with responsive CSS.
- Implemented Persian, English and Dutch dictionaries, locale-based routing, language switching that preserves the current route, and document-level lang/dir attributes.
- Implemented POST /api/contact with server-side validation, request-size and timeout limits, origin checks and rate limiting. The delivery layer supports HMAC-signed Google Apps Script requests and an alternative Resend provider.
- Added page-specific canonical URLs, language alternates, Open Graph metadata, structured data, robots.txt and a multilingual sitemap.
- Used Next.js image sizing, local font files, static page generation, semantic sections, labelled form fields, keyboard controls and reduced-motion support.
Architectural decisions
- Keep localized copy in JSON dictionaries and layout direction in shared components to avoid maintaining three separate page implementations.
- Use Server Components for page content and Client Components for interactive controls such as navigation, language switching and contact-form state.
- Keep email-provider credentials in server runtime configuration; return controlled delivery states instead of exposing provider responses to the browser.
- Maintain an OpenNext/Cloudflare Workers build configuration and automated checks for translations, routing, metadata and contact handling.
Public website screenshots

