Merge pull request #24 from wilsonj806/upgd/redesign-v4

Upgd/redesign v4

gridsome.config.js

@@ -8,16 +8,6 @@ module.exports = {
   siteName: 'Wilson Jiang',
   plugins: [
     // NOTE Remark/ Gridsome doesn't like it if you don't consistently have the nested "layout" object in head(i.e have only one of: layout: { component: '', props })
-    {
-      // again similar to Webpack loader configs
-      use: '@gridsome/vue-remark',
-      options: {
-        // GraphQL type name
-        typeName: 'Wip',
-        // where to find your MD files
-        baseDir: './wip',
-      }
-    },
     {
       // again similar to Webpack loader configs
       use: '@gridsome/vue-remark',

src/components/BaseFooter.vue

@@ -1,12 +1,38 @@
 <template>
-  <footer>
-    <div class="section">
-      <p>
-        Built with <a class="link" href="https://gridsome.org/"><img src="../../img/gridsome-logo.svg" alt="gridsome logo"/> Gridsome</a> and <a class="link" href="https://vuejs.org/">Vue.JS</a>
-      </p>
-      <p>
-        {{ `&#169; Wilson Jiang ${year}`}}
-      </p>
+<footer>
+    <div class='socials'>
+      <p class='social-text'>Socials: </p>
+      <a
+        target="_blank"
+        aria-label='Github Profile Link'
+        rel='noopener noreferrer'
+        class="link-github link"
+        href="https://github.com/wilsonj806"
+      >
+        <font-awesome-icon :icon="['fab', 'github']" size="1x" /> Github
+      </a>
+      <a
+        target="_blank"
+        rel='noopener noreferrer'
+        aria-label='LinkedIn Profile Link'
+        class="link"
+        href="https://linkedin.com/in/wilsonj806"
+      >
+        <font-awesome-icon :icon="['fab', 'linkedin-in']" size="1x" /> LinkedIn
+      </a>
+      <a
+        target="_blank"
+        aria-label='AngelList Profile Link'
+        class="link"
+        rel='noopener noreferrer'
+        href="https://angel.co/wilson-jiang"
+      >
+        <font-awesome-icon :icon="['fab', 'angellist']" size="1x" /> AngelList
+      </a>
+    </div>
+    <div class='copyright'>
+      <p class='cr-text'>{{ `&#169; Wilson Jiang ${year}` }}</p>
+      <p class='cr-text'>Built with Vue and Gridsome!</p>
     </div>
   </footer>
 </template>
@@ -24,53 +50,69 @@ export default {
 
 <style scoped>
 footer {
-  margin-top: 2rem;
-  width: 100vw;
-  /* background-color: rgb(126, 126, 126); */
-  color: black;
+  height: 140px;
+  width: 100%;
+  border-top: 1px solid lightgrey;
+  padding-top: 32px;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: flex-start;
+  font-size: 16px;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 div {
-  width: 100%;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
+  margin: 0 32px;
 }
 
-img {
-  width: 1rem;
-  align-self: center;
-  margin-right: 0.125rem;
+.socials {
+  position: relative;
 }
 
-p {
-  margin: 0 0;
-  font-size: 0.825rem;
-}
 
-.link {
-  display: inline-flex;
-  align-items: baseline;
+.link:link, .link:visited {
+  color: rgb(1, 80, 18);
+  text-decoration: none;
+  padding: 8px;
 }
 
-.link:link {
-  text-decoration: none;
-  color: black;
+.link:hover {
+  text-decoration: underline;
 }
+/*
+.link:hover::after {
+  width: 100%;
+  right: auto;
+  left: 0;
+}
+
+.link::after{
+  content: '';
+  background: rgba(153, 0, 153, 0.85);
+  height: 50px;
+  opacity: 0.8;
+  position: absolute;
+  right: 50%;
+  top: 0;
+  transition: all 0.15s;
+  width: 0;
+  z-index: -2;
+} */
 
-.link:visited {
-  color: black;
+.copyright {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-end;
 }
 
-.link:hover {
-  text-decoration: underline;
+.cr-text {
+  margin: 8px;
 }
 
-@media only screen and (min-width: 1024px) {
-  div {
-    width: 70%;
-  }
+.social-text {
+  margin-top: 0;
+  margin-bottom: 16px;
 }
+
 </style>

src/components/BaseNav.vue

@@ -0,0 +1,26 @@
+<template>
+  <nav>
+    <div class='nav-header'>
+      <span>WJ</span>
+    </div>
+    <div class="nav-links">
+      <ul class='nav-list'>
+        <!-- <li><g-link to='/works'>Works</g-link></li> -->
+        <!-- <li><g-link to='/blog'>Blog</g-link></li> -->
+        <li class='nav-list-item'>
+          <!-- Fix the darkness on the hover state -->
+          <a class='nav-link' href='https://www.dropbox.com/s/soxnd60u5du2x66/Wilson-Jiang-Resume.pdf?dl=07&raw=1'>Resume</a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'BaseNav'
+}
+</script>
+
+<style src='../styles/nav.css' scoped>
+</style>