A Pen by Gabriel Damon.

About-Me.markdown

About Me

A Pen by Gabriel Damon on CodePen.

License.

index.html

<section class="background">
  <header>
    <p class='element0          '><span class="prompt">gabriel@lowercase ~$ </span><span class="type"></span></p>
    <p class='element1 nodisplay'><span class="prompt">gabriel@lowercase ~$ </span><span class="type"></span></p>
    <p class='element2 nodisplay'><span class="prompt">gabriel@lowercase ~$ </span><span class="type"></span></p>
    <p class='element3 nodisplay'><span class="prompt">gabriel@lowercase ~$ </span><span class="type"></span></p>
    <p class='element4 nodisplay'><span class="prompt">gabriel@lowercase ~$ </span><span class="type"></span></p>
  </header>
  <footer>
    <p><a href="#" id="top">Back to Top</a></p>
    <p><a href="#" class="home-link">Gabriel Damon</a></p>
    <p><a href="mailto:gabrieldamon42@gmail.com" target="_blank">gabrieldamon42@gmail.com</a></p>
    <p><a href="https://github.com/GabrielD42" target="_blank">On Github</a></p>
    <p><a href="http://www.linkedin.com/pub/gabriel-damon/87/14b/926" target="_blank">On Linkedin</a></p>
  </footer>
</section>
<section class="content">
  <nav class="pure-menu pure-menu-open pure-menu-horizontal center">
    <ul>
        <li><a href="#" class="home-link">Gabriel Damon</a></li>
      <li><img src="https://lh3.googleusercontent.com/-0-YGHMX1k20/UnreWjrbS6I/AAAAAAAAAm8/6GOYKKWTFFc/s320-no/gthreegears.png" alt="logo" /></li>
        <li><a href="#" class="project-link">Projects</a></li>
        <li><a href="#" class="work-link">Work</a></li>
    </ul>
  </nav>
  <article class="home">
  <h2>About Me</h2>
  <p>Or is it???</p>
  <p>You will never know. Or you could just read the rest of this.</p>
  <p>But that takes too much effort, doesn't it?</p>
  <p>Well then why am I writing this if no one will read it? Is it a statement to the futility of creating a website and hoping someone will discover it?</p>
  <p>Well, maybe I should just stop writing then.</p>
  <p>Or, horrors upon horrors, I could make this a proper 'About Me' page. So here goes:</p>
  <br />
  <h2>Gabriel Damon</h2>
  <figure>
    <img src="http://members.cruzio.com/~laovel/edward/9thgradepicture1.jpg" alt="me, or is it?" id="me"/>
    <figcaption><h3>Me</h3></figcaption>
   </figure>
    <p>I am a 15-year-old boy living in Santa Cruz, California. I have loved electronics and programming for several years and have aspired to build robots for a long time. I went to the Santa Cruz Waldorf School. My first robot was technically a project for school, although I was really just looking for an excuse to start building a robot. And then I decided I wasn't busy enough, so I started building websites for people. <em>Great idea</em>, right? Well, its worked out OK. It earns me money, which I need because whenever I think about <em>collage</em> I mentally scream. Or maybe literally. Ask my friends. Im not going to tell you. After collage I want to work for NASA, if the governement hasn't cut all funding yet. Or maybe SpaceX. I heard they are hiring.</p>
  <p>Does that satisfy your <em>arbitrary</em> need for an 'About Me' page? It had better because you're not getting anymore than that.</p>
  <h2 style="text-decoration: line-through">Contact Me</h2>
  <h2>Go away or I will use Comic Sans</h2>
  <p>Who idea was it to add a 'Contact Me' section? It's not like I'm a perticully sociable guy. Oh well, here goes:</p>
  <p>I don't live in the <em>Stone Age</em> so I do have an email. Crazy, right? I also use Github because it's better than opening up a folder and seeing my_project_first, my_project_oldest, my_project_old_old, my_project_old, my_project, my_project_new, my_project_new_new, my_project_newer, my_project_newest, my_project_extremely_new; because that is what happened when I built my first robot. I also created a profile on LinkedIn because apparently some collages will look at that. And if <em>wishes</em> were fishes then fishes would fly.</p>
  <p>Of course that makes sense. I don't know why you are looking at me funny. So in any case, there are links to my email, my Github account and my LinkedIn account in the footer of this page. If you can't see the footer, get a decent browser, you <em>Internet Explorer</em> Micro$oft lover! I am also on Facebook, but I use that rarely, and only to talk with friends, and I don't think you qualify. Sorry.<p>
</article>
<article class="project">
  <h2>Projects</h2>
  <p>These are random projects that I am or have been working on.</p>
  <div class="pure-g-r">
    <figure class="pure-u-1-3">
      <a href="http://members.cruzio.com/~laovel/edward_summery.php" target="_blank"><img src="https://lh5.googleusercontent.com/-k51gHC9Ohkk/UgBNsqxQVrI/AAAAAAAAAbI/gzea6Duv8RU/s479-no/edward.jpg" alt="EDWARD the Robot" /></a>
      <figcaption><h3>EDWARD the Robot</h3></figcaption>
    </figure>
    <figure class="pure-u-1-3">
      <a href="http://members.cruzio.com/~laovel/BEN_projectpage/html/index.php" target="_blank"><img src="https://lh6.googleusercontent.com/-hBFOB3CF3hA/UgBNsuAbVOI/AAAAAAAAAbE/evX2lfjxyDE/s479-no/ben.jpg" alt="BEN the Robot" /></a>
      <figcaption><h3>BEN the Robot</h3></figcaption>
    </figure>
  </div>
</article>
<article class="work">
  <h2>Work</h2>
  <p>These are websites that I have been employed to build or update.</p>
  <div class="pure-g-r">
    <figure class="pure-u-1-3">
      <a href="http://members.cruzio.com/~laovel/laura_new/html/" target="_blank"><img src="https://lh4.googleusercontent.com/-rU_u4C26Y_Y/Uq41qQUfM8I/AAAAAAAAAqQ/eSJRhF5Yf_c/s133-no/laura.jpg" alt="Village Preschool" /></a>
      <figcaption><h3>Village Preschool</h3></figcaption>
    </figure>
    <figure class="pure-u-1-3">
      <a href="http://members.cruzio.com/~laovel/greenspace/index.html" target="_blank"><img src="https://lh4.googleusercontent.com/-H6aFfd9ZSYg/UqqXzg6L5zI/AAAAAAAAAog/iccJFG4IOEI/w119-h88-no/greenspace-logo-new.png" alt="greenspace" /></a>
      <figcaption><h3>greenspace</h3></figcaption>
    </figure>
  </div>
</article>
</section>

script.js

$shy_display = false;

function reset() {
  $("#me").fadeIn("slow");
  $shy_display = false;
  }

$('#top').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
 });

$( "#me" ).hover(function() {
  $( "#me" ).fadeOut("slow", function() {
    if(!$shy_display) {
      alert("If you hadn't noticed, I am shy");
      $shy_display = true;
      }
    });
  });

setTimeout(function(){
        $(".element0 .type").typed({
            strings: ["apt-get install konquer"],
            typeSpeed: 30, // typing speed
            backDelay: 750, // pause before backspacing
            loop: false, // loop on or off (true or false)
            loopCount: 1, // number of loops, false = infinite
            callback: function(){ } // call function after typing is done
        });
    }, 0);

setTimeout(function(){
        $(".element1").css("display", "inherit");
        $(".element1 .type").typed({
            strings: ["konquer -r /world"],
            typeSpeed: 30, // typing speed
            backDelay: 750, // pause before backspacing
            loop: false, // loop on or off (true or false)
            loopCount: 1, // number of loops, false = infinite
            callback: function(){ } // call function after typing is done
        });
    }, 2000);

setTimeout(function(){
        $(".element2").css("display", "inherit");
        $(".element2 .type").typed({
            strings: ["chown gabriel /world"],
            typeSpeed: 30, // typing speed
            backDelay: 750, // pause before backspacing
            loop: false, // loop on or off (true or false)
            loopCount: 1, // number of loops, false = infinite
            callback: function(){ } // call function after typing is done
        });
    }, 4000);

setTimeout(function(){
        $(".element3").css("display", "inherit");
        $(".element3 .type").typed({
            strings: ["chmod 700 /world"],
            typeSpeed: 30, // typing speed
            backDelay: 750, // pause before backspacing
            loop: false, // loop on or off (true or false)
            loopCount: 1, // number of loops, false = infinite
            callback: function(){ } // call function after typing is done
        });
    }, 6000);

setTimeout(function(){
        $(".element4").css("display", "inherit");
        $(".element4 .type").typed({
            strings: ["chown parents /world/australia"],
            typeSpeed: 30, // typing speed
            backDelay: 750, // pause before backspacing
            loop: false, // loop on or off (true or false)
            loopCount: 1, // number of loops, false = infinite
            callback: function(){ } // call function after typing is done
        });
    }, 8000);

$(".home-link").mouseup(function() {
  $(".home").fadeOut("slow", function() {
    $(".work").fadeOut("slow", function() {
      $(".project").fadeOut("slow", function() {
        reset();
        $(".home").fadeIn("slow");
        });
      });
    });
  });

$(".work-link").mouseup(function() {
  $(".home").fadeOut("slow", function() {
    $(".work").fadeOut("slow", function() {
      $(".project").fadeOut("slow", function() {
        reset();
        $(".work").fadeIn("slow");
        });
      });
    });
  });

$(".project-link").mouseup(function() {
  $(".home").fadeOut("slow", function() {
    $(".work").fadeOut("slow", function() {
      $(".project").fadeOut("slow", function() {
        reset();
        $(".project").fadeIn("slow");
        });
      });
    });
  });

style.scss

$header-height: 13em;
$footer-height: 13em;

body {
  padding: 0;
  margin: 0;
  }

.background {
  padding-left: 1em;
  padding-top: 1em;
  top: 0;
  z-index: -1;
  position: fixed;
  width: 100%;
  height: 100%;
  font-family: Monaco, Consolas, "Lucida Console", monospace;
  background-color: black;
  color: #1EFF00;
  a {
    color: #1EFF00;
    text-decoration: none;
    &:hover, &:focus {
      text-decoration: underline;
      }
    }
  }

.content {
  -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.95);
  -moz-box-shadow:    0 0 50px rgba(0, 0, 0, 0.95);
  box-shadow:         0 0 50px rgba(0, 0, 0, 0.95);
  background-color: white;
  margin-top: $header-height;
  margin-bottom: $footer-height;
  padding: 1em;
  .home {
    display: inherit;
    }
  .project, .work {
    display: none;
    }
  }

figure {
      position: relative;
      width:15em;
      height:15em;
      overflow:hidden;
      margin: 0;
      padding: 1em;
      img {
        height: 15em;
        width: auto;
        }
      figcaption {
        width: 100%;
        position:relative;
        top: -4em;
        background-color: black;
        background-color: rgba(0,0,0,0.6);
        }
      h1, h2, h3, h4, h5, h6, p {
        color: white;
        padding: 0.5em;
        text-align: center;
        }
      }

header {
  width: 100%;
  margin: 0;
  padding: 1em;
  p {
    line-height: 60%;
    }
  }

footer {
  text-align: center;
  position: absolute;
  bottom: 1em;
  width: 100%;
  }

nav {
  margin-bottom: 2em;
  img {
    margin-top: -2em;
    position: relative;
    border: 2px solid white;
    border-radius: 5em;
    width: 5em;
    height: 5em;
    }
  }

.nodisplay {
  display: none;
  }

.center {
  text-align: center;
  }

@media all and (max-width: 40em) {
  nav {
    img {
      display: none;
      }
    }
  header {
    .prompt {
      display: none;
      }
    }
  }