Skip to content

Instantly share code, notes, and snippets.

@bmikol

bmikol/index.html

Last active February 9, 2017 20:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bmikol/3a0fc09a543c5822ca31c68ea2e2746e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bmikol/3a0fc09a543c5822ca31c68ea2e2746e to your computer and use it in GitHub Desktop.
Download ZIP
CareerFoundry Ex 2.11
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Brian Mikol</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar" id="home">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="projectName navbar-brand">
<a href="#">Brian Mikol</a>
</div><!-- end projectName -->
</div><!-- end navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Work <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#work-dev">Development</a></li>
<li><a href="#work-pm">Product Management</a></li>
<li><a href="#work-other">Other Projects</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="#learn-more">Learn More</a></li>
</ul>
</div><!-- end navbar collapse -->
</div><!--end nav container -->
</nav><!-- end navbar -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/unsplash-carl-heyerdahl.jpg" alt="Apple iMac displaying 'Do More' on its screen, sitting on a computer desk" />
<div class="carousel-caption first caption-bkgd">
<h3>Welcome</h3>
<p>Professional portfolio of Brian Mikol</p>
</div><!-- end carousel-caption -->
</div><!-- end item active -->
<div class="item">
<img class="img-responsive" src="img/unsplash-helloquence.jpg" alt="Close up of the hands of two men sitting side by side in front of their laptops reviewing notes on a note pad" />
<div class="carousel-caption caption-bkgd">
<h3>Product Management</h3>
<p>Offering over 4 years product management and user experience (UX) expertise.</p>
</div><!-- carousel-caption -->
</div><!-- end item -->
<div class="item">
<img class="img-responsive" src="img/unsplash-sai-kiran-anagani.jpg" alt="Close up of a computer monitor displaying Bootstrap HTML code" />
<div class="carousel-caption caption-bkgd">
<h3>Web Development</h3>
<p>Hand-coding HTML since gray was the default background color &amp; CSS for not quite as many years, I&rsquo;m in the process of adding JavaScript and Ruby on Rails to my skillset as part of the CareerFoundry Web Development Bootcamp.</p>
</div><!-- carousel-caption -->
</div><!-- end item -->
</div><!-- carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- end carousel slide -->
<div class="container-fluid anchor">
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="threecol">
<h2>Portfolio Concept</h2>
<p>Please find examples of my work in web development and product management below.</p>
<p><button class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button></p>
</div><!-- end 3-column -->
</div><!-- /col -->
<div class="col-md-4 col-xs-12">
<div class="threecol">
<h2>Bootcamp Goals</h2>
<p>My goal is to finish the <a href="https://careerfoundry.com/en/courses/become-a-web-developer">CareerFoundry Full-Stack web development course</a> no later than May 2017.</p>
<p><button class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button></p>
</div><!-- end 3-column -->
</div><!-- /col -->
<div class="col-md-4 col-xs-12">
<div class="threecol">
<h2>Course Goals</h2>
<p>In taking this course, I&rsquo;m looking to augment my technical skillset to either further my career in Product Management or pivot closer to the code as a web developer. Assuming the pivot, ideally I would like to hire on as an entry level developer before considering freelance opportunities.</p>
<p><button class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button></p>
</div><!-- end 3-column -->
</div><!-- /col -->
</div><!-- /row -->
<hr>
</div> <!-- /container-fluid -->
<div class="container-fluid anchor" id="about">
<h2>About Me</h2>
<div class="col-md-4 col-xs-12 about">
<div class="threecol">
<img class="img-responsive profile" src="img/LinkedIn.jpg" alt="Profile picture" />
</div>
</div><!-- end about-image -->
<div class="col-md-4 col-xs-12 intro">
<div class="threecol">
<h3>Introduction</h3>
<p>A son of New England and product of its storied liberal arts education industry, I parlayed my personal interest in technology into my first job in Silicon Valley from a chance encounter with the Vice President of Marketing of what would be my first employer. From there, I started a multi-colored career in technology that has always remained very much customer-focused. This broad spectrum of experience has greatly informed my career’s evolution into Product Management.</p>
</div>
</div><!-- end about-intro -->
<div class="col-md-4 col-xs-12 skills">
<div class="threecol">
<h3>My Skills</h3>
<ul id="skill-list">
<li>Agile</li>
<li>B2C</li>
<li>Bootstrap (Responsive Web)</li>
<li>Community Management</li>
<li>Content Management</li>
<li>CSS</li>
<li>E-commerce Platforms</li>
<li>Human-Computer Interaction (HCI)</li>
<li>HTML 5</li>
<li>Interaction Design</li>
<li>JavaScript</li>
<li>Marketing (direct, event, online)</li>
<li>Online Marketplaces</li>
<li>Online Publishing</li>
<li>Partner Relations</li>
<li>Product Management</li>
<li>Product Marketing</li>
<li>Program Management</li>
<li>Project Management</li>
<li>Sales Account Management</li>
<li>Sales Training</li>
<li>Scrum (Certified Scrum Product Owner)</li>
<li>Search Engine Optimization (SEO)</li>
<li>Start-ups</li>
<li>User Experience (UX)</li>
<li>Vendor Relations</li>
</ul>
</div>
</div><!-- end about-skills -->
</div><!-- end container-fluid about -->
<div class="container-fluid anchor work">
<h2>My Work</h2>
<div class="row anchor" id="work-dev">
<h3>Development</h3>
</div><!-- end row work-dev -->
<div class="row anchor" id="work-pm">
<h3>Product Management</h3>
</div><!-- end row work-pm -->
<div class="row anchor" id="work-other">
<h3>Other Projects</h3>
</div><!-- end row work-other -->
</div><!-- end container-fluid -->
<div class="container-fluid anchor" id="contact">
<h2>Contact Me</h2>
<div class="col-lg-4 col-md-4 contact-info">
<h3>Location&nbsp;<span class="glyphicon glyphicon-home" aria-hidden="true"></span></h3>
<ul>
<li>San Francisco, California</li>
<li><a href="https://www.sanfranciscofogworks.com">Web</a></li>
<li><a href="https://twitter.com/bmikol">Twitter</a></li>
<li><a href="https://github.com/bmikol">Github</a></li>
</ul>
<h3>Email&nbsp;<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></h3>
<p><span class="codedirection">moc.skrowgoffs@noollabtib+nairb</span></p>
<figure>
<div id="map"></div>
<figcaption id="map-caption">(The Geographic Center of San Francisco)</figcaption>
</figure>
</div><!-- end contact-info -->
<div class="col-lg-8 col-md-8 contact-form">
<form name="contact">
<div class="name-tel">
<div class="form-group name-field">
<label for="name">Name *</label>
<input id="name" name="name" class="form-control" type="text" placeholder="Please enter your name" required="required" title="Your name is required to submit your message">
</div><!-- end form-group -->
<div class="form-group phone-field">
<label for="phone">Phone Number (US only)</label>
<input id="phone" name="phone" pattern="\d{3}[\-]\d{3}[\-]\d{4}" class="form-control" type="tel" placeholder="Please enter your phone number" title="Your phone number is not required to submit your message">
</div><!-- end form-group -->
</div><!-- end name-tel -->
<div class="form-group">
<label for="email">Email Address *</label>
<input id="email" name="email" class="form-control" type="email" placeholder="Please enter your email address" required="required" title="Your email address is required to submit your message">
</div><!-- end form-group -->
<label for="message-box">Message *</label>
<textarea id="message-box" name="message" class="form-control" style="resize:none" cols="40" rows="5" placeholder="Please enter your message" required="required" title="Your message is required to submit your message"></textarea>
<p id="visible-comment"></p>
<p id="char-count"></p>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
</div><!-- end contact-form -->
</div><!-- end container-fluid contact -->
<div class="container-fluid anchor" id="learn-more">
<div class="row">
<h2 class="learn-more">Learn More</h2>
<div class="modal-button"><button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">R&eacute;sum&eacute;</button></div><!-- end modal-button -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Professional R&eacute;sum&eacute; of Brian Mikol</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div><!-- end modal-header -->
<div class="modal-body">
<embed id="modalembed" src="https://www.sanfranciscofogworks.com/docs/bmikol-resume.pdf">
</div><!-- end modal-body -->
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end modal -->
</div><!-- end row -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;Why did you decide to take a web development bootcamp?
</a>
</h4>
</div><!-- end panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>I had two reasons in deciding to take this development bootcamp:</p>
<ol>
<li>To enhance my technical skills in service of future roles within Product Management.</li>
<li>To also expand my career opportunities in doing something I enjoy.</li>
</ol>
</div><!-- end panel-body -->
</div><!-- end collapseOne -->
</div><!-- end panel -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;What is the CareerFoundry web development bootcamp like?
</a>
</h4>
</div><!-- end panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="youtube">
<p>It&rsquo;s been great; to get an idea, check out this video:</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/UR_yCO7-aIU" frameborder="0" allowfullscreen></iframe>
</div><!-- end youtube-embed -->
</div><!-- end youtube -->
</div><!-- end panel-body -->
</div><!-- end collapseTwo -->
</div><!-- end panel -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;What development languages, frameworks, methodologies, and tools are you familiar with?
</a>
</h4>
</div><!-- end panel-heading -->
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>I have experience with the following:</p>
<ul>
<li>Agile</li>
<li>Atlassian Bitbucket, Confluence, JIRA</li>
<li>Balsamiq Mockups</li>
<li>Basecamp</li>
<li>Bootstrap (Responsive Web)</li>
<li>CSS</li>
<li>Git, including Github</li>
<li>Google Analytics</li>
<li>Human-Computer Interaction (HCI)</li>
<li>HTML, including HTML 5</li>
<li>Interaction Design</li>
<li>Invision</li>
<li>JavaScript</li>
<li>Omni Group OmniGraffle</li>
<li>Roadmunk</li>
<li>Scrum (Certified Scrum Product Owner)</li>
<li>Search Engine Optimization (SEO)</li>
<li>Trello</li>
<li>User Experience (UX)</li>
</ul>
</div><!-- end panel-body -->
</div><!-- end collapseThree -->
</div><!-- end panel -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;What is the air-speed velocity of an unladen swallow?
</a>
</h4>
</div><!-- end panel-heading -->
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<p>According to Jonathan Corum at <a href="http://style.org/unladenswallow/">Style.org</a>, &ldquo;the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour.&rdquo;</p>
</div><!-- end panel-body -->
</div><!-- end collapseFour -->
</div><!-- end panel -->
</div><!-- end panel-group -->
</div><!-- end container-fluid -->
<footer>&copy; Brian Mikol 2017 <div class="social"><a href="https://twitter.com/bmikol" class="twitter-follow-button" data-show-screen-name="false" data-dnt="true" data-show-count="false">Follow @bmikol</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><div class="fb-share-button" data-href="http://bmikol.bitballoon.com/" data-layout="button" data-mobile-iframe="false"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fbmikol.bitballoon.com%2F&amp;src=sdkpreparse">Share</a></div></div></footer>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/work.js"></script>
<script type="text/javascript" src="js/work-pm.js"></script>
<script type="text/javascript" src="js/work-other.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIQx0nOkoBhklzm7grNadXBfQvlm-BwXQ&callback=initMap"
async defer></script>
</body>
</html>
Raw
scripts.js
// Twitter button
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
// Facebook button
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Google Maps
var map;
function initMap() {
// var pier14 = {lat: 37.794513, lng: -122.389744};
var sfcenter = {lat: 37.754542, lng: -122.442544};
var map = new google.maps.Map(document.getElementById('map'), {
// center: {lat: 37.794577, lng: -122.391704},
center: sfcenter,
zoom: 11
});
var marker = new google.maps.Marker({
position: sfcenter,
map: map
});
};
$(document).ready(function(){
// Smooth scrolling
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
// Stellar
$.stellar();
// Tooltips
$(function () {
$("[data-toggle='tooltip']").tooltip();
});
// Contact Form CharCount
$("#message-box").on("keyup", function() {
console.log("keyup occurred");
var charCount = $("#message-box").val().length;
console.log(charCount);
$("#char-count").html(charCount);
if(charCount > 50) {
$("#char-count").css("color", "red");
} else {
$("#char-count").css("color", "white");
};
});
// Contact Form Submission
$(".submit").on("click", function() {
var comment = $("#message-box").val();
if(comment === "") {
$("#message-box").css("border", "2px solid red");
} else {
$("#visible-comment").html(comment);
$("#message-box").hide();
alert("We have received your message '" + comment + "'.");
return false;
};
});
// Work section - Development
for(var i = 0; i < worksDev.length; ++i ) {
$("#work-dev").append('\
<div class="col-md-3 col-xs-6">\
<a href="' + worksDev[i].url + '" class="work-img">\
<img class="img-responsive" src="' + worksDev[i].pic + '" />\
<span class="info"><p class="proj-title">' + worksDev[i].title + '</p></span>\
</a>\
<span><p class="desc">' + worksDev[i].desc + '</p></span>\
</div>\
');
$(".work-img").mouseenter(function() {
$(".info", this).show();
}).mouseleave(function(){
$(".info", this).hide();
});
var images = $("#work-dev img");
$(images[i]).css("border", "2px solid black");
};
// Work section - PM
for(var i = 0; i < worksPM.length; ++i ) {
$("#work-pm").append('\
<div class="col-md-3 col-xs-6">\
<a href="' + worksPM[i].url + '" class="work-img">\
<img class="img-responsive" src="' + worksPM[i].pic + '" />\
<span class="info"><p class="proj-title">' + worksPM[i].title + '</p></span>\
</a>\
<span><p class="desc">' + worksPM[i].desc + '</p></span>\
</div>\
');
$(".work-img").mouseenter(function() {
$(".info", this).show();
}).mouseleave(function(){
$(".info", this).hide();
});
var images = $("#work-pm img");
$(images[i]).css("border", "2px solid black");
};
// Work section - Other
for(var i = 0; i < worksOther.length; ++i ) {
$("#work-other").append('\
<div class="col-md-3 col-xs-6">\
<a href="' + worksOther[i].url + '" class="work-img">\
<img class="img-responsive" src="' + worksOther[i].pic + '" />\
<span class="info"><p class="proj-title">' + worksOther[i].title + '</p></span>\
</a>\
<span><p class="desc">' + worksOther[i].desc + '</p></span>\
</div>\
');
$(".work-img").mouseenter(function() {
$(".info", this).show();
}).mouseleave(function(){
$(".info", this).hide();
});
var images = $("#work-other img");
$(images[i]).css("border", "2px solid black");
};
});
Raw
styles.css
/* ----------------------------------------
1. Base Styles
2. Page Elements
2.1 Nav
2.2 Carousel
2.3 Intro
2.4 About
2.5 Work
2.6 Contact
2.7 Learn More
2.8 Footer
3. Typography
---------------------------------------- */
/* 1. Base Styles ---------------------- */
* {
box-sizing: border-box;
}
body {
background-color: white;
color: #34495e;
padding-top: 6.95em;
position: relative;
}
span.codedirection {
unicode-bidi: bidi-override;
direction: rtl;
}
/* Large desktop */
@media (min-width: 1200px) {
body {
background-color: #f1f1f1;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
body {
background-color: #d8d8d8;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body {
background-color: #bfbfbf;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
body {
background-color: white;
}
}
/* 2. Page Elements -------------------- */
.anchor {
padding-top: 50px;
}
/* 2.1 Nav ----------------------------- */
.dropdown-menu {
background-color: black;
}
/* 2.2 Carousel ------------------------ */
#carousel-example-generic {
margin-top: -2.84em;
}
.caption-bkgd {
background-color: rgba(0, 0, 0, 0.25);
}
/* 2.3 Intro --------------------------- */
.threecol {
margin: 0.5em;
padding: 0.5em;
}
/* 2.4 About --------------------------- */
#skill-list {
margin-left: 2.5em;
}
.about {
padding: 0 1em;
margin-top: 0.75em;
margin-bottom: 1em;
}
.profile img {
height: auto;
margin: 0 auto;
}
.skills {
background-color: grey;
color: #fff;
}
/* 2.5 Work ---------------------------- */
.desc {
margin: 1em 1.3em;
padding: 0.25em;
}
.info {
position: absolute;
top: 5%;
left: 5%;
color: white;
font-family: Futura;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5em;
line-height: 1.6;
display: none;
}
.proj-title {
font-weight: 700;
}
.work {
margin-bottom: 5em;
}
.work-img {
display: block;
margin: auto;
max-width: 200px;
position: relative;
}
/* 2.6 Contact ------------------------- */
#contact {
background-image: url("../img/unsplash-jan-senderek.jpg");
background-attachment: fixed;
background-size: cover;
color: white;
padding: 5em 2.5em 2.5em;
}
#map {
height: 300px;
width: 100%;
border:0;
margin: 1em 0;
}
#map-caption {
text-align: center;
}
.contact-info ul {
list-style: none;
padding-left: 0;
}
.name-field {
width: 50%;
float: left;
}
.phone-field {
margin-left: 60%;
}
.submit {
margin-top: 1em;
float: right;
}
/* 2.7 Learn More ---------------------- */
#modalembed {
height: 500px;
width: 100%;
padding: 10px;
}
.learn-more {
text-align: left;
float: left;
padding-left: 0.5em;
}
.modal-button {
float: right;
padding: 15px;
}
.modal-title {
display: inline;
}
.panel-heading {
background-color: white;
}
.youtube {
width: 60%;
margin: 2em auto;
}
/* 2.8 Footer -------------------------- */
.fb-share-button {
padding-left: 10px;
}
.social {
float: right;
}
/* 3. Typography ----------------------- */
body {
font-family: Helvetica, Futura, Arial, sans-serif;
font-size: 1.25em;
}
h1,
h2,
h3,
p,
li {
font-family: Helvetica, Futura, Arial, sans-serif;
}
#contact,
#contact p,
#contact h3,
#contact li {
font-family: 'Poppins', sans-serif;
}
#contact li,
#contact p {
font-size: 1.25em;
}
#map-caption {
font-size: 0.75em;
}
.dropdown-menu li a {
color: #9d9d9d;
}
.intro h3,
.skills h3 {
text-align: center;
}
.panel-body p,
.panel-body li,
.panel-title {
font-family: Futura, Helvetica, Arial, sans-serif;
}
.projectName {
text-transform: uppercase;
}
.projectName a {
color: #9d9d9d;
}
.projectName a:hover {
color: #ff0;
text-decoration: none;
}
.work h3 {
padding-left: 0.75em;
}
Raw
work-other.js
var worksOther = [
{
title: "HOWTO:<br>Migrate Your Email Hosting to MXRoute",
desc: "A step-by-step &lsquo;how to&rsquo; guide on migrating email hosting from Dreamhost to MXRoute",
pic: "img/mxroute-howto.png",
url: "https://www.sanfranciscofogworks.com/projects/how-to/how-to-migrate-email-from-dreamhost-to-mxroute.html"
},
{
title: "A Foodie&rsquo;s Energy Gel Tasting Notes",
desc: " In the interest of helping others make a somewhat informed decision as they blankly stare at the wide variety of gels at the store, I share my tasting notes on the gels I’ve tried here",
pic: "img/tasting-notes.png",
url: "https://www.sanfranciscofogworks.com/projects/a-foodies-energy-gel-tasting-notes.html"
}
];
Raw
work-pm.js
var worksPM = [
{
title: "Adding 3rd Party Functionality to the Fitbit Blaze",
desc: "A PRD proposal that was part of my Product School final project in Spring 2016",
pic: "img/fitbit.png",
url: "https://www.sanfranciscofogworks.com/projects/fitbit-blaze/fitbit-blaze-web-apps-prd.html"
},
{
title: "Functional Redesign of the Ingenio.com Seller Dashboard",
desc: "One of the many features I PM&rsquo;d at Ingenio, this redesign was part of the pivot of the Ingenio.com marketplace to a Life Coaching focus",
pic: "img/Ingenio-Advisor-Dashboard-th.jpg",
url: "https://www.sanfranciscofogworks.com/images/Ingenio-Advisor-Dashboard.jpg"
},
{
title: "Consulting",
desc: "Providing Product Management and UX consulting to a variety of clients",
pic: "img/unsplash-samuel-zeller.jpg",
url: "#contact"
}
];
Raw
work.js
var worksDev = [
{
title: "San Francisco Fogworks",
desc: "My original portfolio site",
pic: "img/sffw.png",
url: "https://www.sanfranciscofogworks.com"
},
{
title: "Javascript Calculator",
desc: "A CareerFoundry Exercise",
pic: "img/js-calc.png",
url: "http://bmikol-calc.bitballoon.com/"
},
{
title: "HTML::Pipeline<br>Redcarpet Filter",
desc: "A Ruby gem to render Markdown source into Markdown HTML using Redcarpet via HTML::Pipeline",
pic: "img/pipeline-redcarpet.png",
url: "https://github.com/bmikol/html-pipeline-redcarpet_filter"
},
{
title: "HTML::Pipeline<br>Typogruby Filter",
desc: "A Ruby gem to add Typogruby text filters to HTML::Pipeline",
pic: "img/pipeline-typogruby.png",
url: "https://github.com/bmikol/html-pipeline-typogruby_filter"
}
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment