A Pen by sacarious

Thumbnail
This awesome code was written by sacarious, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sacarious ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <body class="home-page">   
  <!--  Navigation  -->
  <section class="sectionNav">
    <div id="nav_bar">
      <div class="logo" rel="index"><img src="https://rawgit.com/jmars125/portfolio/master/img/Logo.svg" alt="Web Developer Logo"></div>
        <nav class="navbar-fixed-top">
            <ul class="nav nav-pills nav-stacked">
                  <li class="page-scroll">
                      <a rel="index"     href="#" class="home-page-link home-link hidden"><i class="fa fa-home"></i></a> 
                  </li>
                  <li class="page-scroll">
                      <a rel="about"     href="#about" class="about-me-link"><i class="fa fa-user-secret"></i></a>
                  </li>
                  <li class="page-scroll">
                      <a rel="skills"    href="#skills" class="skills-link"><i class="fa fa-code"></i></a>
                  </li>
                  <li class="page-scroll">
                      <a rel="Portfolio" href="#portfolio" class="portfolio-link"><i class="fa fa-codepen"></i></a>
                  </li>
                  <li class="page-scroll">
                    <a rel="contact"     href="#contact" class="contact-link"><i class="fa fa-envelope-o"></i></a>
                  </li>
              </ul>
       </nav>
    </div>
  </section>  

<div class="wrap">
  <!-- Header -->
  <header>
    <div id="fullscreen-hero" class="home-hero">
    <div class="hero-container">
      <div class="hero-content"><a href="#" class="home-logo"></a>
        <h1 aria-label=" Hey there, I’m Jon, an aspiring Web-Developer." class="blast-root"> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">H</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">y</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;"> </span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">t</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">h</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">r</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">,</span><br> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">I</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">’</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">m</span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;"> </span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">J</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">o</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">n</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">,</span><br>
            <span class="blast" aria-hidden="true" style="opacity: 1;">a</span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">n</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;"> </span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">a</span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">s</span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">p</span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">i</span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">r</span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">i</span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">n</span> 
            <span class="blast" aria-hidden="true" style="opacity: 1;">g</span><br>    
            <span class="blast" aria-hidden="true" style="opacity: 1;">W</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">b</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">-</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">D</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">v</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">l</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">o</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">p</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
            <span class="blast" aria-hidden="true" style="opacity: 1;">r</span>
        </h1> 
        <div class="page-scroll learn-more">
          <a href="#about">Learn More<br><i class="fa fa-chevron-down"></i></a>
        </div>
      </div>
    </div>
  </div>
  </header>    
    
  <!-- About Section -->
  <section class="sectionAboutMe" id="about">
      <div class="container">
          <div class="row">
              <div class="col-lg-6 aboutImg">
                  <img src="https://rawgit.com/jmars125/portfolio/master/img/Me.png" class ="center-block" alt="">
              </div>
              <div class="col-lg-6 text-center">
                  <h1>Hi, I'm Jon Marshall</h1>
                  <hr class="hrStyle">
                  <p>I'm a front end web developer based out of Orlando, FL. I am passionate about becoming a full stack developer and just love to code</p>
              </div>
          </div>
      </div>
  </section>
    
  <!-- skills section -->
  <section  class="sectionSkills text-center" id="skills">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1 class="text-center contactH1">Skills / Tools</h1>
            <hr class="hrStyle">
          </div>
          <hr>
          <!-- icons from devicon -->
          <div class="col-lg-4">
            <svg class="svgSize" viewBox="0 0 128 128">
              <path fill="#E44D26" d="M27.854 116.354l-8.043-90.211h88.378l-8.051 90.197-36.192 10.033z"></path><path fill="#F16529" d="M64 118.704l29.244-8.108 6.881-77.076h-36.125z"></path><path fill="#EBEBEB" d="M64 66.978h-14.641l-1.01-11.331h15.651v-11.064h-27.743l.264 2.969 2.72 30.489h24.759zM64 95.711l-.049.013-12.321-3.328-.788-8.823h-11.107l1.55 17.372 22.664 6.292.051-.015z"></path><path d="M28.034 1.627h5.622v5.556h5.144v-5.556h5.623v16.822h-5.623v-5.633h-5.143v5.633h-5.623v-16.822zM51.816 7.206h-4.95v-5.579h15.525v5.579h-4.952v11.243h-5.623v-11.243zM64.855 1.627h5.862l3.607 5.911 3.603-5.911h5.865v16.822h-5.601v-8.338l-3.867 5.981h-.098l-3.87-5.981v8.338h-5.502v-16.822zM86.591 1.627h5.624v11.262h7.907v5.561h-13.531v-16.823z"></path><path fill="#fff" d="M63.962 66.978v11.063h13.624l-1.284 14.349-12.34 3.331v11.51l22.682-6.286.166-1.87 2.6-29.127.27-2.97h-2.982zM63.962 44.583v11.064h26.725l.221-2.487.505-5.608.265-2.969z"></path>
              </svg>
          </div>
          <div class="col-lg-4">
            <svg class="svgSize" viewBox="0 0 128 128">
              <path fill="#131313" d="M89.234 5.856h-7.384l7.679 8.333v3.967h-15.816v-4.645h7.678l-7.678-8.333v-3.971h15.521v4.649zm-18.657 0h-7.384l7.679 8.333v3.967h-15.817v-4.645h7.679l-7.679-8.333v-3.971h15.522v4.649zm-18.474.19h-7.968v7.271h7.968v4.839h-13.632v-16.949h13.632v4.839z"></path><path fill="#1572B6" d="M27.613 116.706l-8.097-90.813h88.967l-8.104 90.798-36.434 10.102-36.332-10.087z"></path><path fill="#33A9DC" d="M64.001 119.072l29.439-8.162 6.926-77.591h-36.365v85.753z"></path><path fill="#fff" d="M64 66.22h14.738l1.019-11.405h-15.757v-11.138h27.929000000000002l-.267 2.988-2.737 30.692h-24.925v-11.137z"></path><path fill="#EBEBEB" d="M64.067 95.146l-.049.014-12.404-3.35-.794-8.883h-11.178999999999998l1.561 17.488 22.814 6.333.052-.015v-11.587z"></path><path fill="#fff" d="M77.792 76.886l-1.342 14.916-12.422 3.353v11.588l22.833-6.328.168-1.882 1.938-21.647h-11.175z"></path><path fill="#EBEBEB" d="M64.039 43.677v11.136999999999999h-26.903000000000002l-.224-2.503-.507-5.646-.267-2.988h27.901zM64 66.221v11.138h-12.247l-.223-2.503-.508-5.647-.267-2.988h13.245z"></path>
              </svg>
            
          </div>
          <div class="col-lg-4">
            <svg class="svgSize" viewBox="0 0 128 128">
              <path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path><path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"></path>
              </svg>
            
          </div>
          <div class="col-lg-4">
            <svg class="svgSize" viewBox="0 0 128 128">
<path class="cls-1" d="M44.59,4.21a63.28,63.28,0,0,0,4.33,120.9,67.6,67.6,0,0,0,32.36.35A57.13,57.13,0,0,0,107.18,112a57.44,57.44,0,0,0,16-26.26,74.33,74.33,0,0,0,1.61-33.58H65.27c0,8.23,0,16.46,0,24.69H99.74A29.72,29.72,0,0,1,87.08,96.37a36.16,36.16,0,0,1-13.93,5.5,41.29,41.29,0,0,1-15.1,0A37.16,37.16,0,0,1,44,95.74a39.3,39.3,0,0,1-14.5-19.42,38.31,38.31,0,0,1,0-24.63,39.25,39.25,0,0,1,9.18-14.91A37.17,37.17,0,0,1,76.13,27a34.28,34.28,0,0,1,13.64,8q5.83-5.8,11.64-11.63c2-2.09,4.18-4.08,6.15-6.22A61.22,61.22,0,0,0,87.2,4.59,64,64,0,0,0,44.59,4.21Z"></path><path class="cls-2" d="M44.59,4.21a64,64,0,0,1,42.61.37A61.22,61.22,0,0,1,107.55,17.2c-2,2.14-4.11,4.14-6.15,6.22Q95.58,29.23,89.77,35a34.28,34.28,0,0,0-13.64-8,37.17,37.17,0,0,0-37.46,9.74,39.25,39.25,0,0,0-9.18,14.91L8.76,35.6A63.53,63.53,0,0,1,44.59,4.21Z"></path><path class="cls-3" d="M3.26,51.5a62.93,62.93,0,0,1,5.5-15.9L29.49,51.69a38.31,38.31,0,0,0,0,24.63q-10.36,8-20.73,16.08A63.33,63.33,0,0,1,3.26,51.5Z"></path><path class="cls-4" d="M65.27,52.15h59.52a74.33,74.33,0,0,1-1.61,33.58,57.44,57.44,0,0,1-16,26.26c-6.69-5.22-13.41-10.4-20.1-15.62A29.72,29.72,0,0,0,99.74,76.83H65.27C65.26,68.61,65.27,60.38,65.27,52.15Z"></path><path class="cls-5" d="M8.75,92.4q10.37-8,20.73-16.08A39.3,39.3,0,0,0,44,95.74a37.16,37.16,0,0,0,14.08,6.08,41.29,41.29,0,0,0,15.1,0,36.16,36.16,0,0,0,13.93-5.5c6.69,5.22,13.41,10.4,20.1,15.62a57.13,57.13,0,0,1-25.9,13.47,67.6,67.6,0,0,1-32.36-.35,63,63,0,0,1-23-11.59A63.73,63.73,0,0,1,8.75,92.4Z"></path>
</svg>
            
          </div>
          <div class="col-lg-4">
            <svg class="svgSize" viewBox="0 0 128 128">
<path class="a" d="M95 2.3l30.5 12.3v98.7L94.8 125.7 45.8 77l-31 24.1L2.5 94.9V33.1l12.3-5.9 31 24.3ZM14.8 45.7V83.2l18.5-19Zm48.1 18.5L94.8 89.3V39Z"></path>
</svg>
          </div>
        </div>          
      </div>        
    </section>

  <!--  Portfolio    -->
  <section class="sectionPortfolio" id="portfolio">
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
              <h1 class="text-center contactH1">My Portfolio</h1>
              <hr class="hrStyle">
            </div>

            <div class="col-lg-4 col-sm-12">
              <a class='inline' href="#" data-toggle="modal" 
               data-target="#colorGameModal">
              <div class="projectBox">
                  <img class="img-rounded grow" src="https://rawgit.com/jmars125/portfolio/master/img/colorGame.png" alt="Color Game"/><br>
                    Color Game<br>
                    <div class="projectInfo">Web Design / Responsive Development</div>
              </div>
            </a>
            </div>
            
            
            <div class="col-lg-4 col-sm-12">
              <a class='inline' href="#" data-toggle="modal" 
               data-target="#tributeModal">
              <div class="projectBox">
                  <img class="img-rounded grow" src="https://rawgit.com/jmars125/portfolio/master/img/tributePage.png" alt="Tribute Page"/><br>
                    Tribute Page<br>
                    <div class="projectInfo">Web Design / Responsive Development</div>
              </div>
            </a>
            </div>
            
            <div class="col-lg-4 col-sm-12">
              <a class='inline' href="#" data-toggle="modal" 
               data-target="#imageGalleryModal">
              <div class="projectBox">
                  <img class="img-rounded grow" src="https://rawgit.com/jmars125/portfolio/master/img/imageGallery.png" alt="Image Gallery"/><br>
                    Image Gallery<br>
                    <div class="projectInfo">Web Design / Responsive Development</div>
                </div>
              </a>
            </div>
            
            <div class="col-lg-4 col-sm-12">
              <a class='inline' href="#" data-toggle="modal" 
               data-target="#portfolioModal">
              <div class="projectBox">
                  <img class="img-rounded grow" src="https://rawgit.com/jmars125/portfolio/master/img/portfolio.png" alt="Portfolio"/><br>
                    Portfolio<br>
                    <div class="projectInfo">Web Design / Responsive Development</div>
                </div>
              </a>
            </div>
            
          </div>
        </div>        
    </section>    

    
  <!--  Contact    -->
  <section class="sectionContact" id="contact">
    <div class="container">
      <div class="row">
          <h1 class="text-center contactH1">Contact Me</h1>
          <hr class="hrStyle">
        <div class="col-lg-6">
          <p class="pH1">I am currently taking on new projects. Feel free to email me below with more details</p>
          <div class="emailBtnBkg">
              <a href="mailto:jonathan.marshall6@gmail.com"><div class="emailBtn">EMAIL ME</div></a>
          </div>
        </div>
        <div class="col-lg-6">
          <div id="map"></div>
        </div>
      </div>
    </div>

  </section>
  
  <!-- footer -->
  <footer>
    <div class="bottom-bar vertical-container">
      <div class="container-button container-fluid">
        <a class="camp-link button-ref" href="https://www.freecodecamp.org/jmars125" 
           target="_blank">
          <button class="codecamp button-box btn"><i class="fa fa-code"></i><i class"fa fa-facebook-square"></i></button>
        </a>
        <a class="git-link button-ref" href="https://github.com/jmars125" target="_blank">
          <button class="github button-box btn"><i class="fa fa-github"></i></button>
        </a>
        <a class="codepen-link button-ref" href="https://codepen.io/jmars125/" target="_blank"> 
          <button class="codepen button-box btn"><i class="fa fa-codepen"></i></button>
        </a>
        <a href="https://www.linkedin.com/in/jonMarshall125" class="linkedIn-link">
          <button class="linkedIn button-box btn"><i class="fa fa-linkedin"></i></button>
        </a>
      </div>
    </div>
    <div class="bottom-bar vertical-container">
      <div class="container-fluid">
        <p>Made with <i class="fa fa-heart heartbeat"></i> by <a href="https://www.facebook.com/jon.marshall.7330" target="_blank">Jon Marshall</a></p>
      </div>
    </div>
  </footer>
</div>
  

  <!-- Projects -->
  <div class="modal" id="colorGameModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="container">
            <div class="row">
              <div class="col-lg-6">
                <!-- carousel -->
                <div class="carousel slide" id="colorGameImages" data-ride="carousel" data-interval="false">
                  <div class="carousel-inner">
                    <div class="item active">
                      <img src="https://rawgit.com/jmars125/portfolio/master/img/colorGame-1.png" alt="">
                    </div>
                    <div class="item">
                      <img src="https://rawgit.com/jmars125/portfolio/master/img/colorGame-2.png" alt="">
                    </div>
                    <div class="item">
                      <img src="https://rawgit.com/jmars125/portfolio/master/img/colorGame-3.png" alt="">
                    </div>
                  </div>
            
                  <!-- carousel controls -->
                  <a class="left carousel-control" href="#colorGameImages" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                  </a>
                  <a class="right carousel-control" href="#colorGameImages" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                  </a>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="projectModalTitle">Color Game</div>
                <div class="projectModalService">Web Design</div>
                <div class="projectModalService">Development</div>
                <div class="projectModalDescription">
                  The color game was a project for Colt Steel's web dev boot camp. Your goal was to 
                  make a responsive color game with an easy and hard mode. When you win the game you
                  see all the tiles change to the same color.
                      <br><br>
                </div>
                <a href="https://codepen.io/jmars125/full/wqgxOJ/" target="_blank"><div class="projectModalButton">LAUNCH WEBSITE</div></a>
              </div>
              <button class="close projectModalClose" type="button" data-dismiss="modal">x</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="tributeModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="container">
            <div class="row">
              <div class="col-lg-6">
                <!-- carousel -->
                <div class="carousel slide" id="tributeImages" data-ride="carousel" data-interval="false">
                <div class="carousel-inner">
                  <div class="item active">
                    <img src="https://rawgit.com/jmars125/portfolio/master/img/tributePage-1.png" alt="">
                  </div>
                  <div class="item">
                    <img src="https://rawgit.com/jmars125/portfolio/master/img/tributePage-2.png" alt="">
                  </div>
                  <div class="item">
                    <img src="https://rawgit.com/jmars125/portfolio/master/img/tributePage-3.png" alt="">
                  </div>
                  <div class="item">
                    <img src="https://rawgit.com/jmars125/portfolio/master/img/tributePage-4.png" alt="">
                  </div>
                </div>
            
                <!-- carousel controls -->
                <a class="left carousel-control" href="#tributeImages" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#tributeImages" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
              </div>
              </div>
              <div class="col-lg-6">
                <div class="projectModalTitle">Tribute Page</div>
                <div class="projectModalService">Web Design</div>
                <div class="projectModalService">Development</div>
                <div class="projectModalDescription">
                  The tribute page was a project for Free Code Camp. Your goal was to 
                  make a responsive website with an image and text. As well as a link
                  to an external resource with more information on the tribute.
                      <br><br>
                </div>
                <a href="https://codepen.io/jmars125/full/LjxwqR/" target="_blank"><div class="projectModalButton">LAUNCH WEBSITE</div></a>
              </div>
              <button class="close projectModalClose" type="button" data-dismiss="modal">x</button>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

  <div class="modal" id="imageGalleryModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="container">
            <div class="row">
              <div class="col-lg-6">
                <!-- carousel -->
          <div class="carousel slide" id="imageGalleryImages" data-ride="carousel" data-interval="false">
            <div class="carousel-inner">
              <div class="item active">
                <img src="https://rawgit.com/jmars125/portfolio/master/img/imageGallery-1.png" alt="">
              </div>
              <div class="item">
                <img src="https://rawgit.com/jmars125/portfolio/master/img/imageGallery-2.png" alt="">
              </div>
              <div class="item">
                <img src="https://rawgit.com/jmars125/portfolio/master/img/imageGallery-3.png" alt="">
              </div>
              <div class="item">
                <img src="https://rawgit.com/jmars125/portfolio/master/img/imageGallery-4.png" alt="">
              </div>
            </div>
            
            <!-- carousel controls -->
            <a class="left carousel-control" href="#imageGalleryImages" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#imageGalleryImages" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
          </div>
              </div>
              <div class="col-lg-6">
                <div class="projectModalTitle">Image Gallery</div>
                <div class="projectModalService">Web Design</div>
                <div class="projectModalService">Development</div>
                <div class="projectModalDescription">
                  The image Gallery page was a project for Colt Steele's Web Dev Boot Camp. Your goal was to 
                  make a responsive website with a few images that dynamically resize based on the width of the page.
                      <br><br>
                </div>
                <a href="https://codepen.io/jmars125/full/LjxwqR/" target="_blank"><div class="projectModalButton">LAUNCH WEBSITE</div></a>
              </div>
              <button class="close projectModalClose" type="button" data-dismiss="modal">x</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="modal" id="portfolioModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="container">
            <div class="row">
              <div class="col-lg-6">
                <!-- carousel -->
          <div class="carousel slide" id="portfolioImages" data-ride="carousel" data-interval="false">
            <div class="carousel-inner">
              <div class="item active">
                <img src="https://rawgit.com/jmars125/portfolio/master/img/portfolio-1.png" alt="">
              </div>
              <div class="item">
                <img src="https://rawgit.com/jmars125/portfolio/master/img/portfolio-2.png" alt="">
              </div>
              <div class="item">
                <img src="https://rawgit.com/jmars125/portfolio/master/img/portfolio-3.png" alt="">
              </div>
              <div class="item">
                <img src="https://rawgit.com/jmars125/portfolio/master/img/portfolio-4.png" alt="">
              </div>
            </div>
            
            <!-- carousel controls -->
            <a class="left carousel-control" href="#portfolioImages" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#portfolioImages" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
          </div>
              </div>
              <div class="col-lg-6">
                <div class="projectModalTitle">Portfolio</div>
                <div class="projectModalService">Web Design</div>
                <div class="projectModalService">Development</div>
                <div class="projectModalDescription">
                  The portfolio was a project for Free Code Camp. Your goal was to 
                  make a responsive website that is one page. You can scroll between
                  the different sections, have links to the creators social media / code
                  repository sites, thumbnails of different completed projects, and
                  finnaly a clickable navigation that allows you to access each section.
                  <br><br>
                </div>
                <a href="https://codepen.io/jmars125/full/BdRyLQ/" target="_blank"><div class="projectModalButton">LAUNCH WEBSITE</div></a>
              </div>
              <button class="close projectModalClose" type="button" data-dismiss="modal">x</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Projects -->

  <!--   jquery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
    
  <!--   jquery ease-in plugin -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    
  <!--   js -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
  <script src="js/app.js"></script>

  <!-- google maps -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsjR9xl1Wh7z4C7n8muoMlqdExPj0aZu0&callback=initMap"
  type="text/javascript"></script>
</body>

/*Downloaded from https://www.codeseek.co/sacarious/a-pen-by-sacarious-aEoBJY */
    @import url('https://fonts.googleapis.com/css?family=Black+Ops+One');
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
/***********************************************
                     Global
***********************************************/
*{
  margin: auto;
}

.wrap{
  position: absolute;
  left: 80px;
  width: 94.5%;
  height: 100%;
}

div .container{
    padding: 0;
}
/***********************************************
                Navigation Bar
***********************************************/
#nav_bar .logo{
  padding: 10px 0 0 10px;
}

.logo img{
  width: 100%;
  padding-right: 10px;
}

.navbar-nav{
  padding-left: 12px;
}

ul.nav a:hover, ul.nav a:focus, ul.nav a:active  { 
  background-color:#282726;
}

ul.nav a:hover{
    color:#31e6ff !important;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color:#31e6ff !important;
    background-color: #282726;
}

#nav_bar {
    background: #282726;
    width: 80px;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 3;
    min-height: 500px
}

#nav_bar nav {
    display: block;
    text-align: center;
    position: absolute;
    height: 210px;
    top: 50%;
    margin-top: -120px;
    width: 100%
}
#nav_bar nav a {
    font-size: 24px;
    color: #4d4d4e;
    display: block;
    line-height: 25px;
    height: 65px;
    position: relative
}
#nav_bar nav a i {
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}
#nav_bar nav a:hover i {
    opacity: 0;
}

#nav_bar nav a:after {
    font-size: 10px;
    position: absolute;
    bottom: 19px;
    display: block;
    margin:0 auto;
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}
#nav_bar nav .home-page-link:first-child:after {
    content: 'HOME'
}
#nav_bar nav .about-me-link:first-child:after {
    content: 'ABOUT'
}
#nav_bar nav .skills-link:first-child:after {
    content: 'SKILLS'
}
#nav_bar nav .portfolio-link:first-child:after {
    content: 'PORTFOLIO'
}
#nav_bar nav .contact-link:first-child:after {
    content: 'CONTACT'
}

#nav_bar nav a:hover:after {
    opacity: 1;
}
/***********************************************
                Header
***********************************************/
/* Header Text */
 .hero-content{
  font-family: 'Black Ops One', cursive;
  color: white;
}

.blast {
    display: inline-block
}

.home-page .blast {
    opacity: 0;
    display: inline-block;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.home-page .blast:hover {
    color: #31e6ff;
}

#fullscreen-hero {
    height: 100vh;
    position: relative;
    text-align: center;
    width: 100%;
    min-height: 350px;
    background-color: #2A3A3F;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.home-hero {
    background-image: url(https://rawgit.com/jmars125/portfolio/master/img/coding-bg.jpg)
}

/* applies dark gradient to unbrighten image */
.home-hero:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(49, 61, 65, 0.6), rgba(49, 61, 65, 0.6))
}

.hero-container {
    display: table;
    margin: 0 auto;
    height: 100%
}

.hero-content {
    display: table-cell;
    position: relative;
    z-index: 10;
    text-align: center;
    vertical-align: middle
}
.hero-content h1 {
    font-size: 2.3rem;
    color: #fff;
    margin-bottom: 0rem
}

.learn-more {
    bottom: 2.5%;
    display: inline-block;
    font-size: 1.3rem;
    left: 50%;
    padding: 20px;
    position: absolute;
    white-space: nowrap;
    z-index: 2;
    text-decoration: none;
    transition: color 0.2s ease-out;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.learn-more a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-bottom: none
}
.learn-more a:hover {
    color: rgba(255, 255, 255, 0.9)
}
/***********************************************
                About Me
***********************************************/
.sectionAboutMe {
    padding: 100px 0;
    margin: auto;
    background-color:#fff;
}

hr.hrStyle {
	border-top: 1px solid #8c8b8b;
	text-align: center;
    border-color: #31e6ff;
}
hr.hrStyle:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}
/***********************************************
                Skills
***********************************************/
.sectionSkills {
    padding: 0 0 300px 0;
    background-color:#fff;
}

.svgSize{
    width: 100px;
}
/***********************************************
                Portfolio
***********************************************/
.sectionPortfolio{
  padding: 0 0 300px 0;
}

.projectInfo {
    font-size: 11px;
    font-style: italic;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 0px;
    padding: 2px 50px 0px 50px;
    line-height: 15px;
    color: #31e6ff
}

.projectBox {
    float: left;
    background-color: #fff;
    text-align: center;
    letter-spacing: 3px;
    color: #292E37;
    padding: 55px 0px 25px 0px;
    height: 220px;
    font-family: 'monsteratt', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    width: 100%;
}
.projectBox img {
    width: 100%;
    max-width: 210px;
    margin-bottom: 10px;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
/***********************************************
             Modal's for Portfolio
***********************************************/
.modal-dialog{
    position: relative;
    display: table;
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

.projectModalTitle {
    color: #292E37;
    font-size: 32px;
    line-height: 35px;
    margin-bottom: 10px;
}
.projectModalService {
    font-size: 13px;
    font-style: italic;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 0px;
    padding: 4px;
    background-color: #c1e4ff;
    text-align: left;
    width: 35%;
    margin: 0 0 10px 0;
}

.projectModalClose{
  text-align:right;
}

.projectModalButton {
    background-color: #55acee;
    color: #ffffff;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 5% 10px 5%;
    width: 35%;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0 0 10px 0;
}
.projectModalButton:hover {
    background-color: #1b95e0;
    cursor: pointer;
}
/***********************************************
                Contact Me
***********************************************/
.sectionContact{
/*     height: 80vh; */
    padding: 0 0 100px 0;
}

#map{
    width: 100%;
    height: 400px;
    background-color: grey;
}

.contactH1{
    font-family: 'Black Ops One', cursive;
    font-size: 48px;
}

.pH1{
    font-family: 'lato', cursive;
    font-size: 25px;
}

.emailBtn {
    padding: 25px 0px 25px 0;
    background-color: #55acee;
    height: auto;
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    font-family: 'lato';
    color: #fff;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-appearance: none;
    width: 90%;
    margin: 0px 5% 0px 5%;
}
.emailBtn:hover {
    background-color: #1b95e0;
    cursor: pointer;
}
.emailBtnBkg {
    width: 100%;
    margin: 0px auto;
    max-width: 460px;
}

/***********************************************
                Footer
***********************************************/

.top-bar, .bottom-bar {
  padding: 20px;
}
.vertical-container {
  align-items:center;
  display: flex;
  background: #292E37;
  color: #fff;
}

.button-box{
  background-color: #282726;
}

.button-box:hover{
  color: #31e6ff;
}

/***********************************************
                Screen Transitions
***********************************************/
@media screen and (min-width: 750px) {
    .hero-content h1 {
        font-size: 3.4rem
    }
}
@media screen and (min-width: 1000px) {
    .hero-content h1 {
        font-size: 5.7rem
    }
}

@media screen and (min-width: 750px) {
    .learn-more {
        font-size: 1.7rem
    }
}

@media(max-width:960px) {
    .home-hero{
        width:100%;
    }
    .wrap{
    position: absolute;
    left:0px;
      width: 100%;
    }

    #nav_bar {
        width: 100%;
        height: 80px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        min-height: 0
    }
  
  .logo img{
    width:70px;
    padding-top:3px;
  }

    #nav_bar nav {
        width: 42%;
        position: absolute;
        left: 50%;
        margin-left: -19%;
        float: left;
        overflow: hidden;
        text-align: center;
        height: 100px;
        padding-top: 10px;
        top: 0;
        margin-top: 0
    }
    #nav_bar nav a {
        float: left;
        margin-left: 12%;
        line-height: 60px;
        height: 60px
    }
    #nav_bar nav a:first-child {
        margin-left: 0
    }
  
    #nav_bar nav a:first-child + a + a:after {
    content: 'Portfolio'
  }
  
    #nav_bar nav a:first-child + a + a + a:after {
    content: 'Contact'
}
  
  .container{
    padding-top: 100px;
  }

  h1{
    font-size: 30px;
    padding-top: 155px;
    line-height: 30px;
  }

  .text-zone{
      height: 50vh;
      line-height: 10px;
      text-align: center;
  }
}

@media (max-width: 768px) {
    .home-hero{
        width:50%;
    }
  #nav_bar nav a {
        margin-left: 10%
    }
  header .container {
    padding-top: 200px;
    padding-bottom: 100px;
  }
  header .intro-text .name {
    font-size: 4.75em;
  }
}

@media(max-width: 508px){
    #nav_bar nav a{
        padding: 10px;
    }

    #nav_bar nav ul{
        text-align: center;
    }
  
    .emailBtnBkg{
        padding-bottom: 20px;
    }

}

@media (max-width: 470px){
    #nav_bar nav a {
        padding: 5px;
    }
    
}


/*Downloaded from https://www.codeseek.co/sacarious/a-pen-by-sacarious-aEoBJY */
    // Freelancer Theme JavaScript

(function($) {
    "use strict"; // Start of use strict

    // jQuery for page scrolling feature - requires jQuery Easing plugin
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });
  
   // Highlight the top nav as scrolling occurs
    $('body').scrollspy({
        target: '.navbar-fixed-top',
        offset: 51
    });


    // Offset for Main Navigation
    $('#mainNav').affix({
        offset: {
            top: 100
        }
    })

})(jQuery); // End of use strict

// Google Maps
$(function () {
    
        function initMap() {
    
            var location = new google.maps.LatLng(28.555068, -81.344349);
    
            var mapCanvas = document.getElementById('map');
            var mapOptions = {
                center: location,
                zoom: 16,
                panControl: false,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(mapCanvas, mapOptions);
    
            var markerImage = 'https://rawgit.com/jmars125/portfolio/master/img/Logo-64x64.png';
    
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                icon: markerImage
            });
    
            var contentString = '<div class="info-window">' +
                    '<h3>Jon Marshall</h3>' +
                    '<div class="info-content">' +
                    '<p>3555 Maguire Blvd Orlando, FL 32803</p>' +
                    '</div>' +
                    '</div>';
    
            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 400
            });
    
            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
    
            var styles = [
                    {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
                    {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
                    {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
                    {
                    featureType: 'administrative.locality',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#d59563'}]
                    },
                    {
                    featureType: 'poi',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#d59563'}]
                    },
                    {
                    featureType: 'poi.park',
                    elementType: 'geometry',
                    stylers: [{color: '#263c3f'}]
                    },
                    {
                    featureType: 'poi.park',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#6b9a76'}]
                    },
                    {
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [{color: '#38414e'}]
                    },
                    {
                    featureType: 'road',
                    elementType: 'geometry.stroke',
                    stylers: [{color: '#212a37'}]
                    },
                    {
                    featureType: 'road',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#9ca5b3'}]
                    },
                    {
                    featureType: 'road.highway',
                    elementType: 'geometry',
                    stylers: [{color: '#746855'}]
                    },
                    {
                    featureType: 'road.highway',
                    elementType: 'geometry.stroke',
                    stylers: [{color: '#1f2835'}]
                    },
                    {
                    featureType: 'road.highway',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#f3d19c'}]
                    },
                    {
                    featureType: 'transit',
                    elementType: 'geometry',
                    stylers: [{color: '#2f3948'}]
                    },
                    {
                    featureType: 'transit.station',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#d59563'}]
                    },
                    {
                    featureType: 'water',
                    elementType: 'geometry',
                    stylers: [{color: '#17263c'}]
                    },
                    {
                    featureType: 'water',
                    elementType: 'labels.text.fill',
                    stylers: [{color: '#515c6d'}]
                    },
                    {
                    featureType: 'water',
                    elementType: 'labels.text.stroke',
                    stylers: [{color: '#17263c'}]
                    }
              ];


            map.set('styles', styles);
    
    
        }
    
        google.maps.event.addDomListener(window, 'load', initMap);
    });



Comments