Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                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);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console