Akcela
TL;DR
I was put in touch with Akcela through a marketing agency I had worked with. It was a complete redesign and rebuilt of their website, working with a designer they had hired. It’s a modern, mobile-first entirely custom WordPress theme built from the ground up; their website has been live since 2021 showing my capability to write code that has stood the test of time.
As you’d expect it’s written in PHP, HTML, CSS and vanilla Javascript. You can find the Akcela website here.
Scope of the project
Their business had grown consistently and they needed a more up to date brand identity and a website to fit. Akcela engaged a designer to work on their brand and who I assisted a little with the design of the website itself.
They needed to be able to manage the website themselves, and they were already familiar with WordPress so it was a good fit. They didn’t want something out of the box either so an entirely custom theme was the way to go. Additionally, they wanted to be able to create new pages themselves using previously designed sections giving them much greater control over the future of the website.
The build
Flexibility
To solve the problem of Akcela being able to create new pages with freedom to use section already available elsewhere on the site, we decided on using the Advanced Custom Fields (ACF) to create a page template they could select in the WordPress page editor that used the ACF Flexible Content Field so they could select what section, such as a call to action etc., they wanted to use at various points.
In all there were around 36 flexible content sections organised inside the theme’s folder in separate folder as individual files. This made it easier to keep organised, and to add section flexible sections if required.
Not just a boring menu
For the navigation menu Akcela wanted something a little more interesting. I designed the navigation menu as one of the earlier elements of the website; I used the Akcela “A” from their new logo to create subtle movement in the background of the navigation menu. That movement was built using CSS animation; if something can be done using CSS I typically prefer that, provided it doesn’t compromise the vision.
Is it a website if it doesn’t have a slider/carousel?
Yes.
But we needed a slider/carousel to display some of the businesses Akcela worked with. While I’m confident I could have simply built a vanilla Javascript slider just for this website, I try to keep project requirements and timelines in mind and so I settled on incorporating Splide.js.
CSS Clip Path for the hero section
On the home page, the design called for a hero section that has a gradient, and also contains an image that is clipped to the shape of the Akcela “A” logo shape. This was the first time using CSS clip-path for me and it went pretty smoothly after a little trial and error. Essentially, you define an svg element in the footer with 0 width and height like this:
See the Pen
SVG clip path by Scott Cole (@Scott-Cole-the-reactor)
on CodePen.
Lessons learned in conclusion?
When I started building the Akcela website I’d already built some custom themes before. I had typically approached new builds with a blank slate, usually employing normalize.css or something like that. I knew I wanted a very bare-bones starter theme I could use for client projects in the future so if you take a look at some of the CSS class names on the Akcela website you’ll notice some begin “scst”, i.e Scott Cole Starter Theme. It’s very bare bones and contains some useful things in the CSS as well as some basic footer and header code etc., including a basic Custom Post Type.
It was not that long after the Akcela project that my fiance and I decided to switch roles for various reasons, but had I continued freelancing from that point I would have further developed that starter theme. Despite it being from a few years ago now, I did use that starter theme when building this portfolio website; I imagine over the course of a few more client projects I would have added more to it depending on what I found useful.