work grid spacing, blog spacing

README.md

@@ -20,7 +20,7 @@
 
 ## Videos and Screenshots
 
-![gif walkthrough of abbeyperini.dev](/portfolio.gif)
+![gif walkthrough of abbeyperini.dev](/portfolioWalkthrough.gif)
 ![gif walkthrough of mobile abbeyperini.dev](/portfolioMobile.gif)
 
 ## Getting Started

portfolio/src/components/subwork/ThisSite.js

@@ -3,7 +3,7 @@ import { ReactComponent as Github } from '../../images/github.svg';
 
 function ThisSite() {
     return (
-        <div id="this" className="subWork">
+        <div id="this" className="this-subWork">
             <h2 className="subwork_title--primary">AbbeyPerini.dev</h2>
             <h3 className="subwork_title--secondary">Professional Website</h3>
             <p className="subwork_text">I wasn't happy with my professional portfolio being a template attached to the static personal site

portfolio/src/styles/App.css

@@ -162,14 +162,30 @@ nav {
     "pic"
     "icons"
     "text";
-  grid-template-rows: .25fr .25fr .25fr .25fr 1fr;
+  grid-template-rows: .1fr .1fr .1fr .1fr 1fr;
   place-items: center;
   color: var(--dark-text);
   background: var(--accent);
   box-shadow: 0 8px 32px 0 rgba(0,0,0,.37);
   border-radius: 10px;
 }
 
+.this-subWork {
+  display: grid;
+  grid-template-areas: 
+    "title"
+    "type"
+    "icons"
+    "text";
+  grid-template-rows: .1fr .1fr .1fr 1fr;
+  place-items: center;
+  color: var(--dark-text);
+  background: var(--accent);
+  box-shadow: 0 8px 32px 0 rgba(0,0,0,.37);
+  border-radius: 10px;
+  margin: 10px 0px 10px 0px;  
+}
+
 .subwork_title--primary {
   grid-area: title;
 }
@@ -305,6 +321,7 @@ nav {
   border-radius: 10px;
   margin: 10px 0px 10px 0px;
   box-shadow: 0 8px 32px 0 rgba(0,0,0,.37);
+  width: 100%;
 }
 
 .blog-preview {
@@ -522,7 +539,7 @@ a:hover, a:focus {
     max-width: 300px;
   }
 
-  .subWork, .subAbout, .scroll-cropper {
+  .subWork, .subAbout, .scroll-cropper, .this-subWork {
     margin: 10px;
   }
 
@@ -552,6 +569,10 @@ a:hover, a:focus {
   pre {
     max-width: 300px;
   }
+
+  .scroll-cropper {
+    width: 95%;
+  }
 }
 
 @media screen and (min-width: 525px) {
@@ -592,12 +613,22 @@ a:hover, a:focus {
     margin: 20px;
   }
 
+  .this-subWork {
+    grid-template-areas: 
+    "title text"
+    "type text"
+    "icons text";
+    grid-template-rows: .5fr .1fr 1fr;
+    grid-template-columns: .25fr 1fr;
+    margin: 20px;
+  }
+
   .subAbout, .subContact, .blog {
     margin: 20px;
   }
 
   .scroll-cropper {
-    width: 98%;
+    width: 95%;
     margin: 20px;
   }
 
@@ -643,4 +674,14 @@ a:hover, a:focus {
   .subContact {
     width: 98%
   }
+
+  .scroll-cropper {
+    width: 96%;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .scroll-cropper {
+    width: 98%;
+  }
 }