loading projects

Author: jschnapper

old_personal_site/assets/css/style.css

@@ -146,7 +146,7 @@ code {
 }
 
 header {
-	margin-top: 48px;
+	margin-top: 32px;
 }
 
 header#article {
@@ -269,6 +269,7 @@ nav {
 #project-container a {
 	text-decoration: none;
 	color: inherit;
+	display: none;
 }
 
 .project-description {
@@ -304,6 +305,32 @@ nav {
 	font-size: 16px;
 }
 
+#social {
+    margin-top: 8px;
+    display: flex;
+    transition: 0.2s;    
+}
+
+.social__wrapper {
+    height: 30px;
+    width: 30px;
+    margin-right: 24px;
+
+}
+
+.social__logo {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+    transition: 0.2s;
+    cursor: pointer;    
+    filter: saturate(0);
+}
+
+.social__logo:hover {
+    filter: saturate(1);
+}
+
 @keyframes unhideProject {
 	0% {
 		height: 0;
@@ -433,6 +460,10 @@ nav {
 		top: 50%;
 		transform: translateY(-25%);
 	}
+    
+    #social {
+        justify-content: center;
+    }
 }
 
 

old_personal_site/assets/img/Octocat.png

@@ -1,10 +1,15 @@
 $(document).ready(function() {
 
+	// prevent layout from changing
+    $('#project-container a').each(function(project) {
+    	 $(this).delay(100 * project).fadeIn('slow');
+    });
+
 	$(".nav-item").click(function() {
 		if ($(this).hasClass("nav-inactive")) {
 			$(".nav-item").toggleClass("nav-inactive");
 			$(".nav-item").removeClass("nav-active");
 			$(this).addClass("nav-active");
 		}
- 	})
-})
+ 	});
+});

old_personal_site/assets/img/linkedIn.png

@@ -16,6 +16,18 @@
 				<li class="description">// Academic Adventurer who loves movies and funky/jazzy music</li>
 				<li class="description">// 4th Year at UC Berkeley studying cognitive science &amp; computer science</li>
 			</ul>
+            <div id="social">
+                <a href="https://linkedin.com/in/jarrod-schnapper-77b337b5" target="_blank">
+                    <div class="social__wrapper">
+                        <img class="social__logo" src="assets/img/linkedIn.png">
+                    </div>
+                </a>
+                <a href="https://github.com/jschnapper" target="_blank">
+                    <div class="social__wrapper">
+                        <img class="social__logo" src="assets/img/Octocat.png">
+                    </div>
+                </a>
+            </div>
 		</header>
 		<nav>
 			<div class="nav-item">Projects &amp; Experience</div>
@@ -38,12 +50,12 @@
 			<a href="projects/emr_us/index.html">
 				<div class="project">
 					<div class="project-text">
-						<div class="project-title">emrUS</div>
-						<div class="project-description">Login screen for Emergency Medical Record Company. Created for UI Practice.</div>
+						<div class="project-title">EMRus</div>
+						<div class="project-description">Login screen for Emergency Medical Record company. Created for UI Practice.</div>
 					</div>
 					<div class="image-wrapper">
 						<div class="project-title project-hidden">
-							<p>Lessons in CSS</p>
+							<p>EMRus</p>
 						</div>
 						<img src="assets/img/emr.png">
 					</div>
@@ -53,7 +65,7 @@
 				<div class="project">
 					<div class="project-text">
 						<div class="project-title">Personal Everything Assistant</div>
-						<div class="project-description">A satirical website for an IOT product -- a commentary on current technological trends</div>
+						<div class="project-description">A satirical website for an IOT product -- a commentary on current technological trends. My first website.</div>
 					</div>
 					<div class="image-wrapper">
 						<div class="project-title project-hidden">
@@ -107,7 +119,10 @@
 			</a>
 		</div>
 	</div>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script
+  src="https://code.jquery.com/jquery-3.3.1.min.js"
+  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+  crossorigin="anonymous"></script>
 <script src="assets/js/script.js"></script>
 </body>
 </html>

old_personal_site/assets/js/script.js

@@ -1,7 +1,4 @@
-/* 
-Codepen results page 
-and general selectors
-*/    
+
 .page {
   /* Position */
   display: flex;