V2.0.0 beta (#14)

* Delete style.css

* Delete portfolio-thumb.png

* Delete profile-pic.png

* Delete tribute-grid-thumb.png

* Delete tribute-thumb.png

* Delete README.md

* Delete index.html

* Add files via upload

* Update index.html

* Update index.html

* Add files via upload

* Update _nav.scss

* Add files via upload

Patch Notes added

* Update portfolio-v2-patch-notes.md

* Delete _templates.scss

* Update _box.scss

* Update _text.scss

* Delete blackbox_cr.png

* Delete js30-p10_cr.PNG

* Delete js30-p13_cr.PNG

* Delete maze-doc_cr.png

* Delete 128px-HTML5_Badge.svg.png

* Delete 128px-Sass_Logo_Color.svg.png

* Delete Badge_js-strict.png

* Delete Boostrap_logo.png

* Delete CSS3_logo_and_wordmark.png

* Add files via upload

* Update readme.md

* Update readme.md

* Update readme.md

* Update readme.md

* Update readme.md

portfolio-v2-patch-notes.md

@@ -0,0 +1,45 @@
+# Portfolio Version 2.0.0 Patch Notes
+
+## Things to check:
+
+  - Is the Sass as DRY as possible with what I know right now?
+  - Is BEM being used properly?
+  - Is all the content properly displayed on mobile, tablets, laptops, and desktops?
+  - Is the typography okay?
+  - Are the colors okay/ won't clash/ are visible?
+  - Can I add onto the site in like 3 months without tearing my hair out?
+  - Are the box-shadows visually consistent?
+  - Are psuedo-states handled properly?
+
+## Visual Differences:
+
+  - New layout
+  - Significantly less text/ content
+    - but also takes significantly less time to go through all the content
+  - More mobile friendly layout
+  - Less colors
+  - Has a proper contact form
+    - the backend is handled by an external API though
+  - Less white-space
+
+## Differences in the mark up:
+
+  - Sass is used for CSS preprocessing
+    - hypothetically makes for DRY-er CSS  
+  - BEM naming standard for the vast majority of CSS classes
+    - CSS doesn't have as many unnecessary selector rules/ specificity as a result
+  - No frameworks (e.g Bootstrap) are used
+  - Uses tons of CSS Flexbox
+  - The vast majority of sizing is done with relative units (*rem, vh, vw, %, etc*)
+  - The vast majority of elements aren't statically sized (i.e no defined width and heights)
+  - Final CSS size is 1kb bigger than the current one
+  - Fonts are imported into the CSS instead
+
+## Content to be added in a future patch:
+
+  - Add a logo
+  - Add a process breakdown page for select projects
+  - Add tabs to the Works section for secondary content
+  - Create a workflow.html page that outlines my general development process
+  - Update the Works section with JavaScript projects as they are made
+

readme.md

@@ -0,0 +1,63 @@
+# Portfolio Read Me
+#### Version 2.0.0
+#### Date Last Updated: 09-10-18
+
+## Versioning
+
+Versioning is done using [Semantic Versioning](https://semver.org/)
+
+## Current Status
+
+To be checked, standing by for release
+
+## File Structure
+
+```
+portfolio-mk2
+  ├─ img
+  │   ├─ badges
+  │   │     ├─ html.png
+  │   │     :
+  │   │     └─ sass.png
+  │   │
+  │   ├─ blackbox.png
+  │   : 
+  │   └─ maze-doc.png
+  │
+  ├─ stylesheets
+  │   ├─ _mixins
+  │   │     ├─ _box.scss
+  │   │     └─ _text.scss
+  │   ├─ _modules
+  │   │     ├─ _buttons.scss
+  │   │     └─ _colors.scss
+  │   ├─ _partials
+  │   │     ├─ _base.scss
+  │   │     ├─ _contact.scss
+  │   │     ├─ _intro.scss
+  │   │     ├─ _nav.scss
+  │   │     └─ _works.scss
+  │   │
+  │   ├─ main.scss
+  │   ├─ main.css
+  │   └─ readme.md
+  │
+  ├─ index.html
+  └─ readme.md
+```
+
+## Image Attribution
+
+Several images used on this site are not mine or are modified from other sources, so this section serves to give credit to the original creators of said images.
+
+  - Sass logo image by http://sass-lang.com/ (http://sass-lang.com/styleguide/brand/) [Public domain], via Wikimedia Commons
+  - HTML5 logo image by W3C (http://www.w3.org/html/logo/index.html) [CC BY 3.0  (https://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons
+  - CSS3 logo image is a cropped version of the CSS3 logo by Rudloff [CC BY 3.0  (https://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons
+  - Bootstrap logo image by Bootstrap (http://blog.getbootstrap.com) [Public domain], via Wikimedia Commons
+  - Javascript logo image is a cropped version of the JS logo by voodootikigod (https://github.com/voodootikigod/logo.js) [MIT (http://opensource.org/licenses/mit-license.php)], via Wikimedia Commons
+
+## External APIs
+
+There isn't many external APIs used on this page (for now). The external API(s) used are as follows:
+
+  - [Formspree.io to handle the contact form](https://formspree.io/)

stylesheets/_mixins/_box.scss

@@ -0,0 +1,61 @@
+// SCSS for various box model based mixins
+// includes background color/ margins/ padding/ border color etc
+
+// Box Model related mixins
+
+    // Dynamic
+
+@mixin sameMarginY($val){
+    margin-top:$val;
+    margin-bottom:$val;
+}
+
+@mixin samePaddingY($val){
+    padding-top:$val;
+    padding-bottom:$val;
+}
+
+    // Staic mixins
+
+@mixin zeroAll{
+    margin:0;
+    padding:0;
+}
+
+@mixin zeroSides{
+    margin-left:0;
+    margin-right: 0;
+    padding-left:0;
+    padding-right: 0;
+}
+
+@mixin centerSides{
+    margin-left:auto;
+    margin-right:auto;
+}
+
+
+@mixin sectionSpacing{
+    @include samePaddingY(1rem);
+    margin-bottom:1.5rem;
+}
+
+
+// The Box Shadow property isn't really part of the box model but functionally it achieves a similar effect to the border property, just offset from the element.
+
+// Inset box shadow
+
+@mixin shadowIn{
+    box-shadow: 0rem 0.15rem .20rem .1rem rgba(0,0,0,.05) inset;
+}
+
+// Box shadow "close" to the ground
+
+@mixin shadowLow{
+    box-shadow: 0rem 0rem .30rem .2rem rgba(0,0,0,.25);
+}
+
+// Box shadow "mid height" from the ground
+@mixin shadowMid{
+    box-shadow: 0rem 0rem .30rem .1rem rgba(0,0,0,.25);
+}

stylesheets/_mixins/_text.scss

@@ -0,0 +1,33 @@
+// SCSS for text mixins
+
+// Importing Lato
+@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
+
+// Text colors
+
+// Text formatting
+
+    // mixin is going to take in any value, figure out how to filter for the right values 
+
+@mixin headingText($txtSize, $align){
+    @include centerSides;
+    font: {
+        family:"Lato", sans-serif;
+        size:$txtSize;
+        weight:400;
+    }
+    text-align:$align;
+
+}
+
+@mixin stdParagraph{
+    @include centerSides;
+    @include stdWidth;
+    text-indent:20px;
+}
+
+// Phase this out for dynamic stuff
+@mixin stdWidth{
+    width: 90%;
+}
+

stylesheets/_modules/_buttons.scss

@@ -0,0 +1,30 @@
+// SCSS for buttons
+
+  // Should make a static version of this mixin at some point
+
+@mixin stdButton{
+  @include btnShadowMid;
+  height:2rem;
+  width:5rem;
+  color:white;
+  border:1px solid white;
+  border-radius:3px;
+  background-color:$liteOrange;
+  &:active{
+    @include btnShadowLow;
+    background-color:#C66024;
+  }
+
+  &:hover{
+    background-color:#C66024;
+  }
+}
+
+@mixin btnShadowLow{
+  box-shadow: 0rem 0.0625rem .30rem .1rem rgba(0,0,0,.25);
+}
+
+// Box shadow "mid height" from the ground
+@mixin btnShadowMid{
+  box-shadow: 0rem 0.125rem .30rem .1rem rgba(0,0,0,.25);
+}

stylesheets/_modules/_colors.scss

@@ -0,0 +1,14 @@
+// SCSS for colors
+
+$liteOrange:#E39060; // buttons
+$darkOrange: #C66024; //button:active
+$stdGreen: #25806A; // for nav mobile
+$darkGreen:#02503D; // for nav laptops
+$darkBlue: #092851; // for text
+$stdGrey: #E8e8e8; // for background
+$liteGreen:#509181; // nav:hover and anchor elements
+$medDarkGreen:#3A6A5E;// anchor:hover
+$ultLiteGreen:#68978C; //
+$liteBlue:#7F95B2; // borders/ subheadings
+
+// Should standardize the names/ use more descriptive names

stylesheets/_partials/_base.scss

@@ -0,0 +1,45 @@
+// SCSS for base components
+
+// Media query variables
+$tablet: "screen and (min-width:767px) and (max-width:1022px)";
+$laptop: "screen and (min-width:1024px)and (max-width:1440px)";
+$desktop: "screen and (min-width:1441px)";
+
+// Standard content template mixins
+
+@mixin stdContentSection($width){
+    @include centerSides;
+    @include shadowLow;
+    @include sectionSpacing;
+    width:$width;
+    color:$darkBlue;
+}
+
+// Base elements Styling
+
+:root{
+    background-color: $stdGrey;
+    font-family: "Helvetica", sans-serif;
+}
+
+body{
+    @include zeroAll;
+
+}
+
+main{
+    padding-top: 4rem;
+
+    @media #{$laptop},#{$desktop}{
+        width:78vw;
+        float:right;
+    } 
+}
+
+a{
+    color:$liteGreen;
+    text-decoration: none;
+    &:hover{
+        color:$medDarkGreen;
+    }
+}