-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
337 lines (272 loc) · 14.2 KB
/
index.html
File metadata and controls
337 lines (272 loc) · 14.2 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
<!DOCTYPE html>
<html>
<!-- Header -->
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="res/favicon.png"/>
</head>
<body>
<!-- Navbar -->
<div id = "navBar">
<ul>
<li><a href ="#projects">projects</a></li>
<li><a href ="#testimonials">technicals and tools</a></li>
<li><a href="#about">about me</a></li>
<li><a href ="#contact">contact</a></li>
</ul>
</div>
<!-- Logo-like thingy/title -->
<div id="title">
<div id="nameWrapper">
<div id="titleA">
Alex
</div>
<div id="titleQ">
Quinn
</div>
</div>
<div id="titleSub">
Programming Portfolio
</div>
</div>
<div class="seperator"></div>
<!-- Projects section -->
<a id="projects"></a>
<div class="main">
<h1>projects</h1>
<h2> PSYCRON </h2>
<div class="paragraphList">
<u><a href = "https://store.steampowered.com/app/1368410/PSYCRON/" target=" ">(Steam Page, there's a free demo)</a></u>
<ul>
<li>TL;DR
<ul>
<li>A lo-fi metroidvania released in August of 2021 developed by me (Code & Art) and <a href="">Henry Hoffman (Sound, Music)</a></li>
<li>Published on Steam, worked with Steamworks and Steam Pipe</li>
<li>I was the programmer & designer, developed in GMS2 using GML</li>
<li>Utilized Git and Github for version control, Trello for task and bug tracking</li>
<li>Organized QA and testing through Discord, managed & recieved public feedback through Discord and Steam's support forms</li>
</ul>
</li>
<br>
<li>In more detail:
<ul>
A Grade 12 capstone project which got way out of hand. I was responsible for designing and programming the game, along with getting it onto Steam using Valve's Steamworks platform. Since I was the sole programmer I also organized testing/QA.
PSYCRON was developed in GMS2 and scripted/written in GML.
<br><br>
I created several tools for the game, including a custom audio mixer to make mastering easier which was useable in-game, updated in real time and saved mixing data to a .json file and a python program to autogenerate text similar to the logo from a custom spritefont.
<br><br>
Git and Github were invalueable during the project, as they allowed me to create easy backups & a seperate branch for a demo version of the game, so any demo specific changes could be kept separate from master.
</ul>
</li>
</ul>
<br>
<ul>
<li>
Media
<br><br>
<!-- Youtube videos -->
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/cHr534dBMh8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/WM9hCcS-9os" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<!-- Images -->
<img src="res/psycron/area2.png" width="560" height="315">
<img src="res/psycron/hands.png" width="560" height="315">
<img src="res/psycron/boss.png" width="560" height="315">
<img src="res/psycron/audioMixer.png" width="560" height="315">
<br><br>
</li>
</ul>
</div>
<h2> This Website </h2>
<div class="paragraphList">
<ul>
<li>TL;DR
<ul>
<li>The website you're currently looking at!</li>
<li>Pure HTML/CSS</li>
<li>Hosted through GitHub pages</li>
<li>Designed by me, preplanned in photoshop</li>
</ul>
</li>
<br>
<li>In more detail:
<ul>
In early September after some rough doodles in Photoshop, I sat down and finally decided to properly set a portfolio up. I find it especially handy since I've done a lot of game related projects which benefit from the more visual nature
and lack of space restrictions. Plus, great practice with HTML and CSS!
</ul>
</li>
</ul>
<br>
</div>
<h2> Skeletied </h2>
<div class="paragraphList">
<u><a href = "https://earthensky.itch.io/skeletied" target=" ">(Itch.io page, playable in browser)</a></u>
<ul>
<li>TL;DR
<ul>
<li>Entry with the SFU Game Developers club for the GMTK 2021 "Tied Together" gamejam</li>
<li>Puzzle game about using a skeleton's two halves joined by his stretchy spine to solve puzzles</li>
<li>Coded the menu system and some of the animations in Godot with GDScript</li>
<li>Designed and drew the main character and logo, composed some of the music (Title Screen, Ending)</li>
</ul>
</li>
<br>
<li>In more detail:
<ul>
The SFU Game Developer club's entry to the GMTK 2021 gamejam made very quickly over two days. I had had the idea for a person who was split in half that could manipulate or carry objects to solve puzzles using their spine.
Gabe (the club's president) rightfully pointed out that it was a bit morbid so we made Skeletony instead.
<br><br>
I drew the skeleton and logo, came up with a few puzzle concepts(see image 2!), and was responsible for putting together a level select (which never ended up getting used, it was a gamejam surprise surprise) that got repurposed into the main menu.
Would have liked to have done more but was feeling pretty burned from trying to wrap up PSYCRON development.
</ul>
</li>
<br>
<li>
Media
<br><br>
<!-- Youtube videos -->
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/cHr534dBMh8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/WM9hCcS-9os" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<!-- Images -->
<img src="res/gdc/menu.png" width="560" height="315">
<img src="res/gdc/sk3.png" width="560" height="315">
<img src="res/gdc/sk2.png" width="560" height="315">
<img src="res/gdc/sk1.png" width="560" height="315">
<br><br>
</li>
</ul>
<br>
</div>
<h2> Vinyl Record Database </h2>
<div class="paragraphList">
<ul>
<li>TL;DR
<ul>
<li>System for storing records on... vinyl records</li>
<li>Console application, written in C++ 17 and split across multiple .cpp/.h files for faster compilation and readability</li>
<li>Used a custom class to store each record, loaded in record information from an external file and able to sort by Artist Name/Length/etc.</li>
<li>Program tested heavily with valgrind to catch any memory leaks</li>
<li>Developed on a Linux VM (WSL) to speed up development compared to using a normal virtualbox install</li>
</ul>
</li>
<br>
<li>In more detail:
<ul>
My final project for CMPT 135 (Introduction to Programming II) where I was tasked to create some sort of a database system. I like vinyl records so I decided to make those the data.
<br><br>
This is one of the larger C++ programs I've worked on, being split across multiple files to both speed up recompilation and to keep everything readable.
Read in records externally from a text file, desgined a custom class to store information about records,
and used STL's sorting algorithms to order data by fields (Artist Name, Length, Year, etc...).
</ul>
<br>
</li>
<li>
Media
<br><br>
<!-- Youtube videos -->
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/cHr534dBMh8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/WM9hCcS-9os" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<!-- Images -->
<img src="res/cmpt/general.png" width="560" height="315">
<img src="res/cmpt/valgrind.png" width="560" height="315">
<img src="res/cmpt/powershell.png" width="560" height="315">
<img src="res/cmpt/erase.png" width="560" height="315">
<br><br>
</li>
</ul>
<br>
</div>
<h2> Misc. Gamejam Games</h2>
<div class="paragraphList">
(Download <u><a href = "res/gamejam/Last Minute (Windows).zip" target=" ">Last Minute</a></u>,
<u><a href = "res/gamejam/Brothers (Windows).zip" target=" ">Brothers</a></u>,
<u><a href = "res/gamejam/Time Lapse (Windows).zip" target=" ">Time Lapse</a></u>)</a></u>
<ul>
<li>TL;DR
<ul>
<li>Made: Last Minute, Brothers, Time Lapse</li>
<li>Several short games, each made in 24 hours for the GM48 gamejam</li>
<li>All developed with remote teams of 2-3 people, more if testers are included</li>
<li>Responsible for programming, design, organizing QA</li>
</ul>
</li>
<br>
<li>In more detail:
<ul>
From 2016 to 2019 (shortly before PSYCRON started development) I participated in several 48 hour gamejams with a team of friends.
It was a good experience in working under tight deadlines and coordinating assets/designs/timelines between artists who weren't in the same space and who occasionally had other responsiblities.
<br><br>
From a technical/design standpoint, Last Minute is probably the most complex with the idea being playing through a level multiple times and having to avoid the ghosts of your previous runs.
I had to set up a custom system for storing the player's position and animation state that'd be recorded to and then quickly read back since at the time, GameMaker didn't have any concept of structs.
<br><br>
Brothers (use your brother as a projectile or to jump to higher places) holds a special place in my heart as it was probably the one I had the most fun working on. Me and Henry (who composed the music for it, also worked with me on PSYCRON) brought it into school
where a lot of our classmates started competing to see who could finish it the fastest.
</ul>
<br>
</li>
<li>
Media
<br><br>
<!-- Youtube videos -->
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/cHr534dBMh8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/WM9hCcS-9os" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<!-- Images -->
<img src="res/gamejam/brothers1.png" width="560" height="315">
<img src="res/gamejam/timeLapse.png" width="560" height="315">
<img src="res/gamejam/lastMinute.png" width="560" height="315">
<img src="res/gamejam/brothers2.png" width="560" height="315">
<br><br>
</li>
</ul>
<br>
</div>
</div>
<a id="testimonials"></a>
<div class="main">
<h1>technicals and tools</h1>
<h2>Languages</h2>
<p>
<b>Comfortable with:</b> C++, HTML, CSS <br>
<b>Some experience with:</b> Python, C#, C (Arduino Programming)
</p>
<h2>Software</h2>
<p>
I do most of my C++ coding in either Notepad++ or VS Code, but do have some experience with Visual Studio 2019 from small C++ experiments and writing a custom game engine in C# (Using MonoGame, XNA fork/successor).
<br><br>
Since I haven't gotten around to setting up dualbooting yet, most of my C++ development happens on a Linux VM through WSL. I have experience using both that and Ubuntu 16.04.
<br><br>
All of my version control and backups for programming projects are done through Git with GitHub Desktop, though I have played around with using Git through the command line.
<br><br>
I'm also fairly proficient in the Adobe Creative Suite (Photoshop, Premiere Pro) which I've used to make promotional graphics, diagrams, and trailers.
</p>
<br>
</div>
<a id="about"></a>
<div class="main">
<h1>about me</h1>
<p>
I'm currently in my second year at Simon Fraser University in the
<u><a href = "https://www.sfu.ca/computing/prospective-students/undergraduate-students/programs/degree-programs/softwaresystems.html" target="none">
Software Systems program.</u></a>
Member of SFU's Game Developer club, I along with several other members took part in the GMTK 2021 gamejam, released Skeletied (see above).
<br><br>
When not writing code, I enjoy playing guitar and messing with synthesizers.
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1118412490%3Fsecret_token%3Ds-DuAKkcY98Sx&color=%2334a464&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
<br><br>
I'm also a big vinyl nerd and listen to a lot of music.
<iframe src="https://open.spotify.com/embed/playlist/0xn5ut5XW1cf5CfpG7MrNl" width="75%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<br><br>
Occasionally I skate. Blurry photo taken while longboarding down at Granville Island.
<img src="res/about/longboard.jpg" style="width:500px;height:350px;">
</p>
</div>
<a id="contact"></a>
<div class="main">
<h1>contact</h1>
<p>
To schedule an interview with me, please get in contact with SFU's Co-op office.<br>
I can also be reached through my school email, <u><a href="mailto:alex_quinn@sfu.ca">alex_quinn@sfu.ca</a></u><br><br>
</p>
</div>
</body>
</html>