Over het project
The site is built with Angular and TypeScript and focuses on presenting projects, experience and reports in a clear and structured way. It supports light and dark themes, includes small interface animations and generates previews for PDF reports. The application uses server-side rendering (SSR) with Angular Universal so that pages are pre-rendered on the server, resulting in faster initial load times, better SEO and proper social-media link previews. The site is containerized with Docker for consistent builds and deployment.
Automatic CV generation
The site includes a backend service that automatically generates a PDF version of my CV. Visiting the `/cv.pdf` endpoint triggers the server to compile a Typst template populated with the same data that powers the CV section of the website. This means the online CV page and the downloadable PDF always stay perfectly in sync without any manual effort.
Each request feeds the CV data into Typst as an input parameter and compiles the template in a single pass, streaming the resulting PDF straight back in the response. Typst is a single static binary that renders quickly, so there is no need for caching, auxiliary files or a multi-pass build. The required fonts are bundled alongside the template and system fonts are ignored, so the output looks identical in any environment. The Typst binary itself is copied into the Docker image, keeping the toolchain self-contained.
From LaTeX to Typst. The generator originally compiled a LaTeX template with a bundled TinyTeX toolchain, which took a two-pass build and roughly 1.2s per request. Following Typst's automated PDF generation guide I moved to a single Typst template fed through
sys.inputs, which turned out to be far simpler and much faster: about 150ms per request, an ~8x speedup, with a smaller Docker image and none of the multi-pass, auxiliary-file dance.
Markdown-based project pages
Each project page is written as a standalone Markdown file with YAML frontmatter for metadata such as title, images, keywords and quick links. At build time, these files are parsed and converted to HTML so each project can be authored in a simple, portable format without touching Angular templates. The Markdown body supports images, headings, links and reference anchors, all rendered with consistent styling. Every project page also links to its Markdown source, making the content fully transparent and easy to maintain.
Translations
The entire site is available in both English and Dutch. Interface labels, navigation items and static text are managed through separate translation files that are loaded based on the selected locale. Project descriptions can also be provided in multiple languages by adding locale-specific Markdown files (e.g. content.en.md and content.nl.md), so visitors can read both the UI and project content in their preferred language.
RSS feed
The site has an RSS feed at `/feed.xml` so you can follow new projects in any feed reader like Feedly. It pulls from the same project data and sitemap dates used elsewhere on the site, so there's nothing to keep in sync manually. Each entry includes the project title, description, cover image, tags and publish date.
Key features
- Responsive layout with light and dark theme support.
- Built with Angular, TypeScript and Node.js.
- Project pages with descriptions, images and report previews.
- Small UI animations and transitions.
- PDF previews for project reports directly on the site.
- Automatic CV generation through a /cv.pdf endpoint.
- Website CV section and PDF CV share the same data source.
- Server-side rendering for better performance and SEO.
- Typst-based CV compilation handled by the backend.