Portfolio Project: Your Portfolio Website

This is a final project milestone for the course FSE 294: Intro to Web Design - Arizona State University

LINK: https://roeldcrodua.github.io/PersonalWebsiteProject

Your Task

Let’s get started! For this part of your Portfolio Project, you’ll be focused on completing the Navbar, Hero, and Footer sections of your portfolio.

Requirements

Add Bootstrap Library to the HTML

• Start by adding the Bootstrap CDN links from Bootstrap's website to your HTML.

Create the Hero Section

• Remember, we call this the “hero” section because it includes a “hero image”, which is just tech lingo for a large banner image that is prominently placed, and typically takes up the full width of the webpage.
• Should have a large background image that spans 100% of the page’s width.
• Should include a centered, circular headshot image with a border.
• Should include a centered h1 tag with your name.
• Should include a centered tagline.
• All elements in the hero section (including the headshot image) should be sized responsively across different screen resolutions.
• All text should be readable against the background image.

Create the Navbar

• Should contain links that successfully navigate to the different sections of the page: Mission, Skills, and Contact.
• Should be fixed to the top of the page.
• Should collapse with a “hamburger” button at small screen resolutions.
• Should use an image or icon for the Navbar’s “Brand”.

Create the Footer

• Text content should contain a copyright symbol.
• Text content should be horizontally centered.
• Text content should be vertically centered.

Create the Mission Section

• Should contain a centered heading.
• Should contain an image.
• Should contain a paragraph of text.
• Image and text should be displayed in two columns on medium screen sizes and above.
• Image and text should be displayed as two separate rows on small screen sizes.

Create the Skills Section

• Should contain a centered heading.
• Should include 4 skills. (Note that HTML, CSS, and Bootstrap are all available to you now as skills!)
• Each skill should have an image with some text underneath.
• Skills should be displayed as four columns (one row) on large-sized screens, two columns (two rows) on medium-sized screens, and a single column (four rows) on smaller screens.

Create the Contact Section

• Should contain a centered heading.
• Should contain three or more social icons.
• Icons should be displayed as three columns on medium screen sizes and above and collapse into rows at small screen sizes.
• Icons should change color on mouse hover.

LevelUp (Optional) Add a Bootstrap Carousel

• Should contain a centered heading.
• Should contain a Bootstrap carousel component with at least three items.
• The carousel should have indicators, controls, and captions.
• Each carousel item should have a uniform size and width.

Mobile View (Responsive Designed)

Tablet View (Responsive Designed)

Desktop View (Responsive Designed)