We launched a new website!
If you’re reading this, you (and we) have made it! Over the last six weeks, we have been working on design, content, photography, and development on our new shiny, public site. We landed on using WordPress for its fantastic CMS capabilities, but felt it was important to develop a custom experience on the front end — we are a software dev shop, after all.
We specialize in writing code at We Write Code, so let’s dive into some technical details and things we’ve learned along the way.
Bedrock & Sage
Developed by the team at roots.io, Bedrock and Sage have become invaluable tools when building out a custom WordPress site.
If you’ve ever dealt with the pain of keeping version-controlled WordPress sites updated, this might be a nice tool to look into. It also structures the application a bit differently, and allows you to separate your environment variables into an .env file.
Bedrock is a huge step forward in terms of moving WordPress into the modern development world, but if you want to take it to the next level, check out the delightful companion Sage starter theme also offered by Roots.
Out of the box, Sage offers a minimal yet powerful theme featuring fan-favorites like:
- Webpack already configured for a modern front-end workflow
- Browsersync for hot reloading your changes — who manually reloads these days?
- Your choice of popular stylesheets — or none!
- Laravel’s Blade templating engine for faster, cleaner, less tedious PHP
Can’t recommend Sage highly enough.
However, ThreeJS is processor-intensive. If you’re not careful, you can tank your page speed and cause older devices to lag, or even worse, crash. This article on ThreeJS tips and tricks was a great resource for finding things to optimize or refactor, and greatly helped with our relatively simple implementation on the homepage.
AnimeJS handles animations of all kinds — here’s a few specific features we used on the site:
- SVG path morphing for the hamburger menu slide out
- Simple staggering for offset animations on page loads
- Randomized triangles exploding on hover on the Solutions page
- Play/pause controls for triggering animations on scroll
A lot of work goes into a big reward — now go play with our site!