diff --git a/README.md b/README.md
index 6998e75..1285b18 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,9 @@ Most requirements have been met although numerous improvements can be made. Thes
 - Font Awesome Icons
 - Google Fonts
 
+### Image Attribution
+- ["Ai Wei Wei"](https://www.flickr.com/photos/a-weidinger/22432907487/in/photostream/) used for the Tribute Page card - by Alfred Weidinger - [CC BY](https://creativecommons.org/licenses/by/2.0/) and cropped from original size 
+
 ### Acknowledgements:
 
 Thanks to the following people/ organizations:
diff --git a/css/index.html b/css/index.html
deleted file mode 100644
index a0adc6a..0000000
--- a/css/index.html
+++ /dev/null
@@ -1 +0,0 @@
-This is for CSS
diff --git a/css/style.css b/css/style.css
index 2d4aadd..56e0077 100644
--- a/css/style.css
+++ b/css/style.css
@@ -20,6 +20,14 @@ a{
 color:#2B73AA;
 }
 
+.dy-flex{
+display:flex;
+}
+
+.mgx-aut{
+margin-right:auto;
+margin-left:auto;
+}
 
 /*  Nav Bar CSS  */
 nav{
@@ -35,16 +43,16 @@ background-color: transparent;
 
 }
 
-.navbar > div > .navbar-brand{
+.navbar-brand{
 margin-top:5px;
 margin-bottom:3px;
 }
 
-.navbar > div > ul > .nav-item > .nav-link{
+.nav-link{
 color:#464646;
 }
 
-.navbar > div > ul > .nav-item{
+.nav-item{
 margin-top:-2.5px;
 height:38px;
 border-radius:2px;
@@ -53,7 +61,7 @@ border:2px solid rgba(70,70,70,0.0);
 }
 
 
-.navbar > div > ul > .active {
+.active {
 border:1px solid rgba(70,70,70,0.45);
 margin-top:-2.5px;
 height:38px;
@@ -61,29 +69,27 @@ color:#1E1D1B;
 box-shadow: 0 .125rem .15rem rgba(0,0,0,.15);
 border-radius:2px;
 }
+
 .navbar > div > ul > .active >.nav-link{
 color:#1E1D1B;
 }
 
-.navbar > div > ul > .nav-item:hover{
+
+.nav-item:hover{
 border:1px solid rgba(70,70,70,0.45);
 margin-top:-2.5px;
 height:38px;
 border-radius:2px;
 box-shadow: 0 .125rem .15rem inset rgba(0,0,0,.15);
 }
-.navbar > div > ul > .nav-item > .nav-link:hover{
+
+.nav-link:hover{
 color:#1E1D1B;
 }
 
-/*  About Me CSS  */
-
 
+/*  About Me CSS  */
 
-#about-me{
-width:100%;
-height:1200px;
-}
 
 .about-img{
 height:250px;
@@ -100,9 +106,7 @@ background-color: #F1EACF;
 border-radius:3px;
 height:1000px;
 width:60%;
-margin-right: 20%;
-margin-left: 20%;
-margin-top:125px;
+margin:12vh 20% 20vh 20%;
 padding:5px;
 box-shadow: 0 .125rem .5rem rgba(0,0,0,.5);
 
@@ -124,12 +128,11 @@ width:75%;
 }
 
 .summary-card{
-width:45%;
+width:80%;
 height:250px;
-padding-bottom:100px;
-top:-350px;
-position:relative;
+padding:5vh auto 10vh auto;
 background-color:#FFFAE7;
+margin-top:7vh;
 box-shadow: 0 .125rem 1rem rgba(0,0,0,.5);
 }
 
@@ -179,14 +182,6 @@ display:none;
 /*  Project showcase CSS  */
 
 
-    
-#project-showcase{
-width:100%;
-background-color: inherit;
-height:1100px;
-/*box-shadow: 0 -.125rem .25rem rgba(0,0,0,.075); */
-}
-
 .showcase-heading{
 padding:30px;
 }
@@ -197,7 +192,7 @@ z-index:1;
 top:30px;
 left:30px;
 width:auto;
-height:850px;
+height:870px;
 border-radius:2px;
 position:relative;
 background-color: #F1EACF;
@@ -208,7 +203,7 @@ box-shadow: 0 .125rem 1rem rgba(0,0,0,.5);
 top:-25px;
 left:-25px;
 width:75%;
-height:850px;
+height:870px;
 position:relative;
 border-radius:2px;
 background-color:#7E2C2E;
@@ -283,8 +278,20 @@ box-shadow: 0 .125rem .25rem rgba(0,0,0,.5);
 background-color:rgba(255,250,231,0.70);
 }
 
+
+
 /* Project Highlights CSS */
 
+.hlight-card{
+height:175vh;
+background-color:#F1EACF ;
+border-radius: 2px;
+width: 65%;
+box-shadow: 0 .125rem .5rem rgba(0,0,0,.5);
+margin-top:10vh;
+margin-bottom:10vh;
+}
+
 .sec-inset{
 width:85%;
 height:1.25px;
@@ -297,25 +304,10 @@ width:75%;
 height:1px;
 background-color:#1E1D1B;
 filter:opacity(25%);
-margin-top:80px;
-margin-bottom:80px;
+margin-top:7vh;
+margin-bottom:7vh;
 }   
 
-#project-highlights{
-height:1800px;
-}
-
-.heading-spacing{
-padding-top:30px;
-}
-
-.hlight-card{
-height:1600px;
-background-color:#F1EACF ;
-border-radius: 2px;
-width: 65%;
-box-shadow: 0 .125rem .5rem rgba(0,0,0,.5);
-}
 
 .project-heading{
 margin:20px;
@@ -338,14 +330,15 @@ margin-top:30px;
 margin-bottom:30px;
 width:50%;
 border-bottom: 1px solid rgba(0,0,0,.25); 
-padding:40px 20px 30px 20px; 
+padding:30px 20px 30px 20px; 
 }
 
 .project-txt-card{
-height:600px;
+height:45%;
 max-width:40%;
 margin-left:5%;
 margin-right:5%;
+margin-top:3%;
 border-radius:5px;
 background-color:#FFFAE7;
 box-shadow: 0 .125rem .5rem rgba(0,0,0,.5);
@@ -359,16 +352,17 @@ box-shadow: 0 .125rem .5rem rgba(0,0,0,.5);
 width:100%;
 }
 
-#project-highlights > .hlight-card > .row{
+.hlight-card > .row{
 margin:0;
 }
 
-#project-highlights > .hlight-card > .row > .col{
-width:40%;
+.hlight-card > .row > .col{
+width:45%;
 
 }
 
 .pjtxtra-card{
+max-width:45%;
 margin-bottom:20px;
 }
 
@@ -390,23 +384,23 @@ font-size: .95rem;
 }
 
 .hlight-xtra{
-height:220px;
+height:250px;
 border-radius: 2px;
 background-color:#FFFAE7;
+width:85%;
+margin:auto auto auto auto;
 box-shadow: 0 .125rem .5rem rgba(0,0,0,.5);
 }
 
-#project-highlights > .hlight-card > .project2 > .col > .hlight-xtra > .card-column{
+.hlight-card > .project2 > .col > .hlight-xtra > .card-column{
 height:65px;
-margin-top:32px;
+margin:32px 1vw auto 1vw;
 border:1px solid black;
-margin-right: 15px;
-margin-left: 15px;
 padding:5px;
 background-color:rgba(255,255,255,0.95);
 } 
 
-#project-highlights > .hlight-card > .project2 > .col > .hlight-xtra > .card-column > .card{
+.hlight-card > .project2 > .col > .hlight-xtra > .card-column > .card{
 height:50px;
 width:50px;
 margin:2px;
@@ -432,13 +426,11 @@ box-shadow: 0 .125rem .5rem rgba(0,0,0,.5);
 
 }
 
-.cc-att{
-font-size: .75rem;
-margin-left:5%;
-margin-right:5%;
+.butn{
+margin-top:2.5px;
+margin-bottom:12.5px;
 }
 
-
 .project-txt-card > .btn:hover{
 color:white;
 background-color: #6A0003;
@@ -505,30 +497,12 @@ background-color: #9A7857;
 box-shadow: 0 .125rem .55rem  rgba(0,0,0,.55);
 
 }
-/*  Top button CSS  */
-/*  
 
 
-.top-bttn > a > .btn{
-font-size:50px;
-background-color: rgba(255,255,255,.75);
-
-}
-.top-bttn{
-left:50px;
-bottom:50px;
-position:fixed;
-
-} 
-#top-button > a > .btn:hover{
-opacity:0.35;
-}
- */
- 
  /* CSS Breakpoints */
 
 
-@media screen and (max-width:1440px) and (min-width:1280px){
+@media screen and (max-width:1440px) and (min-width:1025px){
 
 body{
 font-size:16px;
@@ -560,6 +534,11 @@ left:20px;
 height:750px;
 }
 
+.mgx-aut{
+margin-right:auto;
+margin-left:auto;
+}
+
 /* Project Highlights */
 
 .hlight-card{
@@ -573,7 +552,6 @@ width: 80%;
 
 
 
-
 .hlight-img{
 width:16rem;
 height:10rem;
@@ -587,7 +565,7 @@ margin-left:auto;
 
 
 
-@media screen and (max-width: 1279px) and (min-width:768px){
+@media screen and (max-width: 1024px) and (min-width:600px){
 
 html{
 width:100%;
@@ -614,7 +592,6 @@ margin-right:0px;
 .summary-card{
 width:95%;
 height:200px;
-top:-320px;
 }
 
 .sum-icon{
@@ -627,9 +604,6 @@ margin:20px;
 
 /* Project Showcase/ Grid */
 
-#project-showcase{
-height:800px;
-}
 
 #grid-id{
 height:400px;
@@ -669,23 +643,30 @@ margin-top: 35.75px;
 padding-top:3rem;
 }
 
+.mgx-aut{
+margin-right:auto;
+margin-left:auto;
+}
+
 /* Project Highlights */
 
-#project-highlights{
-height:2680px;
-}
+
 
 .hlight-card{
 min-width:100%;
-height:2610px;
+height:180vh;
 }
 .project-txt-card{
-min-width:85%;
-height:475px;
+min-width:50%;
+height:95%;
 margin-right:auto;
 margin-left:auto;
 }
 
+.hlight-card > .project2 > .col > .hlight-xtra > .card-column{
+height:65px;
+margin:32px 15% auto 15%;
+}
 
 .hlight-xtra{
 margin-right:auto;
@@ -696,23 +677,21 @@ margin-left:auto;
 margin-right:auto;
 margin-left:auto;
 padding:10px;
-}
-
-.project2{
-
+height:10rem;
+width: 16rem;
 }
 
 
 }
 
-@media screen and (max-width: 767px) and (min-width:0px){
+@media screen and (max-width: 599px) and (min-width:0px){
 
 html{
 width:100%;
 }
 
 body{
-font-size:12px;
+font-size:14px;
 width:100vw;
 }
 
@@ -737,7 +716,7 @@ font-weight:600;
 
 nav{
 width:100%;
-height:180px;
+height:28vh;
 }
 
 .navbar-nav{
@@ -750,9 +729,6 @@ display:none;
 
 /* About Me */
 
-#about-me{
-height:1400px;
-}
 
 .intro-box{
 margin-top:0px;
@@ -770,7 +746,6 @@ width:150px;
 .summary-card{
 width:95%;
 height:500px;
-top:-550px;
 }
 
 .sum-icon{
@@ -797,9 +772,6 @@ width:90%;
 
 /* Project Showcase/ Grid */
 
-#project-showcase{
-height:800px;
-}
 
 #grid-id{
 height:550px;
@@ -810,12 +782,12 @@ height:550px;
 width:95%;
 top:-15px;
 left:-15px;
-height:780px;
+height:795px;
 }
 .fore-card{
 top:20px;
 left:20px;
-height:780px;
+height:795px;
 }
 
 #grid-id > .card-deck > .card{
@@ -840,29 +812,40 @@ padding-top:3rem;
 }
 
 .deck2{
-display:none !important; /* not ideal but d-flex uses !important */
+display:none;
+}
+
+.mgx-aut{
+margin-right:auto;
+margin-left:auto;
 }
 
 /* Project Highlights */
 
-#project-highlights{
-height:2600px;
-}
+
 
 .hlight-card{
 min-width:100%;
-height:2450px;
+height:350vh;
 }
 .project-txt-card{
 min-width:95%;
-height:610px;
+height:45%;
 margin-right:2.5%;
 margin-left:2.5%;
 }
 
 
 .hlight-xtra{
+height:57%;
+width:95%;
+margin-right:auto;
+margin-left:auto;
+}
 
+.hlight-xtra2{
+height:55%;
+width:95%;
 margin-right:auto;
 margin-left:auto;
 }
@@ -873,12 +856,26 @@ width: 14rem;
 margin-right:auto;
 margin-left:auto;
 padding:5px;
+margin:8% auto 10% auto;
+}
+
+.hlightxtra-head{
+padding:10px 10px 5px 10px;
 }
 
+.hlight-list{
+list-style-type:decimal;
+margin:15px;
+}
 
-.project2{
+.hlight-p{
+margin:10px;
+}
 
+.pjtxtra-card{
+min-width:95%;
 }
+
 /* Contact Info */
 
 .contact-title{
diff --git a/img/index.txt b/img/index.txt
deleted file mode 100644
index 94b454c..0000000
--- a/img/index.txt
+++ /dev/null
@@ -1 +0,0 @@
-This folder's for images
diff --git a/img/portfolio-thumb.png b/img/portfolio-thumb.png
index 265c1d8..563b02d 100644
Binary files a/img/portfolio-thumb.png and b/img/portfolio-thumb.png differ
diff --git a/index.html b/index.html
index 68c4470..9f66432 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!-- 
 Portfolio Layout Blank
-Version: 1.0.0
-Last Updated: 06/08/2018
+Version: 1.0.2
+Last Updated: 06/13/2018
 Requirements: 
 	1. Can access all of the content by scrolling (COMPLETED)
 	2. Can click different buttons that take the user to various social media sites (COMPLETED)
@@ -16,6 +16,7 @@
 	5. Make sure relative links are changed when deploying to CodePen (COMPLETED)
 -->
 
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -26,7 +27,7 @@
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!--for Bootstrap 4.1-->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <!-- For Font Awesome Icons -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- For jQuery -->
-<link href="https://fonts.googleapis.com/css?family=Work+Sans|Roboto:500" rel="stylesheet"> <!-- For Google Fonts: Raleway and Roboto -->
+<link href="https://fonts.googleapis.com/css?family=Work+Sans|Roboto:500" rel="stylesheet"> <!-- For Google Fonts: Work Sans and Roboto -->
 <link href="./css/style.css" rel="stylesheet" type="text/css">	<!-- Link to CSS -->
 <!-- jQuery scripts-->
 <script>
@@ -61,8 +62,8 @@ <h3 class="navbar-brand">WJ</h3>
 
 <!-- About me section -->
 
-<article class=" " id="about-me">
-<div class="intro-box">	
+
+<article class="intro-box"  id="about-me">	
 	<img src="./img/profile-pic.png" class=" mx-auto rounded-circle about-img" alt="Profile picture"></img>    
     <h1 class="d-flex  justify-content-center section-heading">Wilson Jiang</h1>	
 	<h3 class="d-flex  justify-content-center my-2">Software Developer</h3>
@@ -70,9 +71,9 @@ <h3 class="d-flex  justify-content-center my-2">Software Developer</h3>
 	Hello there! I’m a mechanical engineer and am currently training myself to become a software developer via Free Code Camp. Currently I’m learning the skills necessary to become a front end developer, but eventually I want to learn back end development and concentrate on UX design. Other than that, I do dance on the side and every once and a while photography.
 	</p>
 	
-</div>
 
-<div class="summary-card card mx-auto ">
+
+<div class="summary-card card mx-auto">
 
 	<div class="row">
 		<div class="sum-col col">
@@ -89,7 +90,7 @@ <h5 class="text-center sum-heading">Languages Used</h5>
             <p class="text-center">
             HTML, CSS
             </p>
-            <hr>
+            <hr class="sec-indiv">
 		</div>
         <div class="sum-col col">
             <i class="fas fa-edit d-flex justify-content-center sum-icon"></i>
@@ -108,8 +109,8 @@ <h5 class="text-center sum-heading">Things To Learn</h5>
 
 <!-- Project grid section -->
 
-<div id="project-showcase"> 
-<div class="back-card mx-auto">
+
+<div class="back-card mx-auto" id="project-showcase">
 <div class="fore-card">
 <h2 class="showcase-heading d-flex  justify-content-center text-center">
 Some Projects I've Done
@@ -120,27 +121,27 @@ <h2 class="showcase-heading d-flex  justify-content-center text-center">
 </p>
     
 <div class="mx-auto" id="grid-id">
-<div class="card-deck my-4 d-flex justify-content-center deck1">
-	<div class="card shadow-sm card-filled">
+<div class="card-deck my-4 mgx-aut deck1">
+	<div class="card shadow-sm card-filled ">
 		<img class="card-img-top" src=".\img\tribute-grid-thumb.png"></img>
 		<div class="card-img-overlay">
-			<h4 class="card-head-ct d-flex  justify-content-center">Tribute Page<sub style="font-size: 8px">[1]</sub></h4>
+			<h4 class="card-head-ct d-flex  justify-content-center">Tribute Page</h4>
 			<a class="card-link d-flex justify-content-center btn" href="https://codepen.io/wilsonj806/full/RQXaxE/"  target="_blank"><i class="fab fa-codepen my-auto"></i> CodePen Link</a>
 		</div>
 	</div>
 	
-	<div class="card shadow-sm">
+	<div class="card shadow-sm ">
 		<i class="fas fa-cogs mx-auto my-auto"></i>
 		<h4 class="card-img-overlay text-center card-head">Content coming soon!</h4>
 	</div>
 	
 	<div class="card shadow-sm">
 		<i class="fas fa-cogs mx-auto my-auto"></i>
-		<h4 class="card-img-overlay d-flex text-center justify-content-center card-head">Content coming soon!</h4>
+		<h4 class="card-img-overlay dy-flex text-center justify-content-center card-head">Content coming soon!</h4>
 	</div>
 </div>
 
-<div class="card-deck mb-4 d-flex justify-content-center deck2">
+<div class="card-deck mb-4 mgx-aut deck2">
 	<div class="card shadow-sm">
 		<i class="fas fa-cogs mx-auto my-auto"></i>
 		<h4 class="card-img-overlay d-flex text-center justify-content-center card-head">Content coming soon!</h4>
@@ -162,13 +163,13 @@ <h4 class="card-img-overlay d-flex text-center justify-content-center card-head"
 </div>
 </div>
 </div>
-</div>
+
 
 <!-- Latest project section-->
 
 
-<article class= "" id="project-highlights"> 
-<div class="hlight-card mx-auto">
+
+<article class="hlight-card mx-auto" id="project-highlights">
 	<h2 class="heading-spacing text-center mx-auto">Project Highlights</h2>
     
     
@@ -201,8 +202,7 @@ <h3 class="project-heading d-flex justify-content-center">Tribute Page</h3>
 		<p class="hlight-p">
         The project requirements might have been simple, but I did a bit extra in terms of the general layout and use of Bootstrap utilities.
 		</p>
-        <p class="cc-att">[1]<a href="https://www.flickr.com/photos/a-weidinger/22432907487/in/photostream/" target="_blank">"Ai Wei Wei"</a> used for the Tribute Page card - by Alfred Weidinger - <a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">CC BY</a> and cropped from original size</p> 
-		<a class="btn" href="https://codepen.io/wilsonj806/full/RQXaxE/" target="_blank"><i class="fab fa-codepen my-auto"></i> CodePen Link</a> 
+        	<a class="btn butn" href="https://codepen.io/wilsonj806/full/RQXaxE/" target="_blank"><i class="fab fa-codepen my-auto"></i> CodePen Link</a> 
 		</div>
 	</section>
     
@@ -212,7 +212,7 @@ <h3 class="project-heading d-flex justify-content-center">Tribute Page</h3>
     
 		<div class="col project-txt-card">
 		<h3 class="project-heading d-flex justify-content-center my-3">Personal Portfolio</h3>
-		<p class="hlight-p">The portfolio project is my second serious project as an aspiring web developer and the requirements were provided by Free Code Camp. The Free Code Camp requirements were pretty simple and they were as follows:
+		<p class="hlight-p">The portfolio project is my second serious project as an aspiring web developer and the requirements were provided by Free Code Camp. Note that the requirements have since been updated so these are the legacy requirements. The Free Code Camp legacy requirements for the project were as follows:
 		</P>
 			
 		<ul class="hlight-list ">
@@ -225,12 +225,13 @@ <h3 class="project-heading d-flex justify-content-center my-3">Personal Portfoli
 		<p class="hlight-p">
         For this project, I wanted to get more elaborate with it. I decided to learn and explore the options I had in terms of the design of the layout and color palette.
 		</p>
-		<a class="btn" href="https://github.com/wilsonj806/portfolio-mk1"  target="_blank"><i class="fab fa-github"></i> Live Repo</a> 
+		<a class="btn butn" href="https://medium.com/@wilsonjiang/portfolio-mk1-write-up-b7b304ef39f3"  target="_blank"><i class="fab fa-medium"></i> Write Up </a> 
+		<a class="btn butn" href="https://github.com/wilsonj806/portfolio-mk1"  target="_blank"><i class="fab fa-github"></i> Live Repo</a>
 		</div>
         
 		<div class="col pjtxtra-card">
 			<img class="hlight-img" src="./img/portfolio-thumb.png" alt="Portfolio thumbnail"></img>
-            <div class="hlight-xtra">
+            <div class="hlight-xtra hlight-xtra2">
                 <h4 class="d-flex justify-content-center hlightxtra-head">Color Palette</h4>
                 <div class="card-column d-flex justify-content-center">
                     <div class="card" style="background-color: #B99A7C"></div>
@@ -247,7 +248,6 @@ <h4 class="d-flex justify-content-center hlightxtra-head">Color Palette</h4>
             </div>
 		</div>
 	</section>
-</div>
 </article>
 
 <!-- Contact info section-->
@@ -267,10 +267,7 @@ <h2 class="contact-title d-flex  justify-content-center py-2 mx-auto">Contact Me
 	</div>
 </footer>
 
-<!-- Top button 
-<div id="top-button" class="top-bttn">
-	<a href="#home"> <button type="button" class="btn"><span><i class="fas fa-angle-up"></i></span></button></a>
-</div>
--->
+
+
 </body>
 </html>