chiefnoah
/
packetlost
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Updates about page, starts adding project list

master
Noah Pederson 1 year ago
parent
f71619a16e
commit
2c3eea9b47
9 changed files with 2274 additions and 1220 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2066
    -1191
      package-lock.json
  2. +8
    -8
      package.json
  3. +2
    -1
      public/index.html
  4. BIN
      src/assets/seattle-cropped.jpg
  5. +53
    -9
      src/components/Header.vue
  6. +32
    -0
      src/components/ProjectCard.vue
  7. +5
    -0
      src/router.js
  8. +21
    -11
      src/views/About.vue
  9. +87
    -0
      src/views/Projects.vue

+ 2066
- 1191
package-lock.json
File diff suppressed because it is too large
View File


+ 8
- 8
package.json View File

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


+ 2
- 1
public/index.html View File

@ -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 View File

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

+ 53
- 9
src/components/Header.vue View File

@ -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
- 0
src/components/ProjectCard.vue View File

@ -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
- 0
src/router.js View File

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


+ 21
- 11
src/views/About.vue View File

@ -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
- 0
src/views/Projects.vue View File

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

Write Preview
Loading…
Cancel
Save