In Techno-bollocks,

A first cut of the semantic site

dug dug Follow Oct 29, 2023 · 1 min read
Abstract painting in the manner of Paul Klee, generated from the words of this post

AFFILIATE LINKS

properbroadband.co.uk

OK Frank Sedivy Rey Dhuny James Nash I’ve pushed a first cut out. V buggy and untested, but it’s an interesting first stab at semantic. The idea is the site has:

  • No javascript
  • No imported fonts
  • No Div tags (pretty sure I got rid of most of the <spans> as well)

When I first decided to put my portfolio online, I went to to buy a theme (because that seemed like the sensible, grown-up thing to do). More I looked, more I strugled to find something simple enough to maintain, and above all, 99% of the “portfolio” themes out there have mystery meat navigation. You see a beautiful masonry grid of sexy pictures but you have no idea what anything is until you hover over it:-(

In the end I bought a theme called Haud (https://themeforest.net/item/haud-a-creative-portfolio-theme/23100689) by the very talented honryou. It was beautiful and had some fantastic sexy animation effects on the index pages. Best of all, the design wasn’t mystery meat. At a glance you could see what was on offer:-)

So apologies to Honryou, I decided it was too heavy, and the code was too complicated and I wanted to stay flexible. So I rewrote my old blog template using his sepia toned mouse over effects (I figured, I paid for the theme I may as well use some of the CSS).

This got me in trouble as of course the Haud CSS was based on a DOM with hundreds of nested DIVs, so I pretty much had to recode the CSS as well…

So one of the bugs I haven’t been able to fix yet is the height of the <article> on mouseover. The effect relies on ‘multiply’ (like photoshop layers) so you need minimum two block objects to create the effect. This is easy if you can just add DIVs but a little trickier in this case.

Anyhow, it almost works and I guess it’s pretty good for a first go:-)

New blog site: https://goodlookslikethis.com

Link: https://goodlookslikethis.com/cases/leadership/

Comments on LinkedIn


dug
Written by dug Follow
Hiya, life goes like this. Step 1: Get out of bed. Step 2: Make things better:-)