LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.


Web Developer - User Experience Designer - Graphic Artist
A picture of Justin looking at San Francisco from across the Golden Gate Bridge.

Portfolio


Contact Me



Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Toronto... just feel free to drop me a line anytime.

I promise to reply A.S.A.P.

Note: No spam/soliciting pour moi, merci :)

CSS
body{
  margin:0;
  padding:0;
  color:#666;
  background:#888;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:20px;
}
h2,h3{
  color:#888;
  font-weight:bold;
  text-align:center;
  text-transform:uppercase;
}
a{
  color:#722872;
}
a:hover,a:focus{color:#592059;
}
#banner .container, 
main header, 
#portfolio .grid, 
#contact>div,
footer #footer-above{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-flow:row wrap;
      flex-flow:row wrap;
  -ms-flex-pack:distribute;
      justify-content:space-around;
  -webkit-box-align:start;
      -ms-flex-align:start;
          align-items:flex-start;
  margin:0 auto; 
}
#banner{
  background-color:#722872 !important;
  height:80px;
  box-shadow:0px 2px 2px 1px rgba(0, 0, 0, 0.2);
  border-color:#592059;
}
#banner .container{width:95%;max-width:1024px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
}
#banner .container::before, #banner .container::after{display:none
}
#banner img{height:50px;margin:15px 0;
}
nav{
  font-size:13px;
  background:#722872;
  -webkit-transition:all .3s;
  transition:all .3s;
}
@media(max-width:768px){
  nav{padding:5px;text-align:center;margin:0 auto;width:120%;
  }
  nav .active a{color:#722872;background:#bbb;box-shadow:0px 2px 2px 1px rgba(0, 0, 0, 0.1);
  }
}
.nav>li{height:100%;text-transform:uppercase;font-weight:bold;letter-spacing:2px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
}
.nav>li a{color:#ffffff;padding:10px 20px;
}
.nav>li a:hover{color:#722872;background:#bbb;box-shadow:0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
.navbar-toggle{margin-right:0;
}
#top{
  height:80px;
  display:block;
}
main >*:not(.scroll-top){max-width:1024px;margin:0 auto;box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.2);
}
main header{background:#aaa;color:#fff;text-align:right;padding:70px 10% 50px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-ms-flex-line-pack:distribute;align-content:space-around;
}
@media(min-width:1023px){
  main header{padding:50px 30px;
  }
}
main header img{border-radius:50%;margin:30px 0 10px;max-width:80%;height:auto;width:250px;
}
main header .intro-text{max-width:675px;text-align:center;margin-bottom:30px;
}
@media(min-width:1023px){
  main header .intro-text{text-align:right;width:610px;
  }
}
main header .intro-text .skills{font-size:1.15em;
}
main section{background:#eee;padding:40px 0;
}
main section#contact>div{margin:0px auto;
}
main section#contact>div>div{width:80%;
}
main section#contact>div>div p{margin:60px auto 0;max-width:700px;
}
@media(min-width:1023px){
  main section#contact>div>div{max-width:38%;
  }
  main section#contact>div>div p{margin-top:35px;
  }
  main section#contact>div>div p:last-child{margin-top:270px;
  }
}
#portfolio .grid{padding:0;max-width:90%;list-style:none;margin-top:20px;
}
#portfolio .grid li{margin:20px;max-width:600px;
}
@media(min-width:1023px){
  #portfolio .grid li{max-width:420px;
  }
}
#portfolio img{max-width:100%;height:auto;display:block;
}
form{
  width:80%;
}
@media(min-width:1023px){
  form{width:40%;margin-left:20px;
  }
}
form .row:first-child .form-item{border-top:1px solid #fff;
}
.form-item{position:relative;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #bbb;
}
.form-item input, .form-item textarea{z-index:1;position:relative;padding-right:0;padding-left:0;border:0;border-radius:0;font-size:1.5em;background:0 0;box-shadow:none!important;resize:none;width:100%;
}
.form-item input:focus, .form-item textarea:focus{outline:0
}
.form-item label{display:block;z-index:0;position:relative;top:2em;margin:0;font-size:.85em;line-height:1.764705882em;vertical-align:middle;vertical-align:baseline;opacity:0;-webkit-transition:top .3s ease,opacity .3s ease;transition:top .3s ease,opacity .3s ease;
}
.form-item-filled label{top:0;opacity:1;color:#aaa;
}
.form-item-focused label{color:#722872;
}
footer{
  color:#fff;
  background-color:#aaa;
  text-align:center;
  box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.2);
}
footer h3{margin-bottom:30px;color:#fff;
}
#footer-above{padding-top:50px;width:80%;
}
#footer-above div{margin-bottom:50px;width:250px;
}
#footer-above ul{padding:0;
}
#footer-above li{display:inline;
}
#footer-below{box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.2);padding:25px 0;background-color:#722872;text-align:center;
}
.button{
  color:#fff;
  border:solid 2px #fff;
  border-radius:50%;
  display:inline-block;
  width:50px;
  height:50px;
  text-align:center;
  font-size:20px;
  line-height:48px;
  -webkit-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
}
.button:hover{border:solid 2px #fff;color:#722872;background:#fff;
}
.scroll-top{
  z-index:1049;
  position:fixed; 
  visibility:visible;
  bottom:2%;right:2%;
}
.scroll-top a{background:#722872;
}
.scroll-top a:hover, .scroll-top a:focus{color:#722872;background-color:#bbb;border-color:#722872;
}
@media(min-width:768px){
  .scroll-top a{visibility:hidden;
  }
}
hr.star-bright, hr.star-dark{margin:40px auto 30px;padding:0;max-width:512px;border:0;border-top:solid 5px;text-align:center;
}
@media(min-width:1023px){
  header hr.star-bright, header hr.star-dark{margin-right:0;text-align:right;
  }
  header hr.star-bright:after, header hr.star-dark:after{right:-10px;
  }
}
hr.star-bright:after, hr.star-dark:after{content:'\f121';font-family:FontAwesome;display:inline-block;position:relative;top:-.8em;padding:0 .25em;font-size:2em;
}
hr.star-bright{border-color:#fff;
}
hr.star-bright:after{color:#fff;background-color:#aaa;
}
hr.star-dark{border-color:#888;
}
hr.star-dark:after{color:#888;background-color:#eee;
}
JS
$(window).on('resize', function() {
  'use strict';
  var element	= document.querySelector('#banner'),
      elHeight = 0,
      elTop = 0,
      dHeight	= 0,
      wHeight	= 0,
      wScrollCurrent = 0,
      wScrollBefore	= 0,
      wScrollDiff	= 0; 
      window.addEventListener('scroll', function () {
        // Hide the displayed menu. If you want to scroll, you're obviously not interested in the options.
        $('.navbar-collapse').collapse('hide');
        $('.navbar-toggle').addClass('collapsed').blur();
        if($(window).width() <= 768) {
          elHeight = element.offsetHeight;
          dHeight = document.body.offsetHeight;
          wHeight = window.innerHeight;
          wScrollCurrent = window.pageYOffset;
          wScrollDiff = wScrollBefore - wScrollCurrent;
          elTop = parseInt(window.getComputedStyle(element).getPropertyValue('top')) + wScrollDiff;

          // scrolled to the very top; element sticks to the top
          if(wScrollCurrent <= 0) {
              element.style.top = '0px';
          } // scrolled up; element slides in
            else if(wScrollDiff > 0) {
              element.style.top = (elTop > 0? 0 : elTop) + 'px'; 
          } // scrolled down
            else if(wScrollDiff < 0) {
              // scrolled to the very bottom; element slides in
              if(wScrollCurrent + wHeight >= dHeight - elHeight) {  
                element.style.top = ( ( elTop = wScrollCurrent + wHeight - dHeight ) < 0 ? elTop : 0 ) + 'px';
              } // scrolled down; element slides out
                else { element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) + 'px'; }
            }
          wScrollBefore = wScrollCurrent;
        } //
          else element.style.top = '0px';
      });
}).resize();

// Floating label headings for the contact form
$(function() {$("body")
 .on("input propertychange", ".form-item",function(e) {
  $(this).toggleClass("form-item-filled",!! $(e.target).val());})
 .on("focus", ".form-item",function() {
  $(this).addClass("form-item-focused");})
 .on("blur", ".form-item",function() {
  $(this).removeClass("form-item-focused");});
});

// Highlight the top nav as scrolling occurs
$('body').scrollspy({target: '.navbar-fixed-top'})

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
  $(".navbar-collapse").collapse('hide');});

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {$('body').on('click', 'a.scrollable', function(event) {
  var $anchor = $(this);
  $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top},1500,'easeInOutExpo');
  event.preventDefault();
  });
});

Description

Zipline: Build a Personal Portfolio Webpage @ FreeCodeCamp.com
Term
Mon, 11/27/2017 - 21:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv