Portfolio Home Page Mockup

index.jade

// Jade Stuff
mixin topic(name, icon, hash)
 div(id=hash).topic.wow
   .icon-box
     .topic-icon
       span.fa-stack.fa-3x
         i.fa.fa-circle.fa-stack-2x
         i(class=icon).fa.fa-stack-1x.fa-inverse
   .topic-title
     h2= name
   .topic-text
     block

// Html Document
doctype
html(lang="en")
  head
    title Portfolio Site Landing Mockup
  
  body
    .modal-wraper
      .contact-modal.wow.fadeIn
        a(href="", action"").modal-close.fa.fa-close.fa-2x
        .contact-modal-heading.wow.fadeIn
          h1 Get in touch!
        .contact-form
          form(action="mailto:skyler@skybfly.com", method="post")
            .form-group.wow.fadeIn
              label(for="Name") 
                h4 Name
              input( type="text" id="name" placeholder="Name").form-control
            .form-group.wow.fadeIn
              label(for="Email Address") 
                h4 Email
              input( type="email" id="email" placeholder="Email").form-control
            .form-group.wow.fadeIn
              label(for="Message") 
                h4 Message
              textarea(rows="3", id="mesage", placeholder="Message").form-control
            button(type="text").btn.btn-default.wow.fadeIn Send
  
    .wrapper(data-mcs-theme="dark")
      
      .header-wrapper
        .header
          .header-content
            .header-name
              h1 Skyler 
              h1  Fly-Wilson
            
            .header-caption
              h2 Developer • Maker

            .header-statement
              h3 Website Under Development 
              i.fa.fa-flask.fa-2x

        a.scroll-hint(href="#welcome")
          i.fa.fa-angle-down.fa-3x

      .content
        .welcome#welcome
          .welcome-block
            .welcome-content
              .welcome-heading.wow
                h2 Welcome to my website!
              .welcome-blurb.wow
                p This site will serve as a porfolio to present some of my projects.
                p Im still working on adding more content so check back soon!
              .welcome-social.wow
                a(href="https://github.com/skyfly200", target="_blank").fa.fa-github.fa-2x
                a(href="http://codepen.io/skyfly200/", target="_blank").fa.fa-codepen.fa-2x
                a(href="https://www.linkedin.com/in/skyler-fly-wilson-38870986", target="_blank").fa.fa-linkedin.fa-2x
                a(href="mailto:skyler@skybfly.com", target="_blank").fa.fa-envelope.fa-2x

          .welcome-img.wow
            img(src="https://skyfly200.github.io/images/bio/waterfall.jpg" alt="A picture of Skyler") 
        
        // Topics
        .topics-container#skills
          .topics-header.wow.fadeInDown
            h1 An overview of my skills
          
          .topics#topics
            +topic("Back End", "fa-cogs", "back-end")
              p Python, PHP, SQL, Apache
              p

            +topic("Front End", "fa-code", "front-end")
              p HTML5, SASS, JS
              p jQuery, Jade, Bootstrap

            +topic("Server Admin", "fa-linux", "servers")
              p Linux, Command Line Tools
              p Apache, MySql, Icecast
              p Digital Ocean, Virtual Box, Vagrant

            +topic("Hardware", "fa-bolt", "hardware")
              p Assemby, Repair, Salvage
              p Sensing, Control, Automation
              p Arduino, RaspberryPi, PC

            +topic("3D Modeling", "fa-cube", "3d")
              p Art, Design
              p Prototyping, Printing

            +topic("Video Production", "fa-film", "video")
              p Videography, Editing, Effects
              p

            
            +topic("Audio Production", "fa-microphone", "audio")
              p Live, Tracking, Mixing
              p Broadcast, Effects, Routing

            +topic("Photography", "fa-camera", "photo")
              p Photoshop, Lightroom
              p 

        .resume-download#resume
          .resume-header.wow.fadeInDown
            h1 Download my resume
          .resume-buttons.wow.fadeInUp
            a(href="https://docs.google.com/document/d/1NpkEJLsMyp3Em-c_rO5N1LxYCl2lYZD9UgD6RiLe34I/edit?usp=sharing", target="_blank")
              button.resume-btn.btn.btn-default 
                i.fa.fa-cogs   
                .btn-text Software
            a(href="https://docs.google.com/document/d/1RzgoGHvK0u9oHzOGcWQXEAbtivAdLn18JsE62vjAFZ4/edit?usp=sharing", target="_blank")
              button.resume-btn.btn.btn-default 
                i.fa.fa-bolt   
                .btn-text Hardware
            a(href="https://docs.google.com/document/d/1pYAzEMBY3qcLHO-PIjnMFbzRreHBrhAJpjGlJuXAM5I/edit?usp=sharing", target="_blank")
              button.resume-btn.btn.btn-default 
                i.fa.fa-film   
                .btn-text Multimedia

        .contact#contact
          .contact-block.wow.fadeInUp
            .contact-header
              h1 Interested?
              h1 Get in touch!
            .contact-info
              a(href="mailto:skyler@skybfly.com", target="_blank").contact-link 
                h2 skyler@skybfly.com
              a(href="tel:7203100607").contact-link 
                h2 (720) 310-0607
              h2 Boulder, CO, USA
            .contact-btn
               a(href="#").fa-stack.fa-3x
                 i.fa.fa-circle.fa-stack-2x
                 i.fa-envelope.fa.fa-stack-1x.fa-inverse

      footer#footer
        h4.copyright © Skyler Bright Fly-Wilson 2016
        .footer-links
          a(href="#footer", target="_blank").footer-link
            i.fa.fa-sitemap
              Site Map
          

portfolio-home-page-mockup.markdown

Portfolio Home Page Mockup

A Pen by Skyler Fly-Wilson on CodePen.

License.

portfolio-site-mockup.markdown

Portfolio Site Mockup

A Pen by Skyler Fly-Wilson on CodePen.

License.

script.js

// browser upgrade nitification script
var $buoop = {
    reminder: 24,                   // after how many hours should the message reappear, 0 = show all the time
    reminderClosed: 150,             // if the user closes message it reappears after x hours
    text: "Your browser (%s) is outdated.  Please <a%s>update to a new browser</a>, to view this site best!",                       // custom notification html text
                                    // Optionally include up to two placeholders "%s" which will be replaced with the browser version and contents of the link tag. Example: "Your browser (%s) is old.  Please <a%s>update</a>"
    newwindow: true                 // open link in new window/tab
};
function $buo_f(){ 
 var e = document.createElement("script"); 
 e.src = "//browser-update.org/update.min.js"; 
 document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}

// WOW js initialize
new WOW().init();

scripts

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//use.fontawesome.com/26e048035c.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.sass

// base element styling
body
  line-height: 150%
  .wrapper
    background-color: #FFF
    height: auto
    overflow: hidden
    
  h1, h2, h3, h4, h5, h6
    font-family: 'Nixie One', sans-serif

  p
    font-family: 'Raleway', sans-serif
    
  form
    font-family: 'Raleway', sans-serif
    
  hr
    background-color: #888
    border-color: #888
    color: #888
    
  a
    color: #6F2096
    text-shadow: 0px 0px 1px rgba(0,0,0,0.75)
    font-family: 'Raleway', sans-serif
    transition: text-shadow 200ms
    &:hover, &:active
      text-decoration: none
      text-shadow: 0px 2px 3px rgba(0,0,0,0.75)

    
  // Browser Update Notification styling
  .buorg
    border-bottom: 1px solid #A29330
    background: #FDF2AB no-repeat 1em 0.55em url(http://browser-update.org/img/dialog-warning.gif)
    text-align: center
    cursor: pointer
    font-family: 'Raleway',Helvetica,sans-serif
    color: #000
    font-size: 14px
    div
      padding: 8px 36px 8px 40px

  #buorgclose
    top: .18em
    font-size: 18px
 
// Extend class for centering objects
.flex-box-center
  display: flex
  align-items: center
  justify-content: center
    
// Mixin for card depth style
@mixin card-depth($index)
  position: relative
  z-index: (10 * $index)
  box-shadow: 0px -15px 50px rgba(0,0,0,0.8)
  
// style an arrow bouncing to hint at scrolling to view more content
.scroll-hint
  @extend .flex-box-center
  margin-top: -15vh
  width: 100%
  a
    text-decoration: none
  i
    opacity: 0
    animation: 2s ease-in-out 1.5s infinite scroll-hint

    
// Modals
.modal-wraper
  position: fixed
  top: -100vh
  z-index: 500
  width: 100vw
  height: 100vh
  background-color: rgba(255,255,255,0.5)
  @extend .flex-box-center
  
  .contact-modal
    color: #fff
    background-color: rgba(0,0,0,0.93)
    @extend .flex-box-center
    flex-direction: column
    border: solid white 2px
    box-shadow: 0px -15px 60px rgba(0,0,0,0.6)
    
    .modal-close
      padding: 0px
      margin: 0px
      z-index: 501
      position: relative
      left: 46%
      top: 4px
      color: #FFF
    
    .contact-modal-heading
      visibility: inherit
      padding: 15px 25px
      h1
        margin: 0px
        
    .contact-form
      margin: 0px 30px 20px 30px
      @extend .flex-box-center
      width: 100%
      text-align: center
      .form-group
        text-align: left
        width: 100%
        label
          font-size: 130%
          font-style: normal
        input, textarea
          width: 30em
          flex: 1 100%
          &:focus
            box-shadow: 0px 0px 15px rgba(255, 255, 255,0.6)
          
      button
        font-size: 150%
        &:hover, &:focus, &:active
          background-color: rgba(255, 255, 255,0.1)
          color: #FFF

// Header Styles
  
.header-wrapper
  height: 100vh
  background-image: url('https://skyfly200.github.io/images/bkgs/20140810_123425_003-v1.jpg')
  background-size: cover
  z-index: 0
  .scroll-hint
    color: #FFF
  
  .header
    height: 100%
    background-color: rgba(0,0,0, 0.7)

    .header-content
      height: 100%
      display: flex
      text-align: center
      flex-direction: column
      align-items: center
      justify-content: center
      color: #FFF
      
      .header-name
        display: flex
        opacity: 0
        animation: 500ms ease-in-out 1 forwards 50ms fadeInDown
        h1
          padding: 0px
          margin: 0px
          font-size: 60px
          text-shadow: 0px 1px 3px rgba(0,0,0,1)
          
          @media (max-width: 600px)
            font-size: 50px
          
          @media (max-width: 500px)
            font-size: 40px
            
        @media (max-width: 400px)
          flex-direction: column
            
      .header-caption
        h2
          margin: 0px
          padding: 0px
          text-shadow: 0px 1px 1px rgba(0,0,0,1)
          opacity: 0
          animation: 800ms ease-in-out 400ms 1 forwards fadeInUp
          @media (max-width: 500px)
            margin-top: 5px
            font-size: 1.9em
          @media (max-width: 400px)
            margin-top: 10px
            font-size: 1.8em
      
      .header-statement
        margin: 50px
        @extend .flex-box-center
        opacity: 0
        animation: 300ms ease-in-out 1 forwards 800ms fadeInUp
        
        @media (max-width: 500px)
          flex-wrap: wrap
          h3
            font-size: 1.5em
  
// Content Styles
.content
  font-family: "Raleway", sans-serif
  
// Welcome Block Styles
.welcome
  @extend .flex-box-center
  width: 100%
  min-height: 100vh
  diplay: flex
  background-color: #ff6600
  @include card-depth(1)
    
  .welcome-block
    @extend .flex-box-center
    padding: 10px 20px
    text-shadow: 0px 0px 5px rgba(0,0,0,0.4)
    animation: 100ms ease-in-out 1 forwards fadeIn
    h2 
      text-shadow: 0px 0px 10px rgba(0,0,0,0.6)
    .welcome-social
      display: flex
      justify-content: space-around
      padding: 20px
      animation: 300ms ease-in-out 1 forwards fadeInUp
      a
        transition: text-shadow 200ms
        &:hover, &:active
          text-shadow: 0px 10px 6px rgba(0,0,0,0.75)
        
    .welcome-content
      diplay: flex
      flex-direction: column
      text-align: center
        
    @media (min-width: 600px)
      font-size: 1.2em
      h2
        font-size: 2em
        
      
  .welcome-img
    margin: 10px
    padding: 1vw
    border-radius: 50%
    background-color: #a8a
    box-shadow: 0px 8px 25px rgba(0,0,0,1)
    animation: 200ms ease-in-out 1 forwards fadeInRight
    img
      width: 40vw
      height: 40vw
      border-radius: 50%
    
    @media (max-width: 600px)
      order: -1
      img
        width: 60vw
        height: 60vw
    
  @media (max-width: 600px)
    flex-direction: column
    flex-wrap: wrap
    padding: 10px 0px 40px 0px
  
// Topics Styles
.topics-container
  width: 100%
  @include card-depth(2)
  
  .topics-header
    width: 100%
    padding: 30px 20px
    text-align: center
  
  .topics
    padding: 50px 0px
    display: flex
    flex-wrap: wrap
    justify-content: center
    align-items: stretch
  
  .topic
    padding: 10px
    margin: 0px
    width: 280px
    height: 280px
    flex: 1 280px
    animation: 500ms ease-in-out 1 flipInX
    
    .icon-box
      display: flex
      align-items: center
      justify-content: center 
      color: #333
      .topic-icon
        padding: 0px
        text-shadow: 2px 5px 15px rgba(0,0,0,1)
        transition: text-shadow 2s
    
    .fa-inverse
      color: #B96CE0
      text-shadow: none
      
    .topic-title
      text-align: center
      
    .topic-text
      text-align: center
      font-size: 135%
      
    transition: all 200ms
    &:hover
      background-color: #333
      color: #FFF
      .topic-icon
        color: #b96ce0
        .fa-inverse
          color: #333
          text-shadow: none
        
    &:active
      order: -1
      flex: 100%
      height: 100vh
        
// Resume Download Styles
.resume-download
  width: 100%
  padding: 10px
  background-color: #6F2096
  @extend .flex-box-center
  flex-direction: column
  color: #FFF
  text-align: center
  @include card-depth(3)
  .resume-header
    margin-top: 30px
    
  .resume-buttons
    width: 100%
    display: flex
    justify-content: space-around
    align-items: center
    margin-bottom: 40px
    button.resume-btn
      width: 225px
      display: flex
      justify-content: center
      align-items: center
      margin: 30px
      padding: 10px
      font-size: 180%
      background-color: rgba(0,0,0,0.8)
      color: #FFF
      border-radius: 25px
      border: 1px solid white
      font-family: 'Nixie One', sans-serif
      box-shadow: 1px 2px 5px rgba(0,0,0,1)
      transition: all 150ms ease-in-out
      &:hover, &:active
        box-shadow: 2px 5px 10px rgba(0,0,0,1)
        background-color: rgba(255,255,255,0.8)
        color: #000
      
    @media (max-width: 760px)
      flex-direction: column
      justify-content: center
      padding: 10px
      button.resume-btn
        padding: 15px
        font-size: 1.8em
        margin: 20px 0px
        
// Contact Styles
.contact
  padding: 50px 10px
  @include card-depth(4)
  
  .contact-block
    text-align: center
    .contact-info
      @extend .flex-box-center
      flex-direction: column
    
    .contact-btn
      padding: 20px
      
    @media (max-width: 600px)
      margin: 30px 5px
      

// Footer styles
footer
  z-index: 400
  width: 100%
  text-align: center
  padding: 10px 0px
  @include card-depth(5)
    
// Animation Keyframes
@keyframes scroll-hint
  0%
    opacity: 0
    transform: scale(0.1)
  12%
    opacity: 1
    transform: scale(1.3)
  25%
    transform: translateY(0vh)
  100%
    opacity: 1
    transform: translateY(20vh)

    

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Nixie+One|Raleway" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" />