body {
padding-top: 50px;
padding-bottom: 00px;
background-color: #f6f6f6;
}
.full {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-color: rgb(28, 28, 28);
}
.navbar {
z-index: 9999;
background-color: black;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.7);
}
.btn-circle {
width: 50px;
height: 50px;
text-align: center;
padding: 0;
font-size: 24px;
line-height: 48px;
border-radius: 50%;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}
.btn-lnk {
position: absolute;
bottom: 15px;
}
.btn-lnk0 {
left: 30px;
}
.btn-lnk1 {
right: 30px;
}
#twoam {
width: 100vw;
height: 100vh;
background-image: url("http://2am.ninja/img/bruce_contact3.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: rgb(28, 28, 28);
color: white;
}
#nav-bar ul li:hover::after {
width: 100%;
}
#nav-bar ul li::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
background: #607D8B;
width: 0;
transition: width 0.2s;
}
.max {
max-width: 1300px;
margin: auto;
padding-bottom: 15px;
}
.desc {
font-family: 'Roboto', sans-serif;
font-size: 1.3em;
line-height: 1.7em;
letter-spacing: 0.03em;
margin-left: 10px;
margin-right: 10px;
}
#about {
width: 100vw;
background-color: rgb(255, 255, 255);
padding-top: 20px;
padding-bottom: 50px;
}
#about .desc {
font-weight: 400;
color: rgba(0, 0, 0, 0.87);
}
.icon-me {
text-align: center;
font-size: 5em;
color: rgba(200, 100, 100, 0.7);
padding-top: 20px;
padding-bottom: 25px;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.30);
}
.icon-contact {
text-align: center;
font-size: 7.5em;
color: rgba(152, 110, 110, 0.4);
padding-top: 10px;
padding-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
}
.icon-contact a {
color: rgba(152, 110, 110, 0.4) !important;
}
#portfolio {
background-color: #f6f6f6;
width: 100vw;
max-width: 1000px;
padding-top: 20px;
padding-bottom: 50px;
}
#portfolio .desc {
font-weight: 400;
color: rgba(0, 0, 0, 0.6);
}
#contact {
width: 100vw;
height: 100vh;
background-image: url(http://2am.ninja/img/stars.jpg);
background-color: black;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
padding-top: 20px;
}
.tagline1 {
font-family: 'lato', sans-serif;
font-size: 2em;
font-weight: 300;
font-style: italic;
color: #bbb;
text-align: left;
padding-top: 70px;
text-shadow: 1px 1px black;
}
.tagline2 {
font-family: 'lato', sans-serif;
font-size: 7em;
letter-spacing: 7px;
line-height: 0.95em;
font-weight: 100;
color: white;
text-align: left;
text-shadow: 1px 1px black;
padding-top: 10px;
}
.tagline3a, .tagline3b, .tagline3c {
font-family: 'courier', sans-serif;
font-size: 1.75em;
font-style: italic;
color: #666;
text-align: left;
line-height: 1em;
text-shadow: 1px 1px black;
}
.tagline3a {
padding-top: 50px;
}
.tagline3b {
padding-left: 30px;
}
.line {
height: 3px;
width: 100px;
position: relative;
top: -12px;
display: inline-block;
background-color: #999;
}
.line.about {
background-color: rgba(0, 0, 0, 0.54);
}
.line.portfolio {
background-color: rgba(0, 0, 0, 0.54);
}
.line.contact {
background-color: rgba(255, 255, 255, 0.95);
}
.section-title {
font-family: 'lato', sans-serif;
font-size: 3.5em;
font-weight: 900;
font-style: italic;
text-align: center;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
}
.section-title.about {
color: rgba(0, 0, 0, 0.54);
text-shadow: 1px 1px rgba(0, 0, 0, 0.75);
}
.section-title.portfolio {
color: rgba(0, 0, 0, 0.54);
text-shadow: 1px 1px rgba(0, 0, 0, 0.75);
}
.section-title.contact {
color: rgba(255, 255, 255, 0.9);
text-shadow: 1px 1px rgba(0, 0, 0, 0.99);
}
.section-banner {
padding-top: 10px;
padding-bottom: 50px;
}
.project-title {
font-family: 'Lato', sans-serif;
font-size: 1.75em;
font-weight: 500;
padding-top: 4px;
padding-bottom: 1px;
color: #666;
text-align: center;
}
.project-headings {
font-family: 'Open Sans', sans-serif;
}
.project-body {
font-family: 'Roboto', sans-serif;
font-size: 1em;
margin-left: 10px;
margin-right: 10px;
margin-top: 1px;
line-height: 1.5em;
letter-spacing: 0.03em;
}
.project {
border-width: thin;
border-color: #ccc;
}
.intro {
height: 100vh;
width: 100%;
}
.content {
vertical-align: middle;
}
/*section {
width: 100%;
margin: 0;
max-width: none;
background-color: #000;
height: 100vh;
}*/
#social-footer {
width: 100%;
text-align: center;
color: white;
background-color: black;
}
#social-footer ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#social-footer ul li {
display: inline;
padding: 0.4em;
}
#social-footer a {
/* color: #939393 !important; */
color: white !important;
}
.blacktext {
color: black;
}
footer {
width: 100vw;
position: fixed;
bottom: 0;
left: 0;
padding: 1% 5%;
text-align: center;
background-color: #000;
opacity: 1;
z-index: 100;
a {
font-weight: 500;
text-decoration: none;
}
}
a.fa {
text-decoration: none
}
a:link {
text-decoration: none !important;
outline: 0;
}
.fa-stack {
margin: -2px;
}
.copyright {
padding-bottom: 0px;
padding-top: 5px;
color: #555;
}
#down {
position: absolute;
opacity: 0.20;
left: 50%;
bottom: 10%;
cursor: pointer;
}
.card {
position: relative;
width: 300px;
height: 365px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
perspective: 2000px;
cursor: pointer;
}
.card img {
width: calc(300px - 0px);
height: calc(365px - 45px);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-style: solid;
border-color: rgba(0,0,0,0.16);
border-bottom-width: 1px;
}
.card_front, .card_back {
position: absolute;
left: 0px;
top: 0px;
width: inherit;
height: inherit;
border-style: solid;
border-width: 0px;
border-radius: 6px;
border-color: #666;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.9s ease-in-out;
transition: transform 0.9s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}
.card_front:hover, .card_back:hover {
left: -4px;
top: -4px;
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.5);
}
.card_front {
background-color: white;
}
.card_back {
background-color: #fafffc;
-webkit-transform: rotateY(179deg);
-ms-transform: rotateY(179deg);
transform: rotateY(179deg);
}
.card.effect_click.flipped .card_front {
-webkit-transform: rotateY(-179deg);
-ms-transform: rotateY(-179deg);
transform: rotateY(-179deg);
}
.card.effect_click.flipped .card_back {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.highlight {
opacity: 0.6;
}
.highlight:hover {
opacity: 1;
}
@media only screen and (max-width: 768px) {
#contact {
background-attachment: scroll;
}
#twoam {
background-attachment: scroll;
}
.tagline1 {
font-size: 1.2em;
}
.tagline2 {
font-size: 2.8em;
}
.tagline3a, .tagline3b, .tagline3c {
font-size: 1em;
}
.section-title {
font-size: 2.6em;
}
.line {
height: 2px;
width: 70px;
position: relative;
top: -10px;
display: inline-block;
background-color: #666;
}
.icon-me {
font-size: 7.5empx;
padding-top: 10px;
padding-bottom: 15px;
}
.icon-contact {
font-size: 4.5em;
padding-top: 10px;
padding-bottom: 10px;
}
}
$(document).ready(function() {
// import view port library function
jQuery.extend(verge);
// smooth scrolling of viewport to target
$('a[href^="#"]').click(function(event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - 50
}, 900);
});
$('#down').click(function() {
$('html,body').animate({
scrollTop: $('#about').offset().top - 50
}, 900);
});
var currentTime = new Date();
var year = currentTime.getFullYear();
// data for the portfolio cards front and back
var projectData = [{
title: 'Quotes',
text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-build-a-random-quote-machine" target="_blank"><i>Build a Random Quote Machine</i></a>. The user is able to show a new random quote and send that quote to Twitter. <strong>Quotes</strong> was designed and optimized to be a mobile web app first.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap<br> <strong>Graphics Editor:</strong> Gimp, pixlr.com<br> <strong>Images:</strong> lorempixel.com<br> <strong>Fonts:</strong> Font-awesome<br> <strong>Data:</strong> random famous quotes API',
image: ['http://2am.ninja/img/quotes.jpg'],
site: [
['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/dojjre'],
['Live Site', 'fa-link', 'http://2am.ninja/quotes/']
]
}, {
title: 'Twitch TV',
text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-use-the-twitchtv-json-api" target="_blank"><i>Use the Twitchtv JSON API</i></a>. A user can see if Free Code Camp is currently streaming on Twitch.tv.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap<br> <strong>Fonts:</strong> Ubuntu Mono<br> <strong>Data:</strong> Twitchtv API',
image: ['http://2am.ninja/img/twitch3.jpg'],
site: [
['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/jrEBgq']
// ,['Live Site', 'fa-link', 'http://2am.ninja/twitch/']
]
}, {
title: 'Wiki Search',
text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-build-a-wikipedia-viewer" target="_blank"><i>Build a Wikipedia Viewer</i></a>. A user can search Wikipedia entries in a search box and see the resulting Wikipedia entries.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap<br> <strong>Graphics Editor:</strong> pixlr.com<br> <strong>Images:</strong> unsplash.com<br> <strong>Data:</strong> Wikipedia API',
image: ['http://2am.ninja/img/wiki.jpg'],
site: [
['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/rVRwor']
]
}, {
title: 'Pomodoro Timer',
text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-build-a-pomodoro-clock" target="_blank"><i>Build a Pomodoro Clock</i></a>. A user can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed. <strong>Pomodoro Timer</strong> was designed and optimized to be a mobile web app first.</p> <strong>Code:</strong> HTML5, HTML5 Canvas, CSS3, Javascript, jQuery, ion.sound<br> <strong>Layout:</strong> Bootstrap, HTML5 Canvas<br> <strong>Fonts:</strong> IcoMoon',
image: ['http://2am.ninja/img/timer.jpg'],
site: [
['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/WvVZyM'],
['Live Site', 'fa-link', 'http://2am.ninja/timer/']
]
}, {
title: 'Local Weather',
text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-show-the-local-weather" target="_blank"><i>Show the Local Weather</i></a>. A user can see the weather in my current location.. <strong>Local Weather</strong> was designed and optimized to be a mobile web app first.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap<br> <strong>Images:</strong> flickr.com<br> <strong>Fonts:</strong> Climacons, Open Sans<br> <strong>Data:</strong> Open Weather Map API, IP-API.com Geolocation API',
image: ['http://2am.ninja/img/weather.jpg'],
site: [
['CodePen', 'fa-codepen', 'https://codepen.io/MutantSpore/full/oXaoxb/']
]
},
/*
{
title: 'Camper News',
text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-stylize-stories-on-camper-news" target="_blank"><i>Stylize Stories on Camper News</i></a>. The user can browse recent posts from Camper News.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap, Masonary<br> <strong>Graphics Editor:</strong> Gimp, pixlr.com<br> <strong>Images:</strong> unsplash.com<br> <strong>Data:</strong> Free Code Camp news API',
image: ['http://2am.ninja/img/news.jpg'],
site: [
['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/vOvBqY']
]
},
*/
{
title: 'Bar Graph',
text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/visualize-data-with-a-bar-chart" target="_blank"><i>Visualize Data with a Bar Chart </i></a>. The user can see US Gross Domestic Product by quarter, over time, with a mouse over tooltip.</p> <strong>Code:</strong> HTML5, CSS3, D3, SVG, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap',
image: ['http://2am.ninja/img/bar-graph.jpg'],
site: [
['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/PNJMpg']
]
}, {
title: 'Heat Map',
text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/visualize-data-with-a-heat-map" target="_blank"><i>Visualize Data with a Heat Map</i></a>. The user can view a heat map with data represented both on the Y and X axis, with mouse over tooltip.</p> <strong>Code:</strong> HTML5, CSS3, D3, SVG, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap',
image: ['http://2am.ninja/img/heat-map.jpg'],
site: [
['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/VeKNEa']
]
},
/*
{
title: 'Force Graph',
text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/show-relationships-with-a-force-directed-graph" target="_blank"><i>Show Relationships with a Force Directed Graph</i></a>. The user can see a Force-directed Graph that shows which campers are posting links on Camper News to which domains.</p> <strong>Code:</strong> HTML5, CSS3, D3, SVG, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap<br> <strong>Data:</strong> Free Code Camp news API',
image: ['http://2am.ninja/img/force-graph.jpg'],
site: [
['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/KVdbMO']
]
},
*/
{
title: 'Tic-Tac-Toe',
text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/build-a-tic-tac-toe-game" target="_blank"><i>Build a Tic Tac Toe Game</i></a>. The user can play a game of Tic Tac Toe with the computer.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Materialize.css',
image: ['http://2am.ninja/img/ttt.jpg'],
site: [
['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/jWWYLo']
]
}
];
// add listener to all the cards for click flipping
function addListener() {
var cards = document.querySelectorAll(".card.effect_click");
for (var i = 0; i < cards.length; i++) {
clickListener(cards[i]);
}
function clickListener(card) {
card.addEventListener("click", function() {
this.classList.toggle("flipped");
});
}
}
// create, populate and show portfolio project cards
function showProjectCards() {
var html = '';
projectData.forEach(function(project) {
html += '<div class="col-sm-6 col-md-4">';
html += '<div class="card effect_click"><div class="card_front">';
html += '<figure><img class="img-responsive" src="' + project.image[0] + '">';
html += '<figcaption class="project-title">';
html += project.title;
html += '</figcaption></figure></div>';
html += '<div class="card_back"><figure>';
html += '<div class="project-title">' + project.title + '</div>';
html += '<figcaption">';
html += '<div class="project-body">' + project.text + '</div>';
html += '<div><a data-toggle="tooltip" title="' + project.site[0][0] + '" data-placement="top" href="' + project.site[0][2] + '" target="_blank" class="btn btn-primary btn-lg btn-circle btn-lnk btn-lnk0"><i class="fa ' + project.site[0][1] + '" aria-hidden="true"></i></a>';
if (typeof project.site[1] !== 'undefined') {
html += '<a data-toggle="tooltip" title="' + project.site[1][0] + '" data-placement="top" href="' + project.site[1][2] + '" target="_blank" class="btn btn-primary btn-lg btn-circle btn-lnk btn-lnk1"><i class="fa ' + project.site[1][1] + '" aria-hidden="true"></i></a>';
}
html += '</div></figcaption></figure></div>';
html += '</div>';
html += '</div>';
});
$('#theProjects').append(html);
addListener();
}
showProjectCards();
$(".copyright").append("<span>© " + year + " Bruce Young. All rights reserved</span>");
// turn on bootstrap tooltips
$('[data-toggle="tooltip"]').tooltip();
});