Browse Source

Initial commit

master
Noah Pederson 2 years ago
commit
f71619a16e
25 changed files with 12542 additions and 0 deletions
  1. +18
    -0
      .drone.yml
  2. +9
    -0
      .editorconfig
  3. +21
    -0
      .gitignore
  4. +29
    -0
      README.md
  5. +5
    -0
      babel.config.js
  6. +11792
    -0
      package-lock.json
  7. +50
    -0
      package.json
  8. BIN
      public/favicon.ico
  9. +19
    -0
      public/index.html
  10. +37
    -0
      src/App.vue
  11. BIN
      src/assets/astronomy-cosmos-dark.jpg
  12. BIN
      src/assets/clouds-conifer-daylight.jpg
  13. BIN
      src/assets/logo-square.png
  14. BIN
      src/assets/logo-white-square.png
  15. BIN
      src/assets/logo.png
  16. BIN
      src/assets/profile.jpg
  17. +17
    -0
      src/components/All.vue
  18. +107
    -0
      src/components/Header.vue
  19. +37
    -0
      src/components/Test.vue
  20. +40
    -0
      src/custom.scss
  21. +15
    -0
      src/main.js
  22. +34
    -0
      src/router.js
  23. +37
    -0
      src/views/About.vue
  24. +128
    -0
      src/views/Contact.vue
  25. +147
    -0
      src/views/Landing.vue

+ 18
- 0
.drone.yml View File

@ -0,0 +1,18 @@
kind: pipeline
name: default
steps:
- name: setup
image: node:11
commands:
- npm install
- name: test
image: node:11
commands:
- npm run test
- name: build
image: node:11
commands:
- npm run build
when:
event: [push, tag, deployment]

+ 9
- 0
.editorconfig View File

@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

+ 21
- 0
.gitignore View File

@ -0,0 +1,21 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

+ 29
- 0
README.md View File

@ -0,0 +1,29 @@
# packetlost
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

+ 5
- 0
babel.config.js View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/app'
]
}

+ 11792
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 50
- 0
package.json View File

@ -0,0 +1,50 @@
{
"name": "packetlost",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.17",
"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",
"babel-eslint": "^10.0.1",
"bulma": "^0.7.2",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

BIN
public/favicon.ico View File

Before After

+ 19
- 0
public/index.html View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="theme-color" content="#004E64">
<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">
<title>Packet Lost & Found</title>
</head>
<body>
<noscript>
<strong>We're sorry but packetlost doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

+ 37
- 0
src/App.vue View File

@ -0,0 +1,37 @@
<template>
<div id="app">
<!-- <Header /> -->
<transition name="fade" mode="out-in">
<router-view />
</transition>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
/* font-family: "Avenir", Helvetica, Arial, sans-serif; */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.fade-enter-active,
.fade-leave-active {
transition-duration: 0.3s;
transition-property: opacity;
transition-timing-function: ease;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>

BIN
src/assets/astronomy-cosmos-dark.jpg View File

Before After
Width: 2500  |  Height: 1519  |  Size: 271 KiB

BIN
src/assets/clouds-conifer-daylight.jpg View File

Before After
Width: 6004  |  Height: 3894  |  Size: 7.9 MiB

BIN
src/assets/logo-square.png View File

Before After
Width: 724  |  Height: 724  |  Size: 16 KiB

BIN
src/assets/logo-white-square.png View File

Before After
Width: 724  |  Height: 724  |  Size: 11 KiB

BIN
src/assets/logo.png View File

Before After
Width: 200  |  Height: 200  |  Size: 6.7 KiB

BIN
src/assets/profile.jpg View File

Before After
Width: 688  |  Height: 688  |  Size: 39 KiB

+ 17
- 0
src/components/All.vue View File

@ -0,0 +1,17 @@
<template>
<div id="wrapper">
</div>
</template>
<script>
export default {
name: 'All',
components: {
}
}
</script>
<style lang="scss">
</style>

+ 107
- 0
src/components/Header.vue View File

@ -0,0 +1,107 @@
<template>
<section class="hero is-primary is-small">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img :src="require('@/assets/logo-white-square.png')" alt="Logo" />
</a>
<!-- <span class="navbar-burger burger" data-target="navmenu" @click="navbarActive = !navbarActive">
<span></span>
<span></span>
<span></span>
</span> -->
</div>
<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">
<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">
<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">
<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">
<span class="icon is-large"><i class="fab fa-medium"></i></span>
<span class="hovershow">Medium</span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container">
<h1 class="title">
Noah Pederson
</h1>
<h2 class="subtitle">
Packet Lost &amp; Found
</h2>
</div>
</div>
<div class="hero-foot">
<nav class="tabs is-boxed">
<div class="container">
<ul>
<li>
<router-link to="/" class="navbar-item" :class="{ 'is-active': this.$route.path === '/' }">Home</router-link>
</li>
<li>
<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>
</li>
</ul>
</div>
</nav>
</div>
</section>
</template>
<script>
export default {
name: 'Header',
data () {
return {
}
}
}
</script>
<style scoped>
.navbar-item > span {
height: 100%;
}
.button > .hovershow {
max-width: 0;
position: relative;
visibility: hidden;
opacity: 0;
transition: max-width 1s, opacity 0.5s, visibility 1s;
display: inline-block;
margin: 0 auto;
overflow: hidden;
}
.button:hover > .hovershow {
visibility: visible;
opacity: 1;
max-width: 7rem;
}
</style>

+ 37
- 0
src/components/Test.vue View File

@ -0,0 +1,37 @@
<template>
<div id="wrapper">
<Header />
<div class="section">
<div class="tile is-ancestor">
<div class="tile is-parent is-vertical">
<div class="tile is-child box">
<p>Quis sint labore elit tempor ex ex nisi ad tempor officia sunt. Ullamco dolore ex eiusmod occaecat veniam nisi et. Incididunt aute sint amet aliquip sit ex. Occaecat reprehenderit veniam et adipisicing irure culpa nisi aliqua esse sunt id est do in.
Aliqua ipsum ullamco pariatur consectetur esse sunt nulla tempor sint officia. Anim laborum labore et eu Lorem commodo in sint esse amet consequat. In et ut duis anim esse eiusmod enim enim enim nostrud. Elit aute est reprehenderit eiusmod eu cillum eiusmod consequat et in. Exercitation qui non aliquip officia aliqua excepteur fugiat nisi. Dolore elit non esse voluptate et occaecat sunt aliqua et est ipsum adipisicing.
Anim commodo cupidatat excepteur elit ex exercitation ipsum. Consectetur duis irure nisi laboris non exercitation magna minim sunt do pariatur enim. Sint culpa deserunt Lorem adipisicing qui consequat irure occaecat veniam et laborum sint cillum. Adipisicing excepteur Lorem id sit ea aute id sit elit do ad.
Sint aliquip laborum nulla elit commodo dolor fugiat in aute excepteur. Id laboris non quis mollit. Magna nulla eu exercitation voluptate elit in.</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from '@/components/Header'
export default {
name: 'Test',
data () {
return {
}
},
components: {
Header
}
}
</script>
<style>
</style>

+ 40
- 0
src/custom.scss View File

@ -0,0 +1,40 @@
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
// Set your colors
//$primary: #4484CE;
$primary: #004E64;
$primary-invert: findColorInvert($primary);
//$info: #95BCEB;
$info: #9FFFCB;
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
$linkedin: #0077B5;
$linkedin-invert: findColorInvert($linkedin);
$transparent: rgba(255, 255, 255, 16);
// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
"white": ($white, $black),
"black": ($black, $white),
"light": ($light, $light-invert),
"dark": ($dark, $dark-invert),
"primary": ($primary, $primary-invert),
"info": ($info, $info-invert),
"success": ($success, $success-invert),
"warning": ($warning, $warning-invert),
"danger": ($danger, $danger-invert),
"transparent": ($transparent, $transparent),
"twitter": ($twitter, $twitter-invert),
"linkedin": ($linkedin, $linkedin-invert)
);
// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
// Import Bulma and Buefy styles
@import "~bulma";
//@import "~buefy/src/scss/buefy";

+ 15
- 0
src/main.js View File

@ -0,0 +1,15 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
Vue.component('copyright', {
template: ' <div class="container has-text-left has-text-weight-light has-text-grey-light">Copyright &copy; Noah Pederson {{ (new Date()).getFullYear() }}</div>'
})
new Vue({
router,
render: h => h(App),
style: ""
}).$mount('#app')

+ 34
- 0
src/router.js View File

@ -0,0 +1,34 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: () => import('./views/Landing.vue')
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
},
{
path: '/test/',
name: 'Test',
component: () => import('./components/Test.vue')
},
{
path: '/contact',
name: 'Contact',
component: () => import('./views/Contact.vue')
}
]
})

+ 37
- 0
src/views/About.vue View File

@ -0,0 +1,37 @@
<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>
</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>
</article>
</div>
</div>
</div>
</template>
<script>
import Header from '@/components/Header'
export default {
name: 'About',
components: {
Header
},
data () {
return {
showUnderConstructionMessage: true
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

+ 128
- 0
src/views/Contact.vue View File

@ -0,0 +1,128 @@
<template>
<div>
<Header />
<div class="section">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title">Want to get in contact?</h1>
<p class="has-text-justified">If you'd like to get in contact with me, the easiest way is through my <a class="is-link" href="https://www.linkedin.com/in/noah-pederson-bb4b26b6/">LinkedIn</a> or <a class="is-link" href="https://dev.to/chiefnoah">DEV</a> profiles,
but for convenience, I provide a simple form here.
</p>
<br />
<p class="has-text-justified">
If you're curious about the technical details, read on 😁
</p>
<br />
<p class="has-text-justified">
This form is backed by a simple REST web service written in the <a class="is-link" href="https://golang.org/">Go programming language</a>
and uses <a class="is-link" href="https://www.cockroachlabs.com/">CockroachDB</a> to store submissions,
all slapped into Docker images and hosted somewhere in the world 🙃
<br />
There currently is no monitoring or events fired off when a submission is received for now, so it's dependant
on me checking the contents of the database every so often.
</p>
</div>
<div class="column">
<form class="field" action="javascript:void(0);">
<label class="label" for="message">Message</label>
<div class="control">
<textarea class="textarea" id="message" v-model="message" placeholder="Hello world..."></textarea>
</div>
<div class="field">
<label class="label" for="email">Email</label>
<div class="control has-icons-left has-icons-right">
<input class="input" id="email" :class="{'is-danger': invalid_email}" @input="validate_email" v-model="email" type="email" placeholder="Email" value="">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right" v-if="invalid_email">
<i class="fas fa-exclamation-triangle"></i>
</span>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-success" :class="{ 'is-loading': loading, 'is-success': !submitted_error, 'is-danger': submitted_error }" :disabled="invalid_email || message === '' || email === ''" @click="submit_request">Submit</button>
</div>
</div>
</form>
<article v-if="submitted || submitted_error" class="message" :class="{ 'is-success': !submitted_error, 'is-danger': submitted_error }">
<div class="message-header">
<p v-if="submitted && !submitted_error">Success</p>
<p v-if="submitted_error">Error</p>
<button class="delete" aria-label="delete" @click="submitted_error = submitted = false"></button>
</div>
<div class="message-body">
{{ submitted_message }}
</div>
</article>
</div>
</div>
</div>
</div>
<copyright />
</div>
</template>
<script>
import Header from '@/components/Header'
export default {
name: 'Contact',
components: {
Header
},
data () {
return {
invalid_email: false,
email: '',
message: '',
loading: false,
submitted: false,
submitted_error: false,
submitted_message: ''
}
},
computed: {
},
methods: {
validate_email: function (e) {
this.invalid_email = !e.target.validity.valid
},
submit_request: function (e) {
this.loading = true
const url = '/api/contact_submission'
let data = {
email: this.email,
message: this.message
}
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'content-type': 'application/json; charset=UTF-8'
}
})
.then(data => { return data.status })
.then(res => {
this.loading = false
if (res === 202) {
this.submitted = true
this.submitted_error = false
this.message = ''
this.email = ''
this.submitted_message = 'Your message was received! Thank you for reaching out, I will be in contact as soon as possible 🙂'
} else {
this.submitted_message = 'There was an issue submitting your request 😥 Please try again later or reach out using my LinkedIn profile.'
this.submitted_error = true
}
})
.catch(error => console.log(error))
}
}
}
</script>
<style lang="scss">
</style>

+ 147
- 0
src/views/Landing.vue View File

@ -0,0 +1,147 @@
<template>
<div class="hero is-fullheight is-bigscrollable" id="hero-stars">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item has-background-black has-text-grey-lighter">
<img :src="require('@/assets/logo-white-square.png')" alt="Logo" />
</a>
</div>
<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 is-white" 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">
<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">
<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">
<span class="icon is-large"><i class="fab fa-medium"></i></span>
<span class="hovershow">Medium</span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column has-text-centered is-one-third">
<figure class="image is-128x128 is-inline-block">
<img class="is-rounded has-border" :src="require('@/assets/profile.jpg')" alt="Profile" />
</figure>
<hr class="divider" />
<h1 class="title has-text-grey-lighter">
Noah Pederson
</h1>
<h2 class="subtitle has-text-grey-light">
Software Engineer
</h2>
</div>
<!-- Divider -->
<div class="column is-one-third"></div>
<!-- /Divider -->
<div class="column is-one-third">
<h3 class="is-size-3 has-text-grey-lighter has-text-justified">Doing...</h3>
<br/>
<br/>
<ul class="has-text-white-ter is-size-5 has-text-justified">
<li>Python, Golang, Java, C#</li>
<li>React, Vue, and JQuery</li>
<li>Django, Flask, E2EE, .NET Core</li>
<li>Distributed and asyncronous systems</li>
<li>Devops, Linux, and Networking</li>
</ul>
<br/>
<router-link class="button is-outlined is-transparent has-text-white-ter has-text-weight-bold is-pulled-right"
style="margin-top:32px;" to="/about">More...</router-link>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<copyright />
</div>
</div>
</template>
<script>
export default {
name: 'Hero'
}
</script>
<style lang="scss">
@import "../custom.scss";
#hero-stars {
// Background image courtesy of https://www.pexels.com/photo/photography-of-night-sky-733475/
background-image: url("../assets/astronomy-cosmos-dark.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#hero-mountains {
// Background image courtesy of https://www.pexels.com/photo/photography-of-night-sky-733475/
background-image: url("../assets/clouds-conifer-daylight.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.navbar-item > span {
height: 100%;
}
.button > .hovershow {
max-width: 0;
position: relative;
visibility: hidden;
opacity: 0;
transition: max-width 1s, opacity 0.5s, visibility 1s;
display: inline-block;
margin: 0 auto;
overflow: hidden;
}
.button:hover > .hovershow {
visibility: visible;
opacity: 1;
max-width: 7rem;
}
.divider {
width: 100%;
}
.has-border {
border-style: solid;
border-width: 2px;
border-color: $border;
}
ul {
list-style-type: circle;
}
.is-transparent {
background: hsla(255, 100%, 100%, .1);
}
$button-hover-color: hsla(255, 100%, 100%, .5);
</style>

Loading…
Cancel
Save