-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
391 lines (371 loc) · 14.8 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
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
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="icon" type="image/x-icon" href="portfolio.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="portfolio.css"/>
</head>
<body>
<section>
<h1 class="heading">
Portfolio
</h1>
<h2>
Completed Projects
</h2>
<ul class="everything">
<li class="dates">
23-10-2022
<h1>
Made a website to post my sketches
</h1>
<p>
Located at <a target="_blank" href="http://pikastunner.github.io/drawings">pikastunner.github.io/drawings</a>
</p>
<video class="video" src="drawings.mp4" type="video/mp4" muted id="vid_1" loop poster="thumbnail_1.png"></video>
<h3>
Skills
</h3>
<ul >
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JavaScript
</li>
</ul>
<h3>
Features
</h3>
<ul>
<li>
Implemented arrows that shuffles the images by one in the direction of the arrow clicked and is displayed with a fade-in animation
</li>
</ul>
<h3>
Improvements
</h3>
<ul>
<li>
Images take a long time to load and I could change the size of the image through compression to speed the process up
</li>
</ul>
<li class="dates">
04-09-2022
<h1>
Replication of the Hell Link from the anime Jigoku Shoujo
</h1>
<p>
Located at <a target="_blank" href="http://pikastunner.github.io/Jigoku_tsushin">pikastunner.github.io/Jigoku_tsushin</a>
</p>
<video class="video" src="hell_link.mp4" type="video/mp4" muted id="vid_2" loop poster="thumbnail_2.png"></video>
<h3>
Skills
</h3>
<ul >
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JavaScript
</li>
<li>
PHP
</li>
<li>
Python
</li>
</ul>
<h3>
Features
</h3>
<ul>
<li>
Website only opens at midnight reflecting the true state of the website in the anime
</li>
<li>
Interactive story component
</li>
<li>
Original prototype included a database that collected the input data through PHP and the PHP returned after submission will show some
analytics of the given name and previous names. The data analytics was done via calling Python to access the modules including numpy required for this task. This feature was an experimental idea that was not exhibited in the anime
</li>
</ul>
<h3>
Improvements
</h3>
<ul>
<li>
When featuring alerts as part of the storyline, I was unable to include images sequentially since the DOM wouldn't update as it was overwritten by the alert
call making the images appear when the alert calls have finished.
</li>
<li>
Find a web server to store the name data and implement the original prototype that needed to account for a database
</li>
</ul>
</li>
</ul>
<h2>
Projects under construction
</h2>
<ul class="everything">
<li class="dates">
Started on 25-12-2022
<h1>
Made a website to show CSS animations I made
</h1>
<p>
Located at <a target="_blank" href="http://pikastunner.github.io/animations">pikastunner.github.io/animations</a>
</p>
<video class="video" src="animations.mp4" type="video/mp4" muted id="vid_3" loop poster="thumbnail_3.png"></video>
<h3>
Skills
</h3>
<ul >
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JavaScript
</li>
</ul>
<h3>
Features
</h3>
<ul>
<li>
Fast changing background image animation on the website's first appearance.
</li>
<li>
Bowling animation using JavaScript's scroll event
</li>
</ul>
<h3>
Future changes
</h3>
<ul>
<li>
Adding more animations that are more complex and longer
</li>
<li>
Change the interface of section that has access to the animation links
</li>
</ul>
</li>
<li class="dates">
Started on 25-09-2022
<h1>
Made a website that checks passwords and relays results through data visualisation and figures
</h1>
<p>
Located at <a target="_blank" href="http://pikastunner.github.io/password_checker">pikastunner.github.io/password_checker</a>
</p>
<video class="video" src="passwords.mp4" type="video/mp4" muted id="vid_4" loop poster="thumbnail_4.png"></video>
<h3>
Skills
</h3>
<ul >
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JavaScript (Chart.js, Bootstrap, JQuery UI)
</li>
<li>
Python
</li>
<li>
R
</li>
</ul>
<h3>
Features
</h3>
<ul>
<li>
Rotating background image animation on the website's first appearance
</li>
<li>
Included animation on text such as fade in and typewriting effect
</li>
<li>
Included a simple and visually appealing navigation panel
</li>
<li>
Button vibrates red when no characters are entered in the password's field
</li>
<li>
Charts including a bar chart and a pie chart are correctly generated in the results
</li>
<li>
Report of data analysis provides a glimpse of the upcoming results
</li>
</ul>
<h3>
Future changes
</h3>
<ul>
<li>
The results section is not very device responsive
</li>
<li>
Fix the bugged image blend when the website is first loaded
</li>
<li>
Complete a comprehensive and detailed report on my data analysis
</li>
</ul>
</ul>
<div class="bubbles">
<div class="bubble-l"></div>
<div class="bubble-l"></div>
<div class="bubble-l"></div>
<div class="bubble-l"></div>
<div class="bubble-l"></div>
<div class="bubble-r"></div>
<div class="bubble-r"></div>
<div class="bubble-r"></div>
<div class="bubble-r"></div>
<div class="bubble-r"></div>
<div class="bubble-l"></div>
<div class="bubble-l"></div>
<div class="bubble-l"></div>
<div class="bubble-l"></div>
<div class="bubble-l"></div>
<div class="bubble-r"></div>
<div class="bubble-r"></div>
<div class="bubble-r"></div>
<div class="bubble-r"></div>
<div class="bubble-r"></div>
</div>
</section>
</body>
</html>
<script>
let clip_1 = document.querySelector("#vid_1");
let clip_2 = document.querySelector("#vid_2");
let clip_3 = document.querySelector("#vid_3");
let clip_4 = document.querySelector("#vid_4");
window.addEventListener('scroll', function() {
const num_videos = 4;
var all_bounds = [];
for (let i = 0; i < num_videos; i ++) {
all_bounds.push(document.getElementsByClassName("video")[i].getBoundingClientRect())
}
var j = 0;
for (var i of all_bounds) {
if (i.top >= 0 && i.left >= 0 && i.right <= i.right <= (window.innerWidth || document.documentElement.clientWidth)
&& i.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
document.getElementsByClassName("dates")[j].classList.add("appear");
break;
}
else {
j += 1;
}
}
});
const num_vids = 4;
var prev_time = [];
var is_paused = [];
for (let i = 0; i < num_vids; i ++) {
prev_time.push(0);
is_paused.push(false);
}
clip_1.addEventListener("mouseover", function(e) {
clip_1.currentTime = prev_time[0];
clip_1.play();
});
clip_1.addEventListener("mouseout", function(e) {
clip_1.pause();
prev_time[0] = clip_1.currentTime;
clip_1.currentTime = 0;
clip_1.load();
});
clip_1.addEventListener("click", function(e) {
if (is_paused[0] == true) {
is_paused[0] = false;
clip_1.play();
}
else {
is_paused[0] = true;
clip_1.pause();
}
});
clip_2.addEventListener("mouseover", function(e) {
clip_2.currentTime = prev_time[1];
clip_2.play();
});
clip_2.addEventListener("mouseout", function(e) {
clip_2.pause();
prev_time[1] = clip_2.currentTime;
clip_2.currentTime = 0;
clip_2.load();
});
clip_2.addEventListener("click", function(e) {
if (is_paused[1] == true) {
is_paused[1] = false;
clip_2.play();
}
else {
is_paused[1] = true;
clip_2.pause();
}
});
clip_3.addEventListener("mouseover", function(e) {
clip_3.currentTime = prev_time[2];
clip_3.play();
});
clip_3.addEventListener("mouseout", function(e) {
clip_3.pause();
prev_time[2] = clip_3.currentTime;
clip_3.currentTime = 0;
clip_3.load();
});
clip_3.addEventListener("click", function(e) {
if (is_paused[2] == true) {
is_paused[2] = false;
clip_3.play();
}
else {
is_paused[2] = true;
clip_3.pause();
}
});
clip_4.addEventListener("mouseover", function(e) {
clip_4.currentTime = prev_time[3];
clip_4.play();
});
clip_4.addEventListener("mouseout", function(e) {
clip_4.pause();
prev_time[3] = clip_4.currentTime;
clip_4.currentTime = 0;
clip_4.load();
});
clip_4.addEventListener("click", function(e) {
if (is_paused[3] == true) {
is_paused[3] = false;
clip_4.play();
}
else {
is_paused[3] = true;
clip_4.pause();
}
});
</script>