123

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.

            
              <head>
  <link href='https://fonts.googleapis.com/css?family=Alef:400,700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Vollkorn:700' rel='stylesheet' type='text/css'>
  <title>The Legend of Steve The Philosophist!</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="navbar-brand">Steve The Philosophist, Co-founder of Rational Bonding
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-menu" aria-controls="nav-menu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div id="nav-menu" class="collapse navbar-collapse">
      <ul class="navbar-nav mr-auto ">
        <li class="nav-item"><a href="#home">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#about">About Me</a></li>
        <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </div>

  </nav>
  <div id="home" class="section top-section">
    <h2 id="headLine" class="text-center">Rational Bonding Presents</h2>
    <h2 id="pitch" class="text-center">The Legend Of</h2>
  </div>
  <canvas id="Steve"></canvas>
  <hr class="top-section">
  <div id="about" class="top-section container-fluid section">
    <h2 class="text-left">About Me</h2>
    <div class="inline-block">
      <div class="container-fluid jumbotron transbox col-md-12" style="opacity:.7">
        <article>
          <p>Hi! Steve The Philosophist here. Why call myself "The Philosophist," you ask? From a young age, I've always been driven by the deep ideas and concepts that are a part of philosophy. However, I have only one life to live, and while I would love
            to think of myself as a philosopher, I did not and don't soon plan to go to school to become a professional one. </p>
          <p>
            The '-ist' version of many ideologies often entails a passionate drive or devotion to the ideology itself. Often this can be an extreme amount of devotion, such as a Nationalist who is willing to go to war for the sake of patriotism. In this way, while
            I don't consider myself an ideologue, if I were one, it would be to an ideology that never stops questioning and wondering what more there is that I could potentially discover. So, as a fun play on words, I independently came up with an idea
            of Philosophism, to which I can consider myself a Philosophist.</p>
          <p>I am currently enrolled in a Biomedical Engineering program at California State University, Long Beach. I consider myself a jack-of-all-trades and a master of some. My interests are vast, but my primary goal is to be involved in neuroscience
            research. With a biomedical engineering background, I plan to utilize my talents as an innovator and a leader to inspire and develop brain-machine interfaces wthat could one day discover the code of the human brain.</p>
          <p>
            Being the lofty goal that it is, I am still a realist at the end of the day. I am also aspiring to be a creative in my own right. I'm passionate about science fiction, video games, graphic design, programming, education and game design. As I wait for
            the final stretch of my bachelor's degree to finally be completed, I have a wealth of ideas I am working on, not the least of which is attempting to form a business I call Rational Bonding.
          </p>
          <p>
            Rational Bonding is a business idea that my best friend and I have been dreaming up over the last 5 years. Our first project, Alchem Fighter is underway now, with a team of professional friends attempting to take it from the state of protoype to a working
            game. The main core of Rational Bonding is the idea that wherever education and entertainment are not the same thing, something is missing. </p>
          <p>Rational Bonding will be a game developing company that starts with a fun idea and leaves the player almost unaware that they have actually learned a valuable skill from playing. Truth be told, it's currently just a hobby trying to put something
            together with friends. Alternatively, I might sooner get swept up by an established game developing company or other part of the entertainment industry with whatever we have as an extention of my experience to offer.
          </p>
          <p>My skills include teaching math and science (to high school and some college calculus students), knowledge in the philosophy of rationality, programming basics (javascript, html, css, jQuery, bootstrap, and c++), lower division hard sciences
            (chemistry, physics, and biology), and well studied in various psychology and neuroscience topics (cognitive psychology, biological psychology, computational neuroscience, etc.). I tend to be a jack-of-all-trades sort of person while I also
            intend to master everything that I reasonably can. I am highly flexible and motivated to work towards the best interests of those I work with.</p>
      </div>

    </div>
    <hr>
  </div>
  <div id="portfolio" class="container-fluid section">
    <h2 class="text-center">Portfolio</h2>
    <div class="row">
      <div class="col-md-12">
        <h3>Simon </h3>
        <a href="https://codepen.io/Philosophist/full/yOMOmV/">
            <h1>🐦</h1></a>

        <p class="thumbText">
          A fun project challenge from Free Code Camp. I think I really broke into HTML5's canvas with this one. I'm proud to say that if I want to change the size or adjust any aspect of the shape, I have arranged sizes of every aspect of the board as variables.
          If the value was used more than twice, it was made into a variable. Radii, gap spaces, and button dectection areas make immediate changes to the whole board when a single variable is changed.
        </p>
      </div>
      <div class="col-md-4">
        <h3>Space Fighter </h3>
        <a href="https://scratch.mit.edu/projects/20856724/">
            <img class='img-responsive' src='https://9abe206acd82139128e88ac72716ac40920c3a37.googledrive.com/host/0B7EyctU67zFNMjNVd2p5ZXg5X3c/0jh7AGj.png'></a>
        <p class="thumbText">
          My first programming creation that I could be proud of. Using Scratch along with my knowledge in kinematic physics, calculus, and trigonometry, I recreated the basic concept of a game I remember seeing once in my life. It was the first time I understood
          what acceleration was as opposed to velocity.
        </p>
      </div>
      <div class="col-md-4">
        <h3>Tic-Tac-Toe</h3>
        <a href="https://codepen.io/Philosophist/pen/ZQvJym">
            <img class='img-responsive' src='https://i.imgur.com/lLMDbf0.png'></a>
        <p class="thumbText">
          My first experience at building strategy algorithms for a game. It's a very basic example but it was quite challenging, especially when troubleshooting as the test play produced errors. Each new challenge like this one drives me forward.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <h3> Hackerrank</h3>
        <a href="https://www.hackerrank.com/Philosophist">
            <img class='img-responsive' src='https://9abe206acd82139128e88ac72716ac40920c3a37.googledrive.com/host/0B7EyctU67zFNMjNVd2p5ZXg5X3c/NPRMKTg.png'></a>
        <p class="thumbText">
          While working hard on the EdX course CS50, Harvard's intense Intro to Programming course, Hackerrank was used to test my abilities for potential apprenticeship positions. I failed the test, but came to love the challenges offered at Hackerrank. There
          I learned that algorithms are my favorite part of programming.
        </p>
      </div>
      <div class="col-md-4">
        <h3> Basic Calculator</h3>
        <a href="https://codepen.io/Philosophist/pen/KVzWXY">
            <img class='img-responsive' src='https://9abe206acd82139128e88ac72716ac40920c3a37.googledrive.com/host/0B7EyctU67zFNMjNVd2p5ZXg5X3c/CodePen%20%20%20Basic%20Calculator.png'>
            <p class="thumbText">
              Only a few bugs left to work out, but does the most common functions of a basic calculator without a problem. Not bad for a beginner huh?
            </p>
            </div>
          <div class="col-md-4">
            <h3>						Weather App</h3>
            <a href="https://codepen.io/Philosophist/pen/NxNOzq">
              <img class='img-responsive' src='https://9abe206acd82139128e88ac72716ac40920c3a37.googledrive.com/host/0B7EyctU67zFNMjNVd2p5ZXg5X3c/Weather%20App%20sunny.png'>
              <p class="thumbText">
                This project is set to check the weather in your local area and to give you a different background image based on the time of day and the weather description. Can also toggle the temperature in C or F.
              </p>
              </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <h3>						Twitch App</h3>
              <a href="https://codepen.io/Philosophist/pen/vLyLzK">
                <img class='img-responsive' src='https://9abe206acd82139128e88ac72716ac40920c3a37.googledrive.com/host/0B7EyctU67zFNMjNVd2p5ZXg5X3c/Twitch-tv.png'>
                <p class="thumbText">
                  Here I worked with Twitch.tv's api to create a list of users followed by myself and FCC and to show the current status of their activity online.
                </p>
                </div>
            </div>
            <hr>
          </div>
        </article>
          <div id="contact" class="container-fluid section">
            <h2 class="text-center">Contact Info</h2>
            <div class='row'>
              <div class='col-md-3'>
                <a href='https://twitter.com/youngidealist' target='_blank'>
                  <button class='btn'>Twitter</button>
                </a>
      </div>
      <div class='col-md-3'>
        <a href='https://www.linkedin.com/pub/steven-parker/14/134/53b' target='_blank'>
                  <button class='btn '>LinkedIn</button>
                </a>
      </div>
      <div class='col-md-3'>
        <a href='https://github.com/Philosophist' target='_blank'>
                  <button class='btn '>GitHub</button>
                </a>
      </div>
      <div class='col-md-3'>
        <a href='https://www.freecodecamp.com/philosophist' target='_blank'>
                  <button class='btn'>Free Code Camp</button>
                </a>
      </div>
    </div>
  </div>
</body>
            
          
!
            
              body {
  background: linear-gradient(
    5deg,
    hsl(180, 94%, 50%),
    hsl(216, 91%, 30%),
    hsl(240, 100%, 20%));
  background-repeat: repeat-y;
  padding-top: 15px;
  background-size: 100%;
}
h2 {
  font-family: Vollkorn;
  font-size: 2.5vw;
  color: hsl(180, 94%, 60%);
  text-shadow: 3px 2px hsl(180, 94%, 10%);
}
h3 {
  font-family: Alef;
  font-weight: font-size: 20px;
  color: #E6E6E6;
}
img {
max-width: 100%;
display: block;
height: auto;
}
.thumbText {
  font-family: Alef;
  font-size: 15px;
  color: #E6E6E6;
}
div.transbox p {
  font-family: Alef;
  font-size: 2.5vw;
  color: #001452;
  font-weight: bold;
}
hr {
  width: 90%;
  opacity: .5;
  background-color: #FFFFFF;
}
div.transbox {
  background-color: #B2B8CB;
  width: 90%;
}
.section {
  padding-top: 15vw;
}
#portrait {
  width: 45%;
}
#pitch {
  font-family: Alef;
  font-size: 6vw;
  color: #E6E6E6;
  text-shadow: 0.3vw 0.3vw #101012;
  color: white;
  margin-top: -2.5vw;
}
#homeImg {
  display: block;
  margin: auto;
  width: 100%;
}
.btn {
  border-radius: 15px;
  border: 4px solid black;
  font-family: Vollkorn;
  font-size: 20px;
  font-color: #00FF99;
  background-color: #002060;
}
.navbar-brand {
  font-size: 2vw;
}
#nav-menu {
  font-size: 2vw;
}
.navbar-toggler-icon{
  padding: 2.5vw !important;
}
.navbar-toggler {
  display: flex;
  justify-content: center;
  width:12vw;
  height: 8vw;
    
}
nav {
  height: 8vw;
}
#Steve {
  margin-top: -80vw;
}
.top-section {
  margin-top: -5vw;
}
            
          
!
            
              $(document).ready(function() {
  const c = document.getElementById("Steve");
  const ctx = c.getContext("2d");
  var vwUnit = 0;
  const color1 = "#000000";
  const color2 = "#FFFFFF";
  
  // variables for drawing
  const yTran=3;
  const xTran=9.5;
  const hiltL=5;
  const hiltThk=0.5; //the thickness of the hilt guard
  const hiltX=2;    //the x and y adjustments for the bend in the hilt guard
  const hiltY=2;
  const hiltAng=Math.atan(hiltY/hiltX);
  const philX=53;
  const philY=150;
  
  //A function to draw #Steve
  function drawSteve() {
    //console.log("drawSteve activated") //trblshtng
    //set unit size based on window width
    vwUnit = document.documentElement.clientWidth * 0.008;
    //set canvas size
    ctx.canvas.width = 120*vwUnit;
    ctx.canvas.height = 190*vwUnit;
    
    //"S" as in "Steve"
    ctx.beginPath();
    ctx.moveTo((26+xTran)*vwUnit,(115-yTran)*vwUnit);
    ctx.lineTo((16+xTran)*vwUnit,(105-yTran)*vwUnit);
    ctx.lineTo((6+xTran)*vwUnit,(115-yTran)*vwUnit);
    ctx.lineTo((19+xTran)*vwUnit,(125-yTran)*vwUnit);
    ctx.lineTo((9+xTran)*vwUnit,(140-yTran)*vwUnit);
    ctx.lineTo((23+xTran)*vwUnit,(125-yTran)*vwUnit);
    ctx.lineTo((9+xTran)*vwUnit,(115-yTran)*vwUnit);
    ctx.lineTo((16+xTran)*vwUnit,(109-yTran)*vwUnit);
    ctx.strokeStyle = color1;
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle = color2;
    ctx.fill();
    
    //"t" as in "teve"
    //hilt bulb
    ctx.beginPath();
    ctx.arc((37+xTran)*vwUnit,(109-yTran)*vwUnit, (1.4)*vwUnit, 0.33* Math.PI, -2.33* Math.PI, true);
    ctx.strokeStyle = color1;
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle = color2;
    ctx.fill();
    //hilt
    ctx.beginPath();
    ctx.moveTo((38+xTran)*vwUnit,(115-yTran)*vwUnit);
    ctx.lineTo((38+xTran)*vwUnit,(110-yTran)*vwUnit);
    ctx.lineTo((36+xTran)*vwUnit,(110-yTran)*vwUnit);
    ctx.lineTo((36+xTran)*vwUnit,(115-yTran)*vwUnit);
    ctx.lineTo((36-hiltL+xTran)*vwUnit,(115-yTran)*vwUnit);
    ctx.lineTo((36-hiltL-hiltX+xTran)*vwUnit,(115+hiltY-yTran)*vwUnit);
    ctx.lineTo((36-hiltL-hiltX+Math.sin(hiltAng)*hiltThk+xTran)*vwUnit,(115+hiltY+Math.cos(hiltAng)*hiltThk-yTran)*vwUnit);
    ctx.lineTo((36-hiltL+xTran)*vwUnit,(115+hiltThk-yTran)*vwUnit);
    ctx.lineTo((38+hiltL+xTran)*vwUnit,(115+hiltThk-yTran)*vwUnit);
    ctx.lineTo((38+hiltL+hiltX-hiltThk+xTran)*vwUnit,(115+hiltY+hiltThk-yTran)*vwUnit);
    ctx.lineTo((38+hiltL+hiltX+xTran)*vwUnit,(115+hiltY-yTran)*vwUnit);
    ctx.lineTo((38+hiltL+xTran)*vwUnit,(115-yTran)*vwUnit);
    ctx.strokeStyle = color1;
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle = color2;
    ctx.fill();
    //blade
    ctx.beginPath();  
    ctx.lineTo((36+xTran)*vwUnit,(115+hiltThk-yTran)*vwUnit);
    ctx.lineTo((33+xTran)*vwUnit,(140+hiltThk-yTran)*vwUnit);
    ctx.lineTo((37+xTran)*vwUnit,(147+hiltThk-yTran)*vwUnit);
    ctx.lineTo((41+xTran)*vwUnit,(140+hiltThk-yTran)*vwUnit);
    ctx.lineTo((38+xTran)*vwUnit,(115+hiltThk-yTran)*vwUnit);
    ctx.strokeStyle = color1;
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle = color2;
    ctx.fill();
    //blade midline
    ctx.beginPath();
    ctx.moveTo((37+xTran)*vwUnit,(115+hiltThk-yTran)*vwUnit);
    ctx.lineTo((37+xTran)*vwUnit,(147+hiltThk-yTran)*vwUnit);
    //hilt leather
    ctx.moveTo((36+xTran)*vwUnit,(115-yTran)*vwUnit);
    ctx.lineTo((38+xTran)*vwUnit,(115-yTran)*vwUnit);
    ctx.moveTo((36+xTran)*vwUnit,(114.7-yTran)*vwUnit);
    ctx.lineTo((38+xTran)*vwUnit,(113.7-yTran)*vwUnit);
    ctx.moveTo((36+xTran)*vwUnit,(113.7-yTran)*vwUnit);
    ctx.lineTo((38+xTran)*vwUnit,(112.7-yTran)*vwUnit);
    ctx.moveTo((36+xTran)*vwUnit,(112.7-yTran)*vwUnit);
    ctx.lineTo((38+xTran)*vwUnit,(111.7-yTran)*vwUnit);
    ctx.moveTo((36+xTran)*vwUnit,(111.7-yTran)*vwUnit);
    ctx.lineTo((38+xTran)*vwUnit,(110.7-yTran)*vwUnit);
    ctx.moveTo((36+xTran)*vwUnit,(110.7-yTran)*vwUnit);
    ctx.lineTo((38+xTran)*vwUnit,(109.9-yTran)*vwUnit);
    ctx.strokeStyle = color1;
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle = color2;
    ctx.fill();
    
    //"e" as in "eve"
    ctx.beginPath(); 
    ctx.moveTo((54+xTran)*vwUnit,(126-yTran)*vwUnit);
    ctx.lineTo((63+xTran)*vwUnit,(123-yTran)*vwUnit);
    ctx.lineTo((55+xTran)*vwUnit,(117-yTran)*vwUnit);
    ctx.lineTo((45+xTran)*vwUnit,(129-yTran)*vwUnit);
    ctx.lineTo((60+xTran)*vwUnit,(137-yTran)*vwUnit);
    ctx.lineTo((48+xTran)*vwUnit,(128-yTran)*vwUnit);
    ctx.lineTo((55+xTran)*vwUnit,(120-yTran)*vwUnit);
    ctx.lineTo((60+xTran)*vwUnit,(123-yTran)*vwUnit);
    ctx.strokeStyle = color1;
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle = color2;
    ctx.fill();
    
    //"v" as in "ve"
    ctx.beginPath();
    ctx.moveTo((62+xTran)*vwUnit,(117-yTran)*vwUnit);
    ctx.lineTo((75+xTran)*vwUnit,(137-yTran)*vwUnit);
    ctx.lineTo((82+xTran)*vwUnit,(119-yTran)*vwUnit);
    ctx.lineTo((77+xTran)*vwUnit,(121-yTran)*vwUnit);
    ctx.lineTo((74+xTran)*vwUnit,(133-yTran)*vwUnit);
    ctx.lineTo((69+xTran)*vwUnit,(120-yTran)*vwUnit);
    ctx.strokeStyle = color1;
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle = color2;
    ctx.fill();
    
    //"e" as in "eh"
    ctx.beginPath();
    ctx.moveTo((89+xTran)*vwUnit,(125-yTran)*vwUnit);
    ctx.lineTo((98+xTran)*vwUnit,(126-yTran)*vwUnit);
    ctx.lineTo((98+xTran)*vwUnit,(118-yTran)*vwUnit);
    ctx.lineTo((84+xTran)*vwUnit,(118-yTran)*vwUnit);
    ctx.lineTo((84+xTran)*vwUnit,(135-yTran)*vwUnit);
    ctx.lineTo((98+xTran)*vwUnit,(133-yTran)*vwUnit);
    ctx.lineTo((86+xTran)*vwUnit,(132-yTran)*vwUnit);
    ctx.lineTo((86+xTran)*vwUnit,(120-yTran)*vwUnit);
    ctx.lineTo((96+xTran)*vwUnit,(120-yTran)*vwUnit);
    ctx.lineTo((96+xTran)*vwUnit,(124-yTran)*vwUnit);
    ctx.strokeStyle = color1;
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle = color2;
    ctx.fill();
    
    //"The Philosophist", as in "The Philosophist"
    ctx.font = '800 10vw Lucida Sans Unicode';
    ctx.fillStyle = 'hsl(195, 100%, 65%)';
    ctx.textAlign = 'center';
    ctx.fillText('The Philosophist',(philX+xTran)*vwUnit,(philY+xTran)*vwUnit);
  }
  drawSteve();
  window.addEventListener('resize', drawSteve, false);
});
            
          
!
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.

Console