Skip to content

Instantly share code, notes, and snippets.

@JBreit

JBreit/brunson.html

Created September 30, 2013 03:45
Show Gist options
  • Save JBreit/6759142 to your computer and use it in GitHub Desktop.
Save JBreit/6759142 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
brunson.html
<!DOCTYPE html>
<!-- saved from url=(0032)http://www.nicbrunson.com/#stats -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Type" content="">
<meta name="viewport" content="width=device-width; initial-scale=0.5; maximum-scale=1.0; user-scalable=0;">
<link rel="icon" href="favicon.ico">
<link rel="shortcut icon" href="favicon.ico">
<title>Nic Brunson</title>
<link href="css/manifest.css" rel="stylesheet" type="text/css">
<script src="script/jquery.min.js"></script>
<script src="script/jquery-ui.min.js"></script>
<script src="script/d3.v3.min.js"></script>
</head>
<body cz-shortcut-listen="true">
<!-- NAVIGATION -->
<nav class="nav">
<div class="container">
<h2 class="logo left MLXL PTS hide" style="display: none;"><a href="#me">nic<span class="lightgrey ultralight">brunson</span></a></h2>
<ul class="right">
<!-- <li class="nav-me active"><a href="#me" class="nav-link"><i class="icon-large icon-nic2"></i>me</a></li> -->
<li class="nav-projects"><a href="#projects" class="nav-link"><i class="icon-large icon-fire"></i><label>projects</label></a></li>
<li class="nav-stats"><a href="#stats" class="nav-link"><i class="icon-large icon-stats"></i><label>info</label></a></li>
<li class="nav-contact"><a href="#contact" class="nav-link"><i class="icon-large icon-bubbles"></i><label>contact</label></a></li>
</ul>
</div>
</nav>
<!-- HOMEPAGE -->
<header id="me" class="home-wrapper">
<hgroup class="welcome">
<h1>nic<span class="orange ultralight">brunson</span></h1>
<div class="about">UI / UX Designer</div>
</hgroup>
<section class="intro">
Hi, thanks for visiting.<br> Below is a little bit about me &amp; what I do.
</section>
</header>
<!-- PROJECTS -->
<article id="projects" class="projects box-shadow">
<nav class="proj-list">
<div class="proj-col">
<section>
<h3 class="proj-heading"><a href="#fitso" class="proj-fitso"><i class="icon-small icon-mobile"></i> fitso
<div class="closer">X</div></a></h3>
<div class="proj-content">
<p>Fitso is a mobile fitness journal app designed to be simple and powerful. It allows users to log workouts and use hash tags to organize and track progress.</p>
<p>Coming soon.</p>
</div>
</section>
<section>
<h3 class="proj-heading"><a href="#vitality" class="proj-vitality"><i class="icon-small icon-monitor"></i> vitality
<div class="closer">X</div></a></h3>
<div class="proj-content">
<p>Vitality is a gym like no other. A place that shapes individuals both physically and mentally. Not only am I lucky enough to train there, but I also get to help give the gym an online presence. It's one of my favorite projects.</p>
<p>visit: <a href="http://www.vitalityffp.com/" target="blank">vitalityffp.com</a></p>
</div>
</section>
<section>
<h3 class="proj-heading"><a href="#gene" class="proj-gene"><i class="icon-med icon-spraycan"></i> gene
<div class="closer">X</div></a></h3>
<div class="proj-content white">
<p>Few people helped shape me the way my grandfather did. A gift for my grandmother &amp; a reminder for me.</p>
</div>
</section>
<section>
<h3 class="proj-heading"><a href="#dashboard" class="proj-dashboard"><i class="icon-small icon-monitor"></i> dashboard
<div class="closer">X</div></a></h3>
<div class="proj-content">
<p>A functioning, responsive dashboard prototype built to organize &amp; bring clarity in a sea of data. Also, to allow for maximum flexibility as part of an application that is extremely configurable.</p>
</div>
</section>
<section>
<h3 class="proj-heading"><a href="#whiskey" class="proj-whiskey"><i class="icon-small icon-droplet"></i> whiskey militia
<div class="closer">X</div></a></h3>
<div class="proj-content">
<p>A fun little print ad for online snowboarding &amp; skateboarding retailer, Dogfunk.com. Ran in Transworld Snowboarding and Snowboarer Mag.</p>
</div>
</section>
<section>
<h3 class="proj-heading"><a href="#tunechi" class="proj-tunechi"><i class="icon-med icon-spraycan"></i> lil wayne
<div class="closer">X</div></a></h3>
<div class="proj-content">
<p>Just a fun painting of lil wayne.</p>
</div></section>
<section>
<h3 class="proj-heading"><a href="#astro" class="proj-astro"><i class="icon-small icon-monitor"></i> astro gaming
<div class="closer">X</div></a></h3>
<div class="proj-content above">
<p>Astro Gaming was badly in need of a re-design to make their e-commerce site reflect the quality of their products. I was asked to help specifically with the product pages and checkout process.</p>
<p>visit: <a href="http://www.astrogaming.com/" target="blank">astrogaming.com</a></p>
</div>
</section>
<!--
<section>
<h3 class="proj-heading"><a href="#launcher" class="proj-launcher"><i class="icon-small icon-monitor"></i> launcher</a>
<a href="#projects" class="closer">X</a></h3>
</section>
-->
<section>
<h3 class="proj-heading"><a href="#animaljam" class="proj-animaljam"><i class="icon-small icon-monitor"></i> animal jam
<div class="closer">X</div></a></h3>
<div class="proj-content above">
<p>While working on National Geographic's Animal Jam, the challenge was to bring the same adventurous fun filled experience of the game, to life on the website and online store.</p>
<p>visit: <a href="http://www.animaljam.com/" target="blank">animaljam.com</a></p>
</div>
</section>
</div>
</nav>
<header class="proj-header">
<p>Art &amp; design have been a part of my life for a long time, but don't worry I won't make you go clear back to the 90's with me. Instead here are a few of my most recent recent projects, paintings &amp; other creative outlets.</p>
</header>
<div class="back over back-animaljam"></div>
<div class="back over back-tunechi"></div>
<div class="back over back-astro"></div>
<div class="back over back-dashboard"></div>
<div class="back over back-fitso"></div>
<div class="back over back-whiskey"></div>
<div class="back over back-vitality"></div>
<div class="back over back-gene"></div>
<div class="back back-main"></div>
</article>
<!-- ME -->
<article id="stats" class="me box-shadow">
<div class="left-side">
<section class="experience half">
<header>
<h1 class="heading">DESIGN EXPERIENCE</h1>
<h2 class="subheading">What I've been up to for the last decade or so</h2>
</header>
<div class="pie">
<div class="exp-label key-saas">
<div class="years">5</div>
<div class="exp-desc">YEARS OF SAAS EXPERIENCE</div>
</div>
<svg width="225.71428571428572" height="225.71428571428572"><g transform="translate(112.85714285714286,112.85714285714286)"><path fill="#333" d="M6.910278710854843e-15,-112.85714285714286A112.85714285714286,112.85714285714286 0 0,1 6.910278710854843e-15,-112.85714285714286L6.2192508397693585e-15,-101.57142857142857A101.57142857142857,101.57142857142857 0 0,0 6.2192508397693585e-15,-101.57142857142857Z"></path><path fill="#5BCBF2" d="M6.910278710854843e-15,-112.85714285714286A112.85714285714286,112.85714285714286 0 0,1 74.83812857288977,84.47478443645281L67.35431571560079,76.02730599280753A101.57142857142857,101.57142857142857 0 0,0 6.2192508397693585e-15,-101.57142857142857Z"></path><path fill="#2281B7" d="M74.83812857288977,84.47478443645281A112.85714285714286,112.85714285714286 0 0,1 -74.83812857288969,84.4747844364529L-67.3543157156007,76.0273059928076A101.57142857142857,101.57142857142857 0 0,0 67.35431571560079,76.02730599280753Z"></path><path fill="#0A4A72" d="M-74.83812857288969,84.4747844364529A112.85714285714286,112.85714285714286 0 0,1 -74.83812857288979,-84.47478443645281L-67.3543157156008,-76.02730599280753A101.57142857142857,101.57142857142857 0 0,0 -67.3543157156007,76.0273059928076Z"></path><path fill="#777" d="M-74.83812857288979,-84.47478443645281A112.85714285714286,112.85714285714286 0 0,1 -2.073083613256453e-14,-112.85714285714286L-1.8657752519308075e-14,-101.57142857142857A101.57142857142857,101.57142857142857 0 0,0 -67.3543157156008,-76.02730599280753Z"></path><path fill="#333" d="M-2.073083613256453e-14,-112.85714285714286A112.85714285714286,112.85714285714286 0 0,1 -2.073083613256453e-14,-112.85714285714286L-1.8657752519308075e-14,-101.57142857142857A101.57142857142857,101.57142857142857 0 0,0 -1.8657752519308075e-14,-101.57142857142857Z"></path></g></svg></div>
<div class="legend">
<ul>
<li><a href="#saas" id="saas" class="key key-saas key-active">SaaS<i class="icon-xsmall icon-close key-close MLT"></i></a></li>
<li><a href="#freelance" id="freelance" class="key key-freelance key-off">Freelance<i class="icon-xsmall icon-close key-close MLT"></i></a></li>
<li><a href="#design" id="design" class="key key-design key-off">Agency<i class="icon-xsmall icon-close key-close MLT"></i></a></li>
<li><a href="#game" id="game" class="key key-game key-off">Gaming<i class="icon-xsmall icon-close key-close MLT"></i></a></li>
</ul>
</div>
<form>
<input id="in-off" type="hidden" name="dataset" value="off" checked="">
<input id="in-all" type="hidden" name="dataset" value="all">
<input id="in-saas" type="hidden" name="dataset" value="saas">
<input id="in-freelance" type="hidden" name="dataset" value="freelance">
<input id="in-design" type="hidden" name="dataset" value="design">
<input id="in-game" type="hidden" name="dataset" value="game">
</form>
</section>
<section class="interests half">
<header>
<h1 class="heading">OTHER INTERESTS</h1>
<h2 class="subheading">What I like to do in my free time</h2>
</header>
<div class="bars PTM">
<div class="prog-balls">
<label class="balls-label">PAINTING / ART</label>
<div class="balls">
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
<div class="prog-balls">
<label class="balls-label">FITNESS</label>
<div class="balls">
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball"></div>
</div>
</div>
<div class="prog-balls">
<label class="balls-label">MOTORCYCLES</label>
<div class="balls">
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
<div class="prog-balls">
<label class="balls-label">SNOWBOARDING</label>
<div class="balls">
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball filled"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
<!--
<div class="prog-bar">
<div class="prog-bar-back">
<div class="prog-bar-fill art"></div>
</div>
<label class="prog-label">PAINTING / ART</label>
</div>
<div class="prog-bar">
<div class="prog-bar-back">
<div class="prog-bar-fill fit"></div>
</div>
<label class="prog-label">FITNESS</label>
</div>
<div class="prog-bar">
<div class="prog-bar-back">
<div class="prog-bar-fill moto"></div>
</div>
<label class="prog-label">MOTORCYLCES</label>
</div>
<div class="prog-bar">
<div class="prog-bar-back">
<div class="prog-bar-fill snow"></div>
</div>
<label class="prog-label">SNOWBOARDING</label>
</div>
-->
</div>
</section>
</div>
<div class="right-side">
<section class="interests">
<header>
<h1 class="heading">LOCATIONS</h1>
<h2 class="subheading">A few places I've called Home over the years</h2>
</header>
<div style="text-align:center;">
<img src="images/map.svg" class="map">
</div>
</section>
</div>
</article>
<!-- CONTACT -->
<article id="contact" class="contact">
<section class="thanks">
<h1>give me a shout</h1>
<form id="#cf" class="sendform" action="http://www.nicbrunson.com/script/mail.php" method="post">
<input type="text" class="cont" name="name" placeholder="Name">
<input type="text" class="cont" name="email" placeholder="Email">
<input type="text" class="cont" name="message" placeholder="Message">
<!-- <div class="sender" onclick="$('#cf').submit();">send</div> -->
<button class="sender" type="submit">send</button>
</form>
</section>
<section class="contact-list">
<ul>
<li class="email"><a href="http://www.linkedin.com/in/nicbrunson/" target="_blank"><i class="icon-linkedin MRS"></i>LinkedIn</a></li>
<li class="email"><a href="http://www.dribbble.com/nicbrunson" target="_blank"><i class="icon-dribbble-2 MRS"></i>Dribbble</a></li>
<li class="email"><a href="http://www.facebook.com/nicbrunson" target="_blank"><i class="icon-facebook MRS"></i>Facebook</a></li>
</ul>
</section>
<!-- <div class="thanks-back"></div> -->
</article>
<div class="page-back"></div>
<!-- MOBILE DETECT -->
<div class="ismobile"></div>
<script src="script/chart.js"></script>
<script type="text/javascript">
var $notMobile = true;
jQuery(document).ready(function($) {
if( $('.ismobile').css('display') == 'none' ) {
$notMobile = false;
//alert($notMobile);
}
// click binding for projects navigation
var projMenu = $(".proj-heading");
var projItems = projMenu.find('a');
//alert(projNames);
if($notMobile){
projItems.hover(
function() {
var projName = $(this).attr('class').substr(5);
if(!$(this).parent().hasClass('inactive')){
$('.back-'+projName).fadeIn(600);
$('.proj-header').addClass('transparent');
}
},
function() {
var projName = $(this).attr('class').substr(5);
if(!$(this).parent().parent().hasClass('selected') && !$(this).parent().hasClass('inactive')){
$('.back-'+projName).fadeOut(600);
$('.proj-header').removeClass('transparent');
}
});
}
projItems.click(function() {
var mySection = $(this).parent().parent();
var projName = $(this).attr('class').substr(5);
if(!mySection.hasClass('selected')){
mySection.addClass('selected');
projMenu.addClass('transparent');
projMenu.addClass('inactive');
$(this).parent().removeClass('transparent');
$(this).parent().removeClass('inactive');
if(!$notMobile){
$('.back-'+projName).fadeIn(600);
$('.proj-header').addClass('transparent');
}
}else{
//$('.projects').removeClass('back-'+projName);
mySection.removeClass('selected');
projMenu.removeClass('transparent');
projMenu.removeClass('inactive');
$('.back-'+projName).fadeOut(600);
$('.proj-header').removeClass('transparent');
}
});
// click binding for closing project content
var closers = $(".closer");
closers.click(function() {
var projName = $(this).prev().attr('class').substr(5);
$('.projects').removeClass('back-'+projName);
$(this).parent().parent().removeClass('selected');
projMenu.removeClass('transparent');
projMenu.removeClass('inactive');
$('.back-'+projName).fadeOut(600);
$('.proj-header').removeClass('transparent');
});
var isLocked = false;
// Cache selectors
var lastId,
topMenu = $(".nav"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
//if($notMobile){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 800);
e.preventDefault();
//}
});
// SCROLLING
// Bind to scroll
$(window).scroll(function(){
//if($notMobile){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
//paralaxing
//var yAdjustMain = -(fromTop * 0.25);
//var yAdjustSub = -((fromTop-$(window).height()) * 0.20);
//$('body').css('background-position-y',yAdjustMain);
//$('.projects').css('background-position-y',yAdjustSub);
/* $('.contact').css('background-position-y',yAdjust); */
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
if(id == "stats"){
d3.select("#in-all").property("checked", true).each(change);
}
}
/* Check the location of each desired element */
$('.nav').each( function(i){
var top_of_object = $(this).position().top;
var bottom_of_object = $(this).position().top + $(this).height();
var top_of_window = $(window).scrollTop();
var top_of_projects = $('.projects').position().top - $(this).height();
/* lock the nav when scrolling past the welcome screen */
if( top_of_window > top_of_object && !isLocked ){
$(this).addClass('nav-lock');
$('.logo').show("fade", {}, 800);
isLocked = true;
}
/* unlock the nav when scrolling back to the welcome screen */
if( top_of_window < top_of_projects && isLocked ){
$(this).removeClass('nav-lock');
$('.active').removeClass('active');
$('.logo').hide("fade", {}, 800);
$('.nav-me').addClass('active');
isLocked = false;
}
});
// }
});
});
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="script/ga.js" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12642410-4");
pageTracker._trackPageview();
} catch(err) {}</script>
<link rel="stylesheet" type="text/css" media="screen" href="chrome-extension://fcdjadjbdihbaodagojiomdljhjhjfho/css/atd.css"></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment