Personal Portfolio

Description

This website serves as an online portfolio by showcasing one's projects and has additional "about" and "contact" sections. It is a project required by freeCodeCamp's Responsive Web Design curriculum. It fulfills the user stories listed here.

Demo

Features

• Fixed navbar
• First section takes up 100% of the viewport
• Full bleed sections with constrained width content
• Mobile-first layout with progressive enhancement
• Responsive design with CSS Grid and media queries
• Programmatically added project tiles from data
• BEM class names

Tech Stack

• HTML
• CSS
• JavaScript

Lessons Learned

• Create a fixed navbar with set height with the position property
• Fixed position elements are out of flow, or not part of the normal document layout flow; it sits on its on own layer.
• position: fixed is similar to position: absolute except the offsets are based on the viewport, not the containing block (Source).
• Use margin-top, or create an empty row with set height to prevent the fixed position navbar from overlapping the in flow elements
• Use Flexbox to position navigation links on the horizontal axis
• Constrain width with a container and class
• The basic principles of BEM methodology
• Create a fixed navbar with flexible height by setting the height of the container's parent, setting overflow: hidden on the container, and flex: auto on the container's non-navbar section

To-do

• Fixed navbar with flexible height without using overflow hack
• Refactor constrained-width content in full-bleed sections with CSS Grid

Set up

Download/clone repo

Move to project folder

cd portfolio-js

Install dependencies

npm install

Run the default gulp command to start the live server

gulp

When finished developing, stop the server

Ctrl + C

To deploy to GitHub Pages, run npm script

npm run deploy

To audit/update npm packages

npm audit
npm audit fix

npm update
npm outdated