Creating a CV in 2024

#cssart #cv #frontend #css

A third person blog.

Back by unpopular demand!

Ben was thinking he should probably update his CV. He hadn't done this for... Ben, how long has it been? He doesn't know 🙄 but he says the format has not really changed since 2010 😬😮

So it's about time for a change!

Ben had been putting off updating his CV (for 15 years), but when thinking about how to put it off even longer, he came up with two solutions:

Writing this blog about it and not actually do it.
Make it a fun thing to do!

He wasn't going to ask his chatty mate; Gary Pon-Tovi (ChatGPT), this time!
To make it fun and less of a chore, he thought he would start from scratch in the only way that Ben loves the most to start from scratch... A nice, empty, HTML document! 🤩

This was quite interesting as he thought he would have to make it the most accessible, most perfectly semantic web page he had ever produced. To be easily found and also demonstrate his skill level to future employers. A daunting prospect! But Ben loves nothing more than a seemingly impossible challenge, so he set to work, full of vim and vigor*.

*Wow! Vim & vigor broke my spellcheck! Ben's going off down a vim & vigor word-origin rabbit hole now. Gosh does anyone still use Vim? The most user-unfriendly text editor ever used!

That aside... Ben's ultimate CV would of course be only HTML and CSS, and have a link through to his reasonably up-to-date (CSS only) portfolio:

(This is an older version. The real version is here )

So... Ben has built a basic semantic layout of the page and designed the left side of the header. Everything is pretty dull so far. It needs a link to Ben's portfolio in the header. He doesn't really want to add a profile picture. 🤔 So what about his logo? The CSS version of his painting signature? And when you hover over it... It could rotate!? As a hint to his portfolio!!? Great ideas!!!
But a card is now boring to Ben, and a cube is so basic! 🤔 What about a three-sided shape? A three-sided shape that has proper lighting? Like the Moka pot he did?! Yes!! These are all great ideas! Ben thought. Much more fun than writing a CV!

After the moka pot, Ben made a room with a ceiling fan, which had realistic lighting. The lighting from the window is barely noticeable, but Ben thinks it makes it look so much more three-dimensional.

The lighting effect is actually quite simple to do. Unlike background colours, CSS filters blend from one state to another. So it's just a case of timing when to add brightness or shade along with the rotation.

  @keyframes light {
    50% {
      filter: brightness(0.5);
    }
  }

And after all this procrastination... Ben didn't do any of that! He instead put in a profile pic, like he didn't want to do 🙃 And then spent far too long styling the link underlines and YouTube hover effects.

So anyway, here it is, let him know what you think: