Responsive-Portfolio

Overview

A basic with a mobile-responsive layout using media queries (no Bootstrap).

Deployed Site Link

https://doybrian.github.io/Responsive-Portfolio/

Design Plan

1. Created index.html, portfolio.html and contact.htmlfor separate pages.

2. Recreated basic portfolio site with the following items:

• A navbar

• A responsive layout

• eg. On xs and sm screens, content should take up the entire screen. On md and larger screens, you should have some margins on the left and right side of the screen. Check out various sites on your mobile device versus your computer to see this in action!

• Responsive images

3. Used three @media screen tags, each with one of these max-widths: 980px, 768px and 640px.

• 980px is used because you never want any of the content to be cut off. Since the desktop layout is about 960px wide, you want the media queries to kick in before your content gets cut off.

• 768px is about the width of a tablet and 640px is about the width of a phone in landscape.

BONUS

• Incorporated CSS animations in the portfolio.