Personal Website
- karstenbuckstegge.de -
Well, this is a big one!
I set out to rebuild my personal website more than a year ago. But I guess everyone who built a personal website before will be able to relate:
On different times I got stuck on certain places, lost motivation, other projects got in the way, I lost trust in my design decisions, I lost trust in my development decisions and and and. But, to quote on of my teenage years favorites Linkin Park: in the end it doesn't really matter. I got it done!
On different times I got stuck on certain places, lost motivation, other projects got in the way, I lost trust in my design decisions, I lost trust in my development decisions and and and. But, to quote on of my teenage years favorites Linkin Park: in the end it doesn't really matter. I got it done!
Design
In the beginning I fiddled around with a bunch of stuff and tried different things. Initially I started with the plan of creating a specific concept with very planned and though through color schemes etc. (check this early Medium article).
But the deeper I got into this I realised that this might make sense for a company with a more or less set CI but it rather blocked my creativity.
So instead of planning a bunch of stuff I decided to just draw one main graphic and plan everything else around that.
I started with this sketch on four pieces of A3 paper, put it inside procreate "inked" it, colored it and derived the whole rest of the design from that.
This is a very fun and liberating way of designing because it allows me to create from feeling than from a certain set of rules.
While this probably is not a suitable way to design a website in every occasion, I still highly recommend anybody to give it a shot if you have the chance. You might be in for a treat.
Technical stuff
While the design already is supposed to be visually captivating, I still needed to put something fancy in it to the page from a development perspective. Just because I can. 🤓
My decision fell onto animating the main graphics colors. And it was a PAIN. IN. THE. ASS!
Creating an SVG with individually selectable color areas, making sure outlines, shadows and highlights always stay in place in a responsive environment, figuring out when the images where loaded and a performant system that matches scroll and animation...
Creating an SVG with individually selectable color areas, making sure outlines, shadows and highlights always stay in place in a responsive environment, figuring out when the images where loaded and a performant system that matches scroll and animation...
A lot of hidden obstacles on the way (a lot of them because most of the code lies within the SVG context and not the HTML) but in the end I found a way that makes me really happy. Its using an SVG with classes and embedded pixel graphics while getting the animation through a debounced scroll listener and CSS Custom Properties (aka CSS Variables).
If you want to look at it in detail, check those three files: StreamContainer, StreamComponent and StreamComponent CSS (and if you have questions, just contact me).
If you want to look at it in detail, check those three files: StreamContainer, StreamComponent and StreamComponent CSS (and if you have questions, just contact me).
The rest of the page is somewhat straight forward and is build with the following technologies:
- Gatsby
- Typescript
- CSS Modules (with SCSS)
- Contentful (GraphQL API)
- Netlify Hosting
And thats it. The final thing looks like this:
And thats it. The final thing looks like this:
Links
