Prev
Next

Dave Stewart

2021 refresh of davestewart.co.uk

Overview

Content-driven, static Vue site, with an emphasis on simplicity, discovery and interaction.

The site aims to balance putting newer product and project work front and center, whilst making older work easy to find, browse and appreciate.

Creatively, the look is simple, modern and fresh. Technically, it boasts snappy interaction and a more app-like feel than a traditional site.

Detail

The site’s engine is VuePress (opens new window), rendering nested project folders of markdown and images, and hosted on Vercel.

It runs a fully custom theme, with feature highlights including:

  • Content: optional folder indexes with tree, list and thumbnail views
  • Search: text, tag and date filtering with date and tree views
  • Media: gallery, image, video, and website embeds
  • Gallery: intuitive mouse & keyboard navigation with full-screen presentation mode
  • Navigation: breadcrumb and sibling links with additional keyboard shortcuts

In 2021 I found more time to work on the site and added:

  • Navigation: desktop + mobile, header + footer navigation
  • Reactions / comments: courtesy of Hyvor Talk (opens new window)
  • Sharing: links to share to key social platforms

Additionally, new content:

  • Home page: new home page with better formatting and work preview
  • Blog: an expanded blog with thumbnail navigation and new posts
  • Bio: a more informative bio with photo and links

The site’s code can be found on GitHub.

Keyboard shortcuts

The site also has some handy keyboard shortcuts.

Projects:

  • Left/Right - cycle through visible gallery posts
  • Shift+Left/Right - navigate to sibling posts
  • Shift+Up - go up one folder level

Search:

  • Esc - toggle search
  • Down/Up - walk folder tree

So...

I hope you found this post interesting or inspiring.

If you want to engage further, follow me on Twitter or drop a comment or reaction below.

Either way, thanks for reading!