I was laid off in early March of this year and had to take on the dreaded task of updating my portfolio. I decided this time to use Vue and Nuxt, maybe a bit over-kill sure but the ergonomics have really grown on me over the years. I also wanted to really dive into all the new CSS features that have starting to get strong baseline support across browsers. I’m a diehard firefox guy so any features had to be supported by them in the most recent versions.

Some of the things in this blog and my thoughts…

View-transitions

Ya these are confusing, the syntax is byzantine, and they are so new and under utilized AI can’t save you here. Thankfully Bram.us recently had a talk for Google.dev day which was the first time I started to be able to wrap my head around it. I highly recommend you check it out here. There is also a npm package to help with some of the common use-cases you may have.

But with that said, man these are powerful. I’ve never been able to create such native feeling interactions on the web before. For my Carousel and context sections I leaded on them to transition into a focused view, and it just runs so well. Let me jump into whats happening a bit.

No more .SCSS

That’s right completely dropped any pre-css-compilers. And it’s was way easier then I anticipated and I don’t miss the package mangement overhead. The only down side is breakpoints are still kind of annoying, you kind of just need to remember them. @container style queries help a bit but they don’t really cascade in a way that makes sense like your tradition queries did.

• If you are thinking of biting the bullet and going full vanilla though I highly recommend it, there is some really cool stuff available to us now.

• Nesting

• Container queries

• style queries

• relative colour (this is deep)

• rounding, exponents, powers

• text stuff - just go to mdn they added like 10 exclusively text properties

• max and min

• oklch

• svh - dvh - cvh - cvw

• :not(),:has(),:is() - you have a million and 1 ways to select your element with css now it’s remarkable. And you can do things like :has([checked]) to do some basic interactive form stuff just with css.

If any of that sounds new go check it out on MDN, you may not have a use for it now but file it away because it’s such a game cahnger.

Containers

I mention it above but it needs it’s own section. Containers give us an insane amount of control. In particular - component specific responsiveness. Things no longer need to rely on the view-port as a whole. And designing layout with the y-axis is actually pretty trivial now with container queries and some CSS-grid knowledge.

Compound grid

With all the axis of control I needed to ground the design in a grid. But not a rigid grid just something to add structure to the site. I oped for a 5x3 compound which is just another way to say I overlapped 5 equal columns on top of 3 equal column. [example needed]

The column are then defined at the app root so I can apply some semantic meaning to them and they aren’t completely arbitrary, although sometime they are I’m being honest.

Dialog & pop-over

These are more of a HTLM thing but I wanted to use as many native browser pieces as a could so, you’ll see throughout this site there usage. Not I honestly don’t know how I feel, maybe I’m just unfamiliar but a lot of the times these feel worse to use then javascript and a front-end framework so maybe I’m not the target audience. I do love the intelligent anchor-positioning though.

Variable fonts

Now I used variable type in my old-site too, I’ve always kind of been obsessed with it but there are some new tools to help out since I created in 6 years ago. I tried to create a completely responsive 1 liner on my old-site but realistically it’s just not possible. For this site I settled on a modular type scale of 1.333 from 1280 -> infinity and a 1.12 type scale for mobile with a base font of 16 -> 14px . It feels to most natural to me and does look good on most interfaces. I also decided not to worry about ultra-wide displays this time and instead capped a core width on the site. Honestly I think it’s best ultra-wide sites never look right and capping the width gives a user with a large monitor all the same experience as everyone else and it feels more intentional. Do I think it’s impossible to design for ultra-wide? Of course not but for my purposed a tight 1280px max was more then adaquite.

Typography

I wanted a font that felt a bit different, organic and most of all not futura adjacent. On the variable-fonts.com catalogue I found Phase by Elise Hanzer which he generously gave me permission to use for this project. The font itself helped me articulate the design vision for the project, as a grounding visual element.

Stationary

You may have noticed this site is heavily influences by the aesthetics of old stationary. I’ve always been interested in graphic design, system design, user experience from before digital experiences were ubiquitous. While it’s not all great there is a lot of thoughtful work that’s worth consulting. I think of the Franklin Planner, Hotel dry cleaning forms etc. Of course designing for a static form-factor is a lot simpler but with all the new layout tools we have in CSS now we can start to take some inspiration from the static design of yesteryear.

With that in mind I’m also using as much as possible simple tools available to us in <HTML5>, it makes me feel clever to use border-style:double; or details…