Portfolio/project2.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
49
50
51
52
<!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">CelebriDeath</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 summaryText">
          <h2 class="subHeading2">Summary</h2>
          <p>This was a project for a class at Code Fellows that I worked on with a team of 3 JS developers. We had 4 days to build a functional site. The concept of this site is a database holding information on celebrities that have passed on, which would be a short bio, cause of death, and a map of their memorial location if available. I developed the UI for the site which included all of the stucture in the views, the CSS and design work.</p>
        </div>
        <section class=" exampleBox">
          <img class="grid_4 center" src="img/death/phonemodel.png">
        </section>
      </section>
      <section class=" process">
      <h2 class="subHeading2">Process</h2>
      <p>I started by sketching out a few layout designs and color patterns for the site, as well as typography examples. After that I made some static HTML prorotype pages for proof of concept. The next step was to start coding some base modules using classes in CSS that could be added into the elements when my team was coding the angular views. By creating modules that were reusable, it made the layout fall into place for each view that needed to be created. This meant the after the views were all built, I had a minimal amount of clean up to do with the structure, and the code would be more maintainable for future changes.</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="columnContainer">
        <div class="columnHalf grid_12">
          <img class="desktop" src="img/Celebrideath.jpg">
        </div>
        <div class="columnHalf">
          <img class="desktop" src="img/death/profile.jpg">
        </div>
      </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>
            <li><img src="img/logos/nodejs.png"></li>
        </ul>
      </section>
    </main>
    <footer>
      <p>&copy; 2015 Bennett Spears</p>
    </footer>
    <script type="text/javascript" src="scripts/script.js"></script>
  </body>
</html>