Top One Percent

Mar 2018 - Jun 2018
  • Create an easily editable WordPress theme with ACF
  • Create an effective landing page that entices users to sign up for content

Project Overview

For this project, I was contracted in to create a theme based off of a pre-created design. The requirements were to make it responsive across all resolutions, replicate the design accurately, and make sure it works smoothly across all browsers. We used Advanced Custom Fields(ACF) to allow the client to edit the content from the admin area. For the generic pages, we used a page-builder called Visual Composer.


The Landing Page

I had mobile and desktop designs to work from, so I went ahead and started the main component of this project, the home landing page. Like usual, I knocked out the page component by component, making sure it works on mobile and desktop resolutions before moving on. Once those are finished, it’s time to make sure it works across all browsers, including Internet Explorer 11.

Nav and Footer

For most projects, I do the nav and footer first and/or separately. Navs and footers for the most part are similar in design, but often require their own little tweaks. Once these parts are finished, the rest of the page designs come together easier.

The Other Components

Besides the blog pages, they also wanted a reusable hero section. This section was reused on current and future pages. With ACF, this part was pretty straightforward.

Element 74

Great work! We would definitely recommend Brandon to anyone looking for WordPress development.

Technologies Used


The starter WordPress theme was _s by Automattic. This gives you the bare-bones starter files to get up and running with custom theme creation. A must have for custom themes!


Advanced Custom Fields was used for the user-editable meta fields. Visual Composer page builder was used for generic website pages.

Build Process

The project was pretty simple, so I only needed Gulp, SCSS compilation, and CSS auto-prefixing.

Want to check out some code demos?

Check out code samples written in JavaScript, React, Node, and more

Demo 1
Converting jQuery Blog Post Component To Vanilla JS

I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]

Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript

I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]

Demo 3
Defining Reusable Column Extends with SCSS

Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]

View all 5 code samples

Need something? Let's get in touch

View resume