You are here.

My goal was to create a website presenting a selection of my work and experiences in several fields. The content is managed using Strapi Headless CMS and statically rendered using Gatsby.

I created the Voronoi map for the project overview with D3 (visible on desktop screens). X and Y coordinates are calculated for each project and then used to generate SVG paths representing the individual cells of the Voronoi diagram. The path information is used to draw multiple layers (base, annotation, and interaction). Mouse and keyboard event listeners attached to individual cells dynamically add and remove CSS classes for transitions and styling.

The illustrations on the website are open-source and created by unDraw. Each illustration’s highlight color is dynamically set by mixing the colors attributed to the respective skill areas (Web development, Data visualization, Education, AI, …). I added custom fields to the Gatsby GraphQL schema that is used during the build, so the fetched unDraw illustration (based on the illustration’s name provided in Strapi) and the result of mixing the areas’ CSS colors are already included in the bundle.

Styling and theming are done using Tailwind and CSS variables.

I hope you like it!