Updates about page, starts adding project list

2 years ago · 2c3eea9b47
9 changed files with 2274 additions and 1220 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -8,20 +8,20 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "vue": "^2.5.17",
+    "vue": "^2.6.10",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.0",
-    "@vue/cli-service": "^3.2.0",
+    "@vue/cli-plugin-babel": "^3.5.5",
+    "@vue/cli-plugin-eslint": "^3.5.1",
+    "@vue/cli-service": "^3.5.3",
    "babel-eslint": "^10.0.1",
-    "bulma": "^0.7.2",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
+    "bulma": "^0.7.4",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.2.2",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
--- a/public/index.html
+++ b/public/index.html
@ -7,6 +7,7 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+    <!-- <link rel="stylesheet" href="https://unicons.iconscout.com/release/v0.0.3/css/unicons.css"> -->
    <title>Packet Lost & Found</title>
  </head>
  <body>
@ -16,4 +17,4 @@
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
-</html>
+</html>
--- a/src/assets/seattle-cropped.jpg
+++ b/src/assets/seattle-cropped.jpg
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@ -5,7 +5,10 @@
        <div class="container">
          <div class="navbar-brand">
            <a class="navbar-item">
-              <img :src="require('@/assets/logo-white-square.png')" alt="Logo" />
+              <img
+                :src="require('@/assets/logo-white-square.png')"
+                alt="Logo"
+              />
            </a>
            <!-- <span class="navbar-burger burger" data-target="navmenu" @click="navbarActive = !navbarActive">
              <span></span>
@ -13,29 +16,52 @@
              <span></span>
            </span> -->
          </div>
-          <div id="navmenu" class="navbar-menu">
+          <div
+            id="navmenu"
+            class="navbar-menu"
+          >
            <div class="navbar-end">
              <!-- Github, Twitter, Dev.to, etc. links here -->
              <span class="navbar-item">
-                <a href="https://github.com/chiefnoah" class="button" target="_blank" rel="noopener">
+                <a
+                  href="https://github.com/chiefnoah"
+                  class="button"
+                  target="_blank"
+                  rel="noopener"
+                >
                  <span class="icon is-large"><i class="fab fa-github"></i></span>
                  <span class="hovershow">GitHub</span>
                </a>
              </span>
              <span class="navbar-item">
-                <a href="https://dev.to/chiefnoah" class="button is-black" target="_blank" rel="noopener">
+                <a
+                  href="https://dev.to/chiefnoah"
+                  class="button is-black"
+                  target="_blank"
+                  rel="noopener"
+                >
                  <span class="icon is-large"><i class="fab fa-dev"></i></span>
                  <span class="hovershow has-text-weight-bold">DEV</span>
                </a>
              </span>
              <span class="navbar-item">
-                <a href="https://www.linkedin.com/in/noah-pederson-bb4b26b6/" class="button is-linkedin is-inverted" target="_blank" rel="noopener">
+                <a
+                  href="https://www.linkedin.com/in/noah-pederson-bb4b26b6/"
+                  class="button is-linkedin is-inverted"
+                  target="_blank"
+                  rel="noopener"
+                >
                  <span class="icon is-large"><i class="fab fa-linkedin"></i></span>
                  <span class="hovershow">LinkedIn</span>
                </a>
              </span>
              <span class="navbar-item">
-                <a href="https://medium.com/@packetlost" class="button is-white" target="_blank" rel="noopener">
+                <a
+                  href="https://medium.com/@packetlost"
+                  class="button is-white"
+                  target="_blank"
+                  rel="noopener"
+                >
                  <span class="icon is-large"><i class="fab fa-medium"></i></span>
                  <span class="hovershow">Medium</span>
                </a>
@ -60,13 +86,31 @@
        <div class="container">
          <ul>
            <li>
-              <router-link to="/" class="navbar-item" :class="{ 'is-active': this.$route.path === '/' }">Home</router-link>
+              <router-link
+                to="/"
+                class="navbar-item"
+                :class="{ 'is-active': this.$route.path === '/' }"
+              >Home</router-link>
            </li>
+            <!-- <li>
+              <router-link
+              to="/projects"
+              class="navbar-item"
+              :class="{ 'is-active': this.$route.path === '/projects'}">Projects</router-link>
+            </li> -->
            <li>
-              <router-link to="/about" class="navbar-item" :class="{ 'is-active': this.$route.path === '/about' }">About</router-link>
+              <router-link
+                to="/about"
+                class="navbar-item"
+                :class="{ 'is-active': this.$route.path === '/about' }"
+              >About</router-link>
            </li>
            <li>
-              <router-link to="/contact" class="navbar-item" :class="{ 'is-active': this.$route.path === '/contact' }">Contact</router-link>
+              <router-link
+                to="/contact"
+                class="navbar-item"
+                :class="{ 'is-active': this.$route.path === '/contact' }"
+              >Contact</router-link>
            </li>
          </ul>
        </div>
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@ -0,0 +1,32 @@
+<template>
+  <div class="card box">
+    <div v-if="image" class="card-image">
+      <figure class="image is-4by3">
+        <img
+          :src="image"
+          :alt="title"
+        >
+      </figure>
+    </div>
+    <div class="card-content">
+      <h4 class="title is-4">{{ title }}</h4>
+      <p>{{ description }}</p>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProjectCard',
+  data () {
+    return {
+
+    }
+  },
+  props: ['title', 'description', 'image']
+}
+</script>
+
+<style>
+</style>
--- a/src/router.js
+++ b/src/router.js
@ -12,6 +12,11 @@ export default new Router({
      name: 'home',
      component: () => import('./views/Landing.vue')
    },
+    {
+      path: '/projects',
+      name: 'Projects',
+      component: () => import('./views/Projects.vue')
+    },
    {
      path: '/about',
      name: 'About',
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -1,19 +1,29 @@
 <template>
  <div>
    <Header />
-    <div class="section">
-      <div class="container">
-        <article v-if="showUnderConstructionMessage" class="message is-warning">
-          <div class="message-header">
-            <p><i class="fa fa-exclamation-triangle"></i> Under Construction <i class="fa fa-exclamation-triangle"></i></p>
-            <button class="delete" aria-label="delete" @click="showUnderConstructionMessage = false"></button>
+    <section class="section">
+        <div class="columns">
+          <div class="column is-2">
          </div>
-          <div class="message-body">
-            <strong>Welcome to my site!</strong><br />It's unfortunately still under construction. Please check out my social media links available at the top!
+          <div class="column is-4 box">
+            <figure class="image is-3by4">
+              <img :src="require('@/assets/seattle-cropped.jpg')" />
+            </figure>
          </div>
-        </article>
-      </div>
-    </div>
+          <div class="column is-4">
+            <!-- <h3 class="title is-3">
+              Noah Pederson
+              </h3> -->
+            <p>
+              Noah is a software engineer hailing from the isthmus city of Madison, WI. He is a master of REST interfaces, with a strong understanding of enterprise security, devops, distributed systems, Linux, and microservices. Noah is adept at communicating with business stakeholders, presenting technical information effectively during sprint reviews and throughout the development process.
+
+              When he's not working, Noah spends his time experimenting with new technologies, reading, and playing video games.
+            </p>
+          </div>
+          <div class="column is-2">
+          </div>
+        </div>
+    </section>
  </div>
 </template>

--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@ -0,0 +1,87 @@
+<template>
+  <div>
+    <Header />
+    <div class="section">
+      <h2 class="title is-2">
+        Projects
+      </h2>
+      <div class="tile is-ancestor">
+        <div class="tile is-parent flex-container">
+          <div
+            class="tile is-child is-3"
+            v-for="project in projects"
+            v-bind:key="project.id"
+          >
+            <ProjectCard
+              v-bind:title="project.title"
+              v-bind:description="project.description"
+              v-bind:image="project.image"
+              class
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from '@/components/Header'
+import ProjectCard from '@/components/ProjectCard'
+export default {
+  name: 'Projects',
+  components: {
+    Header,
+    ProjectCard
+  },
+  data: () => {
+    return {
+      projects: [
+        {
+          id: 1,
+          title: "Cloud TV",
+          description: "Technologies: Python, Swagger, Connexion, Redis, MySQL, Couchbase\nOrder processing and managed device provisioning. Integrates with BSS and vendor APIs to control content and device access.",
+          // image: require('@/assets/logo.png')
+        },
+        {
+          id: 2,
+          title: "test project",
+          description: "Laboris ut consequat veniam voluptate sunt sit pariatur mollit magna incididunt esse.",
+          // image: require('@/assets/logo.png')
+        },
+        {
+          id: 3,
+          title: "test project",
+          description: "Laboris ut consequat veniam voluptate sunt sit pariatur mollit magna incididunt esse.",
+          image: require('@/assets/logo.png')
+        },
+        {
+          id: 4,
+          title: "test project",
+          description: "Laboris ut consequat veniam voluptate sunt sit pariatur mollit magna incididunt esse.",
+          image: require('@/assets/logo.png')
+        },
+        {
+          id: 5,
+          title: "test project",
+          description: "Laboris ut consequat veniam voluptate sunt sit pariatur mollit magna incididunt esse.",
+          // image: require('@/assets/logo.png')
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+li {
+  list-style: none;
+}
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.flex-container > div {
+  padding: 1.25rem;
+}
+</style>