shelbourn / freecodecamp_challenges Goto Github PK

I would like to add a simple hover effect for the gallery in my 'Projects' section. I found a good example here: http://bootsnipp.com/snippets/featured/simple-responsive-image-gallery

Pick material background textures for page sections.

Currently, I am using linear gradients for the section backgrounds, but I don't really like them that much.

Current Background --

.bio-wide {
    height:93vh; /* NEED THIS HEIGHT MEASUREMENT TO MAKE EVERY COVER PAGE (EXCEPT THE LANDING PAGE) TO FIT 100% WIDTH AND HEIGHT */
    /* height:calc(100% - 1px); COMMENTING THIS OUT SO THAT I CAN HAVE THE SECTION FILL THE ENTIRE HEIGHT AND WIDTH OF THE VIEWPORT */
    background:
        linear-gradient(
        rgba(255,255,255,1.0),
        rgba(0,0,0,0.7)
        );
    background-size: cover;
    background-position: center;
}

Currently, when scaled down my Profile Image and the Cover Bottom section shrink too much. Find a way to increase the proportions of these elements when the page is scaled down.

Change the vw or vh setting in the Portfolio 2 CSS to make the cover page appear full width and full height

I would like to use 'FancyBox' (http://fancyapps.com/fancybox/) to create an interactive lightbox feature to my 'Projects' section.

My goals for this are as follows:

• Implement the FancyBox functionality to my site
• Use the 'Elastic' transition effect for the lightbox
• Have each thumbnail in the gallery of my 'Projects' section to have a sub gallery that will act like a collection of my work organized by category
• For each sub gallery item I would like to have a text overlay that describes what the image represents (see examples here: http://fancybox.net/home)

Change the look of the portfolio landing page.

Figure out a way to get the navbar to auto collapse on menu item click when the site is scaled down to mobile size.

Currently, I can either get the auto collapse to work or the smooth scroll effect to work, but I can't get both to work at the same time.

Need to figure out a way to center elements vertically within one row in a Bootstrap grid system.

Currently, Animate.css is not working. Find a way to get it working.

Find an EPS or SVG to use for the divider between text blocks in the 'Bio' section. Currently I am using an SVG, but I haven't yet figured out how to align and size it properly.

Current Divider --

                <style type="text/css">
                    .st0{fill:#1D1D1B;}
                </style>
                <g>
                    <path class="st0" d="M207.3,10.9c-14.1,9.6-29,17.4-44.9,23.7c-2,0.8-1.3,4.2,0.8,4.1c7.6-0.4,15.2-0.8,22.8-1.4c0,0,0,0.1,0,0.1
                        c-13.9,10.3-26.7,22.9-39.6,34.3c-14.1,12.4-28.1,24.9-42,37.6c-17.3,15.7-34.7,31.4-51.7,47.5c-0.3-0.1-0.6-0.2-1-0.1
                        c-4.7,0.6-8.9-0.8-13.1-0.8c-0.4-0.1-0.8-0.2-1.3-0.3c0,0,0,0-0.1,0l0,0c-0.2,0-0.4-0.1-0.5-0.1c-0.9-0.2-1.6,0.2-1.9,0.9
                        c-1.2,0.3-2.4,0.8-3.6,1.6c-9.2,6.1-17.3,15.5-25.2,23.2c0,0-0.1,0.1-0.1,0.1c0,0,0,0,0,0c-0.9,0.2-1.2,1.1-0.9,1.9
                        c1.1,2.9,6.2,3.8,8.9,4.3c2.5,0.5,4.9,0.6,7.3,0.3c0,2.1,0.2,4.3,0.2,6.4c0,2.9-0.2,5.8-0.5,8.7c-0.3,0.4-0.3,0.9,0,1.3
                        c0.2,1.7,3,1.8,3.3-0.2c0-0.1,0-0.2,0-0.3c9.5-6.9,18.8-14.7,27.1-23c0.7-0.7,0.7-1.5,0.3-2.2c1.5-4.7,1.8-10.3,0.8-15.2
                        c18.2-17,36.3-34.1,54.7-50.9c13.9-12.6,27.9-25.1,42-37.6c11.5-10.2,24-19.9,35.3-30.5c-0.4,4.9,0.4,9.7,2.5,14.6
                        c0.8,1.9,3.5,1.5,4.2-0.3c6-15.3,12.6-30.5,19.7-45.3C211.9,11,208.8,9.9,207.3,10.9z"/>
                    <path class="st0" d="M5.2,13.3c7.1,14.9,13.6,30,19.7,45.3c0.7,1.7,3.4,2.2,4.2,0.3c2.1-4.8,3-9.7,2.5-14.6
                        c11.3,10.6,23.8,20.3,35.3,30.5c14.1,12.4,28.1,25,42,37.6c18.4,16.7,36.5,33.9,54.7,50.9c-1,4.9-0.7,10.4,0.8,15.2
                        c-0.3,0.7-0.3,1.5,0.3,2.2c8.2,8.3,17.5,16.2,27.1,23c0,0.1,0,0.2,0,0.3c0.3,2,3.1,1.9,3.3,0.2c0.2-0.4,0.3-0.8,0-1.3
                        c-0.3-2.9-0.5-5.8-0.5-8.7c0-2.1,0.3-4.3,0.2-6.4c2.4,0.2,4.9,0.1,7.3-0.3c2.7-0.5,7.8-1.4,8.9-4.3c0.3-0.8,0-1.7-0.9-1.9
                        c0,0,0,0,0,0c0,0,0-0.1-0.1-0.1c-7.9-7.7-16-17.1-25.2-23.2c-1.2-0.8-2.4-1.3-3.6-1.6c-0.3-0.6-1-1.1-1.9-0.9
                        c-0.2,0-0.4,0.1-0.5,0.1l0,0c0,0,0,0-0.1,0c-0.4,0.1-0.8,0.2-1.3,0.3c-4.2,0-8.4,1.5-13.1,0.8c-0.4-0.1-0.7,0-1,0.1
                        c-17-16.1-34.4-31.8-51.7-47.5c-13.9-12.6-27.9-25.2-42-37.6C56.7,60.3,44,47.7,30,37.4c0,0,0-0.1,0-0.1c7.6,0.6,15.2,1,22.8,1.4
                        c2.2,0.1,2.8-3.4,0.8-4.1C37.8,28.3,22.8,20.5,8.7,10.9C7.2,9.9,4.1,11,5.2,13.3z"/>
                </g>
                </svg>

Currently, section links are not working properly in the portfolio zipline. This needs to be changed in order to work properly:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
        <a class="navbar-brand" href="#">Matthew Shelbourn</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#bio">Bio</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</div>
</div>

<!-- End Real Navbar -->

<!-- Body Section1 -->

<div>
<a name="bio">
</a>

See here for example: http://codepen.io/samiralibabic/pen/eZjEjL

Need to figure out a way to align a Bootstrap row to the vertical center of screen.

When I fixed the cover page sizing to make it so that it filled the viewport, the bottom cover page container was bumped to the next screen. I've got to figure out a way to get the container to stick to the bottom of the cover page. If not, then I will have to find an alternative and only have the 'cover' section.

Figure out a way to disable the flex display for smaller screens. Currently with a flex display applied to the 'Bio' section and to the Bootstrap Row within the 'Bio' section, the Row stays at full viewport width when the window is scaled down. This means that the Bootstrap grid system doesn't break due to the flex display. This is because Bootstrap xs columns have a fixed width.

Highlight active tab when scrolling through zipline.