Web Development2026
MDS Website
A statically generated Next.js platform with a typed content registry, a portfolio media system and a validated inquiry flow.
- Engagement
- MDS internal
- Built with
- Next.js · React · TypeScript · Tailwind CSS · Zod · Vercel
Overview
The website had to present AI systems as the lead offer while keeping software and creative services visible — and give the portfolio room to show code, campaigns, 3D and video in the format each deserves.
It is built on Next.js with server components by default. Services, projects, articles and contact options live in typed, validated content files, so adding work never means editing a layout.
Objectives
- Lead with AI systems without hiding software and creative work
- Make the portfolio a first-class sales tool
- Let non-developers add projects, videos and Drive collections
- Stay fast and accessible on mobile connections
Challenge
Portfolio items range from software to video edits and 3D collections stored in Google Drive. Each needs a different presentation, and a Drive link can never be assumed to be public or playable.
Approach
- 01
One content model for every kind of project, validated at build time so mistakes fail before they reach visitors.
- 02
Detail pages compose themselves from the content: identity systems, websites, AI systems, visual collections and video work each get a suitable layout.
- 03
Video previews are derived only from links that parse reliably — Drive file previews, YouTube and Vimeo embeds, or native files — loaded on demand, with a poster and an external link as the fallback.
- 04
The inquiry flow validates on the server, filters spam, limits request rates and reports delivery failures instead of pretending a message was sent.
Screens
Homepage — hero, capability index and the problems section. Work index with shareable category filters. Recomposed for small screens rather than shrunk.
Deliverables
- 01Design system and tokens
- 02Next.js application
- 03Portfolio and media system
- 04Inquiry flow
- 05Content and deployment documentation
Planning something similar?
Tell us about the project — the outcome you need, the constraints you have, and when you need it.