What is it?

My personal website, where you can find my resume, ways to contact me, and stuff I've been working on.

joelkoch.dev banner

Why did I do it?

Well, I should have a website, so I have a place where I can write about the things I'm doing. Also, it's a place to practice my frontend and design skills, I feel like I should be more proficient in these areas.

What did I learn?

I've worked with static site generators before (Hugo and Eleventy). When I found out about Tableau, a static site generator written in Elixir, I wanted to create my website with it.

Overall it was a nice experience, although there are some more rough edges in particular in comparison to Eleventy (as you would expect looking at the age, popularity and number of contributors on GitHub). One thing I like about using a less popular static site generator, in particular in Elixir, is that the code base is so small, I can just look at the code and figure things out. I switched the templating engine to HEEx as I was more likely to encounter that at my job than Temple.

Then, I went ahead and built the first version using TailwindCSS. It was alright but I felt like my understanding and approach was lacking. I was stacking divs on each other and cluttering everything with styles to make it somehow look like I wanted to. At the end, it would have worked because my website is small enough, but I was a bit dissatisfied with my skills.

Inspired by many Kevin Powell videos, I wanted to write plain, modern CSS for the second version of the website. I even read all MDN Guides to get a better understanding of HTML, CSS and JavaScript.

I don't want to deal with vendor prefixing or making sure that my CSS works in a browser version from 5 years ago. Some time ago, I've read about Lightning CSS in a blog post about tailwindcss 4.0. It takes care of all that, so it felt like a perfect tool to write plain, modern CSS.

I also started digging into how I can enhance my approach to web design and I'm infinitely thankful that I found this talk by Andy Bell.

After watching the recording, I found out that I had cube.fyi bookmarked a while ago. I started learning more about CUBE CSS, found every-layout.dev and smolcss.dev which gave me more insights into how I feel I should work.

I used to consider the layout first when I built websites and tried to create it by stacking divs and flex boxes. As a result, I never felt in control, things were shifting around, it was annoying.

Now, I'm starting with structuring the markup in a semantically correct way. Then, I create the layout I want with layout composition as shown in every-layout.dev. I don't need any media breakpoints to build responsive layouts, it feels awesome and I only wrap things in a div when I really have to.

I feel like I can still improve a lot in regard of styling, but I think I will tackle that in the future.

To sum it up:

Yes, my website is still small, I could have hacked this together and probably would have been faster. Nevertheless, it was fun, and I feel in full control over the site now, with a static site generator I understand and a CSS methodology I can finally make sense of.