[vc_row css=”.vc_custom_1526680382655{margin-top: 15px !important;margin-bottom: 60px !important;padding-right: 10% !important;padding-left: 10% !important;}”][vc_column][vc_progress_bar values=”%5B%7B%22label%22%3A%22Progress%22%2C%22value%22%3A%2219%22%2C%22color%22%3A%22blue%22%7D%5D” title=”100 Days of Code, Round 1″ percentage_value=”27″ title_color=”#3e3e3e” bar_color=”#1b7da9″ track_height=”20px” track_color=”#e7f6fc” m=”20″ extra_class=”” units=”%”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Goals For Today:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][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][vc_custom_heading text=”The Good:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]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.[/vc_column_text][vc_custom_heading text=”The Bad:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]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.[/vc_column_text][vc_single_image image=”5145″ img_size=”full” style=”vc_box_outline” onclick=”link_image”][vc_custom_heading text=”Notes/Comments:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]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.[/vc_column_text][vc_single_image image=”5158″ img_size=”full” style=”vc_box_outline” onclick=”link_image”][vc_column_text]
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[/vc_column_text][vc_custom_heading text=”Important Links” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]
- 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
[/vc_column_text][/vc_column][/vc_row]
Let's chat!