README

Udacity Full Stack Web Developer Nanodegree program

Project 2. Portfolio site

Brendon Smith

br3ndonland

Description

This was my second project for the Udacity Full Stack Web Developer nanodegree program. Students were provided with a design mockup (screenshot) of a developer portfolio webpage, and had to replicate the design with HTML and CSS.

I based the webpage on Bootstrap v4.0.0. In the main webpage index.html, I linked to the Bootstrap core CSS through their Content Delivery Network (CDN). I also included Prism syntax highlighting CSS and JavaScript files, and portfolio.css for additional custom styling.

I provided a toggle button in the navigation menu that uses jQuery JavaScript to change the page color scheme.

I used the webpage design to create a full website with Jekyll, and hosted the site with GitHub Pages. The website includes a homepage, an "About" page where I introduce myself and my Udacity work, a "Methods" page explaining how I built the site in detail, a "Rubric" page providing the Udacity project documentation, and a "Review" page documenting the Udacity code review.

Repository contents

All files for the GitHub pages site reside in the docs/ directory. HTML, CSS, and JS files above the docs/ directory were used only to submit the homepage for the Udacity project.

• css/
  • portfolio.css: CSS stylesheet for the webpage
• docs/
  • Files for GitHub Pages Jekyll website.
• img/
  • Images used in the webpage
• js/
  • portfolio.js: jQuery JavaScript for the webpage
• index.html: Main webpage. A modified version of the page is stored as docs/index.html for the GitHub Pages website.
• README.md: concise description of the repository for GitHub

Running the Jekyll site

The Udacity project only requires a simple webpage, which is at index.html. I also made a full GitHub Pages website using Jekyll, in the docs/ directory. To run the Jekyll site:

• Clone (or fork then clone) this repo.
• Install Ruby v2.6+ as explained in the Jekyll docs for your operating system. Bundler should already be installed along with Ruby.
• Install the site and generate Gemfile.lock: bundle install --path vendor/bundle. This installs Ruby gems to ./vendor/bundle, which avoids having to write to the system RubyGems directory.
• Serve the site: bundle exec jekyll serve
• View the site in a browser at localhost:4000.