Web developer Haydn Adams used his COVID-19 downtime to rebuild his B2B portfolio website, Nautilius Design, in the static site generator Gatsby. Gatsby advertises itself as “Fast in every way that matters,” so Adams was eager to test it out. The result is a simple, blistering fast website. Despite the fact that his portfolio contains large image files – PNGs up to 2.3 MB is size – the portfolio webpage scores a 100 out of 100 on Google’s PageSpeed Insights. Adams also used React Bootstrap, a front end styling framework, to simplify the coding of the page layouts. The last tool Adams implemented was Netlify CMS, which he used to develop his contact form.

The B2B clients Adams works with are located in the South Pacific, so creating a website that loaded quickly was crucial. He needed a website that could deliver large images of his website designs to clients with varying connection speeds.  That attention was carried through even to the logo file. The logo was uploaded as an SVG, a vector file format that means the logo will display crisply on the most high resolution devices. Utilizing React Bootstrap permitted Adams to use class names to restructure page layout elements (for example reversing column structure from 5/12-7/12 to 7/12 – 5/12). It also ensured that the pages reflowed elegantly into a single column on mobile.

Part of the reason the website loads so seamlessly is that Adams used coding techniques such as markdown files. The markdown files created for the portfolio pieces permit him to add project descriptions on an as-needed basis, and make adding new projects a snap. Adams has an alternate route for adding new portfolio items. Netlify CMS gives him the option to use a WordPress-like cockpit to populate the information and images to edit a project or add new ones. That is in addition to the Netlify forms, designed to be easy to use. The result is a website is focused on the end-user.