LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  
  
  


  Bruce Young - Personal Portfolio




  


  
the portfolio of
BRUCE
YOUNG
{
designer :
coder :
biologist :
astronomer :
educator :
}
about

A full stack developer with an eye for design, UX and UI development and a strong desire to learn and create. I have had a long career in the areas of educational software, multimedia production and web development.

I firmly believe in life long learning and I'm constantly exploring new ideas and technologies. MOOC's have enabled me to update my skills and keep abreast of the latest trends in design and coding.

My interests are wide with formal qualifications in Biology, Astronomy and Education. I have designed and/or written software for a large international diagnosics company, schools and universities.

portfolio

These items are mainly exercises done whilst undertaking a full stack development course with Free Code Camp. The details are on the back of the cards with links to my CodePen and live sites.

contact
CSS
body {
  padding-top: 50px;
  padding-bottom: 00px;
  background-color: #f6f6f6;
}

.full {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgb(28, 28, 28);
}

.navbar {
  z-index: 9999;
  background-color: black;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.7);
}

.btn-circle {
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 0;
  font-size: 24px;
  line-height: 48px;
  border-radius: 50%;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.btn-lnk {
  position: absolute;
  bottom: 15px;
}

.btn-lnk0 {
  left: 30px;
}

.btn-lnk1 {
  right: 30px;
}


#twoam {
  width: 100vw;
  height: 100vh;
  background-image: url("http://2am.ninja/img/bruce_contact3.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgb(28, 28, 28);
  color: white;
}

#nav-bar ul li:hover::after {
  width: 100%;
}

#nav-bar ul li::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: #607D8B;
  width: 0;
  transition: width 0.2s;
}

.max {
  max-width: 1300px;
  margin: auto;
  padding-bottom: 15px;
}

.desc {
  font-family: 'Roboto', sans-serif;
  font-size: 1.3em;
  line-height: 1.7em;
  letter-spacing: 0.03em;
  margin-left: 10px;
  margin-right: 10px;
}

#about {
  width: 100vw;
  background-color: rgb(255, 255, 255);
  padding-top: 20px;
  padding-bottom: 50px;
}

#about .desc {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.87);
}

.icon-me {
  text-align: center;
  font-size: 5em;
  color: rgba(200, 100, 100, 0.7);
  padding-top: 20px;
  padding-bottom: 25px;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.30);
}

.icon-contact {
  text-align: center;
  font-size: 7.5em;
  color: rgba(152, 110, 110, 0.4);
  padding-top: 10px;
  padding-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
}

.icon-contact a {
  color: rgba(152, 110, 110, 0.4) !important;
}

#portfolio {
  background-color: #f6f6f6;
  width: 100vw;
  max-width: 1000px;
  padding-top: 20px;
  padding-bottom: 50px;
}

#portfolio .desc {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

#contact {
  width: 100vw;
  height: 100vh;
  background-image: url(http://2am.ninja/img/stars.jpg);
  background-color: black;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  padding-top: 20px;
}

.tagline1 {
  font-family: 'lato', sans-serif;
  font-size: 2em;
  font-weight: 300;
  font-style: italic;
  color: #bbb;
  text-align: left;
  padding-top: 70px;
  text-shadow: 1px 1px black;
}

.tagline2 {
  font-family: 'lato', sans-serif;
  font-size: 7em;
  letter-spacing: 7px;
  line-height: 0.95em;
  font-weight: 100;
  color: white;
  text-align: left;
  text-shadow: 1px 1px black;
  padding-top: 10px;
}

.tagline3a, .tagline3b, .tagline3c {
  font-family: 'courier', sans-serif;
  font-size: 1.75em;
  font-style: italic;
  color: #666;
  text-align: left;
  line-height: 1em;
  text-shadow: 1px 1px black;
}

.tagline3a {
  padding-top: 50px;
}

.tagline3b {
  padding-left: 30px;
}

.line {
  height: 3px;
  width: 100px;
  position: relative;
  top: -12px;
  display: inline-block;
  background-color: #999;
}

.line.about {
  background-color: rgba(0, 0, 0, 0.54);
}

.line.portfolio {
  background-color: rgba(0, 0, 0, 0.54);
}

.line.contact {
  background-color: rgba(255, 255, 255, 0.95);
}

.section-title {
  font-family: 'lato', sans-serif;
  font-size: 3.5em;
  font-weight: 900;
  font-style: italic;
  text-align: center;
  padding-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
}

.section-title.about {
  color: rgba(0, 0, 0, 0.54);
  text-shadow: 1px 1px rgba(0, 0, 0, 0.75);
}

.section-title.portfolio {
  color: rgba(0, 0, 0, 0.54);
  text-shadow: 1px 1px rgba(0, 0, 0, 0.75);
}

.section-title.contact {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px rgba(0, 0, 0, 0.99);
}

.section-banner {
  padding-top: 10px;
  padding-bottom: 50px;
}

.project-title {
  font-family: 'Lato', sans-serif;
  font-size: 1.75em;
  font-weight: 500;
  padding-top: 4px;
  padding-bottom: 1px;
  color: #666;
  text-align: center;
}

.project-headings {
  font-family: 'Open Sans', sans-serif;
}

.project-body {
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 1px;
  line-height: 1.5em;
  letter-spacing: 0.03em;
}

.project {
  border-width: thin;
  border-color: #ccc;
}

.intro {
  height: 100vh;
  width: 100%;
}

.content {
  vertical-align: middle;
}

/*section {
  width: 100%;
  margin: 0;
  max-width: none;
  background-color: #000;
  height: 100vh;
}*/

#social-footer {
  width: 100%;
  text-align: center;
  color: white;
  background-color: black;
}

#social-footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#social-footer ul li {
  display: inline;
  padding: 0.4em;
}

#social-footer a {
/*  color: #939393 !important; */
  color: white !important;
}

.blacktext {
  color: black;
}

footer {
  width: 100vw;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1% 5%;
  text-align: center;
  background-color: #000;
  opacity: 1;
  z-index: 100;
  a {
    font-weight: 500;
    text-decoration: none;
  }
}


a.fa {
  text-decoration: none
}

a:link {
  text-decoration: none !important;
  outline: 0;
}

.fa-stack {
  margin: -2px;
}

.copyright {
  padding-bottom: 0px;
  padding-top: 5px;
  color: #555;
}

#down {
  position: absolute;
  opacity: 0.20;
  left: 50%;
  bottom: 10%;
  cursor: pointer;
}

.card {
  position: relative;
  width: 300px;
  height: 365px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  perspective: 2000px;
  cursor: pointer;
}

.card img {
  width: calc(300px - 0px);
  height: calc(365px - 45px);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.16);
  border-bottom-width: 1px;
}

.card_front, .card_back {
  position: absolute;
  left: 0px;
  top: 0px;
  width: inherit;
  height: inherit;
  border-style: solid;
  border-width: 0px;
  border-radius: 6px;
  border-color: #666;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.9s ease-in-out;
  transition: transform 0.9s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}


.card_front:hover, .card_back:hover {
  left: -4px;
  top: -4px;
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.5);
}

.card_front {
  background-color: white;
}

.card_back {
  background-color: #fafffc;
  -webkit-transform: rotateY(179deg);
  -ms-transform: rotateY(179deg);
  transform: rotateY(179deg);
}

.card.effect_click.flipped .card_front {

  -webkit-transform: rotateY(-179deg);
  -ms-transform: rotateY(-179deg);
  transform: rotateY(-179deg);
}

.card.effect_click.flipped .card_back {

  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.highlight {
  opacity: 0.6;
}

.highlight:hover {
  opacity: 1;
}



@media only screen and (max-width: 768px) {
  #contact {
    background-attachment: scroll;
  }

  #twoam {
    background-attachment: scroll;
  }

  .tagline1 {
    font-size: 1.2em;
  }

  .tagline2 {
    font-size: 2.8em;
  }

  .tagline3a, .tagline3b, .tagline3c {
    font-size: 1em;
  }

  .section-title {
    font-size: 2.6em;
  }

  .line {
    height: 2px;
    width: 70px;
    position: relative;
    top: -10px;
    display: inline-block;
    background-color: #666;
  }

  .icon-me {
    font-size: 7.5empx;
    padding-top: 10px;
    padding-bottom: 15px;
  }

  .icon-contact {
    font-size: 4.5em;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}




JS
$(document).ready(function() {

  // import view port library function
  jQuery.extend(verge);

  // smooth scrolling of viewport to target
  $('a[href^="#"]').click(function(event) {
    event.preventDefault();
    $('html,body').animate({
      scrollTop: $(this.hash).offset().top - 50
    }, 900);
  });

  $('#down').click(function() {
    $('html,body').animate({
      scrollTop: $('#about').offset().top - 50
    }, 900);
  });

  var currentTime = new Date();
  var year = currentTime.getFullYear();

  // data for the portfolio cards front and back
  var projectData = [{
      title: 'Quotes',
      text: '

A FreeCodeCamp project, Build a Random Quote Machine. The user is able to show a new random quote and send that quote to Twitter. Quotes was designed and optimized to be a mobile web app first.

Code: HTML5, CSS3, Javascript, jQuery
Layout: Bootstrap
Graphics Editor: Gimp, pixlr.com
Images: lorempixel.com
Fonts: Font-awesome
Data: random famous quotes API', image: ['http://2am.ninja/img/quotes.jpg'], site: [ ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/dojjre'], ['Live Site', 'fa-link', 'http://2am.ninja/quotes/'] ] }, { title: 'Twitch TV', text: '

A FreeCodeCamp project, Use the Twitchtv JSON API. A user can see if Free Code Camp is currently streaming on Twitch.tv.

Code: HTML5, CSS3, Javascript, jQuery
Layout: Bootstrap
Fonts: Ubuntu Mono
Data: Twitchtv API', image: ['http://2am.ninja/img/twitch3.jpg'], site: [ ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/jrEBgq'] // ,['Live Site', 'fa-link', 'http://2am.ninja/twitch/'] ] }, { title: 'Wiki Search', text: '

A FreeCodeCamp project, Build a Wikipedia Viewer. A user can search Wikipedia entries in a search box and see the resulting Wikipedia entries.

Code: HTML5, CSS3, Javascript, jQuery
Layout: Bootstrap
Graphics Editor: pixlr.com
Images: unsplash.com
Data: Wikipedia API', image: ['http://2am.ninja/img/wiki.jpg'], site: [ ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/rVRwor'] ] }, { title: 'Pomodoro Timer', text: '

A FreeCodeCamp project, Build a Pomodoro Clock. A user can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed. Pomodoro Timer was designed and optimized to be a mobile web app first.

Code: HTML5, HTML5 Canvas, CSS3, Javascript, jQuery, ion.sound
Layout: Bootstrap, HTML5 Canvas
Fonts: IcoMoon', image: ['http://2am.ninja/img/timer.jpg'], site: [ ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/WvVZyM'], ['Live Site', 'fa-link', 'http://2am.ninja/timer/'] ] }, { title: 'Local Weather', text: '

A FreeCodeCamp project, Show the Local Weather. A user can see the weather in my current location.. Local Weather was designed and optimized to be a mobile web app first.

Code: HTML5, CSS3, Javascript, jQuery
Layout: Bootstrap
Images: flickr.com
Fonts: Climacons, Open Sans
Data: Open Weather Map API, IP-API.com Geolocation API', image: ['http://2am.ninja/img/weather.jpg'], site: [ ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/oXaoxb'] ] }, /* { title: 'Camper News', text: '

A FreeCodeCamp project, Stylize Stories on Camper News. The user can browse recent posts from Camper News.

Code: HTML5, CSS3, Javascript, jQuery
Layout: Bootstrap, Masonary
Graphics Editor: Gimp, pixlr.com
Images: unsplash.com
Data: Free Code Camp news API', image: ['http://2am.ninja/img/news.jpg'], site: [ ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/vOvBqY'] ] }, */ { title: 'Bar Graph', text: '

A FreeCodeCamp project, Visualize Data with a Bar Chart . The user can see US Gross Domestic Product by quarter, over time, with a mouse over tooltip.

Code: HTML5, CSS3, D3, SVG, Javascript, jQuery
Layout: Bootstrap', image: ['http://2am.ninja/img/bar-graph.jpg'], site: [ ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/PNJMpg'] ] }, { title: 'Heat Map', text: '

A FreeCodeCamp project, Visualize Data with a Heat Map. The user can view a heat map with data represented both on the Y and X axis, with mouse over tooltip.

Code: HTML5, CSS3, D3, SVG, Javascript, jQuery
Layout: Bootstrap', image: ['http://2am.ninja/img/heat-map.jpg'], site: [ ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/VeKNEa'] ] }, /* { title: 'Force Graph', text: '

A FreeCodeCamp project, Show Relationships with a Force Directed Graph. The user can see a Force-directed Graph that shows which campers are posting links on Camper News to which domains.

Code: HTML5, CSS3, D3, SVG, Javascript, jQuery
Layout: Bootstrap
Data: Free Code Camp news API', image: ['http://2am.ninja/img/force-graph.jpg'], site: [ ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/KVdbMO'] ] }, */ { title: 'Tic-Tac-Toe', text: '

A FreeCodeCamp project, Build a Tic Tac Toe Game. The user can play a game of Tic Tac Toe with the computer.

Code: HTML5, CSS3, Javascript, jQuery
Layout: Materialize.css', image: ['http://2am.ninja/img/ttt.jpg'], site: [ ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/jWWYLo'] ] } ]; // add listener to all the cards for click flipping function addListener() { var cards = document.querySelectorAll(".card.effect_click"); for (var i = 0; i < cards.length; i++) { clickListener(cards[i]); } function clickListener(card) { card.addEventListener("click", function() { this.classList.toggle("flipped"); }); } } // create, populate and show portfolio project cards function showProjectCards() { var html = ''; projectData.forEach(function(project) { html += '
'; html += '
'; html += '
'; html += '
'; html += project.title; html += '
'; html += '
'; html += '
' + project.title + '
'; html += ''; html += '
' + project.text + '
'; html += '
'; if (typeof project.site[1] !== 'undefined') { html += ''; } html += '
'; html += '
'; html += '
'; }); $('#theProjects').append(html); addListener(); } showProjectCards(); $(".copyright").append("© " + year + " Bruce Young. All rights reserved"); // turn on bootstrap tooltips $('[data-toggle="tooltip"]').tooltip(); });
Host Instantly Drag and Drop Website Builder

 

Description

a personal portfolio site created for a Free Code Camp Zipline.
Term
Mon, 11/27/2017 - 21:48

Related Codes

Pen ID
Pen ID
Pen ID