Snippets of mikeho.co to show FindTheBest

app css - mikeho.co

/*
 *= require_self
 *= require_tree .
 */
@import "bootstrap";
@import "bootstrap-responsive";
 
/* App Wide Variable */
@import "variables";



body {
	background-color: $app-bg-color;
	font-family: "Andale Mono", AndaleMono, monospace;
	color: $code-black;
	padding-bottom:20px;
}

div.container-fluid {
	padding-top:5px;
}

.code-yellow {
	color: $code-yellow;
}

.code-blue {
	color: $code-blue;
}

hr {
	border-bottom:none;
	border-top:1px solid #6F6D6D;
	margin: 10px 0px;
	&.dashed{
		border-top:1px dashed #6F6D6D;
	}
}

.well {
	background-color: lighten($app-bg-color, 35%);
	//color: darken($code-yellow, 15%);
	h3{
		color: $code-yellow;
		span {
			font-size: 10px;
			color: gray;
		}
	}
}

.well-dark {
	background-color: lighten($app-bg-color, 5%);
}

h1.h1-header {
	color: $code-blue;
}

/* _________________________________________________________ Skills Page */

.progress-box {
	height: 25px;
	width:  25px;
	border: solid 1px $app-bg-color;
	background-color: lighten($app-bg-color, 10%);
	&.active-box {
		background-color: $progress-box;
	}
	&:hover {
		background-color: $progress-box-active;
	}
}

/* _________________________________________________________ Bio Page */

.picture-box {
	height: 250px;
	border: 1px solid darken($app-bg-color, 1%);
	border-bottom: 3px solid $code-yellow;
	background-color: lighten($app-bg-color, 10%);
	text-align: center;
	padding: 15px;
	p {
		margin:7px 0px;
	}
	img {
		height: auto;
		max-width: 95%;
	}
	// NOTE size of png is 250x222
	-webkit-box-shadow: 0 7px 24px -3px $code-yellow;
	   -moz-box-shadow: 0 7px 24px -3px $code-yellow;
	        box-shadow: 0 7px 24px -3px $code-yellow;
	&:hover {
			border-bottom: 3px solid $code-blue;

		-webkit-box-shadow: 0 7px 24px -3px $code-blue;
	   -moz-box-shadow: 0 7px 24px -3px $code-blue;
	        box-shadow: 0 7px 24px -3px $code-blue;
	}        
}



.bio {
	margin-bottom: 40px;
	padding-bottom: 25px;
	border-bottom: 2px solid gray;
}

/* _________________________________________________________ Projects Page */

#projectArea{
	position:relative;
}

 // Breadcrumbs
h1.h1-header span {
	font-size:.6em;
}

.shadow-dark {
	 -webkit-box-shadow: 0 7px 24px -3px #2B2B2B;
	   -moz-box-shadow: 0 7px 24px -3px #2B2B2B;
	        box-shadow: 0 7px 24px -3px #2B2B2B; 
}

.shadow-inset {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

.bg-white {
	background-color: lighten($app-bg-color, 20%);
}

#projects {
	background-color:lighten($app-bg-color, 5%);
	padding: 10px;
	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
		border: 4px solid darken($app-bg-color, 2%);
		padding: 1%;
		min-height: 226px;
		background-color:lighten($app-bg-color, 10%);
		margin:5px;
		&:hover {
					background-color:$app-bg-color-white;
					box-shadow: 0 4px 22px -6px white;
					background-size: 71%;
		}
		background-repeat: no-repeat;
		background-position: center;
		background-size: 70%;
	}
}

#outfitSystems {
		background-image: image-url("outfitSystemsLogo.png");
		background-color: #C56C4A !important;
}

#ivLaundry {
	background-image: image-url("ivLaundryLogo.png");
	background-color: #3EC76A !important;
}

#followAlong {
	background-image: image-url("followAlongLogo.png");
	background-color: #008EC0 !important;
}

#alliedGreeks {
	background-image: image-url("alliedGreeksLogo.png");
	background-color: #f5eef4 !important;
}

#efp {
	background-image: image-url("efpLogo.png");
}

#allianceAutoBody {
	background-image: image-url("allianceAutoBodyLogo.png");
	background-color: #012B51 !important;
}

#mikeHo {
	background-image: image-url("mikeHoLogo.png");
	background-color: $app-bg-color !important;
}
#have-an-idea {
	margin-left: 25% !important;
	//margin-top: -25% !important;
	min-height:157px !important;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	        box-shadow: none;
	        background-color:lighten($app-bg-color, 5%) !important;
	border: 1px dashed gray;

}

/* Each Project Page------------------ */

#project-description{
	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
		min-height: 150px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 70%;
		ul{
			padding: 10px;
		}
	}
	div.span5.full-bg{
		min-height: 250px;
		background-size: 100%;
		@extend .shadow-dark;
	}
	div.row-fluid{
		margin: 40px 0px;
	}
	p{
		color: $code-yellow;
		padding: 15px;
	}

	#site-link {
		float:right;
		color: $code-blue;
		padding:15px;
		background-color: lighten($app-bg-color,40%);

		&:hover{
			background-color: lighten($app-bg-color,55%);
			cursor: hand;
			cursor: pointer;
		}
	}




  /* Images */
	#outfitPic1{
		background-image: image-url("outfitPic1.png");
	}
	#outfitPic2{
		background-image: image-url("outfitPic2.png");
	}
	#outfitPic3{
		background-image: image-url("outfitPic3.png");
	}


	#ivLaundryPic1{
		background-image: image-url("ivLaundryPic1.png");
	}
	#ivLaundryPic2{
		background-image: image-url("ivLaundryPic3.png");
	}
	#ivLaundryPic3{
		background-image: image-url("ivLaundryPic2.png");
	}


	#alliedGreeksPic1{
		background-image: image-url("alliedGreeksPic1.png");
	}
	#alliedGreeksPic2{
		background-image: image-url("alliedGreeksPic2.png");
	}
	#alliedGreeksPic3{
		background-image: image-url("alliedGreeksPic3.png");
	}

	#followAlongPic1{
		background-image: image-url("followAlongPic1.png");
	}
	#followAlongPic2{
		background-image: image-url("followAlongPic2.png");
	}
}



/* _________________________________________________________ Contact Page */


div.span3.well.contactWell {
	text-align:center;

	h3{
		color: $code-blue;
		font-size: .9em;
	}
	h4{
		margin-top: 40px;
	}
}

app JS - mike ho.co

function replaceProject(linkTarget) {
	var area = $('#projectArea');
	area.animate({right: '100%'}, 500, function() { 
		area.load(linkTarget + ' ' + '#projectArea');
		area.animate({right: '0%'},1000, null);
		urlSwap(linkTarget);
	});
}


function urlSwap(linkTarget){
	history.pushState(null, null, linkTarget);
}

$(window).resize(function() {
	$('#width-display').html('width: ' + $(window).width() + 'px') 
});



$(document).ready(function() {

	$('#projects a').on("click", function(e) {
		e.preventDefault();
		replaceProject($(this).attr('href'));
	})

	// Browser Width for working w/ breakpoints
	$('#width-display').html('width: ' + $(window).width() + 'px') 

	$('#width-display').on('click', function() {
		console.log('breakpoint ' + $(window).width());
	})

});

typing effect css - mikeho.co

@import "variables";

@-webkit-keyframes typing {
    0% { width: 100% }
    100% { width:0 }
}

@-webkit-keyframes blinker {
    0% { border-color: transparent }
    50% { border-color: black }
}

@-moz-keyframes typing {
    0% { width: 100% }
    100% { width:0 }
}

@-moz-keyframes blinker {
    0% { border-color: transparent }
    50% { border-color: black }
}

h4.typed { 
    position: relative; 
    float: left;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.2em;
}

h4.typed span {
    position:absolute;
    top:0;
    right:0;
    width:0;
    background: $app-bg-color; 
    border-left: .1em solid white;
    
    
    -webkit-animation: typing 3s steps(30, end), 
                       blinker 1s step-end infinite;
    -moz-animation: typing 3s steps(30, end),
                    blinker 1s step-end infinite;
}