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.

            
              <nav id="navbar">
  <div id="nav-list">
    <a href="#welcome-section">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </div>
</nav>

<main class="container jumbotron">
  <section id="welcome-section" class="text-center">
    <h1 id="about">About</h1>
    <p>Programmer working towards a Bachelor of Science in Computer Science at the University of Arizona and a Front End Certification from Free Code Camp. I have interests in most feilds of programming and Computer Science but I am very interested in compilers, programming languages, and Linux. Currently seeking software engineering jobs.</p>
  </section>

  <section id="projects">
    <h1>Projects</h1>
    <p>Page includes many personal and school projects and has relavant tags to the languages, type of project, and other relavant info. <strong>School projects cannot be linked directly and must be requested over email to view.</strong></p>

    <article class="project-tile">
      <p><a href="https://codepen.io/MelBrooksKA/pen/XKjwRG" target="_blank">Mel Brooks Tribute Page</a> <small>#html #bootstrap</small><br> Tribute page for writer, director, producer, and actor Mel Brooks.</p>
      <img class="img-fluid" src="https://image.ibb.co/b2CNCG/MBTribute.gif" alt="Picture of Mel Brooks tribute page">
    </article>

    <article class="project-tile">
      <p><a href="https://codepen.io/MelBrooksKA/pen/LRWxKJ" target="_blank">Twitch User API App</a> <small>#javascript #jquery #bootstrap #twitch-api</small><br> Displays a selection of Twitch Streamers status and current/most recent stream.</p>
      <img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/688036.LRWxKJ.fc931c7c-eb78-4aa5-8ae3-1b7919c6176d.png">
    </article>

    <article class="project-tile">
      <p><a href="https://codepen.io/MelBrooksKA/pen/BLNQXx" target="_blank">SBFP Random Quote Machine</a> <small>#javascript #jquery #bootstrap</small><br> Displays a selection of quotes for the Super Best Friends Play YouTube Channel.</p>
    </article>

    <article class="project-tile">
      <p><a href="https://codepen.io/MelBrooksKA/pen/zKLRvL" target="_blank">Wikipedia Viewer</a> <small>#javascript #jquery #bootstrap #wikipedia-api</small><br> Allows user to search for a Wikipedia Page or view are random page using the Wikipedia API.</p>
      <img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/688036.zKLRvL.49578318-25a8-4af1-a971-8aaa811a5ef8.png">
    </article>

    <article class="project-tile">
      <p><a href="https://codepen.io/MelBrooksKA/pen/aBWXyB" target="_blank">Calculator</a> <small>#javascript #jquery #bootstrap</small><br> Calculator app that lets a user add, subtract, multiply, and divide input and string together operations.</p>
    </article>

    <article class="project-tile">
      <p><strong>Jukebox</strong> <small>#java #javafx #junit #team-project</small><br> <em>Available by request</em><br> Jukebox music player that lets a user login, select songs from a list if they have minutes on their account and the song has not been
        played more than 3 times in a day. Written with a partner.</p>
      <img class="img-fluid" src="https://image.ibb.co/gEtwpw/Jukebox.gif" alt="Jukebox program">
    </article>

    <article class="project-tile">
      <p><strong>Netpaint</strong> <small>#java #javafx #junit #networking</small><br> <em>Available by request</em><br> Paint Application that allows user to connect to a server and paint objects on a canvas.</p>
    </article>

    <article class="project-tile">
      <p><strong>Hunt the Wumpus</strong> <small>#java #javafx #junit #video-game</small><br> <em>Available by request</em><br> Remake of an old game "Hunt the Wumpus" where user navigates a generated map to avoid pits and kill the dangerous Wumpus.</p>
    </article>

    <article class="project-tile">
      <p><strong>Tic Tac Toe Patterns</strong> <small>#java #javafx #junit</small><br> <em>Available by request</em><br> Tic Tac Toe game where you can play against a computer player of varying difficulty.</p>
    </article>

    <article class="project-tile">
      <p><strong>Interactive Friend Finder</strong> <small>#prolog #team-project #console</small><br> <em>Available by request</em><br> Prolog program that generates a list of users and asks the current user about their interests, hobbies, favorite foods,
        etc. and shows the users that they match with in the database.</p>
    </article>

    <article class="project-tile">
      <p><strong>Turn It On</strong> <small>#haskell #team-project #html #console</small><br> <em>Available by request</em><br> Anti-plagerism program that takes text files and compares shingles of text and gives the similarity between them.</p>
      <img class="img-fluid" src="https://image.ibb.co/gb4QhG/TurnItOn.gif" alt="Turn it on anti-plagerism program">
    </article>

    <article class="project-tile">
      <p><a href="https://github.com/InsanityComplex/OnDeathAndDying" target="_blank">On Death and Dying</a> <small>#lua #love2d #video-game #team-project</small><br> Plateformer made at the Fall 2016 University of Arizona Game Jam.</p>
    </article>

    <article class="project-tile">
      <p><a href="https://github.com/DanielTweedy/razeys-bizarre-adventure" target="_blank">Razey's Bizzare Adventure</a> <small>#lua #love2d #video-game #team-project</small><br> Top down turn base strategy game where you control a traveling alchemist and
        his companions finding alchemical ingrediants throught the world.</p>
    </article>

    <article class="project-tile">
      <p><a href="https://github.com/DanielTweedy/Text-to-NATO-Phonetic-Alphabet" target="_blank">Text To NATO Phonetic Alphabet</a> <small>#c #make #console</small><br> Translator that takes input from user and converts it into NATO Phonetic Alphabet.</p>
    </article>

    <article class="project-tile">
      <p><a href="https://github.com/DanielTweedy/Bot_of_Dojima" target="_blank">Bot of Dojima</a> <small>#python #bot</small><br> A bot made for Redit /r/TwoBestFriendsPlay that replies as the character Kazuma Kiryu with a gif to certain phrases like "That's
        rad."</p>
    </article>

    <article class="project-tile">
      <p><strong>Adventure Game</strong> <small>#java #console #video-game #networking</small><br> <em>Available by request</em><br> Text adventure game that takes a world file and lets players connect to a server and explore the world.</p>
    </article>

    <article class="project-tile">
      <p><strong>Binary Search a Binary File</strong> <small>#java #console</small><br> <em>Available by request</em><br> Searches through an input binary file of the census of USA counties and a prefix and finds the counties and related statistics.</p>
    </article>

    <article class="project-tile">
      <p><strong>Single Cycle MIPS CPU Simulator</strong> <small>#c #mips #make #console</small><br> <em>Available by request</em><br> Simulator for a single cycle MIPS CPU that implements a subsection of the MIPS Language.</p>
    </article>

    <article class="project-tile">
      <p><strong>Pipelined MIPS CPU Simulator</strong> <small>#c #mips #make #console</small><br> <em>Available by request</em><br> Simulator for a Pipelined MIPS CPU that implements a subsection of the MIPS Language.</p>
    </article>

    <article class="project-tile">
      <p><strong>BST Constructor and Visualizer</strong> <small>#c #dot #make #console</small><br> <em>Available by request</em><br> Binary search tree construction language program that takes instructions for building a BST and can output a GraphViz Dot
        file for visualizing the tree structure.</p>
      <img class="img-fluid" src="https://image.ibb.co/j3sp9w/BSTVisualizer.gif" alt="Visualization of BST Program">
    </article>

    <article class="project-tile">
      <p><strong>Data Structure Comparison</strong> <small>#java #console</small><br> <em>Available by request</em><br> Performed various operations (insertion, deletion, searching) to unsorted arrays, sorted arrays, binary search trees, AVL trees, hash
        tables, and comparing the operation times on these data structures to each other and the Java Standard Library HashMap and TreeMap.</p>
    </article>

    <article class="project-tile">
      <p><strong>Graph Constructor and Visualizer</strong> <small>#java #dot #console</small><br> <em>Available by request</em><br> Graph construction language that takes instructions for building a graph and performing operations like finding if a node
        is reachable from another node, a Dijkstra Shortest Path, and printing the graph to a GraphViz Dot file for visualization.</p>
    </article>

    <article class="project-tile">
      <p><strong>DNA Comparison</strong> <small>#c #make #console</small><br> <em>Available by request</em><br> Takes in a suspect's DNA and another possible match as 1024 bit strings and compares them and tells if they match within a given threashold.</p>
    </article>

    <article class="project-tile">
      <p><strong>Steganographic Funky Town</strong> <small>#scheme #dr-racket</small><br> <em>Available by request</em><br> Inserts a message into the song Funky town which can be played with changes to the song and translated back to the message.</p>
    </article>

    <article class="project-tile">
      <p><strong>Eliza Bot</strong> <small>#scheme #dr-racket</small><br> <em>Available by request</em><br> Remake of the old Eliza natural language bot made in 1964 that a user can "talk" to.</p>
    </article>

    <article class="project-tile">
      <p><strong>Peano Numbers</strong> <small>#haskell #prolog #console</small><br> <em>Available by request</em><br> Representation of Peano Numbers and operations on those numbers in Haskell and Prolog.</p>
    </article>
  </section>

  <h1 id="contact">Contact</h1>
  <!--   <form action="mailto:tweedy@email.arizona.edu" method="post" enctype="text/plain">
    <div class="form-row">
      <div class="col">
        <label for="form-name">Name</label>
        <input type="text" class="form-control" id="form-name" name="name">
      </div>
      <div class="col">
        <label for="form-email">Email</label>
        <input type="text" class="form-control" id="form-email" name="mail">
      </div>
    </div>
    <div class="form-group">
      <label for="form-message">Message</label>
      <input type="text" class="form-control" id="form-message" name="comment"><br><br>
    </div>
    <div class="form-group">
      <input type="submit" class="btn btn-info" value="Send">
      <input type="reset" class="btn btn-warning" value="Reset">
    </div>
  </form> -->
  Email <a href="mailto:tweedy@email.arizona.edu">tweedy@email.arizona.edu</a>
</main>

<footer class="text-center">
  Background from <a href="https://www.toptal.com/designers/subtlepatterns/">https://www.toptal.com</a><br>
  <a id="profile-link" class="icon" href="https://github.com/DanielTweedy" target="_blank"><i class="fa fa-github">Github</i></a>
  <a class="icon" href="https://linkedin.com/in/daniel-t-tweedy/" target="_blank"><i class="fa fa-linkedin">LinkedIn</i></a>
  <a class="icon" href="https://www.freecodecamp.org/danieltweedy" target="_blank"><i class="fa fa-free-code-camp">Free Code Camp</i></a>
</footer>
            
          
!
            
              body {
  background: url(https://image.ibb.co/c4Vw3c/circles_dark.png) repeat 0 0;
}

#navbar {
  height: 60px;
  width: 100%;
  line-height: 60px;
  position: fixed;
  z-index: 1;
  top: 0;
/*   left: 0; */
  background-color: #e0e0ff;
  overflow-x: hidden;
}

#nav-list {
  float: right;
}

#navbar a {
  text-decoration: none;
  color: black;
  display: block-inline;
  text-align: center;
  padding: 10px;
}

#navbar a:hover {
  color: grey;
}

h1 {
  font-family: BioRhyme;
}

p {
  font-family: Cabin;
}

a.icon {
  text-decoration: none;
  color: black;
}

a.icon:hover {
  color: grey;
}

#welcome-section {
  height: 100vh;
}

@media (max-width: 574px) {
  .jumbotron {
    background-color: rgba(238, 238, 238, 0.85);
  }
}
            
          
!
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