
100 Days of Code: Day 19
Goals For Today:
[ultimate_icon_list icon_size=”16″ icon_margin=”20″][ultimate_icon_list_item icon_type=”custom” icon_img=”id^4091|url^https://www.blissfullemon.com/wp-content/uploads/2018/05/done.png|caption^null|alt^null|title^done|description^null”]Finish the Sparrow Photography portfolio website[/ultimate_icon_list_item][/ultimate_icon_list]The Good:
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.
The Bad:
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.
Notes/Comments:
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
Important Links
- 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