Company Portfolio Website

An elegant company portfolio website screenshot

This was a small website to showcase the company's impressive properties.

The Objective

The site has few pages, but it needed to be easy to administer as well as pleasing to the eye.

The Process

The administration area was set up with Custom post type UI and Advanced custom fields.

Companies have their own post type with specific fields for a logo and a link to the website.

When a new company is added to the site, it is automatically shown in the main menu. If a logo is added, it will also show up on the homepage in the ‘Our Companies’ area with the logo linked to the company information page.

The design company originally provided both light and dark logos for each company. To keep things easy, I used css3 filters to invert the colours of the logo on hover so that only one dark logo image needed to be uploaded. This keeps each logo looking uniform when new ones are uploaded by other people in the future.

To give the site a smooth navigation feel, I utilised the pjax library created by GitHub to enable partial page loading. When a browser has JavaScript enabled and you click on a navigation link, the content of the next page is fetched via AJAX and part of the page content is replaced without the need for a full page refresh. This allowed me to add some animation and scroll the browser to the top of the page as the new content was loaded.

Search engine optimisation was always in mind as I was creating the website. When a page is accessed directly, a full html page is returned which makes the site as indexable as a standard website. The partial page loading was made to be fully compatible with Google Analytics, sending a pageview event with each partially loaded page.

In addition to fast loading partial page loads, the full-screen galleries use the lazysizes library to lazyload the correct sized image for each screen. So the site is fast on mobile as well as desktops.

The Result

A fast loading, good looking, easily administered website with smooth navigation.

You can view the site here.