Ragnarson15.github.io/index.html at master · Ragnarson15/Ragnarson15.github.io · 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Blog Post - Start Bootstrap Template</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/blog-post.css" rel="stylesheet">

  </head>

  <body>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">HCI Design Portfolio</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="manifesto.html">Design Manifesto</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Page Content -->
    <div class="container">

      <div class="row">

        <!-- Post Content Column -->
        <div class="col-lg-8">

          <!-- Title -->
          <h1 class="mt-4">My Portfolio</h1>

          <!-- Author -->
          <p class="lead">
            by
            <a href="#">Andrew Hand</a>
          </p>

          <hr>

          <!-- Date/Time -->
          <p>Posted on December 14, 2018 at 9:00 PM</p>


          <hr>

          <!-- Post Title -->
          <h2 class="mt-4">About Me</h2>

          <p>My name is Andrew Hand, and I'm a computer science undergraduate at Worcester Polytechnic Institute. My concentration within computer science is computer networks and network security. I also have experience in full stack software development, namely the application I developed for the National Parks Service to track visitors using GPS location based services.</p>

          <hr>

          <!-- Post Title -->
          <h2 class="mt-4">My Design Portfolio</h2>

          <!-- Post Content -->
          <p>Listed below is a summary of the design oriented projects I completed with a group of peers during my Human Computer Interactions (HCI) course. For more information on my design process used while completing the following projects check out the My Design Manifesto page linked on the toolbar. For more information on each project click the image following the description to see my blog post outlining my desing process.</p>

          <!-- Post Title -->
          <h3 class="mt-4">Design for Others</h3>

          <!-- Post Content -->
          <p>The goal of this assignment was to design a mobile website for target demographic. The following link will take you to my design reflection that explains how we redesigned the Technocopia website for middle school students by emphasizing the available services Technocopia offers appropriate for the targeted age group.</p>

          <!-- Post Image -->
          <a href="https://medium.com/@jzhang569/technocopia-mobile-redesign-for-teens-6dfc9b94c19c">
            <img class="img-fluid rounded" src="others.png" alt="">
          </a>

          <!-- Post Title -->
          <h3 class="mt-4">Design for Understanding</h3>

          <!-- Post Content -->
          <p>For this assignment, we develop a series of data visualizations to dynamically display the data collected on billionaires in 2014. The goal was to present correlations we observed in the data set in a simple and compelling manner that any individual could interpret and understand.</p>

          <!-- Post Image -->
          <a href="https://medium.com/@adhrsh122/design-for-understanding-2eca8a90703d">
            <img class="img-fluid rounded" src="understanding.png" alt="">
          </a>

          <!-- Post Title -->
          <h3 class="mt-4">Design for Tension</h3>

          <!-- Post Content -->
          <p>In order to bring a pressing issue of the Affordable Care Act to a individual, we created a simple chat bot that would prompt the user through conversation, regardless of their political stance, to better inform the user on this key political issue in the current judicial state of affairs.</p>

          <!-- Post Image -->
          <a href="https://medium.com/@adhrsh122/design-for-tension-576094428924">
            <img class="img-fluid rounded" src="tension.png" alt="">
          </a>

          <!-- Post Title -->
          <h3 class="mt-4">Design for Well-Being</h3>

          <!-- Post Content -->
          <p>Everyone should smile, so to promote the concept of well being we hosted a try not to laugh challenge were users would watch a funny youtube video and try not to laugh. To detect the if the user laughed we tracked there facial expression using a computer web camera.</p>

          <!-- Post Image -->
          <a href="https://medium.com/@adhrsh122/design-for-well-being-75aee101eb9e">
            <img class="img-fluid rounded" src="well_being.png" alt="">
          </a>

          <!-- Post Title -->
          <h3 class="mt-4">Design for Another World</h3>

          <!-- Post Content -->
          <p>Finally, we created a immersive scene in Virtual Reality that took the user to an ambient scene were they could relax, discover new sounds around them, and take a few photos while they're there.</p>

          <!-- Post Image -->
          <a href="https://medium.com/@adhrsh122/design-for-a-new-world-d8ffca0f996f">
            <img class="img-fluid rounded" src="another_world.png" alt="">
          </a>

          <hr>

          <blockquote class="blockquote">
            <p class="mb-0">"Have no fear of perfection — you’ll never reach it."</p>
            <footer class="blockquote-footer">
              <cite title="Source Title">Salvador Dali</cite>
            </footer>
          </blockquote>

          <p>A special thank you to all my peers who helped me design these projects along the way. I hope you learned as much as me.</p>

          <hr>
        </div>

        </div>

      </div>
      <!-- /.row -->

    </div>
    <!-- /.container -->

    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
      </div>
      <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  </body>

</html>