-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (127 loc) · 9.17 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jackson Sui</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link type='text/css' href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link type='text/css' rel='stylesheet' href='css/style.css'>
</head>
<body>
<div id='app'>
<div id='headers'>
<div id='portDiv'>
<img id='portrait' src='./img/profile_img.png' alt='portrait'>
</div>
<div id='title'>
<h2 class='titleText'>Jackson Sui</h2>
<h4 class='titleText'>Software Developer</h4>
<h5 class='titleText'>[email protected]</h5>
</div>
</div>
<div id='main'>
<div id='project-title'>
<h3 id='pro'>Projects</h3>
</div>
<ul id='list'>
<li id='superAsteroidBattle' class='project col-md-12'>
<div class = "col-md-4 pro_img">
<a href="https://super-asteroid-battle.herokuapp.com/" target="_blank"><img class = 'image' src='./img/super_asteroid_battle_image.png' alt='Super Asteroid Battle image'></a>
</div>
<div class = 'col-md-7 pro_text'>
<h4><a href="https://super-asteroid-battle.herokuapp.com/" target="_blank">Super Asteroid Battle</a></h4>
<p>Join the Super Asteroid Battle! Bring your friends to fight the asteroids, collect ore, upgrade your spaceship, and shoot for that high score in this now multiplayer version of the classic <i>Asteroids</i> game. Built in collaboration with <a class = "linky" href = "https://eseite47.github.io/" target="_blank">Elisabeth Seite</a>. We used the phaser.io framework and socket.io for multiplayer. We think the game turned out very well and hope you enjoy it!</p>
</div>
</li>
<li id='exquisiteTail' class='project col-md-12'>
<div class = "col-md-4 pro_img">
<a href="https://exquisite-tail.herokuapp.com/" target="_blank"><img class = 'image' src='./img/exquisite_tail_image.png' alt='Exquisite Tail image'></a>
</div>
<div class = 'col-md-7 pro_text'>
<h4><a href="https://exquisite-tail.herokuapp.com/" target="_blank">Exquisite Tail</a></h4>
<p>A fun storytelling mash-up game! Exquisite Tail allows you to collaboratively write stories with your friends. Start a story and pass it along so each of your friends can contribute. Once the story is finished, everyone who participated can finally view the finished 'tail'. Built using React, Redux, Express, Sequelize, and Socket.io this project good refresher of the stack I learned at Fullstack Academy.</p>
</div>
</li>
<li id='pocketAstronomer' class='project col-md-12'>
<div class = "col-md-4 pro_img">
<a href="https://expo.io/@kiro705/pocket-astronomer" target="_blank"><img class = 'image' src='./img/Pocket_astronomer_image.png' alt='Pocket Astronomer image'></a>
</div>
<div class = 'col-md-7 pro_text'>
<h4><a href="https://expo.io/@kiro705/pocket-astronomer" target="_blank">Pocket Astronomer</a></h4>
<p>An educational astronomy app designed for iPhone and iPad. Built as a solo project during the Fullstack fellowship. Pocket Astronomer was created to assist instructors at a previous job I had in astronomy education. It is built in React-Native using Expo and utilizes the NASA image API for searches.</p>
</div>
</li>
<li id='superDuel' class='project col-md-12'>
<div class = "col-md-4 pro_img">
<a href="https://super-duel.herokuapp.com/" target="_blank"><img class = 'image' src='./img/super_duel_image.png' alt='Super Duel image'></a>
</div>
<div class = 'col-md-7 pro_text'>
<h4><a href="https://super-duel.herokuapp.com/" target="_blank">Super Duel</a></h4>
<p>Challenge your friends to a Super Duel! Built using the phaser.io framework, Super Duel is an arena platformer modeled off of a game I enjoy, <a class = "linky" href = "http://www.towerfall-game.com/" target="_blank">Towerfall Ascension</a>. Featuring a quirky cast of characters and the Mega Sword, I really had a lot of fun making this.</p>
</div>
</li>
<li id='coordinEat' class='project col-md-12'>
<div class = "col-md-4 pro_img">
<a href="https://coordin-eat.herokuapp.com/" target="_blank"><img class = 'image' src='./img/coordinEAT_image.png' alt='Coordin-EAT image' ></a>
</div>
<div class = 'col-md-7 pro_text'>
<h4><a href="https://coordin-eat.herokuapp.com/" target="_blank">Coordin-EAT</a></h4>
<p>A mobile-first web app to coordinate dinner plans with friends and family. Coordin-EAT puts inviting people, choosing a restaurant, and getting directions all in one convenient app. I build this as part of a team of 4, and utilized the Google directions and Yelp APIs. If you're planning a dinner, give Coordin-EAT a try!</p>
</div>
</li>
<li id='spaceAcademy' class='project col-md-12'>
<div class = "col-md-4 pro_img">
<a href="https://jsui1-space-academy.herokuapp.com/" target="_blank"><img class = 'image' src='./img/space_academy_img.png' alt='Space Academy image' ></a>
</div>
<div class = 'col-md-7 pro_text'>
<h4><a href="https://jsui1-space-academy.herokuapp.com/" target="_blank">The Space Academy</a></h4>
<p>Manage a number of different campuses in this solar system or beyond! Built using React + Redux for the front end and Sequelize + Express for the back end, this project marks the end of my junior phase at Fullstack Academy.</p>
</div>
</li>
<li id='tripPlanner' class='project col-md-12'>
<div class = "col-md-4 pro_img">
<a href="https://jsui1-trip-planner.herokuapp.com/" target="_blank"><img class = 'image' src='./img/Trip_planner_img.png' alt='Trip Planner image' ></a>
</div>
<div class = 'col-md-7 pro_text'>
<h4><a href="https://jsui1-trip-planner.herokuapp.com/" target="_blank">NYC Trip Planner</a></h4>
<p>A single page app for planning a multi-day trip around New York City. I built this using Express to access a database made using Sequelize to supply the data for the trip places. Give it at try!</p>
</div>
</li>
<li id='blackjack' class='project col-md-12'>
<div class = "col-md-4 pro_img">
<a href="http://kiro705.github.io/Blackjack/" target="_blank"><img class = 'image' src='./img/Blackjack_img.png' alt='Blackjack image' ></a>
</div>
<div class = 'col-md-7 pro_text'>
<h4><a href="http://kiro705.github.io/Blackjack/" target="_blank">A simple Blackjack game</a></h4>
<p>Here is a simple Blackjack. See if you can walk away with more money than you started with.</p>
</div>
</li>
<li id='gameOfLife' class='project col-md-12'>
<div class = "col-md-4 pro_img">
<a href="https://kiro705.github.io/game-of-life/" target="_blank"><img class = 'image' src='./img/Game_of_life_image.png' alt='Game of Life image' ></a>
</div>
<div class = 'col-md-7 pro_text'>
<h4><a href="https://kiro705.github.io/game-of-life/" target="_blank">The Game of Life</a></h4>
<p>Following the rules of <a class = "linky" href = "https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life" target="_blank">Conway's Game of Life</a> and see how simple patterns on a grid can have a 'life-like' behavior. Try to make a persistant design, or try a random set-up!</p>
</div>
</li>
<li id='guessing' class='project col-md-12 lastProject'>
<div class = "col-md-4 pro_img">
<a href='https://kiro705.github.io/GuessingGame-Part3/' target="_blank"><img class = 'image' src='./img/Guessing_game_img.png' alt='Guessing game image' ></a>
</div>
<div class = 'col-md-7 pro_text'>
<h4><a href="https://kiro705.github.io/GuessingGame-Part3/" target="_blank">A Guessing Game</a></h4>
<p>A guessing game to guess a random number between 1 - 100. Don't forget to use the hint!</p>
</div>
</li>
</ul>
</div>
</div>
<div id='footer'>
<h4 id='links'>
<a class='footLink' href="https://www.linkedin.com/in/jackson-sui/" target="_blank">LinkedIn</a>
<a class='footLink' href="https://github.com/Kiro705/" target="_blank">Github</a>
<a class='footLink' href="https://medium.com/@kiro705" target="_blank">My Blog</a>
</h4>
</div>
</body>
</html>