Design, Website (Open Source) & Photography, 2022
Dachsbau-Tautenhain.de
Madlen and I have known each other since grammar school days. At the time of writing (end of 2022), it is seventeen years. Crazy, because that’s more than half of my life. I even had a crush on her during my school days. Tough teenage times! Over time, we grew an intimate friendship that still bonds us. I consider myself lucky to be able to know her as one of my closest friends in my life.
Not only did I dare to start a new career, but Madlen did too. However, she did not choose a self-taught career change, but a second degree. Psychology. In the last few years, she discovered yoga for herself and also began training as a yoga teacher. Kudos.
While she was gaining experience in university sports courses, her dream of setting up something of her own sooner or later became solidified. In Tautenhain, the opportunity arose to move into the “Dachsbau” and realize her dream there. To put it in a snazzy and contemporary way: Madlen wanted to start a business. Not only to find her new home there, but also to bundle her skills and interests on the spot and turn passion into profession.
She approached Julia and me, saying that she could only imagine having us design and build her website. Which honored us both. A project implemented in a context of friendship requires a distinct boundary between that friendship and the work. I’m glad we managed to do that.
First Steps: Design
In the same way that a repository cannot represent a project without a descriptive emoticon (joke), Julia and I can only really get going when we can feel a project in terms of color. To do this, we took Color Claim, a collection of color palettes, without further ado. The project was conceived in 2012 by Tobias van Schneider with the aim of collecting and combining colors for his future projects. One particular color palette unanimously smiled at us, so we detached it from the website and generated the color gradations with Tailwind Shades.
The next step was to start looking for inspiration for visual building blocks. Typewolf’s Site of the Day offers a wide range of options, and we were loosely inspired by them. At the same time, we were on the lookout for fonts that hadn’t been seen 100 times before. I am happiest with the headline font, Henrietta. What an aesthetically pleasing font it is!
Illustration
I can’t draw. Fortunately, I don’t have to, because I had Julia (@mum.mal.mini) by my side for the project. She draws warmly and can engage with different styles. After a few test drawings, the illustrations for the website were created - from the abstracted four-sided courtyard to the badger lying in the bottom right corner of the screen. So cute!
Technical Implementation: Prototype for Kirby Integration With Nuxt
Right from the start, I not only set my mind on designing a beautiful website, but also on creating something new architecturally. That means implementing the frontend with Nuxt and using Kirby headless as the backend. It tickled my fingers to build a best-practice solution, as there was none. So the website was a prototype at the same time.
In principle, the Kirby website advertises itself as being “headless“-ready, but in reality it is a bit more work to set up an instance headless. So, as a first step, I created the kirby-headless-starter, a starter kit for Kirby that is primarily tailored for headless use. Features include support for bearer token authentication (which Kirby does not support by default) and CORS handling.
Subsequently, I started to write a module for Nuxt, which can be used to request data from the frontend via queries from the backend using the Kirby Query Language (KQL). Over a few months, nuxt-kql was created, of which I am proud.
Photography
No product can do without packaging. In order to make the individual divisions of the “Dachsbau” tangible, content for the human eye is needed. We created this in the course of a photo shoot. Julia and Madlen were among the models in front of the camera.
For other photo assignments, I usually borrow a Sony G-Master lens. For the friendship assignment, however, I didn’t want to pay the rental fee and at the same time I was looking forward to the challenge of focusing manually with my TTArtisan 50mm f1.4. Everyone is happy with the resulting snapshots. Nothing can be taken for granted.
Quellcode
Since the project was created entirely on a voluntary basis and is indirectly intended to show the capabilities of nuxt-kql, you are welcome to inspect the code.