March 2019 - Ongoing
- Grow a blog and audience with great content
- Create an up-to date portfolio of my work
- To continue to grow and provide more content, such as blog posts, tutorials, and case studies
- Designing the site from scratch without the help of a designer
Bparkerproductions is a content based portfolio aimed to provide up to date information about me, my services, and my work. It is the third(or fourth) major iteration of my portfolio built with the WordPress starter theme sage.io.
After a few portfolio attempts, I eventually found a great stack for me. After setting up Sage/Bedrock, I started with my homepage concept. The real challenge was designing from scratch, which I usually don’t do for client sites. It’s been a great learning experience so far!
Before building out anything, I had to choose a color scheme and general design inspiration. I went with a modified versions of Discord’s color scheme, but changing the blue to a darker shade. After that, it was a matter of choosing what to put where, which was done in the browser.
For the most part, the custom design was created and modified multiple times. After the home page was built, I moved on to the single project pages and blog pages. Most pages and elements were thought of as I went along. Like many projects go, it ends up being an incremental process over a long period of time.
Sage comes with a powerful build out of the box, including SCSS, es-lint, and browsersync. I used what was out of the box, importing my SCSS Framework files for the variable/file structure.
The backend stack
Roots.io/Bedrock brings modern development tools into WordPress development, including composer, PHP 7.2+, Sober WP controller, and blade(Laravel) templating for PHP files. Overall, a great stack!
The front-end utilizes babel for ES6 compilation, and webpack for JS routing and file splitting. Other than that, it’s pretty straightforward and usable with libraries such as JQuery and Vue. For this project, I stuck with JQuery and vanilla JS where needed.
Want to check out some code demos?
Converting jQuery Blog Post Component To Vanilla JS
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 […]