Bparkerproductions Portfolio

March 2019 - Ongoing
Goals
  • 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

Project Overview

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.

Process

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.

Technologies Used

The Build

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 frontend

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?

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

Demo 1
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 […]

Demo 2
Discord Bot: Reddit API Ask Feature

The Purpose Some Discord bots have a feature where you can “chat” with the bot(i.e: Cleverbot integrations). I decided to take a spin on this concept and utilize the Reddit API to answer common questions. A user from the server asks a question using the b!ask command, then the bot gives a random answer from […]

Demo 3
React.js Modal Using The Hooks API

Modals are a classic piece of application functionality, made even easier with libraries like React. You could go with a library, but you can often make your own with less than 100 lines of code. Using the hooks API, you don’t even need a class based approach. This example is going full functional! Defining The […]

Need something? Let's get in touch