NateDillon.com v2

Off and on for the past few months I’ve been playing around with my main website, NateDillon.com. The result is a new version of the website with an Apple TV-ish design that gave me an opportunity to try out a few things, like inline SVGs, CSS calc(), and transform.

Screenshot of NateDillon.com
NateDillon.com v2

SVG was used for all the “widget” images. Using CSS calc() (which I am really loving lately), I was able to maintain a consistent aspect ratio for the widgets at various browser breakpoints.

I’ve learned a lot about SVG through this process. In the past I had really only used SVGs within the <img> element. After some trial and error, I decided to use inline SVGs so that I would be able to control the image colors with my CSS (I would also love to do some animation eventually). Small versions of the SVG icons appear on the page when CSS is disabled, and by default these icons are suitable for display on a white background. I then altered the size and colors in CSS so that they would appear how I want on the darker background of my design.

Screenshot of NateDillon.com with CSS disabled
With CSS disabled
One of the major advantages from using SVG is file size. With 11 images used, the entire site (without the analytics JavaScript) is under 36 KB (about 29 KB HTML and 7 KB CSS). As you can see though, the inline SVGs end up adding a bit more weight to the HTML.

I have a lot of other things I still want to try with this version of the site. At this point it’s already much better than what I had online previously, so I decided to go ahead and release it. Check out the source code for more details.

Related SVG Resources

Here are a few SVG resources that helped me along the way, especially with exporting from Sketch.