Browse Source

Updates about page, starts adding project list

master
Noah Pederson 2 years ago
parent
commit
2c3eea9b47
  1. 3257
      package-lock.json
  2. 16
      package.json
  3. 3
      public/index.html
  4. BIN
      src/assets/seattle-cropped.jpg
  5. 62
      src/components/Header.vue
  6. 32
      src/components/ProjectCard.vue
  7. 5
      src/router.js
  8. 32
      src/views/About.vue
  9. 87
      src/views/Projects.vue

3257
package-lock.json
File diff suppressed because it is too large
View File

16
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,

3
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>

BIN
src/assets/seattle-cropped.jpg

After

Width: 2168  |  Height: 2891  |  Size: 532 KiB

62
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>

32
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>

5
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',

32
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>

87
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>
Loading…
Cancel
Save