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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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="15">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
        <a class="navbar-brand" href="#">Home</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Spring REST API</a></li>
          <li><a href="#section2">PHP + Angular website</a></li>
          <li><a href="#section3">Angular Frontend</a></li>
          <li><a href="#section4">Towers of Hanoi</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
  <div class="jumbo-container">
    <div class="container">
      <div class="jumbotron">
        <div class="text-center">
          <h1>My Portfolio</h1>
        </div>
        <div class="col-sm-8 col-sm-offset-3">
          <a class="btn btn-danger" href="https://github.com/javathenutt" target="_blank"><i class="fa fa-github"></i> Github</a>
          <a class="btn btn-success" href="https://www.freecodecamp.com/javathenutt" target="_blank"><i class="fa fa-fire"></i> FreeCodeCamp</a>
          <a class="btn btn-primary" href="https://ie.linkedin.com/in/joe-wemyss-59a386b3" target="_blank"><i class="fa fa-linkedin-square"></i> LinkedIn</a>
          <a class="btn btn-warning" href="http://stackoverflow.com/users/4108556/kajhiitknight" target="_blank"><i class="fa fa-stack-overflow"></i> Stack Overflow</a>
        </div>
      </div>
    </div>
  </div>
  <div class="row" id="main-body">
    <section id="section1" class="text-section">
      <div class="container section-container">
        <div class="well">
          <div class="well-header text-center">
            <h2 id="text-section1">Java REST API</h2>
            <h3 class="unfinished-project-header">This project is currently under construction</h3>
          </div>
          <div class="well-body">
            <p><strong>URL to clone project:</strong><br> https://github.com/JavaTheNutt/ttown_utd_backend.git</p>
            <h3>Technical Details</h3>
            <p>This Representational State Transfer (REST) API is built using Spring Boot 4, Spring REST and Spring Security. This API is secured using signed JSON Web Tokens (JWS). This API acts as CRUD application for a traditional relational database
              built using MySql. The full source of the project can be found <a href="https://github.com/JavaTheNutt/ttown_utd_backend" target="_blank">here</a>.</p>
            <h3>Business Process Overview</h3>
            <p>
              This REST API is designed as a CRUD (Create Read Update Delete) Application for an underage soccer club. The API is designed to hold details required for the smooth operation of the club. The API is designed to return the details from the database in
              JSON (JavaScript Object Notation) format to a frontend system. I have not designed the frontend system yet, as I want to finish this API first, but I imagine it will be designed in Angular 2.
            </p>
            </p>
            <strong>Technologies Used:</strong><br>
            <ul>
              <li><a href="http://spring.io" target="_blank">Spring Boot</a></li>
              <li><a href="http://spring.io" target="_blank">Spring REST</a></li>
              <li><a href="https://docs.oracle.com/javaee/7/api/javax/persistence/package-summary.html" target="_blank">Java Persistance API (JPA)</a></li>
              <li><a href="http://spring.io" target="_blank">Spring Data JPA</a></li>
              <li><a href="https://www.mysql.com/" target="_blank">MySql</a></li>
            </ul>
            </p>
          </div>
        </div>
      </div>
    </section>
    <section id="section2" class="text-section">
      <div class="container section-container">
        <div class="well">
          <div class="well-header text-center">
            <h2 id="text-section2">PHP + AngularJs Website</h2>
            <h3 class="finished-project-header">This project is no longer being constructed</h3>
          </div>
          <div class="well-body">
            <p><strong>URL to clone project:</strong><br> https://github.com/JavaTheNutt/serverside02.git</p>
            <h3>Technical Details</h3>
            <p>This is a website built for my <em>Server Side Programming</em> assignment. This website is built on a loose interpretation of REST principals. It uses PHP for the backend and a simple Angular 1.5 frontend. In this site, the PHP backend simply returns the data to the Angular frontend. The user is authenticated by passing login details in the body of a HTTP POST request. PHP then uses a Session Cookie for authentication.The database is a simple relational
              database built in MySql. This project uses the Gulp task runner for automation of menial tasks and for building the production ready version of the website. The full source of the project can be found <a href="https://github.com/JavaTheNutt/serverside02"
                target="_blank">here</a>.</p>
            <p>
              <h3>Business Process Overview</h3>
              <p>
                This website is designed as an application for a music store. It has three entities. These entities represent Albums, Artists and Record Labels, respectively. Both foreign key constraints are added to the album table. This application simply acts as a CRUD app for those three entities. It has two levels of authorization, user and admin. Users can view the details, but not edit them, while admins have full CRUD authorizations. This application leverages Angular's powerful frontend technology to create a rich user experiance.
            </p>
              <strong>Technologies Used:</strong><br>
              <ul>
                <li><a href="https://angularjs.org/" target="_blank">AngularJs 1.5X</a></li>
                <li><a href="https://secure.php.net/" target="_blank">PHP7</a></li>
                <li><a href="http://gulpjs.com/" target="_blank">Gulp</a></li>
                <li><a href="https://www.mysql.com/" target="_blank">MySql</a></li>
              </ul>
            </p>
          </div>
        </div>
      </div>
    </section>
    <section id="section3" class="text-section">
      <div class="container section-container">
        <div class="well">
          <div class="well-header text-center">
            <h2 id="text-section3">AngularJs Website</h2>
            <h3 class="finished-project-header">This project is no longer being constructed</h3>
          </div>
          <div class="well-body">
            <p><strong>URL to clone project:</strong><br> https://github.com/JavaTheNutt/semester03Hci01.git</p>
            <h3>Technical Details</h3>
            <p>This is a website built for my <em>Human Computer Interaction</em> assignment. This is a pure Angular 1.4X frontend, with no associated backend. This project uses Grunt as a task runner for performing menial tasks on the project.  The full source of the project can be found <a href="https://github.com/JavaTheNutt/semester03Hci01"
                target="_blank">here</a>.</p>
            <p>
              <h3>Business Process Overview</h3>
              <p>
                This website is designed with the purpose of teaching the basics of Web Design skills to children. The design is bright and colorful to make it attractive to children. This was one of the first full websites that I built using AngularJs, and in retrospect, it is very poorly designed with poor levels of abstraction between controllers and services, along with missing quite a few of Angular's best practices.
            </p>
              <strong>Technologies Used:</strong><br>
              <ul>
                <li><a href="https://angularjs.org/" target="_blank">AngularJs 1.4X</a></li>
                <li><a href="https://https://getbootstrap.com/" target="_blank">Twitter Bootstrap</a></li>
                <li><a href="http://gruntjs.com/" target="_blank">Grunt</a></li>
              </ul>
            </p>
          </div>
        </div>
      </div>
    </section>
<section id="section4" class="text-section">
      <div class="container section-container">
        <div class="well">
          <div class="well-header text-center">
            <h2 id="text-section4">Towers of Hanoi</h2>
            <h3 class="finished-project-header">This project is no longer being constructed</h3>
          </div>
          <div class="well-body">
            <p><strong>URL to clone project:</strong><br>https://github.com/JavaTheNutt/towers_of_hanoi.git</p>
            <h3>Technical Details</h3>
            <p>This is <em>The Towers of Hanoi</em> built using JavaFX. This game was built for my college <em>Event Driven Programming</em> module. It is a fairly basic version of the game that does not use recusion, which is the most common method for building <em>The Towers of Hanoi</em>. The entire project is built using core features of Java 8. (If you are using an older version of Java, you may need to include the JavaFX JAR). The full source of the project can be found <a href="https://github.com/JavaTheNutt/towers_of_hanoi"
                target="_blank">here</a>.</p>
            <p>
              <h3>Business Process Overview</h3>
              <p>
                The purpose of <em>The Towers of Hanoi</em> is to move all of the blocks from the left hand tower to the center tower in as few moves as possible. This project contains two versions of this game. The first is the standard version, while in the second I attempted to put my own spin on the game. The version uploaded to GitHub is purely source code, so if you wish to play the game, you'll either need to run it in an IDE, or package it as a runnable JAR file.
            </p>
              <strong>Technologies Used:</strong><br>
              <ul>
                <li><a href="http://docs.oracle.com/javase/8/javase-clienttechnologies.htm" target="_blank">JavaFX 8</a></li>
                <li><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank">Java 8</a></li>
              </ul>
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</body>
              
            
!

CSS

              
                body {
  margin: 0px;
  position: relative;
  overflow-y: scroll;
  font-family: 'Helvetica';
}

nav.navbar {
  margin-bottom: 0;
}

h3.unfinished-project-header {
  color: red;
}

h3.finished-project-header {
  color: green;
}

section.text-section {
  height: 690px;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: 0px;
  padding-top: 30px;
}

.jumbotron {
  margin-top: 15px;
}

div.well {
  font-size: 1.2em;
}

.jumbo-container {
  margin-top: 0;
  background-image: url("http://wallpapercave.com/wp/2wIZaSj.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 60px;
}

#main-body {
  margin: 0px;
}

#section1 {
  background-image: url("http://www.discovertheforest.org/images/hero/home/6.jpg");
}

#section2 {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/4/49/Rocky_desert_scene_in_Wadi_Rum.jpg");
}

#section3 {
  background-image: url("https://bw-1651cf0d2f737d7adeab84d339dbabd3-gallery.s3.amazonaws.com/images/image_2491206/file_2491206.jpg");
}
#section4{
  background-image: url("http://i.jootix.com/o/unnamed--c8063b5875.jpg");
}
              
            
!

JS

              
                
              
            
!
999px

Console