This is my first project as a WDI student at General Assembly SF. I have used the skills I've learned so far in HTML, CSS, JavaScript, and jQuery to build a website About Me.
- Bootstrap
- jQuery
I used previous homework and exercises to aid my creating flexboxes.
For the carousel slideshow of my past projects, I read this W3Schools tutorial and ultimately used Bootstrap's carousel component. I also applied Bootstrap's scrollspy component to reflect in the nav bar the user's current position on the page.
This W3Schools question helped me work through the smooth scrolling task.
I searched on Stack Overflow for many questions I had for the JS functions. To try fading content in and out of my skills section, I referenced this thread, but I could not figure it out all the way.
For the responsive collapsible nav, I used Bootstrap's dropdown component as well as this W3Schools page; however, this I also could not solve all the way.
Throughout this project, I edited this README file after completing or attempting each step in order to take notes for futureMe.
I started by going through the requirements that the site should contain. I then created a wireframe to help me visually lay out my sections and what they might be.
From there, I wrote pseudocode in my HTML, CSS, and JS files to write down what content I needed to include, what styles or layout I needed to apply, and what functions to implement. After ensuring I had all points and requirements written in pseudocode, I began to build out my HTML, starting with a boilerplate.
Once I had my content blocked in my HTML, I started working on CSS styles to change the layout.
After getting the basic layout accomplished with margins and padding adjusted, I got started on the more complex requirements of the project, beginning with the portfolio carousel.
I spent a few hours attempting to create the lightbox, but after not succeeding, I decided to manage my time and move on to the next functionalities of the nav bar allowing for smooth scrolling to sections and for highlighting the corresponding nav item for the current section.
I was able to complete those tasks, though not as polished as would be ideal. I then tried to solve the responsive collapsible dropdown hamburger nav, but encountered a few issues there.
Finally, I went back to my CSS file to apply more styles to my liking.
- Getting all images in the carousel to be the same size, and therefore not interrupting the placement of the captions.
- Getting the nav links to highlight and scroll to the top of the section vs. at or after the section's headline
- Although I changed the nav active styles, Bootstrap's native active styles seem to linger for a second, primarily the whole link having a background color of white.
- Getting the nav to collapse into a dropdown hamburger menu upon resizing the window. If you set the window to a normal size before loading the page, the nav appears normally, but if you resize it to a smaller window, the nav links do not collapse into the hamburger icon. However, if you were to leave the window at the smaller size and reload or load the page, the hamburger contains the dropdown menu. But upon resizing it back to a larger size, the hamburger icon and the full nav disappear completely.
- Getting the Skills section to animate and switch between divs vs. fade in and out the whole section.
Without fail, I struggle with flexbox, so I was very happy to achieve the flexbox effects I wanted in both the header and the contact form.
I searched for methods to create a carousel from scratch, but struggled with the tutorials and community posts I found. I let myself look at the given Bootstrap version, and it all made sense and worked! However, no matter how many times I attempted at creating a modal to create a lightbox, I did not succeed. I tried Bootstrap's modal component; I googled other modal and lightbox tutorials.
My biggest challenges are the problems I couldn't solve listed above. The lightbox, Skills section animation, and the hamburger nav dropdown were the 3 challenges that took the most time and brain power.
After viewing classmates' projects and discussing their challenges, I was able to see how they achieved some of the functionality that I could not. Leo shared a very helpful link to an external lighbox gallery plugin for Bootstrap that I could've sworn I had come across before!, but probably was reading it when I was already tired or frustrated so I didn't fully comprehend. In the eleventh hour, I tried it and the lightbox finally worked!