Porfolio - Case Study

Javascript, CSS3, HTML5, Figma
Notable Points
  • Responsive, mobile-first
  • No template
  • Wireframe with Balsamiq
  • Mock up with Figma

Intro

"First Impressions Last." With this fridge magnet wisdom in mind, I have been in a constant quest to develop and improve my portfolio to reflect who I am and my current skill level. Wanting to take advantage of the new tools and techniques I've learned while pursuing my Masters degree, I decided give it another shot.

Previous Designs

v 1.0

In 2014, design was a secondary concern for me. Mobile responsiveness was not even a passing thought, and we can see this directly reflected in my original designs.

I did not know, or respect, the amount of effort that needed to go into the pre-development design work. A couple years later, I decided to tackle it again.

v 2.0

Doing a lot of research this time, I thought I figured out what made a good portfolio: breaking the page into multiple sections and adding ample amount of whitespace. Again, I decided to build and design the site without the necessary preparation or taking responsiveness into account.

As you can see above, aligning components became a real struggle for me, but in my stubberness, I refused to use tools such as bootstrap for assistance.

This page was important as my first foray into using Django, a Python MVC framework. I used this new knowledge for multiple projects down the line.

v 3.0

Flash forward to 2020 and I decided to approach my site design again as my final project for this semester's class. By now, I had learned many tools and techniques, such as flexbox, grid, and media queries.

With this version, I was considerably happier with the front-end code. Using generous application of flex boxes and grids, I built a fun and bold portfolio.

After creating the initial desktop design, I started working on the responsiveness. I quickly realized the website was getting out of my control and felt overwhelming. I had a couple weeks left before my class was done and decided I should take the time to do this correct.

Design

Recently, I watched this video by Kevin Powell where he made this observation:

You have a responsive website by default. You only lose this responsiveness when you build in things that prevent it from being responsive... Take advantage of that. After that, you build your more complex layout within your media query.

This helped make responsiveness click in my mind. I committed myself to these two rules:

  1. Create a wireframe and/or full mockup of any page before writing a single line of code.
  2. Design and develop for the mobile view first.

I chose two tools I had some experience with previously. First, I selected Balsamiq, an easy to use wireframing tool that focuses the user on only the layout of the site. For my mockups, I selected Figma, a popular tool in the industry.

With these designs in place, the implementation of the site itself went very quickly. Whenever I had an issue or felt I was losing control of the design, it was easy to check the mockup and re-orient myself.

In the end, the mobile-first approach and the design-first rules worked out very well and left me with a manageable design that was straight forward to implmement.

Difficulties

One of the greatest difficulties I ran into during this project was trying the handling of repeated code. In order to fit my portfolio into the requirements for the course I created it for, I was limited by the class restriction that my project must be a multi page app. Because of this and a fast approaching deadline, I made two decisions early on: I won't use a front-end framework (like React or Backbone) or a backend server.

These two self-imposed restrictions had their own benefits and disadvantages. Without a breaking up a simple website like this into smaller pages, I could limit the number of page requests the user would make, potentially speeding up the site. In reality, any small performance gain was wiped out by the high quality images loaded on every page and development was slowed down.

A lack of a backend also prevented me from adding additional features, such as site usage statistics and an image API to give me more control providing optimized images. However it had the very large benefit of letting me being able to easily host the site on Github without having to worry about maintaining a server over years.

Cool Code

By avoiding any pre-made template and not relying on Bootstrap for layout management, I learned how to bend flex boxes to my whim. Vertically centering components was no longer an concern. Here are the CSS snippets I made to give myself deep control over the layout:

/* Flex Layout */
.flex { display: flex; }

.flex__column { flex-direction: column; }

.flex__row { flex-direction: row; }

.flex__center-full { 
  align-items: center;
  justify-content: center;
}

.flex__center-vertical {
  flex-direction: column;
  justify-content: center;
}

.flex__center-horizontal {
  align-items: center;
  flex-direction: column;
}

.flex__space-between {
  align-content: space-between;
  justify-content: space-between;
}

Along with a separate class limiting the max width of any content, I was able to easily center the content in the middle of the page while providing clear margins on either side. This helps keep the page easily scannable.

I also found how useful CSS variables really are. While I had originally determined a theme while creating my mockup, I found that the colors I chose did not work well not many screens. Being able to simply change one variable saved me a large headache when changing color schemes across the entire project. This is all there is to completely control my theming:

:root {
  --primary-color: #424254;
  --accent-color: #ffcd8b;
  --accent-color-1: #f8a83f;
  --dark-text: #212121;
  --secondary-text: #757575;
  --light-text: #FAFAFA;
  --divider-color: #BDBDBD;
  --background-color-dark: #333333;
  --background-color: #FAFAFA;
  --background-color-1: #d6d6d6;
  --background-color-2: #505050;
}

Takeaway

  1. Always start front-end design with a wireframe and mockup.
  2. Flex boxes and CSS variables are life savers.