-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
303 lines (255 loc) · 16.1 KB
/
portfolio.html
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!doctype html>
<!-- credit to header to hellosunschein.com by Lea Sonnenschein -->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="images/dinosaur.png" type="image/x-icon">
<link rel="icon" href="images/dinosaur.png" type="image/x-icon">
<title>Sarah Trop</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,100italic,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" />
<link href=' http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43332662-1', 'auto');
ga('send', 'pageview');
$(document).ready(function(){
$('.variable-width').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
</script>
</head>
<body>
<!-- NAVIGATION -->
<div class="row">
<div class="wideContentBox">
<div class="large-3 columns">
<ul class="menu nav">
<li><a href="projects.html">PROJECTS</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
</ul>
</div>
<div class="large-6 columns"></div>
<div class="large-3 columns">
<ul class="menu align-right nav">
<li><a href="https://drive.google.com/open?id=0B0f9iA73a_ivbWE3NEhkbGZBeWM" target="_blank">RESUME</a></li>
<li><a href="mailto:[email protected]">CONTACT</a></li>
</ul>
</div>
</div>
</div>
<!-- TRISARAHTROPS LOGO AND LINKS -->
<div class="row">
<div class="wideContentBox">
<div class="large-12 columns">
<center>
<a href="http://sarahtrop.dance"><img class="logo" src="images/dinosaur.png"/></a>
<div class="social socialHeader">
<a href="mailto:[email protected]?Subject=Hello!" target="_top"><i class="fi-mail"> </i></a>
<a href="https://github.com/sarahtrop" target="_blank"><i class="fi-social-github"> </i></a>
<a href="http://www.linkedin.com/pub/sarah-trop/85/b1b/252/en" target="_blank"><i class="fi-social-linkedin"> </i></a>
<a href="https://twitter.com/sarahctrop" target="_blank"><i class="fi-social-twitter"> </i></a>
<a href="https://medium.com/@trisarahtrops" target="_blank"><i class="fi-social-medium"> </i></a>
<a href="https://open.spotify.com/user/1221135775" target="_blank"><i class="fi-social-spotify"> </i></a>
</div>
</center>
</br>
</div>
</div>
</div>
<!-- PORTFOLIO HEADER -->
<div class="row head">
<div class="large-10 large-centered columns">
<div class="row about heading">
<p>Take a look at my work in <a href="#app jump">app design</a>, <a href="#logo jump">logos</a>, <a href="#web jump">website design</a>, <a href="#ux jump">ux</a>,and <a href="#paint jump">painting</a>.
</br>I build all my own icons and logos, I create everything I use in <a href="https://www.sketchapp.com/">Sketch</a>. </p>
</div>
</div>
</div>
<!-- ANIMATED VIDEO ART -->
<div class="row head">
<a name="logo jump"><div class="headertitle">"more hands"</div></a>
</div>
</br>
<div class="large-10 large-centered columns">
<div class="row" style="center">
<span class="information about">
<center>
<iframe width="854" height="480" src="https://www.youtube.com/embed/hTi8-NURnIs" frameborder="0" allowfullscreen></iframe>
</center>
</div>
</div>
</br>
<!-- LOGO DESIGN -->
<div class="row head">
<a name="logo jump"><div class="headertitle">logo design</div></a>
</div>
</br>
<div class="large-10 large-centered columns">
<div class="row" style="center">
<span class="information about">
<div class="variable-width">
<div><img class="appLogo" src="images/portfolio/gliciousLogo.png"></div>
<div><img class="appLogo" src="images/portfolio/2017 sticker2.png"></div>
<div><img class="appLogo" src="images/portfolio/dino logo.png"></div>
<div><img class="appLogo" src="images/portfolio/2017 sticker1.png"></div>
<div><img class="appLogo" src="images/portfolio/color logo.jpg"></div>
<div><img class="appLogo" src="images/portfolio/contra_square.png"></div>
<div><img class="appLogo" src="images/portfolio/myface.jpg"></div>
<div><img class="appLogo" src="images/portfolio/blue.jpg"></div>
</div>
</div>
</div>
</br>
<!-- WEB DESIGN -->
<div class="row head">
<a name="web jump"><div class="headertitle">web design</div></a>
</div>
</br>
<div class="large-10 large-centered columns">
<div class="row" style="center">
<span class="information about">
<div class="webScreens">
<span class="projectTitle"><b><em>AppDev Members Page</b></em></span>
<a href="https://appdev.grinnell.edu/members.php" target="_blank"><i class="fi-home"></i></a>
<a href="https://github.com/GrinnellAppDev/Website" target="_blank"><i class="fi-social-github"> </i></a>
<p>When I joined Grinnell AppDev as a designer, my first project was to redesign the AppDev website members page. The first design (hexagons) was finished in December 2014, and the second iteration (tree) was finished in January of 2015 and was the first design I helped implement on the site using HTML and CSS. Now I am the webmaster of the site, and have implemented our newest members page design, finished in May 2015, and now oversee all website operations. We discovered that this design did not provide space for the information we wanted to have for each member on the page, so the tree design came out of wanting a design that gave us that ability. However in the spring of 2015 we had a large influx of trainees, so the tree design was scrapped for the current design of the page, designed by another member of our team, to consolidate space on the site with our large number of members.</p>
<center>
<!-- <a href="images/portfolio/HD first draft.png" target="_blank"><img src="images/portfolio/HD first draft.png"></a> -->
<a href="images/portfolio/draft scroll over.png" target="_blank"><img src="images/portfolio/draft scroll over.png"></a>
<a href="images/portfolio/tree draft.png" target="_blank"><img src="images/portfolio/tree draft.png"></a>
</center>
</div>
</span>
</div>
<div class="row" style="center">
<span class="information about">
<div class="resourcesWebScreens">
<span class="projectTitle"><b><em>Student Resources</b></em></span>
<a href="https://github.com/GrinnellAppDev/student-resources-site" target="_blank"><i class="fi-social-github"> </i></a>
<p>I was asked by the Asssitive Technologies group at Grinnell to design a website for their comprehensive list of student resources. They gave me a list of resources and their instructions for students when identifying how to help their fellow students or themselves. This webiste was built using a dyslexic friendly font, Dyslexie, and with alternative text for images to ensure that it is accessible to all students on campus. It is organized to help students navigate to the correct resources to help themselves or others around them.</p>
<center>
<a href="images/web/student site image.jpg" target="_blank"><img src="images/web/student site image.png"></a>
</center>
</div>
</span>
</div>
</div>
</br>
</br>
<!-- UX -->
<div class="row head">
<a name="ux jump"><div class="headertitle">user experience (ux)</div></a>
</div>
</br>
<div class="large-10 large-centered columns">
<div class="row" style="center">
<span class="information about">
<p>The following exercises were a part of the course CSC 232 Human-Computer Interaction at Grinnell College in the spring semester of the 2014-2015 school year.</p></br>
<span class="projectTitle"><b><em>Observing Users and Tasks</em></b></span>
<p>This assignment focused on the methodology of contexual inquity. My classmates Caleb Sponheim and Alex Mitchell were my partners on this project, in which we performed task analysis on a specific task of our choosing. The purpose of the assignment was to practice our observation and experiement with task representation. Here is our <a href="https://drive.google.com/file/d/0B0f9iA73a_ivdWFLYlc3enhuYTg/view?usp=sharing">report</a>.</p></br>
<span class="projectTitle"><b><em>Prototyping</em></b></span>
<p>When prototyping in our couse, Caleb, Alex and I workd together again to create a mock protoype for a real-world project Alex would be working on in the future for the Grinnell College Administration. The prototype was supposed to support three tasks, outlined in our report, on either a web or mobile application. Here is our full <a href="https://invis.io/XK4ZK1TGH">prototype</a> and <a href="https://drive.google.com/file/d/0B0f9iA73a_ivN1FDMFNaTXpiTjg/view?usp=sharing">report</a>.</p></br>
<span class="projectTitle"><b><em>Heuristic Evaluation</em></b></span>
<p>For this assignment, my team of students consisted of Caleb Sponheim, Alex Mitchell, Lea Sonnenschein, and Hannah Cohn. We chose to evalute <a href="invision.com">InVision</a>, the prototyping tool we were all familiar with both through our work in Grinnell AppDev and in the previous assignment, using Myers' and John's <a href="https://drive.google.com/file/d/0B0f9iA73a_ivNk54MGwxWktWYmM/view?usp=sharing">Usability Aspect Report Template</a>. You can read our full report <a href="https://drive.google.com/file/d/0B0f9iA73a_ivTlhKalFZaXhHcHc/view?usp=sharing">here</a>.</p>
</span>
</div>
</div>
</br>
<!-- APP DESIGN -->
<div class="row head">
<a name="app jump"><div class="headertitle">app design</div></a>
</div>
</br>
<div class="large-10 large-centered columns">
<div class="row" style="center">
<span class="information about">
<div class="large-6 columns appScreens">
<p>These prototypes were created using InVision, an online prototyping tool. The designs are fully prototyped, and are navigable here.</p>
<span class="projectTitle"><b><em>G-licious</em></b></span>
<a href=" http://github.com/GrinnellAppDev/Grinnell-Menu-Server/" target="_blank"><i class="fi-social-apple"> </i></a>
<a href="http://github.com/GrinnellAppDev/Grinnell-Menu" target="_blank"><i class="fi-social-android"> </i></a>
<p>G-licious is the menu app developed by Grinnell AppDev for the Grinnell College community. This is the second design of the app, which I completed during the Spring semester of 2015. The redesign of this app happened during the redesign of all of the apps developed by AppDev, as the design team wanted to move towards a universal design model and a cleaner design aesthetic. The interior of the app is very similar to the first design, but cleaner and updated to match AppDev's new look. The Splash page represents not only this new aesthetic, but also the new G-licious logo which I created for this new design.</p>
</br>
<iframe width="438" height="930" src="https://invis.io/M52VL35HJ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="large-6 columns appScreens">
<iframe width="438" height="930" src="http://invis.io/R5AIV5UW6" frameborder="0" allowfullscreen></iframe>
</br>
<span class="projectTitle"><b><em>SPARC - Publications</em></b></span>
<a href="https://github.com/GrinnellAppDev/Publications-iOS" target="_blank"><i class="fi-social-apple"> </i></a>
<a href="https://github.com/GrinnellAppDev/Publications-Android" target="_blank"><i class="fi-social-android"> </i></a>
<p>SPARC is the Student Publications and Radio Committee at Grinnell College, and this app is currently in the works for an all-encompassing publications app for campus. In this first stage, SPARC publications (like our school newspaper, our parody newspaper, the underground magazine, and the radio station) will have their articles displayed on the app, and students can subscribe or unsubscribe as they please to see all the articles from their favorite publications in one place. This prototype is a future version of the Publications application, this app is a work in progress so the app is still in the MVP stage but this is what the future of the app will look like.</p>
</div>
</span>
</div>
</div>
</br>
<!--
<div class="row head">
<a name="paint jump"><div class="headertitle">painting</div></a>
</div>
</br>
<div class="row head">
<div class="large-10 large-centered columns about">
<center>
<p>I began painting my freshman year of high school, and have continued to paint on my own since. Here are some of my recent paintings, all done in acrylic on canvas. Most of these are about two or three feet wide in the largest direction, as I prefer to work on big canvases.</p>
</center>
</div>
</div>
</br>
<div class="large-10 large-centered columns">
<div class="row" style="center">
<span class="information about">
<div class="variable-width">
<div><img src="images/peacock.jpg"></div>
<div><img src="images/bluebfly.jpg"></div>
<div><img src="images/smallturtle.jpg"></div>
<div><img src="images/sunflower.jpg"></div>
<div><img src="images/rowing.JPG"></div>
<div><img src="images/fire.jpg"></div>
<div><img src="images/hawaii.jpg"></div>
<div><img src="images/lotl.jpg"></div>
<div><img src="images/orangebfly.jpg"></div>
</div>
</span>
</div>
</br><br>
</div>
-->
<!-- FOOTER -->
<div class="row">
<div class="large-5 large-centered columns">
<div class="social">
<a href="mailto:[email protected]?Subject=Hello!" target="_top"><i class="fi-mail"> </i></a>
<a href="https://github.com/sarahtrop" target="_blank"><i class="fi-social-github"> </i></a>
<a href="http://www.linkedin.com/pub/sarah-trop/85/b1b/252/en" target="_blank"><i class="fi-social-linkedin"> </i></a>
<a href="https://twitter.com/sarahctrop" target="_blank"><i class="fi-social-twitter"> </i></a>
<a href="https://medium.com/@trisarahtrops" target="_blank"><i class="fi-social-medium"> </i></a>
<a href="https://open.spotify.com/user/1221135775" target="_blank"><i class="fi-social-spotify"> </i></a>
</div>
</div>
</br>
</br>
</body>
</html>