oliver-uiuc / portfolio Goto Github PK

Webpage will have to implement the features listed below.

1. Layout: All content must be laid out in a single page with full-width horizontal stripes/sections including a header and a footer - Example
2. Sticky Navbar: A top navigation bar that sticks to the top of the window when scrolling - Example
3. Position Indicator: Indicator of the current reading position visible in the navigation bar (see above gif for example). Make sure your implementation highlights the last menu item when you scroll to the bottom of the page. ( Implementation Tip : To figure out which menu item to highlight, you’ll have to figure out which section lies directly below the bottom margin of the navigation bar. You can use methods that give you the height and position of different divs to figure that out. You will want to recompute this whenever there is a scroll event.)
4. Navbar Resizing: Navigation bar must be larger when users are at the top of the page. As users start scrolling down, it should resize and become smaller. Note that the text font size should also start larger and become smaller as users scroll down - Example
5. Smooth Scrolling: Smooth scrolling when navigating to a different section using the navigation bar - Example
6. Carousel: A section with a carousel/slider using a minimum of three slides. It should include the navigation arrows on the side - Example
7. Multi-column layout: A section with Multi-column content - Example
8. Centering: Content in each horizontal stripe/section must be horizontally centered. At least one element on the page must be vertically centered. The vertically-centered element should remain centered even if the dimensions of its outer element changes.
9. Responsiveness: Your webpage should look good when resized to the following resolutions:

• 1920x1080
• 1366x768
• 1280x720
• 1024x768

10. Background Image: A section which uses a fixed-position background image - Example
11. Modal: A section which uses modal windows with additional content - Example
12. Video: Embedded video using HTML5 video tag - Example
13. CSS3 Animations: At least one use of CSS3 animations (e.g. fade in/out, transitions)
14. At least one use of scalable vector icons through CSS (e.g. FontAwesome)
15. Inclusion of social media icons