Personal Homepage

Personal Project

A server-side rendered Angular website with project showcases, multilingual support, and an on-demand LaTeX CV generator that stays in sync with the site.

About the 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 LaTeX 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. The diagram below illustrates the full pipeline from request to compiled PDF.

CV generation pipeline

On the first request the service sets up the LaTeX environment and runs a two-pass compilation to ensure correct page numbering and cross-references, as shown in the diagram. Subsequent requests reuse the cached auxiliary files, allowing the PDF to be generated in a single pass for faster response times. The compiled output is served from a temporary directory that is cleaned up afterwards. The entire LaTeX toolchain, including TinyTeX and the required packages, is bundled inside the Docker image so the service runs identically in any environment.

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.
  • LaTeX-based CV compilation handled by the backend.