My portfolio page (and first Free Code Camp project)

It seems like only yesterday that I was going on and on about the “big advantage” my CS degree was as I worked through the first set of algorithm exercises.  It was, in fact, almost a week ago that I completed those exercises and began working on the first of several “basic projects”, the first of which is to create a portfolio page in which you create links to all future Free Code Camp projects.  An example is provided which looks rather nice (props to you, Thiago!) but other than a handful of use cases, and a plea to not look at Thiago’s source and just copy it, you are on your own.  Hope you were paying attention!

Switching from guided instruction to open-ended project was a real jolt, especially where it came in the curriculum.  I had just finished what was supposed to be 50 hours of algorithm, and the HTML/CSS/JavaScript (JQuery) seemed an eternity ago.  A much better strategy would be to build this portfolio after a series of lessons that introduced you to the concepts you were expected to use to create the portfolio.  The “Read-Search-Ask” in this case seems more like an excuse not to organize a curriculum rather than a learning strategy.

Still, “Read-Search-Ask” is what we were given, so that is what I did.  Here is a link to the CodePen pen I’m using for this:

//codepen.io/dclark/embed/dGzVqL/?height=268&theme-id=0&default-tab=result

Even though the portfolio looks really bare-bones (as of today, anyway…) there were several things I struggled to implement.

But before I get into the things that were hard, a caution: don’t underestimate the amount of time you’ll spend on extraneous stuff that doesn’t sound time consuming, like searching for and editing the images you’ll use on your site.  I’m sure I spent at least as much time searching for the right sized images, and tweaking them in paint.net, as I did fighting my code.  Real projects – even tiny ones – require more time than you think they will.

First on the “tricky” list was duplicating the button behavior from Thiago’s page.  If you look at his example, you’ll see that his buttons have a slick grow effect when you hover over them.  This is perhaps the least important of all the features on his site, but man, I loved how it looked and wanted to copy it!

I started using JQuery, adding some code to make the buttons bigger when they were hovered over.  This created a jumbled mess, as all four of my buttons jumped and wiggled when any of them were hovered over.  I quickly abandoned this, and after failing to find anything satisfactory after Reading and Searching, I broke open Thiago’s source and looked at what he used, which was:

.contact-button:hover {
  transform: scale(1.1);
  transition: 0.3s;
 }

The scale transform made the buttons grow, and the transition time told it how long to take.  (A second transition value in the non-hover state controls returning to the normal scale.)  This was simple, easy, and man, I wish I could have found it more easily.

Much more critical was the layout of (among other things) the links to the portfolio projects.  I haven’t finished any of the FCC project yet, so I found a nice yellow “under construction” image, and used that in place of images of my projects.  That part was easy.

The harder part was getting the columns of projects to work the way I wanted, which was to show three across in the largest view, and then to scale down to 2 columns, and then 1, responsively, as the page width shrunk.  I experimented with a lot of stuff trying to position my three columns of 3 projects each, but finally settled on simply using Bootstrap’s column layout to get things working (mostly.)  The key here was applying multiple Bootstrap classes to each project div so as the screen size changed, the number of Bootstrap columns would also change.  Here’s what I’m talking about:

<div class="portfolio-cell col-xs-12 col-sm-6 col-md-4">

Each portfolio project link is contained in a div with the class portfolio-cell.  The other classes are Bootstrap classes, and can be interpreted, “take up 12 columns (the whole browser window – one cell per row) when using extra-small displays; take up 6 columns (two cells per row) when using small displays; and take up 4 columns (three cells per row) when using medium (or larger!) displays.

This all works great, and stays centered (which was part of my personal requirement) at every screen width.  I still have some cleanup to do (single column cells look way too wide) but this worked well enough for more cases.

The final thing (but certainly not the only other thing) that took up time was creating a simple-looking way of showing some of the projects I’ve worked on in the past.  There were six projects I wanted to highlight, and this is where the time was lost to looking for images.  Once I found them, and sized them somewhat similarly, I had to decide how to display them.

I settled on using a single space on the page and fading between the six images.  I did a search for “css fade image over another” and found several useful pages, including the solution I eventually settled on from stackoverflow.  The fading worked great, but because it used absolute positioning to overlay the images, the images were completely ignored when formatting the page.  The result of this was that the images would overlap the Contact me section below it.

More Googling, and I found a suggested workaround for this – floating a div underneath the images that is the same size as the images.  This worked great at first, but I didn’t like having large, statically sized images in what was supposed to be a responsive web page.  I changed the images to use the img-responsive Bootstrap class, which worked great – the images resized as the browser resized.  Unfortunately, the floated div didn’t resize along with it.

I worked around this issue by adding some JQuery JavaScript to keep the size of the floated div in sync with the size of the dynamically-sized images:

$(document).ready(function(){ 
    $( window ).resize(function() {
        $( "#hidden-div" ).height( $("#my-image").height() );
        $( "#hidden-div" ).width( $("#my-image").width() );
    });
});

This set of functions traps the window resize event, and assigns the height and width of one of my professional project images to the hidden floated div.  I did have to look up the event to use, verify how to search for elements by ID, and how to get and set the height and width, but once I had all this collected, writing the function was easy, and it worked as expected the first time I tried it.

 

I failed to count the hours on this project, but it took parts of at least five days – no less than 20 hours.  The project still isn’t finished – there is lots to polish, not the least of which is fancying up the cells that hold links to finished projects, which will be important once I have an actual project to show – but it covers all of the user stories.  They estimate that the first four projects will take 100 hours, so 20 hours sounds about right.  Next up is a Random Quote Machine, which seems a little less involved.  I guess we’ll see!

Advertisements

One thought on “My portfolio page (and first Free Code Camp project)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s