Technology

This page will give you a brief overview about how this website functions and what is used under the hood.

My website uses Astro under the hood. Astro is used as a multi-page static site generator here. All Projects and Blog Entries are written down as MDX-Files. Astro will then generate the relevant pages using the Content-Plugin.

Some pages also contain images. To keep the download sizes low I convert my PNG Images to WebP during build. While Astro has a Plugin to do this for you, I chose to go a different route by creating a Content Server which Astro will call during build to generate images.

This same Content Server is also used to automatically generate images. For example all the OpenGraph Images (used in social embeds) are generated this way using Satori and Sharp. I made the Content Server public — The codebase is a hot, undocumented mess, but feel free to look at it on Gitlab.

On the Astro side of things I wrote a function that will fetch the image from the server, copy it into the public directory, and reference that public directory instead. You can look at the astro-preload package for an example implementation.

Dependencies

This website makes use of the following dependencies.

@astrojs/lit ^3.0.3 @astrojs/mdx ^2.0.0 @astrojs/prefetch ^0.4.1 @astrojs/sitemap ^3.0.3 @astrojs/tailwind ^5.0.3 @astrojs/vue ^4.0.2 @fontsource/roboto ^5.0.3 @fontsource/ubuntu ^5.0.3 @motion-canvas/player 3.14.1 @WaldemarLehner/waldemarlehner-animations ^0.0.9 astro ^4.0.3 chalk ^5.3.0 giscus ^1.3.0 rehype-autolink-headings ^7.0.0 rehype-slug ^6.0.0 tailwindcss ^3.3.2 zod ^3.21.4 DEV @iconify-json/devicon-plain ^1.1.12 DEV @iconify-json/file-icons ^1.1.4 DEV @iconify-json/ic ^1.1.13 DEV @iconify-json/material-symbols ^1.1.51 DEV @iconify-json/mdi ^1.1.53 DEV @iconify-json/ph ^1.1.5 DEV @iconify-json/simple-icons ^1.1.60 DEV @iconify-json/twemoji ^1.1.11 DEV @iconify/utils ^2.1.12 DEV @resvg/resvg-js ^2.4.1 DEV @types/express ^4.17.17 DEV @types/node ^20.4.1 DEV @types/react ^18.2.17 DEV @WaldemarLehner/portfolio-astro-cdn-server ^1.1.1 DEV astro-icon ^0.8.2 DEV astro-preload ^1.1.2 DEV concurrently ^8.2.2 DEV glob ^10.3.10 DEV rehype-katex ^7.0.0 DEV remark-math ^6.0.0 DEV sass ^1.63.6 DEV sharp ^0.33.2 DEV typescript ^5.3.3 DEV zod-validation-error ^1.3.1