A Working System: Creating My Developer Portfolio (Part 13)

Connor Sparks
4 min readDec 16, 2019
Photo by Chris Ried on Unsplash

This is the thirteenth part of my developer portfolio journey so if you somehow came across this article I would suggest that you read part 1.

Surprisingly, I was able to get a rather decent amount of work done on my portfolio this week, and while I wish that I had a large update, everything went smoothly enough to make this a rather short article.

Thanks to my work from a couple of months back creating a style sheet just for my projects, I was able to get my Q-learning page up and running rather quickly. Creating this second page with my system helped me to work out some kinks while also giving me more experience to speed up subsequent pages.

Sizing

While most of my previous style sheet was able to work as planned, a couple of unique CSS classes meant that I had to spend some time rethinking how I wanted to the intro page to look for each project. The idea was to have the title with a side image (somewhat) centered between the bottom of the page and Navbar at the top as shown below.

Current ANN Page

However, due to the fact that each page had different texts and images, it made it difficult to get it centered. This was mainly a result of the fact that columns within Bulma fail to size to the available space in a div rather only becoming the size of the elements. As such elements would ride near the top of the page rather than shifting closer to the bottom in order to become more centered.

To fix this, I simply applied a class to the column class within Bulma to force it to expand to the size of the viewport. This ended up working decently well but it still has its issues. As shown below, some of the content ends up pushed down a bit too much, and this is something that I would like to fix next week.

Q-Learning Page

Uniqueness

Even though I had some trouble with the CSS classes the main issue that I ran into was keeping each page unique. Due to the fact that I had created a “guide” in terms of each page, it meant that my original Q-learning page looked just like my VRKit page.

VRKit Page

In order to remedy this, I needed to use the elements that I had created in a different order. So, even while I used the same content format in terms of the information that is laid out, the visuals are slightly different. This is shown in my Q-learning page where I changed the main color of the page while using large images to show content.

Qlearning Page

Expanding the Process

My goal for next week is to try and create an even more accurate style sheet that I can use for this. I want to be able to create more elements so I can more easily share the content that I have for each project in different ways. Each project needs to convey information as to what it is while also showing it to the reader in a different format.

My current issue with this is simply the fact that I currently use a timeline in order to walk the reader through the process of creating the project, but this does lead to a lot of the projects seeming the same. As such, I would like to try a new format, and while I don’t know what that is hopefully I will by this time next week. I think that something like tiles or columns might work but who knows.

Next Up…

Finish the project pages

Read Part 14!

--

--

Connor Sparks

👋 My musings here are basically a public stream-of-consciousness journal, so please forgive my writing: it’s getting better, I promise.