Personal Portfolio Refresh 2020

Published

August 18, 2020

The problem

My last website version has slowly grown over the past few years and gotten a lot more content, but with that, it had also gotten more complex. There were a lot of things I still liked about it, but other parts didn't feel as usable as they could be. I liked the navigation on the side but didn't feel like the information structure was clear enough. A few of the visitors might not be interested in the sketchnotes or resume. Furthermore, the central part of my website was the blog content. It was important to me to be able to filter posts by different topics and keywords. Since most content I create is aimed at developers, I wanted to also have other useful things like a page with bookmarks and a presskit for conferences.

The research

I wanted to aim my blog more in the UX / DX direction, I started by reading through this article. It had great tips on thinking about what your skills are and who your target audience might be. Some core questions I tried to answer for myself were:

  • Is there a common thread through my work?
  • What kind of relevant experience do I have?
  • What did I contribute to a project in each relevant phase?
  • What tools and techniques do I use?
  • What are the top two industries I want to work in?
  • Who is visiting my blog?

Here is a fun quiz you can do to find some more about what kind of direction you want to go to. For me, some important brand words were: helpful, creative, clever and I tried to answer on every content decision if it helped resonate with those adjectives.

The target audience

Since I've had Google Analytics for a long time on my old blog, I already knew a lot about what pages on my blog people visited. The most visited pages were specific blog posts, that were shared on twitter or other websites. Other pages also got hits, but weren't the most important ones.

Information Architecture

Since developers and people who read technical content were a clear target audience, I decided to create a new information architecture that focused on the different areas I engaged in: A helpful part that is aimed at developers, a work part which focuses on the projects I work on and a personal part, that has any information you would need about me as a person. This is mostly useful for conferences or if you're writing an article in a magazine. For creating the information architecture I used a tool called octopus.do. I created an outline of which pages I wanted to have and how they were connected.

The three sections: helpful, work, about each had some subpages that were clearly linked in the navigation and on the main page of each section. Furthermore, there is a clear sitemap at the beginning of the page to quickly understand the information architecture.

Wireframes

After I decided on a rough architecture for the new blog, I created some wireframe sketches in Adobe XD with an existing wireframe kit I used in classes before.

Technical Choice

Since I've read lots of good things on twitter about 11ty I decided to use it for the new version of my blog. Gatsby was nice with its plugins, but there were a few things that kept bothering me. I felt that 11ty might resolve a few of those things. I started off by looking through the starter projects and browsed through the code of a few different ones that ticked my boxes: postcss, tailwind, webpack. Since I didn't want to spend a long time setting up my project I decided for this one, since it had the most stars on github and seemed like a good choice that could still be adapted.

After getting started with it, I adapted it to my own needs: I added a few PostCSS Plugins like nesting and imports. I also adapted the tailwind.config.js to my design choices. Tailwind is a great tool to work with because it allows setting consistent font sizes and spacing, but is really adaptable. When working with it I mostly chose to use a mixed approach of utility classes and BEM like syntax, similar to what's described in this article.

Rough Sketch

Since I already had the wireframes I just started coding all the HTML and the different components. This took about a day. At this point I haven't given much thought about the design at all.

Thinking about Data

After the rough HTML structure was done, I started thinking about how I wanted to handle the different data points. I came to the following data handling structure:

  • Markdown Files: Posts / Projects / Thoughts
  • JSON Files: Bookmarks / Creative Work / Speaking

I then continued transforming my existing content to the new data formats.

conferences

{
    "date": "2020-07-24",
    "location":"Remote",
    "conference":"Codeland",
    "category":"Workshop",
    "title":"Practical Web Animation",
    "link":"https://codelandconf.com/"
}

bookmarks

{
    "title": "Awesome Web Animation",
    "description": "collection of web animation resources & libraries",
    "url": "https://awesome-web-animation.netlify.app/",
    "tags": "animation, libraries"
}

creative

{
    "title": "Vinyl Illustration",
    "description": "Procreate",
    "date": "2020-07-21",
    "type": "instagram",
    "tags": "instagram, procreate, illustration",
    "url": "...",
    "image": "..."
}

posts

---
layout: post.njk
title: Performance - CSS Painting versus CSS Houdini Paint API
date: 2020-07-01
permalink: "posts/css-houdini-performance/"
tags: ['post','css','css houdini','performance']
excerpt: "Recently I have been wondering how CSS features like painting backgrounds compare to CSS Houdini’s Paint API in terms of performance."
---

# CSS vs. CSS Houdini Performance

Design

After all this technical coding of the new website, it was nice to finally get to the design part. Since I enjoy bullet journaling and drawing, I wanted the new blog to feel a little bit like a notebook. It should mostly be white / black with one strong signal color. I found some great minimal bullet journals on instagram: journal one, journal two, journal three.

For choosing colors I often use colorhunt.co. I found some color combinations I liked and adapted the already existing colors in my tailwind config until I felt it was a nice combination.

    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      black: "#444444",
      white: "#fff",
      primary: "#ff4949",
      secondary: "#49beb7",

      gray: {
        100: "#fff", 
        200: "#F5F5F5", 
        300: "#818a91", 
        400: "#222", 
      },
    },

For the typography I wanted a really strong heading font, similar to what's used in bullet journals. I choose three google fonts that supplemented each other well. DM Serif Display as a heading / serif font, Roboto Mono as a subheading / accent / contrast font, and Karla as a readable body font.

Extra Details

The details are what makes a portfolio site different from others and I definitely wanted to add a few interesting details. Here are the ones that were important to me:

Navigation

Since the new architecture of the site made it more complicated with a few subpages, I wanted to reduce the navigation to the main sections and then show the subpages via a staggered animation. This really improved the interaction compared to the mega menu I had in the beginning. After this, I went further and added some icon to the main points, which also improved the reading of the navigation.

Dark Mode

Dark Mode is a feature that has gained a lot of popularity in the past few years and so I decided to also include this feature. This was fairly easy to do by making use of CSS Variables within the predefined CSS Tailwind Config. These Variables were then changed whenever the toggle in the top right was clicked. I can recommend this article on how you can do this.

    colors: {
      black: "var(--color-black, '#444444')",
      white: "var(--color-white, '#fff')",
      primary: "var(--color-primary, '#ff4949')",
      secondary: "var(--color-secondary, '#49beb7')",
    },

Intro Animation

Since I focus a lot on web animation, I wanted to include a delightful animation at the beginning of my page. I illustrated a version of my portrait image on my IPad and then optimized the drawing to SVG code that can be animated. I then used a tiny library called walkway.js, which draws the SVG paths.

Performance

With a lot of blog posts and images, I wanted to make sure all images were optimized. I found a neat eleventy plugin called Local Responsive Images to handle the job. Since I wanted to have some structure in how all my assets from posts / projects / static were handled, I started with copying all necessary images into an assets folder.

eleventyConfig.addPassthroughCopy({ "src/_assets/img/local": "assets/img/local" });
eleventyConfig.addPassthroughCopy({ "src/posts/**/*.jpg": "assets/img/posts" });
eleventyConfig.addPassthroughCopy({ "src/posts/**/*.png": "assets/img/posts" });
eleventyConfig.addPassthroughCopy({ "src/projects/**/*.jpg": "assets/img/projects" });
eleventyConfig.addPassthroughCopy({ "src/projects/**/*.png": "assets/img/projects" });

Then I loaded the plugin

const pluginLocalRespimg = require('eleventy-plugin-local-respimg');

eleventyConfig.addPlugin(pluginLocalRespimg, {
    folders: {
        source: './dist/assets', // Folder images are stored in
        output: './dist', // Folder images should be output to
    },
    images: {
        resize: {
            min: 350, // Minimum width to resize an image to
            max: 1500, // Maximum width to resize an image to
            step: 300, // Width difference between each resized image
        },
        watch: {
            src: 'img/**/*', // Glob of images that Eleventy should watch for changes to
        },
        lazy: false,
        gifToVideo: false,
        sizes: '100vw',
        pngquant: {
            speed: 10,
            quality: [0.5, 0.75],
        },
        mozjpeg: {
            quality: 75,
        },
        webp: {
            quality: 75,
        },
    },
});

And referenced the images to the newly generated folder with all the optimised images in it.

 <img src="./img/local/creative.jpg" alt="Being Creative" class="object-cover">

The plugin the automatically goes through all html files and replaces the <img> tag with a <picture> tag.

<picture>
    <source srcset="/img/local/creative.350.webp 350w, /img/local/creative.650.webp 650w, /img/local/creative.800.webp 800w" sizes="100vw" type="image/webp">
    <source srcset="/img/local/creative.350.jpg 350w, /img/local/creative.650.jpg 650w, /img/local/creative.800.jpg 800w" sizes="100vw" type="image/jpeg">
    <img src="/img/local/creative.jpg" alt="Being Creative" class="object-cover" loading="lazy" width="800" height="533">
</picture>

Conclusion

I loved working with eleventy, especially in combination with tailwind. I liked my old Gatsby setup too, but since I wasn't too deep into the React World, found some approaches at times a bit tedious for such a small blog. In terms of the whole process of creating a new blog, I would totally recommend starting with the structure and creating the information architecture first.

I've never used eleventy or nunjucks templating before but found documentation for both tools excellent and straightforward. I loved that eleventy also has additional plugins and a big developer community behind it. I ended up using the following plugins: eleventy-plugin-syntaxhighlight, eleventy-plugin-rss, eleventy-navigation, eleventy-plugin-reading-time and eleventy-plugin-local-respimg. These plugins made development a lot easier and saved me a lot of time.

What I also loved is the flexibility of eleventy. With its tagging system it's super easy to filter your different types of content. That allowed me to have different tags for blog posts than for bookmarks without really needing to write a lot more additional code.

More articles