Portfolio 24

Kombinationsschrift

Already during my Erasmus in Visual Arts and Communication Design in İstanbul I experimented with Joseph Albers’ Kombinationsschrift. I decided to pick that up again and use it for my 2024 portfolio page. I am not using the original Kombinationsschrift but developed a variant of it. Here is the old Project from 2011:

On my Portfolio, you can draw with your cursor and also type! It’s kind of an easter egg, just try to type. I coded this playful element in React. It works, but in hindsight the performance optimizations might have been easier without a framework.

Colors

I wanted it to pop a lot. For the first time, I went beyond RGB using OKLAB for red and blue. Another first for me was relative color syntax to generate the off-white or pale background color automatically from the blue. Yet another feature that was previously only available with SCSS/LESS.

Layout

The layout is relying heavily on CSS grid. Being very used to CSS grid, this was the first time with subgrid for me. Subgrid makes such layouts a lot easier, can strongly

text-wrap: balance;

This is a new CSS feature I had been waiting for: text-wrap: balance;. It is applied to all headings and sometimes small paragraphs.

View transitions

The site using the new View Transitions API. When opening a project, it will smoothly transition from the home page to the project page.
As of writing this, it is only supported in current Chrome, but Safari 18 does support it and will be released soon. Firefox is not on the horizon, I hope it will follow anyways.

Astro

Before starting this project, I thought about what tech stack to use. I had previously realized a lot a projects with gatsby.js, but that seems to stall generally and became very cumbersome to work with. I wanted something JAMStack with markdown and easy to add JS fanciness. 11ty and Astro popped up as possible contenders. Astro won, because I feel very comfortable with JSX templating and I loved the easy integration of View Transitions (see above).