Removed 2018 stuff
This commit is contained in:
Joe Wroten
parent
f2db0eb01a
commit
3dfe41eeab
42 changed files with 0 additions and 2759 deletions
8
Makefile
8
Makefile
|
|
@ -1,8 +0,0 @@
|
|||
|
||||
build: node_modules
|
||||
node index.js
|
||||
|
||||
node_modules: package.json
|
||||
npm install
|
||||
|
||||
.PHONY: build
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
|
||||
# Joe Wroten's Portfolio
|
||||
|
||||
```
|
||||
make build
|
||||
```
|
||||
|
|
|
|||
33
index.js
33
index.js
|
|
@ -1,33 +0,0 @@
|
|||
var Metalsmith = require('metalsmith');
|
||||
var markdown = require('metalsmith-markdown');
|
||||
var sass = require('metalsmith-sass');
|
||||
var layouts = require('metalsmith-layouts');
|
||||
var collections = require('metalsmith-collections');
|
||||
var permalinks = require('metalsmith-permalinks');
|
||||
|
||||
Metalsmith(__dirname)
|
||||
.metadata({
|
||||
title: "Joe Wroten",
|
||||
description: "",
|
||||
generator: "Metalsmith",
|
||||
url: "http://www.metalsmith.io/"
|
||||
})
|
||||
.source('./src')
|
||||
.destination('./build')
|
||||
.clean(false)
|
||||
.use(markdown())
|
||||
.use(collections({
|
||||
posts: {
|
||||
pattern: 'posts/*',
|
||||
sortBy: 'order'
|
||||
}
|
||||
}))
|
||||
.use(permalinks())
|
||||
.use(sass())
|
||||
.use(layouts({
|
||||
engine: 'handlebars',
|
||||
partials: 'partials'
|
||||
}))
|
||||
.build(function(err, files) {
|
||||
if (err) { throw err; }
|
||||
});
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
{{> header }}
|
||||
|
||||
<header class="grid" id="home">
|
||||
<div class="grid__col grid__col--1-of-2">
|
||||
{{{ contents }}}
|
||||
|
||||
<label for="morebio">
|
||||
<a>Bio...</a>
|
||||
</label>
|
||||
|
||||
<input type="checkbox" id="morebio" />
|
||||
|
||||
<aside id="bio">
|
||||
<img src="/assets/photo.jpg" alt="Rainbow haired smiling gentlemen" />
|
||||
<p>
|
||||
<small>
|
||||
Passionate interactive experience crafter breathing the merger of design and development.
|
||||
</small>
|
||||
</p>
|
||||
<p>
|
||||
<small class="secondary">
|
||||
💖 Remote gigs.
|
||||
<br />
|
||||
🎤 Happy to speak at your event.
|
||||
<br />
|
||||
👂 Open to hearing opportunities.
|
||||
</small>
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<img id="logo" class="grid__col grid__col--1-of-2" src="../../assets/site/logo.png" alt="" />
|
||||
</header>
|
||||
|
||||
<ul class="posts grid">
|
||||
{{#each collections.posts as |post|}}
|
||||
<li data-type="{{ post.type }}" class="grid__col grid__col--1-of-3 grid__col--m-1-of-2 grid__col--s-1-of-1">
|
||||
<figure onclick="window.location = '{{ post.path }}'">
|
||||
<div class="preview" style="background-image: url(../../assets/media/{{ post.preview }})">
|
||||
<h3>{{ post.title }}</h3>
|
||||
</div>
|
||||
<figcaption>
|
||||
{{ post.description }}
|
||||
<footer>
|
||||
{{ post.client }}
|
||||
<span class="secondary">
|
||||
Continue...
|
||||
</span>
|
||||
</footer>
|
||||
</figcaption>
|
||||
</figure>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
{{> footer }}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{{> header }}
|
||||
|
||||
<div id="content">
|
||||
<h1>
|
||||
<a href="/">< </a>{{ title }}
|
||||
</h1>
|
||||
{{{ contents }}}
|
||||
</div>
|
||||
|
||||
{{> footer }}
|
||||
42
node.txt
42
node.txt
|
|
@ -1,42 +0,0 @@
|
|||
|
||||
# Created by https://www.gitignore.io/api/node
|
||||
|
||||
### Node ###
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
jspm_packages
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
1978
package-lock.json
generated
1978
package-lock.json
generated
File diff suppressed because it is too large
Load diff
10
package.json
10
package.json
|
|
@ -2,19 +2,9 @@
|
|||
"name": "joe-wroten-portfolio",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "npm run vendor && make build",
|
||||
"vendor": "mkdir -p build && cp ./node_modules/toast-grid/css/grid.css ./build"
|
||||
},
|
||||
"dependencies": {
|
||||
"handlebars": "^4.0.5",
|
||||
"metalsmith": "^2.1.0",
|
||||
"metalsmith-layouts": "^1.4.1",
|
||||
"metalsmith-markdown": "^1.0.1",
|
||||
"metalsmith-permalinks": "^1.0.0",
|
||||
"toast-grid": "^0.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"metalsmith-collections": "^0.9.0",
|
||||
"metalsmith-sass": "^1.3.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
</main>
|
||||
|
||||
<script src="http://localhost:35729/livereload.js"></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-85374505-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{{ title }}</title>
|
||||
<link href="/grid.css" type="text/css" rel="stylesheet" />
|
||||
<link href="/app.css" type="text/css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Poiret+One|Rokkitt|Source+Code+Pro" rel="stylesheet">
|
||||
<meta name="description" content="{{ description }}">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
</head>
|
||||
<body class="intro-undecided">
|
||||
<script>
|
||||
document.getElementsByTagName('body')[0].className = localStorage.getItem('visited') ? '' : 'intro-play';
|
||||
localStorage.setItem('visited', true);
|
||||
</script>
|
||||
|
||||
<header class="text-code">
|
||||
<div class="container">
|
||||
[ <a href="mailto:joe@wroten.me">joe<span class="normal">@</span><span class="secondary">wroten.me</span></a> ] <span class="text-success">(master)</span> <span class="dim">~/portfolio</span>
|
||||
<br />
|
||||
<span class="text-success">⟩</span>
|
||||
<span id="intro-blink">█</span><span id="intro-cmd-1">n</span><span id="intro-cmd-2">p</span><span id="intro-cmd-3">m</span> <span id="intro-cmd-4">s</span><span id="intro-cmd-5">t</span><span id="intro-cmd-6">a</span><span id="intro-cmd-7">r</span><span id="intro-cmd-8">t</span>
|
||||
<br />
|
||||
<span id="intro-response-1">Starting up server, serving <a href="/">./</a> on port: 8080 ...</span>
|
||||
<br />
|
||||
<span id="intro-response-2">Asset served <a href="/assets/resume.pdf">./Resume.pdf</a> | Connections established: <a href="http://wrotenwrites.com/">wrotenwrites.com</a>, <a href="https://github.com/sharpshark28">github.com/sharpshark28</a></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
409
src/app.scss
409
src/app.scss
|
|
@ -1,409 +0,0 @@
|
|||
$success: #28C665;
|
||||
$primary: #87D2C8;
|
||||
$secondary: #FF0093;
|
||||
$secondary-dark: darken($secondary, 10%);
|
||||
$dark: #282A36;
|
||||
$light: #6A7380;
|
||||
$lightest: #B2BDCD;
|
||||
$max-width: 60rem;
|
||||
$spacing-md: 2rem;
|
||||
$qry-s: 480px;
|
||||
$qry-m: 700px;
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-$spacing-md);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: $dark;
|
||||
background: #F2F2F2 url(../../assets/site/bg.png);
|
||||
font-family: Rokkitt, serif;
|
||||
font-size: 20px;
|
||||
|
||||
&.intro-undecided,
|
||||
&:not(.intro-play) #intro-blink {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin-top: 2rem;
|
||||
width: 14rem;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 $spacing-md;
|
||||
max-width: $max-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: 'Poiret One', sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin: $spacing-md 0;
|
||||
}
|
||||
|
||||
h1 + h2 {
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
@media (max-width: $qry-m) {
|
||||
#logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
body > header {
|
||||
font-size: .7em;
|
||||
padding: 2rem 0;
|
||||
background: $dark;
|
||||
color: white;
|
||||
box-shadow: 0 .25rem 1rem .25rem rgba(0, 0, 0, .25);
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus span,
|
||||
&:hover span {
|
||||
outline: none;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
a .secondary {
|
||||
color: $secondary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a .normal {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.dim {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
body > main a {
|
||||
color: $secondary-dark;
|
||||
text-decoration: none;
|
||||
border-radius: 3px;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none;
|
||||
color: $secondary;
|
||||
}
|
||||
&:active {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: $max-width * .75;
|
||||
width: 100%;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.embed {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
|
||||
> iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text-code {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: $success;
|
||||
}
|
||||
|
||||
#content {
|
||||
animation: fadeInRight 500ms ease-out;
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
max-width: 300em;
|
||||
}
|
||||
|
||||
@media (min-width: $qry-s) {
|
||||
p {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
margin: 1em auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h6 {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
#home > * {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#morebio {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#bio {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 1s;
|
||||
|
||||
.secondary {
|
||||
color: $secondary-dark;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
float: left;
|
||||
padding-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
#morebio:checked + #bio {
|
||||
max-height: 10em;
|
||||
}
|
||||
|
||||
.posts {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
figure {
|
||||
margin: 0 0 $spacing-md 0;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 100ms, transform 100ms;
|
||||
box-shadow: 0 .25rem 1rem .25rem rgba(0, 0, 0, .075);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translateY(-.25rem) scale(1.05);
|
||||
box-shadow: 0 .25rem 1.5rem .25rem rgba(0, 0, 0, .075);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(.25rem) scale(.95);
|
||||
box-shadow: 0 .25rem .5rem .25rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 0;
|
||||
opacity: .2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
|
||||
h3 {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: .5em;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: $dark;
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: .9em;
|
||||
color: $light;
|
||||
display: inline-block;
|
||||
|
||||
footer {
|
||||
margin-top: 1em;
|
||||
color: $lightest;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
float: right;
|
||||
color: $secondary-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-type] figcaption {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
[data-type=bundle] {
|
||||
figure {
|
||||
width: 100%;
|
||||
|
||||
.preview {
|
||||
float: left;
|
||||
height: 2.5em;
|
||||
width: 83%;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
float: right;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $qry-s) {
|
||||
width: 98.5%;
|
||||
}
|
||||
|
||||
@media (max-width: $qry-m) {
|
||||
figure .preview {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-type=article] .preview {
|
||||
width: 100%;
|
||||
height: 9rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Intro
|
||||
*/
|
||||
.intro-play {
|
||||
> header {
|
||||
animation: introSlideUp 1s 5s backwards;
|
||||
-webkit-animation: introSlideUp 1s 5s backwards;
|
||||
}
|
||||
|
||||
#intro-blink {
|
||||
animation: introBlink 1s steps(5, start) 3 forwards;
|
||||
-webkit-animation: introBlink 1s steps(5, start) 3 forwards;
|
||||
}
|
||||
|
||||
[id*='intro-cmd-'],
|
||||
[id*='intro-response-'] {
|
||||
visibility: hidden;
|
||||
animation: introAppear 250ms 3s forwards;
|
||||
-webkit-animation: introAppear 250ms 3s forwards;
|
||||
}
|
||||
|
||||
#intro-cmd-2 {
|
||||
animation-delay: 3.1s;
|
||||
}
|
||||
#intro-cmd-2 {
|
||||
animation-delay: 3.2s;
|
||||
}
|
||||
#intro-cmd-3 {
|
||||
animation-delay: 3.3s;
|
||||
}
|
||||
#intro-cmd-4 {
|
||||
animation-delay: 3.4s;
|
||||
}
|
||||
#intro-cmd-5 {
|
||||
animation-delay: 3.5s;
|
||||
}
|
||||
#intro-cmd-6 {
|
||||
animation-delay: 3.6s;
|
||||
}
|
||||
#intro-cmd-7 {
|
||||
animation-delay: 3.7s;
|
||||
}
|
||||
#intro-cmd-8 {
|
||||
animation-delay: 3.8s;
|
||||
}
|
||||
#intro-response-1 {
|
||||
animation-delay: 3.9s;
|
||||
}
|
||||
#intro-response-2 {
|
||||
animation-delay: 4.0s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes introSlideUp {
|
||||
from {
|
||||
padding-bottom: 100vh;
|
||||
}
|
||||
to {
|
||||
padding-bottom: $spacing-md;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes introSlideUp {
|
||||
from {
|
||||
padding-bottom: 100vh;
|
||||
}
|
||||
to {
|
||||
padding-bottom: $spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes introBlink {
|
||||
to {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes introBlink {
|
||||
to {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes introAppear {
|
||||
to {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes introAppear {
|
||||
to {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 845 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 332 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 505 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 325 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 887 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 794 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 469 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 100 B |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
layout: index.html
|
||||
---
|
||||
|
||||
# Hey ya,
|
||||
## I'm Joe L. Wroten,
|
||||
|
||||
... an edge riding web tech architect aimed at realizing the best tools to communicate valuable information to the people who need it.
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
title: Animated Awards
|
||||
type: article
|
||||
order: 302
|
||||
preview: animated_awards/preview.gif
|
||||
description: Putting some pep into company values through animation.
|
||||
client: Laureate University
|
||||
layout: post.html
|
||||
---
|
||||
|
||||
<video controls>
|
||||
<source src="../../assets/media/animated_awards/laureate.mp4" type="video/mp4">
|
||||
<source src="../../assets/media/animated_awards/laureate.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
Laureate International Universities, a leader in private higher education, conducted its global leadership conference, including a celebration of the achievement of students who were finalists in a worldwide business school competition.
|
||||
|
||||
An understanding of the event, the award criteria, the students and their process was essential in being able to clearly communicate the context and excitement the winners deserved through kinetic typographic introductions.
|
||||
|
||||
###### After Effects
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
---
|
||||
title: Better Banking Platform
|
||||
type: article
|
||||
order: 201
|
||||
preview: better_banking_platform/preview.jpg
|
||||
description: Strengthening communities with better financial tools.
|
||||
client: Q2
|
||||
layout: post.html
|
||||
---
|
||||
|
||||
Building a banking platform that stands up to user expectations can be challenging. Simultaniously supporting the ease of use of _personal banking_ while providing advanced _commercial business_ needs is a major task to undertake.
|
||||
|
||||
|
||||
[Q2](https://www.q2ebanking.com/) provides a banking platform that interfaces personal and professional banking needs into a single tool. They then offer this as a customizable _software as a service_ to banks and credit unions big or small. Community banks who would have otherwise had to outsource or hire a team to build a platform with **potential security holes and poor usability are a thing of the past**.
|
||||
|
||||
|
||||
These solutions need to scale. A company like Q2 exposes you to tremendously skilled people who's talent rubs off on you as you learn to ship features and maintain the stability of an ever evolving application many depend on. I helped lead the drive towards integration and acceptance testing along with a **test driven development initiative to change the culture of development** for the better.
|
||||
|
||||
<p>
|
||||
<div class="embed">
|
||||
<iframe src="https://www.youtube.com/embed/swsX90wK5Ks?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
###### Javascript, Ember, Unit/Integration/Acceptance Testing, Test Driven Development, Sass
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
---
|
||||
title: Navigating Employee Benefits
|
||||
type: article
|
||||
order: 401
|
||||
preview: navigating_employee_benefits/preview.jpg
|
||||
description: Understanding your benefits package doesn't need to be hard.
|
||||
client: Johns Hopkins
|
||||
layout: post.html
|
||||
---
|
||||
|
||||
|
||||
|
||||
Johns Hopkins Health System introduced major changes to employee health benefits; changes that would require thousands of employees to manage their benefits differently and pay more.
|
||||
|
||||
The solution was a benefits analysis tool which reduced the overload of information into a relevant user experience enabling a better understanding of complex health insurance concepts, resulting in broader acceptance of negative change.
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
---
|
||||
title: Patient Education
|
||||
type: article
|
||||
order: 301
|
||||
preview: patient_education/preview.gif
|
||||
description: Creating a "Street View" for anatomy and "Youtube" for doctors.
|
||||
client: Rendia
|
||||
layout: post.html
|
||||
---
|
||||
|
||||
|
||||
|
||||
Patient education can be difficult. Plastic eyeballs as a teaching tool is a thing of the past. Modern media and technology can help solve this problem.
|
||||
|
||||
Formerly known as **Eyemaginations**, the company **[Rendia](https://rendia.com/)** offers high quality animations to _doctors_ to communicate complex medical topics to their _patients and their families_.
|
||||
|
||||
|
||||
|
||||
Doctors can build playlists of content, upload their own images/videos, and then share their creations with patients via email and by embedding them directly on their practice website. Or they can play this content right in their practice while taking advantage of onscreen drawing features with a mouse or touch device. The media player offers content protection, and patients may choose between multiple languages, closed captions, fullscreen, and more.
|
||||
|
||||
###### CODEIGNITER, CSS3, EMBER.JS, FOUNDATION, GIT, HTML5, ICON FONTS, JAVASCRIPT, JQUERY, PHP, SASS, VIDEO
|
||||
|
||||
[](https://share.rendia.com/theater/5276fa67-49cb-48f8-40da-45b94cd34364)
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
---
|
||||
title: Photos
|
||||
type: bundle
|
||||
order: 400
|
||||
preview: photography/preview.jpg
|
||||
layout: post.html
|
||||
---
|
||||
|
||||
|
||||
**Like a Mirror**: This is actually a reflection of a board floating on a lake, can you see it? Then can you UNsee it?
|
||||
|
||||
|
||||
**Line Rider**: Shot with a Nikon MD-12 B&W film camera for class at a carnival.
|
||||
|
||||
|
||||
**How High**: I was aiming for symmetry while having an exciting composition. The result seems to be quite successful.
|
||||
|
||||
|
||||
**Spring**: Taken with a Nikon D40.
|
||||
|
||||
|
||||
**Fun House**: Over the top fun.
|
||||
|
||||
|
||||
**Elephant Ear**: Was lucky to catch the sun at just the right place to shine through the veins of this elephant ear plant. Taken with a digital Fujifilm A800.
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
---
|
||||
title: Working With Nonprofits
|
||||
type: article
|
||||
order: 402
|
||||
preview: working_with_nonprofits/team.jpg
|
||||
description: Giving your time to make the world a better place.
|
||||
client: Various
|
||||
layout: post.html
|
||||
---
|
||||
|
||||
There's more than one way to volunteer in today's world. Offering one's skills as a web designer and developer is a great way to give back while tackling unique challenges.
|
||||
|
||||
## Code2College
|
||||
|
||||
### Preparing the Next Generation for Success
|
||||
|
||||
Homegrown tech talent is what Code2College is all about. Eager students from underrepresented groups are ready to learn STEM field topics and Code2College reaches out to those in the industry to help them get there.
|
||||
|
||||
|
||||
|
||||
Meeting with these excited young minds for interview preparation really changed the way I connect with potential hires.
|
||||
|
||||
Recently they've opened their cirriculum planning to outside collaboration. It's been an exciting challenge to carefully consider the best ways to teach the fundamentals of web development from "What is HTML?" to "I can build my own web app!".
|
||||
|
||||
## The SEED
|
||||
|
||||
### Adult & Family Learning Community
|
||||
|
||||
Through analytics it was apparent very few could find out how to sign up for classes on learning English - an all English website and the page being burried through subnavs was the likely culprit. We user tested some updated designs where a non-native speaker could jump right to a Spanish page on how to sign up for classes first.
|
||||
|
||||
|
||||
|
||||
We then **improved internationalization** for the rest of the website to support all the user personas we had discovered: _The Student, The Donor, and The Volunteer_. Next up was improving ways people can get involved either through their time or their dollar through a better workflow and cleaned up content.
|
||||
|
||||
|
||||
|
||||
Small tweaks made a world of difference for these users. Even ensuring the site ran on **HTTPS significantly raised the confidence of a potential donor**. I just about cried _tears of happiness when the thank you letters came in_ from the group for impact we made on their group and org.
|
||||
|
||||
|
||||
|
||||
## Other Nonprofits I've Worked With:
|
||||
|
||||
* The SEED
|
||||
* Aging Services Council
|
||||
* Association of Metropolitan Planning Organizations
|
||||
* Rosemount Center
|
||||
* Temple College Foundation
|
||||
* Prince George’s SPCA/HS
|
||||
* Keep Truckee Meadows Beautiful
|
||||
Loading…
Add table
Reference in a new issue