The problem
My work spans research, software, plant technology and two consumer brands. A list of job titles or GitHub repositories does not explain how those areas connect. I wanted one place where visitors can understand the question behind each project, my contribution and what the work produced.
The approach
I developed the existing Next.js, React and TypeScript codebase into a structured project archive. English and Dutch share one content model and page templates. Each case connects the problem, approach, challenges and outcome to relevant source code, publications, visuals or videos. Search and category filters help visitors find the work that interests them.
The challenge
The site needs to serve different audiences without becoming a collection of unrelated pages. Translations, project links, metadata and navigation must stay consistent as the archive grows. Public explanations also need to respect the boundary between portfolio evidence and confidential employer information.
Built around the visitor
A calm editorial layout keeps the project stories central, with responsive pages, light and dark themes, and a language switch that retains the current project.
- Reusable case pages with a personal role, supporting material and related projects.
- Local images, native video players and a contact form with validation and delivery feedback.
- Semantic content, keyboard focus styles and reduced-motion support are built into the interface.
From content to a published website
Next.js exports the pages as static HTML. Render builds and publishes the site from GitHub main. The content model also generates routes, the sitemap and machine-readable project information, while canonical URLs, language alternates and structured data describe the relationship between pages.
Outcome & value
A live, maintainable portfolio at frenkkester.com, with English at the root and Dutch under /nl/. New projects can be added through shared content records and automatically appear in the archive and generated directories. The site is both a presentation of my work and a practical example of how I turn information into a usable product.
Lessons learned
Content structure is part of product design. Keeping translations, evidence and navigation in one model makes it easier to grow the site while preserving a coherent reading experience.
Evidence & artifacts
- WEBExplore the website
The live portfolio you are reading. The source repository is private.