css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<header>
  <div class="typed">
  <a name="top"> </a>
  <div style="margin-bottom: 10px;" >
    <h1 class="headingStatement">Johnny-Bizzel</h1>
  </div>
    
  </div>
   <div class="typed">
    <div>
      <h2 class="text-center headingStatement">Software-Developer</h2>
    </div>
     </div>
</header>

<nav class="navbar top-nav">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- <a class="navbar-brand" href="#top">Home</a>-->
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>          
        <li><a href="#contactDetail">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-10 col-xl-10 col-lg-push-1 col-xl-push-1 container-fluid">

  <blockquote class="monospace lead text-justify"> Hi, & welcome to my portfolio. I have had a long career in the Information Technology industry along with a love of computers from an early age. Over my career, I have witnessed the growth of the PC, the world wide web and more recently mobile devices.
  </blockquote>
  <blockquote>"Software innovation, like almost every other kind of innovation, requires the ability to collaborate and share ideas with other people, and to sit down and talk with customers and get their feedback and understand their needs."<small> Bill Gates </small></blockquote>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-10 col-xl-10 col-lg-push-1 col-xl-push-1 container-fluid">
  <a name="about">
  </a>
  <h2>{ About }</h2>
  <blockquote class="monospace lead text-justify">
    I have worked on several projects over my career, mainly working on back end processes. For the Bradford Health Authority I worked on many different projects, mainly on my own but occasionally as part of the team. We also took time out to teach other members of the team about new technologies and innovations once a month.
    <br/>
    <br/> During my time at STROMA I worked on their signature product RSAP and a new Installer Portal website. We worked in an Agile environment using JIRA software.
    <br/>
    <br/> Since leaving, I have been learning new technologies via Free Code Camp, Linked.in learning and Pluralsight as well as other online resources which involves creating many real world applications using the latest web frameworks. I am following Free Code Camp's Full Stack Developer curriculum which teaches, JavaScript, jQuery, Node, MongoDb, React and Bootstrap. See more about the challenges in the Projects section.
  </blockquote>

  <blockquote>
    "Getting fired from Apple was the best thing that could have ever happened to me. The heaviness of being successful was replaced by the lightness of being a beginner again. It freed me to enter one of the most creative periods of my life." <small> Steve Jobs </small>
  </blockquote>


</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-10 col-xl-10 col-lg-push-1 col-xl-push-1 container-fluid">
  <blockquote class="monospace lead">I have industrial experience with the following technologies:<br/>
    <ul>
      <li>C#, VB.NET (7+ years work experience)</li>
      <li>PHP (project work)</li>
      <li>Javascript, jQuery (working knowledge)</li>
      <li>HTML, CSS (working knowledge)</li>
      <li>MS SQL, MySQL (7+ years experience)</li>
      <li>Version control - Subversion, Team Management Studio</li>
      <li>Agile - JIRA (2 years experience)</li>
      <li>Internal team training (some experience)</li>
    </ul>
  </blockquote>
 

</div>
<div class="clearfix"></div>
<div id="proj">
  <div class="container">
    <a name="projects">
    </a>
    <h2>{ Projects }</h2>
    <div class="row">
      <section class="col-md-4 col-sm-6">
        <figure class="caption text-center">
          <figcaption>Poker Assistant (VB / C# .NET)</figcaption>
          <a href="https://github.com/JohnnyBizzel/pokerassistantVB" target="_blank">
            <img src="https://coding.citytravelling.me.uk/img/thPokerAssistant.png" alt="Poker assistant app" class="img-thumbnail" /></a>
          <br/>
          <small>Personal project Windows app designed to manage a home poker game. 
          </small>
        </figure>
      </section>
      <hr class="visible-xs-block" />
      <section class="col-md-4 col-sm-6">
        <div class="caption text-center">
          <figure>
            <figcaption>Active Bradford (VB.NET)</figcaption>
            <img src="https://coding.citytravelling.me.uk/img/thActiveBrad.png" alt="Active Bradford" class="img-thumbnail" />
          </figure>
          <small>NHS service directory of services. Site behaved like a CMS with editable sections manageable via an administrator log on.
          </small>
        </div>
      </section>
      <hr class="visible-xs-block" />
      <div class="clearfix visible-sm-block"></div>

      <section class="col-md-4 col-sm-6">
        <div class="caption text-center">
          <figure>
            <figcaption>Bradford NHS (WordPress)</figcaption>
            <img src="https://coding.citytravelling.me.uk/img/thBradfordNHS.png" alt="Bradford NHS" class="img-thumbnail" />
          </figure>
          <small>Added a WordPress plugin to corporate site accessing the NHS services API.
          </small>
        </div>
      </section>
      <hr class="visible-xs-block" />
      <div class="clearfix visible-lg-block visible-md-block"></div>
      <br/><br/>
      <section class="col-md-4 col-sm-6">
        <div class="caption text-center">
          <figure>
            <figcaption>Cava Bar (WordPress)</figcaption>
            <a href="https://web.archive.org/web/20161205091051/http://cavabar.ch:80/" target="_blank"><img src="https://coding.citytravelling.me.uk/img/thCavaBar.png" alt="Cava Bar" class="img-thumbnail" /></a>
          </figure>
          <small>Friend's personal website, hosted website solution.</small>
        </div>
      </section>
      <hr class="visible-xs-block" />
      <div class="clearfix visible-sm-block"></div>
      <section class="col-md-4 col-sm-6">
        <div class="caption text-center">
          <figure>
            <figcaption>DJ Wil Odd Sox (WordPress)</figcaption>
            <a href="https://wiloddsox.co.uk/" target="_blank"><img src="https://coding.citytravelling.me.uk/img/tnWilOddSox.png" alt="Wil Odd Sox" class="img-thumbnail" /></a>
          </figure>
          <small>Friend's personal website, hosted website solution.</small>
        </div>
      </section>
      <hr class="visible-xs-block" />
      <section class="col-md-4 col-sm-6">
        <div class="caption text-center">
          <figure>
          <figcaption>Installer Portal (C# .NET)</figcaption>
          <a href="https://installerportal.co.uk/" target="_blank"><img src="https://coding.citytravelling.me.uk/img/thInstallerPortal-comp.png" alt="Stroma Installer Portal" class="img-thumbnail" /></a>
          </figure>
          <small>Large corporate site for STROMA.com managing Installer member's scheme certification.</small>
          <br/>
        </div>
      </section>

      <hr class="visible-xs-block" />

      <div class="clearfix visible-sm-block"></div>
      <br/><br/>
      <section class="col-md-4 col-sm-6">
        <div class="caption text-center">
          <figure>
            <figcaption>FCC Tribute Page</figcaption>
            <a href="https://codepen.io/JohnnyBizzel/full/bpvrBv" target="_blank"><img src="https://coding.citytravelling.me.uk/img/tribute.png" alt="Sir Norman Foster Tribute" class="img-thumbnail" /></a>
          </figure>
          <small>Free Code Camp Tribute page Bootstrap challenge.</small>
        </div>
      </section>
      <hr class="visible-xs-block" />
      <section class="col-md-4 col-sm-6">
        <div class="caption text-center">
          <figure>
            <figcaption>FCC Javascript Calculator</figcaption>
            <a href="https://codepen.io/JohnnyBizzel/full/VKKEPy" target="_blank"><img src="https://coding.citytravelling.me.uk/img/jsCalculator.png" alt="Pocket Calculator" class="img-thumbnail" /></a>
          </figure>
          <small>
        Free Code Camp JavaScript Calculator challenge.
          </small>
        </div>
      </section>
      <hr class="visible-xs-block" />
      <div class="clearfix visible-sm-block"></div>
      <section class="col-md-4 col-sm-6">
        <div class="caption text-center">
        <figure>
          <figcaption>FCC Pomodoro Clock</figcaption>
          <a href="https://codepen.io/JohnnyBizzel/full/aBzNYV" target="_blank"><img src="https://coding.citytravelling.me.uk/img/thPomodoro.png" alt="Pomodoro Clock" class="img-thumbnail" /></a>
        </figure>
        <small>Free Code Camp Pomodoro Clock challenge.</small>
        </div>
      </section>
      <hr class="visible-xs-block" />
    </div>
 <blockquote>
    "You need to study other people's work. Their approaches to problem solving and the tools they use give you a fresh way to look at your own work." <small> Gary Kildall </small>
  </blockquote>
  </div>
</div>
<br/>
<div class="clearfix"></div>
<br/>
<footer>
<div class="col-*-12 contactme">
  <a name="contactDetail"></a>
  <h3 style="color: #AEAEAE; padding: 15px 0 0 15px">{ Contact }</h3>
  <br/>
  <!-- mobile screen Contact links -->
  <div class="visible-xs visible-sm visible-md">
    <ul class="social">
      <li>
        <a href="https://twitter.com/JohnnyBizzel/" class="social-icon" target="_blank"><i class="fa fa-twitter fa-lg"></i></a>
      </li>
      <li>
        <a href="http://www.flickr.com/photos/johnseb" class="social-icon" target="_blank"><i class="fa fa-flickr fa-lg"></i></a>
      </li>
      <li>
        <a href="https://github.com/JohnnyBizzel" class="social-icon" target="_blank"><i class="fa fa-github fa-lg"></i></a>
      </li>
      <li>
        <a href="https://www.linkedin.com/in/john-barber-3403a639" class="social-icon" target="_blank"><i class="fa fa-linkedin fa-lg"></i></a>
      </li>
    </ul>
  </div>
  <!-- full screen Contact links -->
  <div class="visible-lg">
    <div class="col-lg-push-3 col-lg-9">
      <div class="row-fluid">
        <a class="btn-primary btn-lg" href="https://twitter.com/JohnnyBizzel/" target="_blank"><img src="https://coding.citytravelling.me.uk/img/twitter-bird.svg" width="25px" alt="Twitter logo"> Twitter</a>
        <a class="btn-primary btn-lg" href="http://www.flickr.com/photos/johnseb" target="_blank"><img src="https://coding.citytravelling.me.uk/img/flickr-whitebg.svg" alt="Flickr logo" width="25px"> Flickr</a>
        <a class="btn-primary btn-lg" href="https://github.com/JohnnyBizzel" target="_blank"><img src="https://coding.citytravelling.me.uk/img/github.svg" width="25px" alt="GitHub logo"> GitHub</a>
        <a class="btn-primary btn-lg" href="https://www.linkedin.com/in/john-barber-3403a639" target="_blank"><img src="https://coding.citytravelling.me.uk/img/linked-in.svg" alt="Linked in logo" width="25px"> Linked.in</a>
      </div>
    </div>
  </div>
</div>
</footer>
            
          
!
            
              /* @media only screen and (max-width: 320px) blockquote {
font-size: 0.5em;
} */

body {
  font-family: Monospace;
  font-size: 14pt;
}
blockquote {
  font-family: Arial;
  background-color: #F8EFBE;
  border-left-color: #F4B514;
}

.contactme {
  background-color: black;
  color: white;
  height: 160px;
}

.monospace {
  font-family: Monospace;
  font-size: 1.1em;
  background-color: #FFF;
  border-left-color: #FFF;
}

.top-nav {
  background-color: #671100;
}

.top-nav a {
  color: #d3e316;
}
header {
  margin: 20px;
  color: #FFFF00;
  height: 110px;
}


.headingStatement {
  font-family: Monospace;
  color: #333;
  text-shadow: 2px 2px 1px #888; 
  margin: 0 auto; 
}

h2 {
  text-shadow: 1px 1px 3px #888; 
}
/* bootstrap override */

.btn-primary:hover {
  text-decoration: none;
}
.img-thumbnail {
  opacity: 0.7;
}
.img-thumbnail:hover {
  opacity: 1;
}

.navbar-nav li a:hover {
    background-color: #AF0000;
    border-radius: 10px;
      -ms-transform: translate(-1px,-1px); /* IE 9 */
    -webkit-transform: translate(-1px,-1px); /* Safari */
    -moz-transform: translate(-1px,-1px); /* FF */
    transform: translate(-1px,-1px); /* Standard syntax */
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cccccc;
  border-radius: 1px;
}

.social {
  display: inline;
  text-align: center;
}
.social li {
  display: inline-block;
}
.social-icon {
  display: block;
  margin: 10px 10px;
  padding: 5px 5px;  
  border-radius: 8px;
  background-color: #373d44;
  line-height: 38px;
  font-size: 16px;
  color: #eee;
  text-align: center;
}
.social-icon i {
  margin: 0 10px;
}
.social-icon:hover {
  background-color: #0583ca;
}

/* https://codepen.io/geoffgraham/pen/jrWwWM
  Typewriter effect
*/
.typed {
    display: flex;
  justify-content: center;
}
h1.headingStatement {
  color: #000;
   font-size: 2em;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid black; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .1em; /* Adjust as needed */
  animation: 
    typing 1.5s steps(20, end),
    blink-caret .5s step-end 10,
    hide-caret 1s step-end 3s infinite;
}

h2.headingStatement {
  color: #000;
  font-size: 1.5em;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid black; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .2em; /* Adjust as needed */
  animation: 
    typing 3s steps(20, end),
    blink-caret .75s step-end infinite,
    reveal .1s step-end, blink-caret 0.5s step-end  infinite;
  animation-delay: 3.5s;
opacity: 0;
  animation-fill-mode: forwards;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes reveal {
  from { opacity: 0 }
  to { opacity: 1 }
}


/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black }
}
@keyframes hide-caret {
  from, to { border-color: white }  
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console