-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
279 lines (264 loc) · 11.4 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Portfolio - jupekett</title>
<meta
name="description"
content="My portfolio of schoolwork and other projects"
/>
<meta name="author" content="jupekett" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="favicon.ico" />
</head>
<body>
<header>
<h1>Portfolio</h1>
<nav>
<a href="index.html">Home</a>
<a href="portfolio.html">Portfolio</a>
<a href="blog.html">Blog</a>
</nav>
</header>
<div class="content--portfolio">
<main>
<article>
<h1>Projects</h1>
<p>
Some relevant programming projects from personal life or my studies at JYU. Language in study projects
might be finnish.
</p>
<ul>
<li><a href="#node">Node.js</a></li>
<li><a href="#react">React.js</a></li>
<li><a href="#java-aws">Java on AWS</a></li>
<li><a href="#java-desktop">Java on desktop</a></li>
</ul>
<section id="node">
<h2 class="centered-vertical margin-top">Node.js</h2>
<article class="project-card">
<div class="project-content">
<section class="project-info">
<h3 class="project-heading">Valheim server Discord bot</h3>
<p>A wrapper script that:</p>
<ul>
<li>launches a dedicated Linux server for Valheim game,</li>
<li>interprets server events by matching its standard output to expected regular expressions,</li>
<li>buffers necessary data when forming a message requires multiple server outputs,</li>
<li>sends a message to a Discord channel when a relevant event is detected.</li>
</ul>
<ul>
<li><a href="https://github.com/jupekett/valheim-server-discord-bot">Code repository</a></li>
</ul>
</section>
<a href="content/valheim.png">
<img
class="thumbnail"
src="content/valheim-thumb.png"
alt="Picture of the Valheim server Discord bot"
/>
</a>
</div>
</article>
</section>
<section id="react">
<h2 class="centered-vertical margin-top">React</h2>
<article class="project-card">
<div class="project-content">
<section class="project-info">
<h3 class="project-heading">Othello</h3>
<p>
A game of Othello. It was a bonus exercise for the course <em>TIEA2120
Web GUI programming</em> at JYU.
</p>
<p>
Make moves by dragging the disk under player's names
into a legal square, which are highlighted on the board.
Potentially captured disks are highlighted when calculating your move.
</p>
<p>
Also works on mobile! Touch is enough, no need for <em>drag 'n drop</em>.
</p>
<ul>
<li>
<a href="http://users.jyu.fi/~jupekett/tiea2120/othello-react/">Deployed site</a>
</li>
<li>
<a href="https://gitlab.jyu.fi/jupekett/othello-react">Code repository</a>
</li>
</ul>
</section>
<a href="content/othello.png">
<img
class="thumbnail"
src="content/othello-thumb.png"
alt="Picture of the Othello web application"
/>
</a>
</div>
</article>
<article class="project-card">
<div class="project-content">
<section class="project-info">
<h3 class="project-heading">Rogaining data front end</h3>
<p>
A front end for displaying and manipulating data from a rogaining contest. Built as an exercise for
the course <em>TIEA2120 Web GUI programming</em> at JYU.
</p>
<p>
Teams can be added and modified, with some input verification in place. Checkpoint codes and
coordinates can be modified. Utilizes <a href="https://leafletjs.com/">Leaflet-library</a> with <a
href="https://www.openstreetmap.org/">OpenStreetMap</a> tiles to display a tiny map when clicking
on checkpoint coordinates. The checkpoint marker can then be drag 'n dropped, which updates teams'
points and distances.
</p>
<ul>
<li>
<a href="http://users.jyu.fi/~jupekett/tiea2120/vt6/vt6.html" class="a__disabled">Deployed site</a> Under maintenance...
</li>
<li>
<a href="https://gitlab.jyu.fi/jupekett/vt6">Code repository</a>
</li>
</ul>
</section>
<a href="content/vt6.png">
<img
class="thumbnail"
src="content/vt6-thumb.png"
alt="Picture of VT6 exercise application"
/>
</a>
</div>
</article>
</section>
<section id="java-aws">
<h2 class="centered-vertical margin-top">Java on AWS</h2>
<p>
These applications are written in Java and would be deployed to <strong>AWS Elastic Beanstalk</strong>.
</p>
<article class="project-card">
<div class="project-content">
<section class="project-info">
<h3 class="project-heading">
Accommodation Reservation System
</h3>
<p></p>
<p>
A RESTful API created during the course <em>TIES4560 SOA and Cloud Computing</em> with <strong>Jersey</strong>
framework. Information about usage and requirements can be found on the <a
href="https://github.com/jupekett/ties4560-task4/blob/main/src/main/webapp/documentation/index.html">
documentation page</a>.
</p>
<ul>
<li>
<a href="" class="a__disabled">Deployed site</a> taken offline to save money
</li>
<li>
<a href="https://github.com/jupekett/ties4560-task4">Code repository</a></li>
</ul>
</section>
<a href="content/ars.png">
<img
class="thumbnail"
src="content/ars-thumb.png"
alt="Picture of Accommodation Reservation System data"
/>
</a>
</div>
</article>
<article class="project-card">
<div class="project-content">
<section class="project-info">
<h3 class="project-heading">IP-enthusiast</h3>
<p></p>
<p>
A pseudo-humorous web application, which leverages two existing SOAP services to convert an IP
address to uppercase words. It was developed for the course <em>TIES4560 SOA and Cloud
Computing</em> at JYU. The idea was influenced by the style of Dan Higginbotham, author of <a
href="https://www.braveclojure.com/">Clojure for the brave and true</a>.
</p>
<p>
Most of the source files in com.jupekett.ties4560.task1.client were generated by <strong>JAX-WS
RI</strong>, and much of the code is based on course examples.
</p>
<ul>
<li>
<a href="" class="a__disabled">Deployed site</a> taken offline to save money
</li>
<li>
<a href="https://gitlab.jyu.fi/jupekett/ties4560-task1">Code repository</a>
</li>
</ul>
</section>
<a href="content/ip.png">
<img
class="thumbnail"
src="content/ip-thumb.png"
alt="Picture of IP-enthusiast UI."
/>
</a>
</div>
</article>
</section>
<section id="java-desktop">
<h2 class="centered-vertical margin-top">Java on desktop</h2>
<article class="project-card">
<div class="project-content">
<section class="project-info">
<h3 class="project-heading">Multicast chat</h3>
<p>
A multicast chat client for the course <em>TIEA322 Communication Protocols</em>. Implements the
required <em>TIEA322MulticastChat</em> protocol. If you fire up multiple clients you can chat with yourself.
</p>
<ul>
<li>
<a href="https://gitlab.jyu.fi/jupekett/multicast3">Code repository</a>
</li>
</ul>
</section>
<a href="content/chat.png">
<img
class="thumbnail"
src="content/chat-thumb.png"
alt="Picture of Multicast chat application."
/>
</a>
</div>
</article>
<article class="project-card">
<div class="project-content">
<section class="project-info">
<h3 class="project-heading">Nuottirekisteri</h3>
<p>
A Java application for storing information about sheet music that the user owns. It was a course
project for <em>TIEP111 Programming 2</em>, and as such is not exactly unique in execution.
Regardless, I did my best to create good code in 2019.
</p>
<ul>
<li>
<a href="https://gitlab.jyu.fi/jupekett/nuottirekisteri">Code repository</a>
</li>
</ul>
</section>
<a href="content/nuotti.png">
<img
class="thumbnail"
src="content/nuotti-thumb.png"
alt="Picture of Nuottirekisteri application."
/>
</a>
</div>
</article>
</section>
</article>
</main>
</div>
<footer>
<address>
<a href="mailto:[email protected]">[email protected]</a>
</address>
</footer>
<script type="module" src="js/main.js"></script>
</body>
</html>