-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
354 lines (320 loc) · 18.9 KB
/
index.html
File metadata and controls
354 lines (320 loc) · 18.9 KB
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
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Viviano Cantu</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta runat="server" name="theme-color" content="#00796B">
</head>
<body>
<div id="page">
<div id="toolbar" data-0="height:192px" data-128="height: 64px">
<div id="actions">
<!-- <div class="icon">
<svg viewBox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="menu">
<path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path>
</g>
</svg>
</div> -->
<div class="spacer"></div>
<!-- github -->
<div class="icon" onclick="window.open('https://github.com/vcantu', '_blank');">
<svg style="width:24px;height:24px" viewBox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
</svg>
</div>
<!-- linked in -->
<div class="icon" onclick="window.open('https://www.linkedin.com/in/viviano-cantu-jr-00113a113', '_blank');">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M19,19H16V13.7A1.5,1.5 0 0,0 14.5,12.2A1.5,1.5 0 0,0 13,13.7V19H10V10H13V11.2C13.5,10.36 14.59,9.8 15.5,9.8A3.5,3.5 0 0,1 19,13.3M6.5,8.31C5.5,8.31 4.69,7.5 4.69,6.5A1.81,1.81 0 0,1 6.5,4.69C7.5,4.69 8.31,5.5 8.31,6.5A1.81,1.81 0 0,1 6.5,8.31M8,19H5V10H8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" />
</svg>
</div>
<!-- google plus -->
<div class="icon" onclick="window.open('https://plus.google.com/117697438730624902226', '_blank');">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
</svg>
</div>
<!-- mail -->
<div class="icon" onclick="window.open('mailto:cantu.v@husky.neu.edu', '_blank');">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" />
</svg>
</div>
<!-- mail -->
<div class="icon" onclick="window.open('CV.pdf', '_blank');">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#FFF" d="M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" />
</svg>
</div>
</div>
<div id="title" data-0="font-size: 48px; padding: 0 0 24px 12px;" data-128="font-size: 18px; padding: 0 0 21px 60px;">
Viviano Cantu
</div>
</div>
<div id="skrollr-body">
<div id="content" data-0="padding-top: 192px;" data-192="padding-top: 190px;">
<div class="header">
About Me
</div>
<div class="card">
<h2>About Me</h2>
<div>
<div class="circle-image">
<img src="images/pro-pic.jpg" id="headshot">
</div>
</div>
<br><br>
Hi! Welcome to my site!
<br>My name is Viviano and I am a recent graduate of <b>Northeastern University</b> majoring in Computer Science and Marketing.
I love developing software, especially for Android and iOS.
<br><br>
I've been coding since I was a freshman in high school. This page includes some of the projects I have worked on since I started.
<br>
<br>
<big>Fun Facts:</big>
<li>I speak Spanish fluently and some Mandarin</li>
<li>My favorite sport is soccer</li>
<li>I play piano</li>
<li>I love listening to podcasts and audio books</li>
<br>
Links to my GitHub, LinkedIn, Google+ & Email are located on the top right.
You may also email me directly at <a href="mailto:cantu.v@husky.neu.edu" target="_blank">cantu.v@husky.neu.edu</a>
</div>
<div class="header">
Projects
</div>
<div class="card">
<big style="padding-bottom=25%">NovaKey - Android App</big>
<center><img style="height:120px" src="images/novakey/novakey_icon.png"/></center>
<br>
This is my pride and joy. I have been working on this app since September of 2014. I always found the idea of QWERTY keyboards on touchscreens backwards. Since I had some Java experience I decided to jump in and try it for myself.
<br><br>
The keyboard consists of six areas, five outer ones and one inner. Each area is composed of one main, tappable, key and various other, swipeable, keys. Because every key is a unique gesture there it is much harder to make mistakes.
<br><br>
Because of it's compact design, NovaKey includes many useful features that most generic QWERTY keyboards don't have. These include:
<li>Resizeable and movable</li>
<li>The ability to move the cursor</li>
<li>The ability to copy, cut, paste & select/deselect all text</li>
<li>All the special keys you may need</li>
<li>Customizable with many colors and themes</li>
<br>
<div id="slideshow">
<div>
<img class="slideshow-img" src="images/novakey/novakey_ss1.png"/>
</div>
<div>
<img class="slideshow-img" src="images/novakey/novakey_ss2.png"/>
</div>
<div>
<img class="slideshow-img" src="images/novakey/novakey_ss3.png"/>
</div>
<div>
<img class="slideshow-img" src="images/novakey/novakey_ss4.png"/>
</div>
<div>
<img class="slideshow-img" src="images/novakey/novakey_ss5.png"/>
</div>
<div>
<img class="slideshow-img" src="images/novakey/novakey_ss6.png"/>
</div>
</div>
<br>
This project is currently ongoing. You can download it using the link below. There is also a Google+ beta testing community accessible through the play store listing.
<br><br>
<!-- play storge badge -->
<center><a href="https://play.google.com/store/apps/details?id=viviano.cantu.novakey&hl=en&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1" target="_blank">
<img style="width:200px" alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png" />
</a></center>
</div>
<div class="card">
<big style="padding-bottom=25%">RyzeUp - Website</big> (school project)
<center><img style="height:120px" src="images/ryzeup/ryzeup_icon.jpg"/></center>
<br>
This project is intended to show the connections and networks in the political system of the US, it displays information in a easy to see, interactive, and fluid way. Allows for users to go through and see their representatives, look at bills, read user explanations and comments, and see what their representative is actually a part of.
The hope of this project is to simplify the intricacies of our complex government system, by being a platform for information and discussion about the US government.
<br><br>
The website is uses ExpressJS for the backend, MongoDB for data storage and AngularJS for fronend rendering.
This project was developed with some assistance from my friend Nicholas Westin.
<div id="ryzeupshow">
<div>
<img class="slideshow-img" src="images/ryzeup/ryzeup_ss1.png"/>
</div>
<div>
<img class="slideshow-img" src="images/ryzeup/ryzeup_ss2.png"/>
</div>
<div>
<img class="slideshow-img" src="images/ryzeup/ryzeup_ss3.png"/>
</div>
<div>
<img class="slideshow-img" src="images/ryzeup/ryzeup_ss4.png"/>
</div>
</div>
<br>
The site has not yet launched and is currently a work in progress.
<br><br>
<!-- website link -->
<center><a href="http://ryzeup.org" target="_blank">Click to View Demo</a></center>
</div>
<div class="card">
<big>Raspberry PI Smart Mirror</big>
<br><br>
This began this project during the sumer of 2016. Since I had a small broken TV and a Raspberry PI lying around, I decided to combine them together into something useful. First I got a picture frame and some <a href="https://www.tapplastics.com/product/plastics/cut_to_size_plastic/two_way_mirrored_acrylic/558" target="_blank">two-way mirror plastic</a> from tapplastics.com. Two-way mirror acrylic acts as a mirror if the opposite side is not lit, but it is see-through if there is light behind it. This was useful because if you display black and white elements on a screen with two-way mirror in front of it, the black elements will be reflective and the white elements will show through.
<br><br>
I then created a simple program that displays useful information including:
<li>Weather - from OpenWeather.org</li>
<li>News Headlines - from RSS feeds</li>
<li>Calendar Events - from the Google Calendar API</li>
<li>Phone Notifications - from the Pushbullet API</li>
<br><br>
<center>
<video id="vid1" class="vid" autoplay loop muted>
<source src="images/smartmirror/smartmirror_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<br><br>
</center>
<center><i>video courtesy of my brother</i></center>
<br><br>
In the future I plan to upgrade both the hardware and the software of my contraption. If I upgrade the screen from an old LCD to an AMOLED panel the mirror will look much better since AMOLED screens are not backlit. I also plan on integrating Spotify's API to display music currently playing and adding the ability to control it via smartphone app.
<br>
<center>
<a href="https://github.com/vcantu/SmartMirror.git" target="_blank">
<img class="githublink" src="images/GitHub.png">
</a>
</center>
</div>
<div class="card">
<big>Place Picker/Finder</big>
<br><br>
During the summer of 2015 I interned at a small app start-up. I was given a name for an app "Rate the Wait". The app was a rating tool like yelp, but would only contain quantitative data such as how long is the wait, how busy it is, how expensive it is, etc.
<br><br>
From that project I developed the Android UI element I am most proud of. I was using the Google Places & Maps API to find and display venues on the app and discovered that Google organizes all of the places in it's database by categories. I decided to take advantage of this and created a picker that allows users to easily find all these categories.
<br><br>
Below are two video demos of the prototype for "Rate the Wait". The first video shows mock ups of some of the UI elemets that were planned for the app. And the second video displays a more complete place picker with icons.
<br><br>
<center>
<video id="vid1" class="vid" autoplay loop muted>
<source src="images/rtw/rtw_other_ui.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<br>
<video id="vid2" class="vid" autoplay loop muted>
<source src="images/rtw/rtw_picker.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<br><br>
</center>
I am currently working on making the Place Picker more modular and publish it on Android Arsenal, so that other Android developers can add a customized version of it to their own apps. Below is the GitHub link to the current work in progress.
<br>
<center>
<a href="https://github.com/vcantu/Rate-the-Wait.git" target="_blank">
<img class="githublink" src="images/GitHub.png">
</a>
</center>
</div>
<div class="card">
<big>iOS App</big>
<br><br>
During my internship I was also tasked with developing an iOS app for the company. The app was a portal for finding doctors and making appointments. My task was to develop the iOS client version, the rest of my colleagues developed the art assets and the back end to the app. We used the REST API to communicate between the client and the server.
</div>
<div class="card">
<big>Battleship</big>
<br><br>
I created this battleship game during senior year in high school for my AP Computer Science class. For this game I created a very simple 2D game engine in Java and used that engine to make the battleship game. I'm most proud of the three different AI you can play against(Easy, Medium & Hard).
<br><br>
Below are two links, one GitHub link to the source code and one button to download a jar file. Just open the file and play!
<br><br>
How to Play:
<li>Drag & drop ships to set the initial position of your ships</li>
<li>Right click ships to rotate them</li>
<li>Left click to fire</li>
<br>
<center><a href="https://github.com/vcantu/NumToWord.git" target="_blank">
<img class="githublink" src="images/GitHub.png">
</a></center>
</div>
<div class="card">
<big>Small Java Calculator</big>
<br><br>
This was a small project I randomly decided to start one day when I became interested in how programming languages worked. This is a very light weight Java applet which contains a math parser. You can enter things like "2 + sin(pi) / floor(1 / 3)" and it will parse it and calculate the result. In the future I plan on adding the ability for the calculator to parse algebraic impressions and solve single variable equations.
<br><br>
Below is a link to the GitHub repository with the code to this project.
<br>
<center><a href="https://github.com/vcantu/Simple-Calc.git" target="_blank">
<img class="githublink" src="images/GitHub.png">
</a></center>
</div>
<div class="card">
<big>Java Number to English</big>
<br><br>
This was another small project I decided to take on. It is a very simple console application which takes in any number and outputs that number in english.
<br><br>
Below is a link to the GitHub repository with the code to this project.
<br>
<center><a href="https://github.com/vcantu/NumToWord.git" target="_blank">
<img class="githublink" src="images/GitHub.png">
</a></center>
</div>
<div class="card">
<big>Minecraft Bukkit Plugins</big>
<br><br>
During my junior year in high school I became very interested in both the Game Minecraft & Coding. Minecraft can be played online and the Minecraft community took advantage of this and decided to make a type of server, a Bukkit Server, which can alter the game by loading plugins written in Java. When I discovered this I dove in and tried my hand and developed two plugins.
<br><br>
<center><big>Cheese</big></center>
The game of minecraft consists of various blocks. One of these blocks is the useless sponge block. This block has no use since the developer decided against it. However, it is still included in the game. I found the looks to resemble cheese and created a plugin added cheese to the game. This cheese could only be created by putting milk in cauldron and letting it sit for some time. Eventually the milk would age into cheese! Which was edible, of course.
<br>
<center>
<a href="https://github.com/vcantu/Cheese-BukkitPlugin.git" target="_blank">
<img class="githublink" src="images/GitHub.png">
</a>
</center>
<center><big>Baking</big></center>
In my opinion, getting bread in Minecraft is too easy. You get three pieces of wheat and simply craft them together into bread. It's unrealistic! and the same goes for cookies and other baked goods in the game. To change this I created a plugin which restricted this easy access to wheat products and made it more challenging and fun.
<br><br>
The new process went like so: collect wheat, place it inside a cauldron and grind it(hit it with a stick) until flour pops out. Then mix the flour with water & yeast(made with wheat and mushrooms), to create dough. Finally, bake the dough and make bread! Likewise, you could mix flour with butter, milk & chocolate to create cookie dough. Oh yeah, and butter could be acquired by placing a milk bucket on the floor and churning it(hit it with a stick) until it turns to butter.
<center>
<a href="https://github.com/vcantu/Baking-BukkitPlugin.git" target="_blank">
<img class="githublink" src="images/GitHub.png">
</a>
</center>
</div>
<div class="card">
<big>This Site!</big>
<br><br>
I made this website from scratch using HTML, CSS and JavaScript.
<br><br>
Below is a link to the GitHub repository with the code to this project.
<br>
<center><a href="https://github.com/vcantu/vcantu.github.io.git" target="_blank">
<img class="githublink" src="images/GitHub.png">
</a></center>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js'></script>
<script src="js/index.js"></script>
<script>
document.getElementById('vid1').onclick = function (){
document.getElementById('vid1').play();
};
document.getElementById('vid2').onclick = function (){
document.getElementById('vid2').play();
};
</script>
<!-- google analytics -->
<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-74236315-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>