Portfolio/project5.html at master · bspears/Portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
  <head>
    <title>Ben Spears</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  </head>
  <body class="grid_12">
    <header class="grid_12 projectHeader">
      <h1 class="subHeading darkGray">Sort Algorithm</h1>
      <div class="projectTitle">
      </div>
      <a href="index.html"><h1 class="subHeading projectTitleText">Bennett Spears</h1></a>
    </header>
    <main class="contentBox">
      <section class=" summary">
        <div class="contentBox grid_6 summaryText">
          <h2 class="subHeading2">Summary</h2>
          <p>This was a small project I did for a class at Code Fellows. The goal was to create a small demo that would illustrate how a sort function in JavaScript works.</p>
        </div>
        <section class=" exampleBox grid_6">
          <img class="desktop" src="img/sort.jpg">
        </section>
      </section>
      <section class="process">
      <h2 class="subHeading2">Process</h2>
      <p>I chose the "insert" sort method, and began the process by building a very simple HTML outline with no styles. I created the feature to add numbers to an array by pressing a button. Once I had the array that could be sorted, I created the function to sort them using an insert sort method. The array is then animated to show the sort in progress. After the functionality was complete, I styled the page with a quick flat design that is also responsive.</p>
      <a class="center" href="https://github.com/bspears/SassPants"><img class="grid_1 center" src="img/github.svg">View on GitHub</a>
      </section>
      <section class=" exampleBox center">
        <img class="grid_2 center" src="img/sort/sortmobile.png">
      </section>
      <section class=" summary">
        <h2 class="subHeading2">Technologies Used</h2>
        <ul class="logoList">
            <li><img src="img/logos/html5-css.png"></li>
            <li><img src="img/logos/jquery.png"></li>
        </ul>
      </section>
      <section class=" exampleBox">
      </section>
    </main>
    <footer>
      <p>&copy; 2015 Bennett Spears</p>
    </footer>
    <script type="text/javascript" src="scripts/script.js"></script>
  </body>
</html>