
Mel-or — Bedrijfswebsite & ontwikkelaarsportfolio
Een meertalige website die informatie over zakelijke diensten combineert met een persoonlijk ontwikkelaarsportfolio, gebouwd met Next.js, React en TypeScript.
- Next.js
- React
- TypeScript
- CSS
- Google Apps Script
- Cloudflare Workers
- Mijn rol
- Ontwikkelaar — frontend en contact-API
- Mijn bijdrage
- Bouwde herbruikbare paginacomponenten, responsieve navigatie en een contactendpoint aan de serverzijde, en voegde meertalige content toe.
- Technische uitdaging
- Dezelfde website moet een Perzische layout van rechts naar links en Engelse en Nederlandse layouts van links naar rechts ondersteunen. De navigatie moet in elke taal consistent blijven en de toegangsgegevens van de e-mailprovider moeten op de server blijven.
- Aanpak
- Gedeelde React-componenten gebruiken taalgebonden routes en JSON-woordenboeken om content in elke taal weer te geven. Een Next.js Route Handler valideert inzendingen van het contactformulier en stuurt ze door naar de e-mailprovider.
- Resultaat
- De dienstenpagina’s en het ontwikkelaarsprofiel zijn in drie talen geïmplementeerd, met een contact-API en profielspecifieke metadata.
Lees de casestudy
Projectcontext
Mel-or presenteert webdiensten en een persoonlijk ontwikkelaarsprofiel in één applicatie. Het profiel heeft een eigen identiteit en navigatie, met behoud van gedeelde layouts en herbruikbare UI-componenten.
Implementatie
- Bouwde eigen React-componenten voor de homepage, dienstbeschrijvingen, processtappen, werkervaring en het contactformulier, met responsieve CSS.
- Implementeerde Perzische, Engelse en Nederlandse woordenboeken, taalgebonden routes, taalwisseling met behoud van de huidige route en lang/dir-attributen op documentniveau.
- Implementeerde POST /api/contact met servervalidatie, limieten voor verzoekgrootte en wachttijd, herkomstcontrole en rate limiting. De afleverlaag ondersteunt HMAC-ondertekende Google Apps Script-verzoeken en Resend als alternatieve provider.
- Voegde canonical-URL’s, taalalternatieven, Open Graph-metadata, gestructureerde data, robots.txt en een meertalige sitemap toe.
- Gebruikte afbeeldingsoptimalisatie van Next.js, lokale lettertypen, statische paginageneratie, semantische secties, gelabelde formuliervelden, toetsenbordbediening en ondersteuning voor minder beweging.
Architectuurkeuzes
- Vertaalde teksten in JSON-woordenboeken en tekstrichting in gedeelde componenten houden, zodat er geen drie afzonderlijke pagina-implementaties nodig zijn.
- Server Components gebruiken voor paginacontent en Client Components voor interactieve navigatie, taalwisseling en formulierstatus.
- Toegangsgegevens van de e-mailprovider in de serverconfiguratie bewaren en vooraf gedefinieerde verzendstatussen aan de browser teruggeven zonder interne antwoorden van de provider te tonen.
- Een OpenNext/Cloudflare Workers-buildconfiguratie onderhouden, met automatische controles voor vertalingen, routing, metadata en contactafhandeling.
Screenshots van de openbare website

