<body id="main" data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse text-center" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#about">ABOUT</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Jimmy Höglund</h1>
<hr>
<p class="landing-par">Studying computer science in Borlänge, Sweden.</p>
<!--<a href="#about" title="Scroll down">
<span class="glyphicon glyphicon-chevron-down"></span></a>-->
<br>
<a href="#about" class="jumbotronBtn btn">Read more</a>
</div>
<div class="container-fluid" id="about">
<div class="container">
<div class="row">
<div class="col-md-8 col-xs-12">
<h2 class="text-center">about me</h2>
<hr>
<p> Hello, my name is Jimmy Höglund and I'm studying computer science (systemvetenskap in swedish) at
Högskolan Dalarna in Borlänge. The program involves a lot of coding in Java, JavaScript, HTML, PHP,
SQL
etc. I have a big interest in computer hardware and new technology and have
built a handful of custom-built computers. On my free time I like to hang out with friends and play
video-games with them.</p>
<br>
</div>
<div class="col-md-4">
<img class="img-responsive img-circle slideanim hideImage"
src="https://i.gyazo.com/b405d75939b924e34182bbe88d3d1032.png"
alt="Picture of me" align="right">
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://makdigitaldesign.com/services/wp-content/uploads/2014/03/responsive-design1.png"
class="slideanim hideImage img-responsive devices">
</div>
<div class="col-md-8 col-xs-12">
<h2 class="text-center">about the website</h2>
<hr>
<p>Lately I've found a big interest in designing and developing modern and responsive websites. A friend
recommended the <a href="https://www.freecodecamp.com" target="_blank"
title="https://www.freecodecamp.com">Free
Code Camp</a>
course to me and I've been working
throught that in order to learn as much as I can. The course involves HTML5, Bootstrap, jQuery,
JavaScript etc. and this portfolio website is one step of the course. This will pretty much be my
first,
somewhat, professional-looking website and I would appreciate it if you could send me some feedback
and
pointers
on how I can improve it! </p>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-grey text-center" style="margin-right: 0; padding-right: 0;" id="portfolio">
<h2 class="text-center">Portfolio</h2>
<hr>
<div class="row" align="center">
<div class="col-md-3 col-sm-6 col-xs-12">
<a href="https://codepen.io/ColtoN899/full/GjgYEm/" target="_blank">
<div class="hovereffect">
<img class="img-responsive portfolioImg"
src="https://i.gyazo.com/870a33aad56b45a5f3616fe10ce33849.png">
<div class="overlay">
<h2>Random quote widget</h2>
<p>Go to website</p>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<a href="https://codepen.io/ColtoN899/full/zKxQLO/" target="_blank">
<div class="hovereffect">
<img class="img-responsive portfolioImg"
src="https://gyazo.com/f66964cea4f93978e5ee84cad67cff88.png">
<div class="overlay">
<h2>Local weather widget</h2>
<p>Go to website</p>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<a href="https://codepen.io/ColtoN899/full/NRGZkN/" target="_blank">
<div class="hovereffect">
<img class="img-responsive portfolioImg"
src="https://i.gyazo.com/57c817847cbc1d7528dc48c2faa68429.png">
<div class="overlay">
<h2>Wikipedia viewer</h2>
<p>Go to website</p>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive portfolioImg"
src="https://readytheme.net/wp-content/uploads/2015/12/ee2.png">
<div class="overlay">
<h2></h2>
<p>PLACEHOLDER IMAGE</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive portfolioImg"
src="https://images.template.net/wp-content/uploads/2016/02/09115958/One-Page-Bootstrap-Responsive-HTML5-Mobile-Template.jpg">
<div class="overlay">
<h2></h2>
<p>PLACEHOLDER IMAGE</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive portfolioImg"
src=" http://blog.creative-tim.com/wp-content/uploads/2015/02/15-Gorgeous-Sites-Built-with-Twitter-Bootstrap-730x410.jpg">
<div class="overlay">
<h2></h2>
<p>PLACEHOLDER IMAGE</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive portfolioImg"
src="http://materialdesignblog.com/wp-content/uploads/2015/01/lifeawesome.png">
<div class="overlay">
<h2></h2>
<p>PLACEHOLDER IMAGE</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive portfolioImg"
src="https://templateflip.com/wp-content/uploads/2015/12/one-page-bootstrap-600x338.jpg">
<div class="overlay">
<h2></h2>
<p>PLACEHOLDER IMAGE</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="contact">
<h2 class="text-center">contact</h2>
<hr>
<div class="container contactContainer">
<form id="contactForm">
<div class="form-group">
<label for="name" class="">Name</label>
<input type="text" class="form-control" id="name" placeholder="First & Last">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="example@domain.com">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea placeholder="Enter text..." rows="4" class="form-control" id="message"
form="contactForm"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn contactBtn"><span class="glyphicon glyphicon-send"
style="font-size: 12px"></span> Send
</button>
</div>
</form>
</div>
</div>
<footer class="container-fluid" id="footer">
<div class="col-md-12 footerDiv col-xs-12 text-center">
<a href="https://www.facebook.com/jimmy.hoglund.10?ref=bookmarks" target="_blank"><i
class="fa fa-facebook-square" aria-hidden="true"></i></a>
<a href="https://www.youtube.com/channel/UC8ugLoDqtRalo7qi9wTojVQ" target="_blank"><i
class="fa fa-youtube-square" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/jimmy-h%C3%B6glund-245141125?trk=hp-identity-name" target="_blank"><i
class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a href="https://plus.google.com/u/0/116121539635506159640/posts" target="_blank"><i
class="fa fa-google-plus-square" aria-hidden="true"></i></a>
<p class="text-center copyright">© 2016, Jimmy Höglund, All rights reserved</p>
</div>
</footer>
</body>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Pacifico');
@import url('https://fonts.googleapis.com/css?family=Lato');
@media only screen and (max-width: 1000px) {
.img-circle, .devices {
display: none;
}
}
html, body {
height: 100%;
font-family: 'Open Sans', sans-serif !important;
}
.navbar {
border: 0;
z-index: 9999;
letter-spacing: 4px;
text-shadow: 1px 1px 1px #000;
}
.navbar-brand {
letter-spacing: 1px;
color: #FFFFFF !important;
}
.navbar li a, .navbar {
color: #fff !important;
font-size: 12px;
transition: all 0.6s 0s;
}
.navbar-toggle {
background-color: transparent !important;
border: 0;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
background-color: #DD4E40 !important;
}
/* This will be active when the scrollTop == 0 */
.navbar-invis {
background-color: rgba(0, 0, 0, 0);
}
/* This will be active when the scrollTop != 0 */
.navbar-moved {
background-color: #242B35;
-webkit-box-shadow: 0px 1px 5px 0px #000;
-moz-box-shadow: 0px 1px 5px 0px #000;
box-shadow: 0px 1px 5px 0px #000;
}
.container-fluid {
padding: 35px !important;
}
.contactBtn {
background-color: #DD4E40;
color: #FFFFFF;
transition: all 0.3s ease 0s;
}
.contactBtn:hover {
color: #FFFFFF;
background-color: #E62117;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
/* Hamburger menu button */
.glyphicon-menu-hamburger {
font-size: 22px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 10px;
padding-top: 12px;
color: #FFFFFF;
}
.devices {
text-align: right;
margin-top: 60px;
width: 80%;
}
/* Hides the image at first to get a better looking slide-in effect */
.hideImage {
visibility: hidden;
}
hr {
border: 0;
width: 50px;
height: 2px;
background-color: #DD4E40;
}
.jumbotron hr {
width: 30%;
min-width: 185px;
max-width: 300px;
margin-top: -10px;
}
h1 {
text-shadow: 1px 2px 3px #000;
margin-top: 15%;
}
.jumbotron p {
font-size: 22px;
text-shadow: 1px 1px 1px #000;
font-family: 'Lato', sans-serif;
}
.jumbotronBtn {
background-color: transparent;
font-family: 'Lato', sans-serif;
font-size: 21px;
color: #ffffff !important;
border-radius: 50px;
border: 2px solid #DD4E40;
text-shadow: 1px 1px 1px #000;
transition: all 0.3s ease 0s;
}
.jumbotronBtn:hover {
background-color: #DD4E40;
}
#footer {
background-color: #242B35;
background-size: cover;
margin-top: 100px;
padding: 35px !important;
-webkit-box-shadow: inset 0px 10px 20px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 10px 20px -9px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px 10px 20px -9px rgba(0, 0, 0, 0.75);
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
font-size: 15px;
}
.copyright {
padding-top: 10px;
font-size: 12px;
color: #FFFFFF;
}
.fa {
font-size: 40px !important;
margin-left: 15px;
transition: all 1s ease 0s;
}
.fa-facebook-square:hover {
color: #3B5998;
}
.fa-youtube-square:hover {
color: #E62117;
}
.fa-linkedin-square:hover {
color: #1E87BE;
}
.fa-google-plus-square:hover {
color: #DD4E40;
}
.jumbotron {
background: url("https://static.pexels.com/photos/7109/laptop-notebook-clean-hero-large.jpg");
background-size: cover;
background-repeat: no-repeat;
opacity: 1;
height: 100%;
min-height: 600px;
color: #ffffff;
}
.img-circle {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
max-width: 200px;
margin-top: 25px;
border: 3px solid #242B35;
}
h2, h1 {
font-family: 'Pacifico', cursive;
}
.overlay h2 {
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 18px;
}
a {
color: #205493;
font-weight: bold;
}
a:hover, a:active a:visited {
color: #DD4E40;
text-decoration: none !important;
}
.bg-grey {
background-color: rgb(242, 242, 242);
}
.col-xs-12 {
padding: 3px;
}
.col-md-3 {
padding: 10px;
}
.portfolioImg {
height: 230px;
}
label {
font-size: 15px;
margin-top: 5px;
margin-left: 3px;
}
/* Hover effect on portfolio images */
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background-color: #242B35;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 25px 20px;
cursor: pointer;
}
.hovereffect img {
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
text-transform: uppercase;
opacity: 0;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/**
* Created by hen_s on 2016-08-03.
*/
$(document).ready(function() {
var scrollTop = $(window).scrollTop();
var checkIfTop = (scrollTop == 0);
var navbar = $('.navbar');
var collapse = $('.collapse');
//Navbar color on page load
if (screen.width <= 600) {
navbar.css('background-color', 'transparent');
collapse.css("background-color", "#242B35");
collapse.css("border-color", "transparent");
} else if (screen.width > 600 && scrollTop > 0) {
navbar.css('background-color', '#242B35');
$('.navbar li a, .navbar').css('font-size', '15px');
} else {
navbar.css('background-color', 'transparent');
$('.navbar li a, .navbar').css('font-size', '12px');
}
//Close collapse menu after click on small screens
$(document).on('click', '.navbar-collapse.in', function(e) {
if ($(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle') {
$(this).collapse('hide');
}
});
//Slide animation images
$(".slideanim").each(function() {
var pos = $(this).offset().top;
if (pos < scrollTop + 600) {
$(this).removeClass("hideImage");
} else {
$(window).on('scroll', function() {
$(".slideanim").each(function() {
var pos = $(this).offset().top;
if ((screen.height > 1000) && (pos < scrollTop + 800)) {
$(this).addClass("animated fadeInUp");
$(this).removeClass("hideImage");
} else if ((screen.height < 800) && (pos < scrollTop + 600)) {
$(this).addClass("animated fadeInUp");
$(this).removeClass("hideImage");
}
});
});
} //end else
});
//Navbar slide function
$(window).on('scroll', function() {
scrollTop = $(window).scrollTop();
if (scrollTop == 0 && screen.width > 600) {
checkIfTop = true;
navbar.css('background-color', 'transparent');
$('.navbar li a, .navbar').css('font-size', '12px');
} else if (scrollTop != 0 && screen.width > 600) {
if (checkIfTop) {
checkIfTop = false;
navbar.css('background-color', '#242B35');
$('.navbar li a, .navbar').css('font-size', '15px');
}
}
});
//Smooth scroll
$(".navbar a, .jumbotron a, footer a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function() {
window.location.hash = hash;
});
}
});
});
