Commit bc560718 authored by Ben Hong's avatar Ben Hong

Maintain a single source of truth on GitHub

parent a2b9ef11
# Project dependencies
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.cache/
# Build directory
/public
.DS_Store
yarn-error.log
yarn.lock
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Never Finished - BenCodeZen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon shortcut" href="img/favicon/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon/favicon-96x96.png">
<link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../../../css/application.css">
</head>
<!--
_/| _ |\_
_/_ | _|\\ | _\
_/_/| / / \|\ |\_\_
_/_/ |/ / _ \/\| \_\_
_/_/ || | | \o/ || \_\_
/_/ | | |\ | \_ V /| | | \_\
// ||| | \_/ \__/ | ||| \\
// __| ||\ \ / /|| |__ \\
//_/ \|||| \/\\ //\/ ||||/ \_\\
/// \\\\/ / \ \//// \\\
|/ \/ | | | \/ \|
/_| | |_ \
///_| |_||\_ \
|//||/||\/||\| WELCOME TO MY SOURCE CODE.
/ \/|||/||/\/ FEEL FREE TO LET ME KNOW IF YOU
/|/\| \/ HAVE ANY QUESTIONS.
\/ | -BH
Artist: Unknown
-->
<body class="top">
<header>
<a href="/">
<img class="logo" src="../../../img/logo.svg" alt="Gold hexagon logo with BH initials">
</a>
<h1 class="sr-only">Benjamin Hong's Portfolio</h1>
</header>
<main class="blog">
<div class="blog-post__heading">
<h2>Never Finished</h2>
<p>April 1st, 2016</p>
</div>
<div class="blog-post__body">
<p>I cannot even begin to count how many times I tried to launch this blog. Each time I sat down to do so, I would get caught up in the million things that I wanted to do with it and end up lost in the sea of ideas and possibility (i.e., articles, tutorials, embedded CodePens featuring awesome animations I would make, etc.).</p>
<p>This would have gone on for much longer if it had not been for a conversation I had with my fiancee a couple of weeks ago. I was hitting another low point in my journey. I was getting frustrated with my progress as a developer and felt the gap between myself and the greats increasing with each passing day. </p>
<p>Being as this was starting to become a regular cycle with me, she decided it was time to give me a swift kick to wake me up.</p>
<p>“No matter what you do, you will never be finished.”</p>
<p>Granted, the conversation was much more in-depth than that; but the words rang loud and clear in my head.</p>
<p>Don’t get me wrong, that sucked to hear as a closet-perfectionist with a gotta catch ‘em all mentality. After all, what do you mean I’ll never be finished? I want to master them all! Beautiful Greensock animations, D3, WebGL, React, Angular, (insert new JavaScript MV* here), Node, algorithms and data structures, Elm, etc.</p>
<p>However, once I had let that knee-jerk reaction pass, I forced myself to consider the weight of her words. After all, this was not the first time I had heard similar advice. In fact, there have been countless articles, blog posts, and podcasts reminding new people entering the field that “you’ll never know it all” and that “the learning never ends.” So why hadn’t it sunk in for me yet?</p>
<p>To be honest, it’s not as if I ever thought I’d ever get to a point where I would no longer need to learn anymore. That couldn’t be further from the truth. However, I do think that there was a part of me that kept searching for the promised land of building up a foundation of knowledge so solid that navigating the ever evolving tapestry of technology would become fairly simple. Pure hubris now that I’ve put words to it now right?</p>
<p>But here's the reality of it, that won't ever happen. While there may be an end in sight at this moment, you and I both know that technology we thought would be around for a while could be uprooted in the next hour or year. (*cough* Parse shutting down *cough*)</p>
<p>At the time this is published, the design of the blog is nothing more than an MVP. It lacks the bells and whistles of most blogs (i.e., information architecture, recent articles, related posts, etc.) and requires a design makeover, but I refuse to falter any longer. This is my zero to one.</p>
<p>I see the irony of starting this blog on April Fools; but make no mistake, this is no joke of a vision I have. This post is my retort to that idealistic voice inside. Stop looking for the finish line and enjoy each new discovery along the way. Relish in the fact that there will always be something new to learn and appreciate the fact that the only thing standing between your understanding of something is hard work. </p>
<p>I plan on going the long distance with this. So here’s to the first steps on a journey full of discovery, exploration, and learning to become the person who will “never be finished.”</p>
</div>
<div id="disqus_thread"></div>
</main>
<footer>
<a href="/"><img class="logo" src="../../../img/logo.svg" alt="Gold hexagon logo with BH initials"></a>
<p><small>Copyright 2016</small></p>
</footer>
<script>
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '/2016/04/never-finished'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
this.page.title = 'Never Finished';
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//bencodezen.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Benjamin Hong's Branding</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon shortcut" href="img/favicon/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon/favicon-96x96.png">
<link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/application.css">
</head>
<!--
_/| _ |\_
_/_ | _|\\ | _\
_/_/| / / \|\ |\_\_
_/_/ |/ / _ \/\| \_\_
_/_/ || | | \o/ || \_\_
/_/ | | |\ | \_ V /| | | \_\
// ||| | \_/ \__/ | ||| \\
// __| ||\ \ / /|| |__ \\
//_/ \|||| \/\\ //\/ ||||/ \_\\
/// \\\\/ / \ \//// \\\
|/ \/ | | | \/ \|
/_| | |_ \
///_| |_||\_ \
|//||/||\/||\| WELCOME TO MY SOURCE CODE.
/ \/|||/||/\/ FEEL FREE TO LET ME KNOW IF YOU
/|/\| \/ HAVE ANY QUESTIONS.
\/ | -BH
Artist: Unknown
-->
<body class="top">
<header>
<a href="/">
<img class="logo" src="img/logo.svg" alt="Gold hexagon logo with BH initials">
</a>
<h1 class="sr-only">Benjamin Hong's Branding</h1>
</header>
<main>
<section class="branding">
<h2 class="branding__title">Branding</h2>
<div class="branding__content">
<h3 class="branding__heading">Bio</h3>
<h4 class="branding__subheading">Long Bio</h4>
<p>With a non-traditional background in I/O Psychology, Ben is passionate about building products that are a joy for users to interact with. He has worked across a variety of projects including NASA Earthdata, Healthcare.gov (as part of the team to help fix the site after its initial launch) and Medicare.gov.</p>
<p>In conjunction with his pursuit of improving his understanding of instructional design, he enjoys teaching and mentoring people in the field. He can often be found at local events involving technology, design, entrepreneurship, and the startup community. In addition, he is also an avid Go (strategy game) fan who loves great food, Kali-Eskrima and hiking.</p>
<h4 class="branding__subheading">Short Bio</h4>
<p>Ben is a front-end developer who is passionate about building products designed with user experience and interaction design at its core.</p>
<h3 class="branding__heading">Career Summary</h3>
<p>With a non-traditional background in I/O Psychology, I am a front-end developer who is passionate about building products that are user-centric, accessible, performant, and modular. I have worked across a variety of projects including NASA Earthdata, Healthcare.gov (as part of the team to help fix the site after its initial launch) and Medicare.gov.</p>
<p>I'm an avid learner who picks up new skills and concepts quickly and is constantly looking for ways to expand my knowledge and understanding of technology and its ever-evolving nature. I also enjoy experimenting with new technology and collaborating with others in order to find new and innovative ways to help solve problems out for people.</p>
<p>I am also always looking for ways to give back to the community. I have been in multiple roles where I helped to teach and mentor junior developers in programs like Udacity and Treehouse. I have also been a keynote speaker and presented on various topics like flexbox and front-end architecture.</p>
<h3 class="branding__heading">Photos</h3>
<div class="flex-row">
<div class="branding__photo">
<img src="img/profile-standard--thumb.jpg" alt="Ben's profile picture">
<p>Standard Profile Picture (250x328) <a href="img/profile-standard.jpg">[Download]</a></p>
</div>
<div class="branding__photo">
<img src="img/profile-high-res--thumb.jpg" alt="Ben's profile picture">
<p>High Resolution Profile Picture (2032x2032) <a href="img/profile-high-res.jpg">[Download]</a></p>
</div>
</div>
</div>
</section>
</main>
<footer>
<a href="/"><img class="logo" src="img/logo.svg" alt="Gold hexagon logo with BH initials"></a>
<p><small>Copyright 2016</small></p>
</footer>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var uglifyCSS = require('gulp-uglifycss');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var combineMq = require('gulp-combine-mq');
var del = require('del');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
// Serve
gulp.task('serve', function() {
gulp.watch(["**/*.html", "css/**/*.css"]).on('change', browserSync.reload);
gulp.watch('scss/**/*.scss', ['sass']);
browserSync.init({
server: {
baseDir: "./"
}
});
});
// Generate Production Assets
gulp.task('dist', function() {
// Delete old files
del.sync(['./dist/**']);
// Copy over HTML files
gulp.src('./**/*.html')
.pipe(gulp.dest('./dist'));
// Copy over image files
gulp.src('./img/**')
.pipe(gulp.dest('./dist/img'));
// Copy font files
gulp.src('./fonts/**')
.pipe(gulp.dest('./dist/fonts'));
// Prepare CSS for Production
gulp.src('css/**/*.css')
.pipe(combineMq({
beautify: false
}))
.pipe(uglifyCSS({
"max-line-len": 80
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./dist/css'));
});
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Sass and Autoprefix Styles
gulp.task('sass', function() {
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'))
.pipe(autoprefixer({
browsers: ['last 3 versions'],
cascade: false
}))
.pipe(gulp.dest('css'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
gulp.watch('scss/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="39px" viewBox="0 0 32 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
<title>logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="logo" transform="translate(1.000000, 2.000000)">
<g id="Page-1">
<g id="logo">
<g id="Page-1">
<g id="Group">
<path d="M15,0 L30,8.74999998 L30,26.25 L15,35 L0,26.25 L0,8.74999998 L15,0 L15,0 L15,0 Z" id="Polygon-1-Copy-4" stroke="#F8E81C" stroke-width="2"></path>
<g id="Group-2" transform="translate(8.000000, 10.000000)" fill="#FFFFFF">
<path d="M9.8590445,8.46347597 L9.8590445,14.4642857 L7.98025988,14.4642857 L7.98025988,0.304182868 L9.8590445,0.304182868 L9.8590445,6.31629358 L12.0938093,6.31629358 L12.0938093,0.304182868 L13.9725939,0.304182868 L13.9725939,14.4642857 L12.0938093,14.4642857 L12.0938093,8.46347597 L9.8590445,8.46347597 L9.8590445,8.46347597 Z" id="H"></path>
<path d="M0.173992099,14.4642857 L0.173992099,0.292881907 L2.97239231,0.292881907 C3.71072539,0.292881907 4.37653362,0.515131899 4.96983698,0.959638546 C5.47744098,1.33633909 5.84000982,1.92021619 6.05755438,2.71128734 C6.17621506,3.13319195 6.2355445,3.63419617 6.2355445,4.21431501 C6.2355445,5.16360041 6.01470712,5.9245241 5.57302572,6.49710894 C5.38844245,6.73819728 5.17090116,6.92277779 4.92039529,7.05085597 C5.33570765,7.23167223 5.68838824,7.58953239 5.97844766,8.12444717 C6.1696232,8.4860797 6.31135465,8.95318137 6.40364629,9.52576621 C6.4497921,9.81959264 6.47286466,10.1473172 6.47286466,10.5089497 C6.47286466,11.4054971 6.32454105,12.1664207 6.02788937,12.7917436 C5.79716028,13.2814544 5.47084832,13.673217 5.0489437,13.9670434 C4.57430102,14.29854 4.10296152,14.4642857 3.63491109,14.4642857 L0.173992099,14.4642857 L0.173992099,14.4642857 Z M2.19121345,12.3510062 L2.97239231,12.3510062 C3.60524923,12.3510062 4.04362792,11.9780782 4.28754153,11.2322112 C4.37324091,10.9760548 4.41608994,10.6822328 4.41608994,10.3507363 C4.41608994,9.55966513 4.28424673,8.98332194 4.02055635,8.6216894 C3.783235,8.29019293 3.43385048,8.12444717 2.97239231,8.12444717 L2.19121345,8.12444717 L2.19121345,12.3510062 L2.19121345,12.3510062 Z M2.19121345,6.07897341 L2.97239231,6.07897341 C3.55251115,6.07897341 3.94144864,5.7550158 4.13921643,5.10709085 C4.21173128,4.86600251 4.24798817,4.56841353 4.24798817,4.21431501 C4.24798817,3.62666216 4.12273712,3.18216219 3.87223125,2.88080174 C3.64150216,2.60204334 3.34155885,2.46266622 2.97239231,2.46266622 L2.19121345,2.46266622 L2.19121345,6.07897341 L2.19121345,6.07897341 Z" id="B"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Benjamin Hong's Portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon shortcut" href="img/favicon/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon/favicon-96x96.png">
<link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/application.css">
</head>
<!--
_/| _ |\_
_/_ | _|\\ | _\
_/_/| / / \|\ |\_\_
_/_/ |/ / _ \/\| \_\_
_/_/ || | | \o/ || \_\_
/_/ | | |\ | \_ V /| | | \_\
// ||| | \_/ \__/ | ||| \\
// __| ||\ \ / /|| |__ \\
//_/ \|||| \/\\ //\/ ||||/ \_\\
/// \\\\/ / \ \//// \\\
|/ \/ | | | \/ \|
/_| | |_ \
///_| |_||\_ \
|//||/||\/||\| WELCOME TO MY SOURCE CODE.
/ \/|||/||/\/ FEEL FREE TO LET ME KNOW IF YOU
/|/\| \/ HAVE ANY QUESTIONS.
\/ | -BH
Artist: Unknown
-->
<body class="top">
<header>
<a href="/">
<img class="logo" src="img/logo.svg" alt="Gold hexagon logo with BH initials">
</a>
<h1 class="sr-only">Benjamin Hong's Portfolio</h1>
</header>
<main>
<section class="hero">
<h2 class="sr-only">Introduction</h2>
<p class="hero__title">Front-End Developer</p>
<p class="hero__tagline">Building beautiful products that are accessible and a delight for people to use.</p>
<ul class="social-bar">
<li>
<a class="social-icon" href="http://www.twitter.com/bencodezen">
<i class="fa fa-twitter"></i>
<span class="icon-sign">
<p>Twitter</p>
</span>
</a>
</li>
<li>
<a class="social-icon" href="http://www.codepen.io/BenCodeZen/">
<i class="fa fa-codepen"></i>
<span class="icon-sign">
<p>CodePen</p>
</span>
</a>
</li>
<li>
<a class="social-icon" href="http://www.github.com/bencodezen">
<i class="fa fa-github"></i>
<span class="icon-sign">
<p>GitHub</p>
</span>
</a>
</li>
<li>
<a class="social-icon" href="http://stackoverflow.com/users/5100020/bencodezen">
<i class="fa fa-stack-overflow"></i>
<span class="icon-sign">
<p>Stack Overflow</p>
</span>
</a>
</li>
<li>
<a class="social-icon" href="http://www.linkedin.com/in/hongb1">
<i class="fa fa-linkedin"></i><span class="sr-only">LinkedIn</span>
<span class="icon-sign">
<p>LinkedIn</p>
</span>
</a>
</li>
</ul>
</section>
<section class="work">
<h2>Projects</h2>
<div class="flex-row">
<section class="project">
<a href="http://earthdata.nasa.gov">
<img class="project__screenshot" src="img/projects/earthdata.png">
<h3 class="project__title">NASA Earthdata</h3>
</a>
</section>
<section class="project">
<a href="http://www.pureflix.com">
<img class="project__screenshot" src="img/projects/pureflix.png">
<h3 class="project__title">Pure Flix</h3>
</a>
</section>
<section class="project">
<a href="http://www.healthcare.gov">
<img class="project__screenshot" src="img/projects/healthcare.png">
<h3 class="project__title">Healthcare.gov*</h3>
</a>
<small>*Brought onto the project after initial launch</small>
</section>
<section class="project">
<a href="http://www.medicare.gov">
<img class="project__screenshot" src="img/projects/medicare.png">
<h3 class="project__title">Medicare.gov</h3>
</a>
</section>
<section class="project">
<a href="http://www.mstudiobethesda.com">
<img class="project__screenshot" src="img/projects/mstudio.png">
<h3 class="project__title">MStudioBethesda</h3>
</a>
</section>
<section class="project">
<a href="http://www.pathnorth.com">
<img class="project__screenshot" src="img/projects/pathnorth.jpg">
<h3 class="project__title">PathNorth</h3>
</a>
</section>
</div>
</section>
</main>
<footer>
<a href="/"><img class="logo" src="img/logo.svg" alt="Gold hexagon logo with BH initials"></a>
<p><small>Copyright 2016</small></p>
</footer>
</body>
</html>
\ No newline at end of file
{
"name": "ben-portfolio",
"version": "2.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://gitlab.com/bencodezen/portfolio.git"
},
"author": "BenCodeZen",
"license": "ISC",
"bugs": {
"url": "https://gitlab.com/bencodezen/portfolio/issues"
},
"devDependencies": {
"browser-sync": "^2.11.1",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-combine-mq": "^0.4.0",
"gulp-jshint": "^2.0.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.2",
"gulp-uglifycss": "^1.0.5",
"jshint": "^2.9.1"
}
}
// ============================================================================
// Styles Manifest
// ============================================================================
@import "settings/settings";
@import "base/baseline";
@import "base/typography";
@import "layout/blog";
@import "layout/branding";
@import "layout/footer";
@import "layout/grid";
@import "layout/header";
@import "layout/sections";
@import "layout/work";
@import "components/buttons";
@import "components/hero";
@import "components/social-bar";
@import "overrides/general";
// ============================================================================
// BASE: #Baseline
// ============================================================================
* {
&,
&:after,
&:before {
box-sizing: border-box;
}
}
html,
body,
ul,
p {
margin: 0;
padding: 0;
line-height: 1.5;
}
img {
max-width: 100%;
}
// ============================================================================
// BASE: #Typography
// ============================================================================
h1,
h2,
h3,
h4 {
font-family: $fontFamilyHeading;
margin: 0;
padding: 0;
}
p,
a,
small {
font-family: 'Muli', sans-serif;
}
a {
text-decoration: none;
color: $black;
&:visited {
color: $black;
}
&:hover {
text-decoration: underline;
}
}
.blog-post__heading {
margin-bottom: 1em;
}
.blog-post__body {
line-height: 1.5;
p {
margin-bottom: 1em;
}
}
// ============================================================================
// COMPONENT: #Buttons
// ============================================================================
.btn {
border: 1px solid $gold;
padding: 5px 10px;
color: $white;
text-decoration: none;
font-size: 14px;
}
// ============================================================================
// COMPONENT: #Hero
// ============================================================================
.hero {
@media screen and (min-width: 768px) {
padding-bottom: 30px;
}
&__title {
margin-bottom: 10px;
text-align: center;
font-family: $fontFamilyHeading;
text-transform: uppercase;
font-size: 1em;
color: $gold;
letter-spacing: 1.41px;
line-height: 18px;
@media (min-width: 960px) {
font-size: 1.2em;
margin-bottom: 1em;
}
}