-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdesign.html
199 lines (173 loc) · 8.39 KB
/
design.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
<!doctype html>
<html>
<head>
<title>Albert Feng</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/portfolio.css" />
<link rel="stylesheet" type="text/css" href="css/navigation.css" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/portfolio.js"></script>
<link rel="icon" type="image/png" href="images/personalLogo.png"/>
</head>
<body>
<div class="preload">
<img src="images/logoGif.gif" height="300px" width="300px">
</div>
<div class="allContent">
<div class="name">
<img id="personalLogo" src="images/personalLogo.svg"></img>
<p id="myName">Albert Feng</p>
</div>
<div class="siteContainer">
<a id="about" href="/">About</a>
<a id="portfolio" href="/design.html" class="activeLink">Design</a>
</div>
<div class="portfolioGrid">
<div id="farmkit" class="gridBox">
<img src="images/farmkitPhone.png" id="farmkitImage"></img>
<div class="opacityClass">
<p class="gridLabel">Farmkit</p>
</div>
</div>
<div id="upstart" class="gridBox">
<img src="images/upstartPhones.svg" id="upstartImage"></img>
<div class="opacityClass">
<p class="gridLabel">Upstart</p>
</div>
</div>
<div id="accord" class="gridBox">
<img src="images/accordPhone.png" id="accordImage"></img>
<div class="opacityClass">
<p class="gridLabel">Accord.io</p>
</div>
</div>
<div id="faired" class="gridBox">
<img src="images/fairedLogo.png" id="fairedImage"></img>
<div class="opacityClass">
<p class="gridLabel">FairEd</p>
</div>
</div>
<div id="liveset" class="gridBox">
<img src="images/livesetLogo.svg" id="livesetImage"></img>
<div class="opacityClass">
<p class="gridLabel">LiveSet</p>
</div>
</div>
<div id="motif" class="gridBox">
<img src="images/motifLogo.svg" id="motifImage"></img>
<div class="opacityClass">
<p class="gridLabel">Motif</p>
</div>
</div>
</div>
<div id="farmkitModal" class="modal">
<div class="modal-content">
<div class="infoContainer">
<img src="images/farmkitLogo.png" class="projectLogo"></img>
<p>As a part of a service-learning course at Stanford University, I worked with a
local non-profit educational farm, Pie Ranch, to assess and lay out a plan on how
they could take advantage of their diverse array of organic produce to create a new
organization that focuses on bringing a farm-to-table meal kit type delivery service.</p>
<a href="portfolioFiles/FarmKit.pdf" target="_blank">
<div class="viewSummaryButton">View Complete Project Summary</div>
</a>
<div class="close">Close</div>
</div>
</div>
</div>
<div id="upstartModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="infoContainer">
<img src="images/upstartLogo.png" class="projectLogo"></img>
<p>As a research assistant at Stanford University, I worked alongside Assistant
Professor of Computer Science, Dr. Michael Bernstein, and Ph.D Candidate Ali
Alkhatib on a project called Upstart. The goal of the project was to understand
the potential benefits of collective governance - the idea that a group of workers
would democratically decide how to govern themselves. This idea spawned from the
increasing popularity of gig economy companies such as Handy, Lyft and Uber and
the rise of controversial labor codes and unethical treatment of workers. Thus,
we asked ourselves, is there a better way to govern gig workers than the status quo? </p>
<a href="portfolioFiles/Upstart.pdf" target="_blank">
<div class="viewSummaryButton">View Complete Project Summary</div>
</a>
<div class="close">Close</div>
</div>
</div>
</div>
<div id="accordModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="infoContainer">
<img src="images/accordLogo.png" class="projectLogo"></img>
<p>As a part of Stanford University's CS 147: Introduction to Human-Computer
Interaction Design class, I worked with 3 other students to create a product
from ideation and needfinding to a high fidelity iOS prototype. In our studio's
theme of "crowd power", we tackled the problem of group dining decisions,
where people may have conflicting schedules, dietary restrictions and general
dining preferences. By using the power of the "crowd" and a simple 3 step decision
making process, groups can easily figure out the best place to eat and efficiently
plan their time spent together. At the end, we presented our project to a crowd of
VCs, industry professionals, faculty and students.</p>
<a href="portfolioFiles/Accord.pdf" target="_blank">
<div class="viewSummaryButton">View Complete Project Summary</div>
</a>
<div class="close">Close</div>
</div>
</div>
</div>
<div id="fairedModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="infoContainer">
<img src="images/fairedLongLogo.png" class="projectLogo"></img>
<p>FairED is a national 501(c)(3) nonprofit organization led by college undergraduates
that helps improve college access for low-income and otherwise deserving high school
students. Students are paired with "near-peer" college coaches, who guide them through a
10 lesson curriculum on college admissions. I co-founded FairED Inc. in June 2014 after
graduating HS as I noticed that there were so many opportunities given to me that
should be accessable to everyone.</p>
<a href="http://www.faired.org" target="_blank">
<div class="viewSummaryButton">View FairED's Website</div>
</a>
<div class="close">Close</div>
</div>
</div>
</div>
<div id="livesetModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="infoContainer">
<img src="images/livesetLogo.svg" class="projectLogo"></img>
<p>As a part of Stanford University's CS 247: Human-Computer Interaction Design
Studio class, I worked with 2 other students to create a product from ideation
and needfinding to a high fidelity mobile web app prototype. In our studio's
theme of "human being", we focused on how we can defy the stereotype that technology
takes away from our "human-ness" and actually enhances our human experience.
Specifically, we created a product that enhances people's experience of listening
to music - one of the most human experiences we regularly engage in - by adding in a
unique social twist. At the end, we presented our project to a crowd of VCs,
industry professionals, faculty and students.</p>
<a href="portfolioFiles/LiveSet.pdf" target="_blank">
<div class="viewSummaryButton">View Complete Project Summary</div>
</a>
<div class="close">Close</div>
</div>
</div>
</div>
<div id="motifModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="infoContainer">
<img src="images/motifLogo.svg" id="motifLogo"></img>
<p>Motif helps companies sit with their customers. This is the current project I am working on with other Stanford Students.</p>
<a href="http://www.usermotif.com" target="_blank">
<div class="viewSummaryButton">View Motif's Site</div>
</a>
<div class="close">Close</div>
</div>
</div>
</div>
</div>
</body>
</html>