100 Days of Code: Day 19

I finished the Sparrow Photography portfolio! I haven’t added any links to the journal, about, or contact pages yet as I plan to create them at a later date.

There were a few things that I would like to have done a bit differently with the portfolio design, but all in all, I would say it is a very solid first version. I may come back and modify things later on as I become more comfortable with Bootstrap and other web dev technologies.

When I originally designed the interface for the portfolio, I kept the colors purely grayscale to prevent myself from getting too caught up in the color scheme before finishing the actual design.

Because of this, something kind of amazing happened. I ended up with a final design that was grayscale and I absolutely love it. I’m sure you could tell by the MysticMail App Landing Page that I love color. So, for me to intentionally omit it, it is actually kind of a miracle. I think the end result is a really classy, sophisticated design, where the photography itself is the primary focus and everything else is just in the background.

Image Modal Window

Rather than linking to individual portfolio posts, I decided to create a modal that pops up when you click on an image, showing a large version of each photo.

I used jQuery to find the source of the image, save it as a variable, then input that into an image placeholder inside the body of the modal.

$('#imageModal').on('show.bs.modal', function (event) {
     var imageSource =$(event.relatedTarget).attr('src');
     $(".modal-image").attr('src', imageSource);
})

Each image in the portfolio follows this pattern:

<img class="portfolio-img category" src="source" alt="" data-toggle="modal" data-target="#imageModal">

I also added CSS to show a zoom-in cursor when you hover over an image, so the user knows that an action can be performed.

cursor: zoom-in

• Live Website: http://playground.blissfullemon.com/SparrowPhotography/index.html
• Live Website (on GitHub): https://blissfullemon.github.io/SparrowPhotography/index.html
• GitHub Respository: https://github.com/blissfullemon/blissfullemon.github.io/tree/master/SparrowPhotography