-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
161 lines (151 loc) · 6.2 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
<!-- <html>
<head>
<title>Portfolio - Rose Xu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/portfolio.js"></script>
<script type="text/javascript" src="js/analytics.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default my-navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="rose_xu.pdf">Resume</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div><!-- /.navbar-collapse
</div><!-- /.container-fluid
</nav>
<h1 class="my page-header">Projects</h1>
<div class="row">
<div class="project
col-xs-10 col-xs-offset-1
col-sm-10
col-md-7 col-md-offset-4
col-lg-6 col-lg-offset-5">
<div class="picture-view pull-left">
<img class="picture" src="images/slanglang.png" alt="SlangLang Chrome Extension">
</div>
<div class="text-view hid-xs">
<h3>SlangLang</h3>
<p>SlangLang is a Chrome extension that allows easy lookups for the definitions of words (proper English and slang) right in your browser in the form of a tooltip beside any word you highlight. It utilizes the Urban Dictionary API for slang lookup when it can't find a standard definition. </p>
</div>
</div>
</div>
<div class="row">
<div class="project
col-xs-10 col-xs-offset-1
col-sm-10
col-md-7
col-lg-6">
<div class="picture-view pull-left resistance">
<img class="picture" src="images/the-resistance.png" alt="The Resistance">
</div>
<div class="text-view hid-xs">
<h3>The Resistance</h3>
<p>The Resistance is a real-time mobile multiplayer web-based game that I am currently working on that allows users to play the board game "The Resistance" without the physical board game. I am builing the REST API in Scala using the Play! framework with WebSocket to support real-time updates, AngularJS for front-end, and MongoDB for data storage.</p>
</div>
</div>
</div>
<div class="row">
<div class="project
col-xs-10 col-xs-offset-1
col-sm-10
col-md-7 col-md-offset-4
col-lg-6 col-lg-offset-5">
<div class="picture-view pull-left">
<img class="picture" src="images/twrly.png" alt="Twrly">
</div>
<div class="text-view hid-xs">
<h3>Twrly (BattleHack Project)</h3>
<p>Twrly is a gesture recognition controller for the Pebble Time smartwatch. Make phone calls, control your music player, and trigger IFTTT(If This Then That) actions, all using simple arm gestures! Personally built python backend that created custom RSS feeds for each user to integrate with IFTTT and deployed it with Heroku.</p>
</div>
</div>
</div>
<div class="row">
<div class="project
col-xs-10 col-xs-offset-1
col-sm-10
col-md-7
col-lg-6">
<div class="picture-view pull-left">
<img class="picture" src="images/historicalnews.png" alt="Historical News">
</div>
<div class="text-view hid-xs">
<h3>Historical News</h3>
<p>Historical News is a dynamic website built with AngularJS and Bootstrap that shows the news articles exactly 10 years ago today by extracting the current system time and calculating the date 10 years ago. The content changes everyday and comes from the New York Times Article Search API. </p>
</div>
</div>
</div>
<div class="row">
<div class="project
col-xs-10 col-xs-offset-1
col-sm-10
col-md-7 col-md-offset-4
col-lg-6 col-lg-offset-5">
<div class="picture-view pull-left">
<img class="picture" src="images/aed.png" alt="AED Finder Android App">
</div>
<div class="text-view hid-xs">
<h3>AED Finder</h3>
<p>AED Finder is an Android app that aims to direct its user to the closest AED. It geolocates on the user's location and shows the user the AEDs closest to her location on Google Map along with a description. It also allows the user to add AED location for others to access. I utilized Firebase to store and access the data in real time. </p>
</div>
</div>
</div>
<div class="row">
<div class="project
col-xs-10 col-xs-offset-1
col-sm-10
col-md-7
col-lg-6">
<div class="picture-view pull-left">
<img class="picture" src="images/websight.jpg" alt="Web Sight Glove">
</div>
<div class="text-view hid-xs">
<h3>Web Sight (MHacks Project)</h3>
<p>An app designed to help the blind browse the web by tracking finger movements using a Leap Motion and displaying them as five cursors on websites. Depending on which type of HTML elements each cursor hovers on, it sends different tactile to each finger through a special glove. Built with Javascript and jQuery. </p>
</div>
</div>
</div>
<div class="row">
<div class="project
col-xs-10 col-xs-offset-1
col-sm-10
col-md-7 col-md-offset-4
col-lg-6 col-lg-offset-5">
<div class="picture-view pull-left">
<img class="picture" src="images/universitymatch.png" alt="University Match">
</div>
<div class="text-view hid-xs">
<h3>University Match</h3>
<p>University Match is an interactive program that takes user inputs and Maclean's University Report to create a tailored list of universities that best suits the student user. It involves File I/O, parsing data, and sorting. It is built with Java using OOP principles. </p>
</div>
</div>
</div>
</body>
</html> -->