Dec 31 | 2020

New Website

by Dave Robertson
website code

Right, well it’s been a while but here we are with a brand new website. I say brand new, but technically it’s a rebuild of the static site which I put together earlier in the year. This new improved version is now running on WordPress, which means I can join the blogging revolution about 20 years late. It also means I can content-manage the site properly, because updating 24 individual HTML files when you need to add a new menu item is a bit of a pain…

Anyway, I thought it’d be worth giving a bit of info on the new site, so you can get an idea of how I’ve built it.

Design:

I’ve designed the site in the browser. Seems a bit strange, but here are my reasons:

  • Creativity: I’m always looking around the web for inspiration, and I love figuring out how things are done. I’ve always liked taking things apart and I’ve taken inspiration from a range of sources; Google’s Material design philosophy for layout and shadow, and the National Geographic website for mouseovers for example. Reverse engineering helps me to learn and apply lessons to my work and other projects.
  • Flexibility: Layout decisions were made with code in mind, and that makes it easy to change things if I decide to. The whole point of CSS is that it should be easy to change the look of your site whenever you want to. The idea here is to create a platform that I can change and update as time goes past, not a static site in a box. My old site (before this year) was based around an ageing WordPress theme which was going to take a lot of time to update, so I decided to give up and build my own.

Theme:

  • It’s a custom WordPress theme that I’ve built myself. I used Bootstrap for the underlying framework; not because I can’t build a responsive grid, but because it’s a good platform to base your work on and it’s well supported. Once the basic layout is accounted for, I’ve written my own CSS to style everything.
  • I’ve learnt how to add more and more functions into the theme as I pick up PHP. For example; getting a custom menu to talk to my theme, page titles that are formatted the way I want, displaying blog post dates correctly and more.

CMS:

  • I’m running WordPress here, which I know isn’t so trendy these days but I know it like the back of my hand. It’s very flexible and easy to modify, and something you can edit pretty well on mobile too.

Portfolio section:

  • The portfolio section uses a wonderful piece of software called Isotope. It’s a great way of building layouts that can be filtered and sorted. I’ve customised it for my needs – specific filtering options and tile layout for example. You can find out more about Isotope here.

The future:

  • The idea is to continue to remove more of the static HTML and get WordPress to do the heavy lifting. At the moment, Isotope functions nicely for the portfolio but every time I want to add a new job I have to add it to the portfolio page manually. Next step is to fully content manage this.
  • I’m also working on a series of training presentations about design and code. You can view them here.

Post photo by Florian Olivo on Unsplash

« Back to Blog
© Dave Robertson 2024 Hand-built with VS Code, Bootstrap and WordPress Acknowledgements