Udacity Front-End Nanodegree - Project 1 - Portfolio Site

Rather than replicating the provided PDF site mockup using a framework like Boostrap -- which would not have been very challenging -- I elected to adhere to the rubric in building a functional, one-page portfolio site from scratch, utilizing CSS Grid for site layout, along with Flexbox for aligning some elements within grid areas. This approach gave me a useful, very basic introduction to Grid and Flexbox, and provided general CSS practice by building UI components without resorting to a framework. 


Some features:

-- Menu items link to page sections.

-- 5 breakpoints.

-- Utilizes CSS Custom Properties/Variables. Perhaps needlessly, but I wanted to acquaint myself with the feature.

-- Showcases a few WordPress websites I've built previously, along with Udacity projects.


Improvements would include a more intersting, complex layout utilizing additional CSS Grid techniques. It could also use some JavaScript/jQuery enhancements -- e.g., smooth scrolling to anchor links, and a hover color change on the vector graphics icons. And, the CSS needs to be reorganized into a less spaghetti-likes state. It's a bit of a redundant mess.



Hero image section background image from pexels.com - Creative Commons Zero (CC0) license:

https://www.pexels.com/photo-license/



Vector social icons from iconmonstr.com:

https://iconmonstr.com/license/


Google Material Design-style box shadows found here:

https://codepen.io/sdthornton/pen/wBZdXq

Based on a Medium post by Florian Kutschera:

https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d

Developed from the 2014 Google Material Design specification:

http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality



The site will be hosted on my server, at: http://pdxwebguy.com/portfolio/index.html