Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body data-spy="scroll" data-target=".navbar" data-offset="50">

  <div class="container-fluid">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
      <a class="navbar-brand" href="#headingSection">Tom Monks</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#headingSection">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#aboutSection">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#portfolioSection">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contactSection">Contact</a>
          </li>
        </ul>

      </div>
    </nav>

    <!-- main heading -->
    <div id="headingSection">
      <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-3 text-center">
          <img id="profilePic" class="img-fluid" src="http://tommonks.net/images/profile02.jpg" alt="Me snowshoeing">
        </div>
        <div class="col-lg-5 text-center">
          <h1 id="headingName" class="hidden-load">Tom Monks</h1>
          <h4 id="headingTagline1" class="hidden-load">Developer, Project Manager,</h4>
          <h4 id="headingTagline2" class="hidden-load">Professional Problem Solver</h4>
          <hr class="separator">
          <a id="buttonResume" class="btn btn-primary btn-lg hidden-load" href="http://tommonks.net/media/Tom%20Monks%20-%20Resume%20-%202018-02-22.pdf" target="_blank">Download Resume</a>
        </div>
        <div class="col-lg-2"></div>
      </div>
    </div>

    <!-- About section -->
    <div id="aboutSection">
      <h2>About Me</h2>

      <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-8">
          <p class="lead text-center">A PMP certified professional with 15 years of IT services experience, a Bachelor’s degree in Computer Science, and an extensive track record of delivering creative technical solutions to enable cost savings, collaboration, and continuous improvement.</p>

          <div class="text-center">
            <img class="img-fluid" src="http://tommonks.net/images/hoc2017b.jpg" id="aboutPic" alt="Me with my daughter's Pre-K class during Hour of Code 2017">
          </div>

        </div>
        <div class="col-lg-2"></div>

        <!-- 2-Column section for the "About" text -->
        <div class="col-lg-1"></div>
        <div class="col-lg-5 text-justify">
          <h3>Technical Background</h3>
          <p>My strong technical background comes in large part from spending the first 5 years of my career as a Computer Systems Analyst, providing hands-on technical support and innovative solutions for Kraft Foods. There I had many opportunities to fight
            virus outbreaks, troubleshoot hardware & software issues, develop web apps and software to streamline communications, and write scripts to help automate user support.</p>

          <h3> Project Management & Data Analysis</h3>
          <p>I’m also an experienced Project Manager with strong analytical and problem-solving skills and a passion for process improvement. During my 10 years as a Senior Project Manager for Hewlett Packard, I worked on many different client-facing networking
            and hosting projects. I served as my team’s process expert and efficiency lead, streamlining processes and mentoring other Project Managers to help them through complex data center and project delivery processes.</p>
          <p>One of my specialties as a PM has been organizing large projects involving hundreds of servers by developing centralized SharePoint and Access-based tracking systems to enable collaboration between many different teams. I also leveraged available
            data and used SQL and Access databases to gain valuable insights and drive significant improvements, such as a 56% reduction in server delivery times and finding nearly $1M of additional revenue through invoicing analysis.</p>
        </div>
        <div class="col-lg-5 text-justify">
          <h3>Web Development</h3>
          <p>Recently, I’ve re-discovered my passion for coding and web development and started freelancing. I’ve been having a blast taking some courses to refresh my development skills. I earned <a href="https://www.the-cca.org/" target="_blank">CCA Level 1 certifications</a>            in HTML, CSS, JavaScript, jQuery, and PHP, and am currently working through the <a href="https://www.freecodecamp.org" target="_blank">Free Code Camp</a> curriculum. </p>
          <p>I’m totally amazed by how many excellent courses, websites, and products are available now to make learning to code fun and exciting. I love getting my daughters and their friends excited about coding. In December 2017 I hosted my first Hour
            of Code with my daughter’s Pre-K class (using ScratchJr), and I recently presented to over 100 middle- and high-schoolers in our school district on how to code a video game with Scratch.</p>

          <h3>Outside of Work</h3>
          <p>I currently live with my wife and two daughters in the quiet town of Lyons Falls, NY, where I was born and raised. I’m very fortunate to have over a hundred acres of beautiful forest out my back door. I love running, mountain biking, snowshoeing,
            and trampolining with my girls.
            <p>

              <p>Thanks for stopping by. Please check out some samples of my work below, and reach out to me using any of the means at the bottom of the page.
                <p>

        </div>
        <div class="col-lg-1"></div>
      </div>
      <!-- end of row -->
    </div>
    <!-- end of aboutSection -->

    <!-- Portfolio section -->
    <div id="portfolioSection" class="text-center">
      <h2>My Portfolio</h2>
      <p class="lead" id="portfolioLead">Check out some of my recent development projects below. I will be showcasing additional projects here as I build them.</p>

      <div class="row">

        <!-- Human Factor card -->
        <div class="col-md-6 col-lg-4">
          <div class="card">
            <a href="https://humanfactorleadership.com" target="_blank"><img class="card-img-top" src="http://tommonks.net/images/pf-humanfactor.jpg" alt="New Human Factor website home page"></a>
            <div class="card-body">
              <h5 class="card-title">The Human Factor Website Redesign</h5>
              <p class="card-text">Complete redesign of old humanfactor.ca website using WordPress. Features a blog, contact form, a testimonial carousel, and auto-crossposting to LinkedIn and Facebook. </p>
            </div>
          </div>
        </div>

        <!-- Product Landing Page card -->
        <div class="col-md-6 col-lg-4">
          <div class="card">
            <a href="https://codepen.io/monksy/full/BvBmyx" target="_blank"><img class="card-img-top" src="http://tommonks.net/images/product-landing-page.jpg" alt="Rad Dragon Dojo web page"></a>
            <div class="card-body">
              <h5 class="card-title">Rad Dragon Dojo</h5>
              <p class="card-text">Landing page for a martial arts studio written in HTML and CSS (course work from <a href="https://about.freecodecamp.org" target="_blank">freeCodeCamp</a>)</p>
            </div>
          </div>
        </div>

        <!-- Technical Documentation card -->
        <div class="col-md-6 col-lg-4">
          <div class="card">
            <a href="https://codepen.io/monksy/full/zbVoOx" target="_blank"><img class="card-img-top" src="http://tommonks.net/images/technical-documentation.jpg" alt="CSS Refresher web page"></a>
            <div class="card-body">
              <h5 class="card-title">CSS Refresher</h5>
              <p class="card-text">Fully responsive technical documentation page written in CSS & HTML (course work from <a href="https://about.freecodecamp.org" target="_blank">freeCodeCamp</a>)</p>
            </div>
          </div>
        </div>

        <!-- Customer Satisfaction Form card -->
        <div class="col-md-6 col-lg-4">
          <div class="card">
            <a href="https://codepen.io/monksy/full/LXGxam" target="_blank"><img class="card-img-top" src="http://tommonks.net/images/survey-form.jpg" alt="Customer Satisfaction form"></a>
            <div class="card-body">
              <h5 class="card-title">Customer Satisfaction Form</h5>
              <p class="card-text">Responsive survey form written in HTML & CSS (course work from <a href="https://about.freecodecamp.org" target="_blank">freeCodeCamp</a>)</p>
            </div>
          </div>
        </div>
            
        <!-- Tribute Page card -->
        <div class="col-md-6 col-lg-4">
          <div class="card">
            <a href="https://codepen.io/monksy/full/rYMGYM" target="_blank"><img class="card-img-top" src="http://tommonks.net/images/tribute-page.jpg" alt="Stephen Covey tribute page"></a>
            <div class="card-body">
              <h5 class="card-title">Stephen Covey Tribute</h5>
              <p class="card-text">Responsive tribute page written in CSS & HTML, using the Bootstrap framework (course work from <a href="https://about.freecodecamp.org" target="_blank">freeCodeCamp</a>)</p>
            </div>
          </div>
        </div>

        <!-- ER Wait Time card -->
        <div class="col-md-6 col-lg-4">
          <div class="card">
            <a href="https://www.lcgh.net/er-wait-time" target="_blank"><img class="card-img-top" src="http://tommonks.net/images/er-wait-time.jpg" alt="ER Wait Time page"></a>
            <div class="card-body">
              <h5 class="card-title">ER Wait Time</h5>
              <p class="card-text">Current wait time for the Lewis County General Hospital Emergency Room. Integrated Meditech EHR & Squarespace website using JavaScript & AJAX.</p>
            </div>
          </div>
        </div>
        
        <!-- App Page card -->
        <div class="col-md-6 col-lg-4">
          <div class="card">
            <a href="http://tommonks.net/projects/apppage.html" target="_blank"><img class="card-img-top" src="http://tommonks.net/images/apppage.jpg" alt="App home page"></a>
            <div class="card-body">
              <h5 class="card-title">App Home Page</h5>
              <p class="card-text">Fully responsive, single-page design for a made-up app. Written in HTML, CSS, and Bootstrap. (Course work from <a href="https://www.udemy.com/the-complete-web-developer-course-2/" target="_blank">The Complete Web Developer Course 2.0</a>).</p>
            </div>
          </div>
        </div>

        <!-- BBC card -->
        <div class="col-md-6 col-lg-4">
          <div class="card">
            <a href="http://tommonks.net/projects/bbc.html" target="_blank"><img class="card-img-top" src="http://tommonks.net/images/pf-bbc.jpg" alt="Reproduction of the BBC home page"></a>
            <div class="card-body">
              <h5 class="card-title">Reproduction of the BBC Homepage</h5>
              <p class="card-text">Pixel-perfect partial reproduction of the BBC homepage done in HTML and CSS. (Course work from <a href="https://www.udemy.com/the-complete-web-developer-course-2/" target="_blank">The Complete Web Developer Course 2.0</a>).</p>
            </div>
          </div>
        </div>
      
      <!-- end of row -->
    </div>
    <!-- end of portfolioSection -->
    </div>

    <!-- Contact section -->
    <div id="contactSection" class="text-center">
      <span class="contact-icons">
        <a href="https://linkedin.com/in/TomMonks" target="_blank" aria-label="Tom on LinkedIn"><i aria-hidden class="fab fa-linkedin"></i></a>
        <a href="https://codepen.io/monksy" target="_blank" aria-label="Tom on CodePen"><i aria-hidden class="fab fa-codepen"></i>
        <a href="#" id="mailLink" aria-label="Email Tom"><i aria-hidden class="fas fa-envelope-square"></i>
        
   
      </span>
    </div>
  </div>


</body>
              
            
!

CSS

              
                html {
  height: 100%;
}

body {
  color: #555555;
  height: 100%;
}

.container-fluid {
  height: 100%;
  padding-right: 0;
  padding-left: 0;
}

/* remove margin which results in horizontal scroll bar with .container-fluid */
.row {
  margin: 0px;
}

#headingSection {
  color: #fff;
  padding-top: 15%;
  padding-bottom: 10%;
  background: url("http://tommonks.net/images/sandra-ahn-mode-541867-rs.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#aboutSection {
  padding: 6%;
}

#profilePic {
  border-radius: 50%;
  max-height: 300px;
  margin: auto 0;
}

hr.separator {
  border-top: 1px lightgray solid;
  border-bottom: 1px lightgray solid;
  padding: 1px 0;
  width: 300px;
  margin: 30px auto;
}

#headingName {
  margin-bottom: 20px;
  font-size: 4.5em;
}

#aboutPic {
  margin: 25px 0 40px 0;
  border-radius: 10px;
}

h2 {
  text-align: center;
  font-size: 3em;
  margin-bottom: 35px;
}

h3 {
  text-align: center;
}

#portfolioSection {
  background-color: #eee;
  padding: 6% 10%;
}

#portfolioLead {
  margin-bottom: 35px;
}

.portfolio-item {
  text-align: center;
}

/* center cards */
.card {
  margin: 0 auto 20px auto;
  max-width: 400px;
}

.card-img-top {
  border-bottom: 1px #ccc solid;
}

#contactSection {
  background-color: #555;
  color: white;
  padding: 6%;
}

.contact-icons {
  font-size: 4em;
  margin: 0 10px;
}

.contact-icons a {
  text-decoration: none;
  color: white;
}

/* hide .hidden-load elements until they are animated */
/*
.hidden-load {visibility: hidden;}
.hidden-load.animated {visibility: visible;}
*/
              
            
!

JS

              
                $(document).ready(function() {
  var username = "monksy";
  var hostname = "gmail.com";

  // Write out my email with JavaScript so it is not scrape-able
  $("#mailLink").attr("href", "mailto:" + username + "@" + hostname);
  
  // Collapse the menu when a button (other than the toggle) is clicked
  $('.navbar-collapse a:not(.dropdown-toggle)').click(function() {
    $(this).parents('.navbar-collapse').collapse('hide');
  });
  
  // Prevent the fixed navbar from overlapping anchors
  window.addEventListener("hashchange", function() { 
    scrollBy(0, -35) 
  });
  
  
  // Animate elements in the heading section when the page loads
  /*
  $("#headingName").addClass("animated fadeInLeft");
  $("#headingTagline1").addClass("animated fadeInRight");
  $("#headingTagline2").addClass("animated fadeInLeft");
  $("#buttonResume").addClass("animated fadeInRight");
  */
});


              
            
!
999px

Console