-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathappsandgames.html
233 lines (216 loc) · 10.2 KB
/
appsandgames.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
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<link rel="stylesheet" href="assets/css/main.css" />
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<title>Apps and Games</title>
</head>
<body>
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1><a href="index.html">DavidMonical</a></h1>
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="appsandgames.html">Apps and Games</a></li>
<li><a href="photography.html">Photography</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<header>
<br/>
<br/>
<br/>
<br/>
<h1>Apps & Games</h1>
<p>A timeline of my development</p>
</header>
<section id="cd-timeline" class="cd-container">
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="img/gamepad-controller.svg" alt="Picture"-->
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<img src="images/space.png" alt="" />
<p class="colored">Like so many other video game developers, my journey began with an arcade space shooter.</p>
<div class="content">
<hr class="apps">
<p class="colored">
CosmicBlitz (2013) is a fast paced arcade/action game in which the goal is to stay alive for as long as possible by avoiding and destroying enemy aliens. It combines classic arcade style gameplay with modern UI and graphics. CosmicBlitz will bring the player many hours of fun and entertainment.
</p>
<video controls>
<source src="videos/CosmicBlitzTrailer.mp4" type="video/mp4">
</video>
</div>
<a href="#0" class="cd-read-more">Read more</a>
<span class="cd-date">2013-2014</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="img/gamepad-controller.svg" alt="Movie">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<img src="images/flappy.jpg" alt="" />
<p class="colored">Jumping aboard the flappy bird train, I arrived at this creation.</p>
<div class="content">
<hr class="apps">
<p class="colored">
Not much more to say about this one. It's basically flappy bird with a cooler character and inverted gravity.
</p>
</div>
<a href="#0" class="cd-read-more">Read more</a>
<span class="cd-date">2014</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-location">
<img src="img/smartphone-screen.svg" alt="Picture">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<img src="images/makers.png" alt="" />
<p class="colored">A local makers faire provided the perfect opportunity to branch off from only game development.</p>
<div class="content">
<hr class="apps">
<p class="colored">
The Piedmont Makers Faire App (2015) is my most recent project. I created it as a supplement to the Makers Faire hosted in my home town. It contains several features: a map of the event, a schedule, a list of attractions, and the ability to "like" certain exhibits. It's connected to a database so that the administrators of the Faire can use the data to make subsequent years that much better.
</p>
<video controls>
<source src="videos/PiedmontMakersDemo.mp4" type="video/mp4">
</video>
</div>
<a href="#0" class="cd-read-more">Read more</a>
<span class="cd-date">2015</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="img/gamepad-controller.svg" alt="Location">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<img src="images/shapestorm.png" alt="" />
<p class="colored">Wanting to focus on minimalist gameplay and design, I developed my favorite game so far.</p>
<div class="content">
<hr class="apps">
<p class="colored">
Shape Storm asks the player, a circle, to remain on a platform despite dangerous shapes flying around in all directions. The minimalist gameplay is accompanied by the geometric art style and clean UI. Three game modes, “Infinity”, “Ascension”, and “Salvation” all approach the central survival mechanic in unique ways, creating a game that never stales.
</p>
<video controls>
<source src="videos/ShapeStormTrailer.mp4" type="video/mp4">
</video>
</div>
<a href="#0" class="cd-read-more">Read more</a>
<span class="cd-date">2016</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="img/gamepad-controller.svg" alt="Location">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>The Graveyard</h2>
<p class="colored">Here lay the games that never quite made it to the glorious world of publication.</p>
<div class="content">
<hr class="apps">
<h2>27 Days & Nights</h2>
<div class="box alt">
<div class="row uniform 50%">
<div class="6u"><span class="image fit"><img src="images/27days1.png" alt="" /></span></div>
<div class="6u"><span class="image fit"><img src="images/27days2.png" alt="" /></span></div>
</div>
</div>
<p class="colored">
27 Days and Nights is one of my furthest along prototype games. The goal is to destroy enemies to level up until the player can survive for a total of 27 in game days and nights. Each level before the end consists of fewer days and nights. It is an RPG in terms of enemy design, leveling, and items, but the actual gameplay is more like an arcade game. I hope to release this game in the near future, as I believe it can bring many hours of fun to the consumer.
</p>
<br></br>
<h2>Bug Defense</h2>
<p class="colored">
Bug Defense is an unfinished tower defense game in which the player sets up fly swatters, bug zappers, bug spray, etc. in order to kill bugs that are trying to steal food.
</p>
<video controls>
<source src="videos/BugDefense.mp4" type="video/mp4">
</video>
</div>
<a href="#0" class="cd-read-more">Read more</a>
<span class="cd-date">2013-2017</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="img/gamepad-controller.svg" alt="Location">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>In Progress</h2>
<p class="colored">Currently I am trying to explore more service oriented applications, but there are a few games I toy with on the side.</p>
<div class="content">
<hr class="apps">
<h2>Fit In</h2>
<p class="colored">
Fit In is a game I'm incredibly excited about because I think the concept is fairly unique for a simple game. The design is also something I am proud of, with the geometric shapes and greyscale creating somewhat of a cityscape-esque aesthetic.
</p>
<video controls>
<source src="videos/FitIn.mp4" type="video/mp4">
</video>
<br></br>
<h2>Drift</h2>
<p class="colored">
Drift is an investigation into minimalistic design and simplistic gameplay. The core functionality, while fun, is very basic. This makes the game perfect for a quick escape from reality and a great time kill during the in-betweens of life. It's also almost ready for release. Yay!
</p>
<video controls>
<source src="videos/Drift.mp4" type="video/mp4">
</video>
</div>
<a href="#0" class="cd-read-more">Read more</a>
<span class="cd-date">2017</span>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-location">
<img src="img/smartphone-screen.svg" alt="Movie">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>The Future</h2>
<p>This is the content of the last section</p>
<span class="cd-date">2017+</span>
<p class="colored">I can't wait to see what's in store.</p>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
</section> <!-- cd-timeline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<footer id="footer">
<ul class="icons">
<li><a href="https://www.facebook.com/david.monical.1" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="http://www.instagram.com/david_monical" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://itunes.apple.com/us/developer/vincent-monical/id790470895" class="icon fa-apple"><span class="label">iTunes</span></a></li>
<li><a href="https://play.google.com/store/apps/developer?id=David%20Monical&hl=en" class="icon fa-android"><span class="label">Android</span></a></li>
<li><a href="mailto:davidgmonical@berkeley.com" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© One day...</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</footer>
</div>
</body>
</html>