-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·416 lines (350 loc) · 23.8 KB
/
index.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
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A personal website showing Sam Wang's portfolio and skillset.">
<meta name="author" content="Sam Wang">
<title>Sam Wang - Designer/Developer/Photographer</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,900' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">SAM WANG</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#mySkills">My Skills</a>
</li>
<li>
<a class="page-scroll" href="#aboutMe">About Me</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Hi, I'm Sam!</div>
<div class="intro-heading">It's Great To Meet You!</div>
<a href="#portfolio" class="page-scroll btn btn-xl">Show Me More</a>
</div>
</div>
</header>
<!-- Portfolio Grid Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Portfolio</h2>
<h3 class="section-subheading text-muted">Apps and projects that I've worked on in the past.</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/easyroute.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>easyroute</h4>
<p class="text-muted">iOS/Mobile Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/itadakimasu.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>itadakimasu</h4>
<p class="text-muted">iOS/Mobile Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/candidacy.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>candidacy</h4>
<p class="text-muted">iOS/Mobile Design</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- My Skills Section -->
<section id="mySkills" class ="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">My Skills</h2>
<h3 class="section-subheading text-muted">What I bring to the table.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/design.png" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Design</h4>
</div>
<div class="timeline-body">
<p class="text-muted"> Design is something which is a passion for me. Besides using my design skills on a daily basis to help create usable pieces of software, I try to live and breath design. Good and bad design surrounds us on a daily basis, and it is crucial to identify new ways in crafting usable products. Through my experiences at UT Austin, Target and GE Digital, I've made Design an area which I truly focus upon.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/code.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Code</h4>
</div>
<div class="timeline-body">
<p class="text-muted">I'm a software engineer working in the bay area. Currently I'm at GE Digital working on cutting edge Industrial IoT applications. I'm well versed in front-end web development, iOS development, and design.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/photography.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Photography</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Photography is a huge part of my life. I have been taking photography seriously for over seven years now. I focus mainly on street photography as a means of showing how people live and interact in urban settings.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/food.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Food</h4>
</div>
<div class="timeline-body">
<p class="text-muted">On a less serious note, I'm a huge food enthusiast (Foodie if you prefer). I love everything about food ranging from the process of how something is cooked to how it tastes. I love all kinds of food ranging from nigiri sushi to good Texas bbq. One thing's for sure, if I'm not working on something, you'll be able to find me in the kitchen or at a restaurant eating away!</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- About Me Section -->
<section id="aboutMe" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About Me</h2>
<h3 class="section-subheading text-muted">Some information about who I am and what I enjoy in life.</h3>
</div>
</div>
<div class="row">
<div class="samsInfo">
<img src="img/team/samwang.jpg" class="img-responsive img-circle" alt="">
<h4>Sam Wang</h4>
<p class="text-muted">Developer/Designer/Photographer</p>
<ul class="list-inline social-buttons">
<li><a href="https://www.linkedin.com/in/sam-wang-a6793461"target="_blank"><i class="fa fa-linkedin-square"></i></a>
</li>
<li><a href="http://github.com/samguwang"target="_blank"><i class="fa fa-github"></i></a>
</li>
<li><a href="http://flickr.com/samguwang"target="_blank"><i class="fa fa-flickr"></i></a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<p class="large text-muted">My name is Sam Wang. I was born in Houston and raised in many cities from Xiamen in China to Calgary in Canada. I'm a software engineer working in the bay area at GE Digital. On any given day if I'm not studying or coding you'll find me photographing the streets of SF while looking for the best food spots around town.</p>
<div class = "contactInfo">
<a href="SamWangResume.pdf" class="page-scroll btn btn-resume">CHECK OUT MY RESUME</a>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>easyroute</h2>
<p class="item-intro text-muted">A proof of concept iOS application for in-store optimal path finding.</p>
<h3> The Process</h3>
<!-- launch view description -->
<img class="img-responsive" src="img/portfolio/easyrouteWireFrame.jpg" alt="">
<p>During my time as an intern at Target, I was assigned on the Stores POC (Proof of Concept) team as a software engineering intern. The project I worked on related to optimal path finding within the stores using new indoor positioning technology. The idea is that Target team members constantly navigate the large stores throughout the day. To look into how they can save time, this app was created to help team members navigate the stores more effeciently. I designed and developed this iOS application using <strong>Swift, XCode, Cocoapods, Github, Adobe Photoshop, Adobe Illustrator, and multiple SDKS/APIS.</strong> While concurrently developing the code for the project, I approached the design of the app through user research, wireframing and rapid prototyping through XCode. The application was only to be used by internal team members and was limited to certain stores. I tried to create restraints in options and the usage of signifiers to guide the team members through the application. Ultimately the image above shows the first wireframe I created with the features I've decided to implement. Since I was the sole developer and designer, I didn't feel the need to use anything such as sketch or invision to prototype or wireframe. I was abel to so in XCode and pen and paper.</p>
<!-- initial view description -->
<img class="img-responsive" src="img/portfolio/finalWireFrameEasyRoute.jpg" alt="">
<p> In terms of UI decisions, I decided to keep in line with Target's branding even though the app was a proof of concept project. As I progressed in software development, I made minor changes in my wireframe to accomdate new features. Additionally as development progressed, I did continously took into account my co-worker's opions on the interface and aesthetics of the application.
</p>
<p>Ultimately, the project allowed me to use both my design and development skills concurrently. My process can be simplified to user research, wireframing, mockups and graphic creation through the adobe suite, rapid prototyping concurrent with code development, and iteration. Below you can find the last iteration of my applicaiton before my internship at Target ended.
</p>
<h3> The Design</h3>
<img class="img-responsive" src="img/portfolio/easyroutelaunch.png" alt="">
<img class="img-responsive" src="img/portfolio/welcomeeasyroute.png" alt="">
<img class="img-responsive" src="img/portfolio/easyroutemap.png" alt="">
<img class="img-responsive" src="img/portfolio/easyrouteproduct.png" alt="">
<img class="img-responsive" src="img/portfolio/easyrouteweb.png" alt="">
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>itadakimasu</h2>
<p class="item-intro text-muted">A simple iOS applicaiton dedicated to helping people decide where to eat.</p>
<h3> The Process</h3>
<img class="img-responsive img-centered" src="img/portfolio/itadakimasuWire.jpg" alt="">
<p>Itadakimasu is an iOS application I developed and designed to help people decide where to eat. Many business or food apps provide a plethora of information makign it hard to decide where to eat. Itadakimasu uses Yelp's API to help make that decision easier. Users are prompted with an initial view and a button. Upon pressing the button, a search occurs providing one business for the user to decide on.</p>
<p>After pressing the itadakimasu search button, a random business near the user is displayed. A map provides both the user and business locations on apple maps. There is the option of viewing the business on Yelp if more information is desired. If the business is not desireable, the user can search again by pressing the bottom right hand button. This app was developed using <strong>Swift, XCode, Cocoapods, AFNetworking 2.0, Git, Adobe Photoshop, and Adobe Illustrator.</strong> </p>
<p>I designed itadakimasu through a multistep process combining design and software development. The interface of the application was one of the main reasons for this app's existance. User research was done to find how to convey information in a way that constrains users to decide on where to eat. From the research I gathered on the type of user, the necessary information to display and so on, I drew a quick wireframe showing in general how I wanted the app to look. The icons and graphics were created in Adobe Illustrator where prototyping was done through XCode simultaneously with development. Below are images showing how the app looks as of now. There are more iterations I plan on creating after conducting user tests on the application. </p>
<h3> The Design</h3>
<img class="img-responsive img-centered" src="img/portfolio/itadakimasuinitialview.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/itadakimasuinfo.png" alt="">
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Candidacy</h2>
<p class="item-intro text-muted">An iOS application created to helping people find out more information on the 2016 Presidential election.</p>
<h3>The Process</h3>
<img class="img-responsive img-centered" src="img/portfolio/candidacyWire.jpg" alt="">
<p>Candidacy is an iOS application that looks to help people find out more information on the 2016 Presidential election. To do so, the application provides news through The New York Times, provides basic Candidate information, provides GoVote information, and lastly provides a new method of polling. Candidacy was developed by a team of three (Kevin Avila, Carlos Andres Rodriguez) including myself. I designed the app alongside contributing the the software development of the app. This app was developed using <strong>Swift, XCode, Cocoapods, Parse, Git, Adobe Photoshop, and Adobe Illustrator.</strong></p>
<img class="img-responsive img-centered" src="img/portfolio/candidacymockup_1.jpg" alt="">
<p>Our development process began through the design of an app icon alongside a wireframe mockup of the application interface. After brainstorming ideas as a group, I came of up with the initial (fast sketch during brainstorming) wireframe shown above. We took inspiration from snapchat and facebook for certain design elements. The second image shown here is another mockup wireframe a team member created based off of my original. As our team of three wrote code, I continously tried to improve and iterate our design. Below you can see how our most recent version of the application looks.</p>
<h3> The Design </h3>
<img class="img-responsive img-centered" src="img/portfolio/launchscreen.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/newsfeed.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/hamburgermenu.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/candidates.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/polling.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/votinginfo.png" alt="">
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
</body>
</html>