A friend of mine started working at Demac Media last year and mentioned my name as a potential freelance developer for their upcoming site redesign. I sat down with the team at Demac to go over their initial designs and was blown away. There were some bold approaches that certainly needed some more research before I could commit to building them, and it was a challenge I welcomed warmly.
The new build was to be a custom WordPress theme that kept compatibility with their old site's structure and content, including some existing custom post types and settings.
This being the first WordPress project I started from scratch in a while, I decided to create some tooling to go along with it. I personally am a Gulp fan so went with that (though I did start with a pre-built Grunt workflow). I'll post my actual workflow at some point, in the meantime it consisted included:
- Sass > autoprefixer > css minification with sourcemaps
- Uglify JS (into three main scripts, loaded conditionally depending on the template)
- SVG icon optimization > SVG sprite
- Image optimization for all theme images
- Browsersync for keeping all my browser in sync
I'm a big advocate for Advanced Custom Fields, a WordPress plugin that allows you to add fields to specific pages, posts, or any other taxonomy on WordPress. We used this extensively to create reusable modules and easy content editing — strictly staying away from the rich text editor that is typically used.
One of the most challenging parts of the site was a 3D carousel developed for the Services page. It got me working with the canvas element to generate randomly animated background circles, and some slick CSS3 transitions to mimic 3D rotating slides.