<!--==============================================
NOTE: The syntax highlighting shown here might
not match exactly what you see in your editor
===============================================-->
<html>
<head>
<meta charset="utf-8">
<title>Jamie Wilson - Designer/Developer. Stylesheets Corpus, Predawn, Norwester, and more. Designer/Developer. Stylesheets Corpus, Predawn, Norwester, and more. Dog-lover and avid reader of the internet—it's pretty good so far.</title>
<meta name="description" content="Designer/Developer. Stylesheets Corpus, Predawn, Norwester, and more. Dog-lover and avid reader of the internet—it's pretty good so far.">
<meta name="keywords" content="jamie wilson, jamie wilson dallas, jamiewilson, jmwlsn, @jmwlsn, jamiewilson.io, jamie wilson switch, designer, design, developer, dev, dallas, stylesheets, corpus, predawn, norwester, weld, welderwire, meteor, dewey">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google-site-verification" content="xICaRiFseDjdCoawimIDp8J8beVHQcEUr0i5thWv-Ho" />
<link rel="stylesheet" href="/css/main.css">
<link rel="canonical" href="http://jamiewilson.io//">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300|Alegreya+SC|Alegreya:400italic' rel='stylesheet' type='text/css'>
<link href="/img/favicon.png" rel="shortcut icon">
</head>
<body>
<header class="header column center-left color-white vh50 relative">
<section class="container w100">
<h1 class="header-intro">The Portfolio <span class="header-intro-italic">of</span> Jamie Wilson</h1>
<h2 class="header-description" data-fitter-happier-text>Designer/Developer</h2>
</section>
<section class="header-contact fs-base ptb1 w100 absolute bottom">
<div class="container row w100">
<ul class="row list-style-none">
<li class="mr1 hide-on-small">Get in touch:</li>
<li class="link-separator"><a href="http://twitter.com/jmwlsn">Twitter</a></li>
<li class="link-separator"><a href="http://github.com/jamiewilson">GitHub</a></li>
<li><a href="mailto:jamie@jamiewilson.io?subject=Hello.">Email</a></li>
</ul>
<span class="row center-right">
<svg class="favicon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path class="step1" d="M6 0h4v4h-4zM12 6h4v4h-4zM0 12h4v4h-4zM6 12h4v4h-4zM12 12h4v4h-4z"/>
</svg>
</svg>
</span>
</div>
</section>
</header>
{
// ========================== IMPORTANT ========================== //
// Use "predawn-DEV.sublime-theme" for Sublime Text versions 3062+ //
// =============================================================== //
// Activate Theme and Color Scheme
"theme": "predawn.sublime-theme",
"color_scheme": "Packages/Predawn/predawn.tmTheme",
// Panel Options
"predawn_findreplace_small": false,
"predawn_quick_panel_small": false,
// Sidebar Options
"predawn_sidebar_arrows": false,
"predawn_sidebar_large": false,
"predawn_sidebar_medium": false,
"predawn_sidebar_narrow": false,
"predawn_sidebar_small": false,
"predawn_sidebar_xlarge": false,
"predawn_sidebar_xsmall": false,
// Tabs Options
"predawn_tabs_active_underline": false,
"predawn_tabs_large": false,
"predawn_tabs_medium": false,
"predawn_tabs_small": false
}
//====================================================
// NOTE: The syntax highlighting shown here might
// not match exactly what you see in your editor
//====================================================
.column {
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: auto;
flex-wrap: nowrap;
@include small {
min-width: 100%;
}
}
.row {
display: flex;
flex: 1 1 auto;
height: auto;
flex-direction: row;
flex-wrap: wrap;
}
.row > .column {
@include small {
width: 100% !important;
}
}
//====================================================
// Gutters
//====================================================
// Add .gutters to .row/.column elements
.gutters { padding: $padding; }
// All direct descendants of .gutters get margin
.gutters > .column,
.gutters > .row {
margin: $margin;
@include small {
width: 100% !important;
min-width: 0;
}
}
// offset padding/margin to maintain width
.gutters > {
.w5 { width: calc(5% - #{$padding + $margin}); }
.w10 { width: calc(10% - #{$padding + $margin}); }
.w15 { width: calc(15% - #{$padding + $margin}); }
.w20 { width: calc(20% - #{$padding + $margin}); }
.w25 { width: calc(25% - #{$padding + $margin}); }
.w30 { width: calc(30% - #{$padding + $margin}); }
.w35 { width: calc(35% - #{$padding + $margin}); }
.w40 { width: calc(40% - #{$padding + $margin}); }
.w45 { width: calc(45% - #{$padding + $margin}); }
.w50 { width: calc(50% - #{$padding + $margin}); }
.w55 { width: calc(55% - #{$padding + $margin}); }
.w60 { width: calc(60% - #{$padding + $margin}); }
.w65 { width: calc(65% - #{$padding + $margin}); }
.w70 { width: calc(70% - #{$padding + $margin}); }
.w75 { width: calc(75% - #{$padding + $margin}); }
.w80 { width: calc(80% - #{$padding + $margin}); }
.w85 { width: calc(85% - #{$padding + $margin}); }
.w90 { width: calc(90% - #{$padding + $margin}); }
.w95 { width: calc(95% - #{$padding + $margin}); }
.w100 { width: calc(100% - #{$padding + $margin}); }
}
//====================================================
// NOTE: The syntax highlighting shown here might
// not match exactly what you see in your editor
//====================================================
Template.post_item.helpers({
// current user created this post
ownsPost: function() {
return this.createdBy === Meteor.userId();
},
// current user has upvoted this post
upvoted: function() {
var userId = Meteor.userId();
if (_.include(this.upvoters, userId))
return true;
},
hash: function() {
url = this.link;
secret = Meteor.settings.public.screenshotMachineSecret;
var hash = CryptoJS.MD5(url + secret).toString();
return hash;
}
});
Template.post_item.onRendered(function(){
// initialize imagesLoaded on screenshot elements
var screenshot = imagesLoaded(".screenshot");
// remove loading animation as each image loads
screenshot.on('progress', function(instance, image) {
// TOOD: get loading item without prev()
var item = $(image.img).prev();
item.fadeOut(300);
});
});
Template.post_item.events({
'click .js-upvote': function(e) {
e.preventDefault();
e.stopPropagation();
var userId = Meteor.userId();
// if user is logged in
if (userId && (Meteor.user().emails[0].verified === true)) {
// call upvote meteor method on click
Meteor.call('upvote', this._id);
// track event with Segment
analytics.track('Upvoted');
} else if (userId && Meteor.user().emails[0].verified === false) {
// give user option to resend verify email
verifyEmailModal();
} else {
// open login modal instead
openModal();
}
},
'click .js-downvote': function(e) {
e.preventDefault();
e.stopPropagation();
// if user is logged in
var userId = Meteor.userId();
if (userId && (Meteor.user().emails[0].verified === true)) {
// call upvote meteor method on click
Meteor.call('downvote', this._id);
// track event with Segment
analytics.track('Downvoted');
} else if (userId && Meteor.user().emails[0].verified === false) {
// give user option to resend verify email
verifyEmailModal();
} else {
// open login modal instead
openModal();
}
},
'click .js-edit': function(e) {
e.preventDefault();
e.stopPropagation();
var currentPostId = this._id;
var userId = Meteor.userId();
if (userId && (Meteor.user().emails[0].verified === true)) {
Router.go('edit', {_id: currentPostId});
} else {
verifyEmailModal();
}
}
});