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.
Portfolio Gallery
The Advanced Custom Fields content is set up with acf-json. This means when I deploy from staging to production, I can click those little 'sync' icons to get the latest changes automatically. Handy!
Just about every piece of code is editable and re-order-able. No need to commit changes every time I just want to change some text!
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
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 […]