A mobile-first, responsive portfolio website featuring bio, skills, projects, and contact info.

My portfolio features these sections: about me, skills, projects, and contact me. About Me: Contains my name and full brand statement. Skills: Divided into sections (Front-End, Back-End, and Equity), with an icon for each section and skills displayed in text format. Projects: Contains placeholder images with hoverover effect. MVP for projects section is grid display with responsive design. Contact Me: Contains a link to my email but not a full form. Design style includes: 1. full-width image for top banner, 2. minimalistic style for all other sections (few images, 1-3 colors), 3. conversational tone of text sections.

• Mobile
• Tablet
• Desktop

Link

• Hamburger
• Text content
• Full nav bar for desktop
• Responsive design
• Skill icons
• Social media buttons

• Animation/effect for project placeholders
• Interesting shapes between divs
• Make own logo

• FontAwesome: used for hamburger menu and icons for Skills Section
• Social Icons by Torleif Halseth: link. I tried using the regular Font Awesome library but could not get the icons to display. Somehow, using the direct HMTL from this CodePen (with my own CSS) worked.

// *************
// Smooth Scroll
// *************

// Code Adapted from Stack Overflow: https://stackoverflow.com/questions/6677035/scroll-to-an-element-with-jquery

        $(document).ready(function (){
            $("#smooth-about-me").click(function (){
                $('html, body').animate({
                    scrollTop: $("#about-me-section").offset().top
                }, 2000);
            });
        });

        $(document).ready(function (){
            $("#smooth-skills").click(function (){
                $('html, body').animate({
                    scrollTop: $("#skills-section").offset().top
                }, 2000);
            });
        });

        $(document).ready(function (){
            $("#smooth-projects").click(function (){
                $('html, body').animate({
                    scrollTop: $("#projects-section").offset().top
                }, 2000);
            });
        });

        $(document).ready(function (){
            $("#smooth-contact").click(function (){
                $('html, body').animate({
                    scrollTop: $("#contact-me-section").offset().top
                }, 2000);
            });
        });

I had to put my JavaScript at the bottom of the HTML body despite having the code in my app.js that is supposed to cause the JS to wait until all HTML is loaded before running.

There was a typo in my element (. instead of -); once fixed, the hover was successful.

I had to change them from position: absolute to instead be part of a grid and change the row property.

For the gradient overlay on my #home-section, I followed this guide from Geeks For Geeks: link I used a different background image and chose not to gradient but to have one color (black) for the overlay.

I attempted solutions from W3Schools, Geek2Geek, and Dev.to, but ended up following a screenshot from Taylor Polli Overturf shared in Slack.

I used this guide from TutorialsPoint to layer multiple divs in my "home" section: link

I used this guide from StackOverflow (from users Ajay and Khaled Al-Ansari) to style my a tag as a button and add hover css: link

When I ran into difficulty with getting my hamburger nav to expand vertically, I received brainstorming and bug-squashing help from Matt Powell and Taylor Polli Overturf. Matt helped me figure out how to move my links to accomplish the styling I needed, and Taylor introduced me to the "viewport height" styling, which I implemented in other sections.

I followed this guide that Lauren Colvin linked in Slack to change the font size from px to em: link

I added jquery .animate to implement smooth scrolling using this guide from StackOverflow, answered by "Steve," edited by "melutovich": link