-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
642 lines (618 loc) · 51.6 KB
/
index.html
File metadata and controls
642 lines (618 loc) · 51.6 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
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
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Filipe Carvalho - Portfolio</title>
<script src="https://www.youtube.com/iframe_api"></script>
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg bg-bg3 text-uppercase fixed-top" id="mainNav">
<div class="container">
<button class="navbar-toggler text-uppercase font-weight-bold bg-bg text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="true" aria-label="Toggle navigation">
Menu
<svg class="svg-inline--fa fa-bars" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"></path></svg><!-- <i class="fas fa-bars"></i> Font Awesome fontawesome.com -->
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="text-center navbar-nav ms-center">
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">About</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio">Portfolio</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- About Section-->
<section class="page-section bg-bg text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading-->
<br><br><br><h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Picture and Text-->
<div class="row">
<div class="col-lg-12 text-center">
<img class="text-center" src="img/profile.png" alt="profile-pic">
<br><br><br><p style="font-size: 21px;" class="text-justify">Hi! My name is Filipe, I'm <span id="age"></span>, and I’m a game developer from Portugal who’s passionate about creating fun and engaging interactive experiences.
I studied at IPCA from 2018 to 2023, where I explored both mobile application development and digital games engineering. During that time, I gained experience across different stages of the game development process and had the chance to collaborate with amazing teams to build some great games (you can check out a few of them in the Portfolio section below).
I’m currently working in Functionality QA, which gives me a deeper understanding of how games are tested and refined. Outside of work, I’m always looking for new ways to learn and grow in the game industry, whether it’s by developing new games, participating in game jams, or improving my skills in different areas.
Thank you for taking the time to visit my page, and if you think I can help in any way, feel free to contact me :)</p></div>
</div>
</div>
</section>
<!-- Portfolio Section-->
<section class="page-section bg-bg3 portfolio" id="portfolio">
<div class="container">
<!-- Portfolio Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-white mb-0">Portfolio</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Grid Items-->
<div class="row justify-content-center">
<!-- Portfolio Item 1-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1" onclick="getModal(1)">
<div class="portfolio-item-caption2 d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><img class="text-center" src="icon/search.png"></div>
</div>
<img class="img-fluid" src="portfolio/SeacrawlersImg.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 2-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal2" onclick="getModal(2)">
<div class="portfolio-item-caption2 d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><img class="text-center" src="icon/search.png"></div>
</div>
<img class="img-fluid" src="portfolio/ForgeImg.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 3-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal3" onclick="getModal(3)">
<div class="portfolio-item-caption2 d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><img class="text-center" src="icon/search.png"></div>
</div>
<img class="img-fluid" src="portfolio/OlympusImpostorImg.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 4-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal4" onclick="getModal(4)">
<div class="portfolio-item-caption2 d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><img class="text-center" src="icon/search.png"></div>
</div>
<img class="img-fluid" src="portfolio/AstroManImg.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 5-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal5" onclick="getModal(5)">
<div class="portfolio-item-caption2 d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><img class="text-center" src="icon/search.png"></div>
</div>
<img class="img-fluid" src="portfolio/HighwayToHellImg.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 6-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal6" onclick="getModal(6)">
<div class="portfolio-item-caption2 d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><img class="text-center" src="icon/search.png"></div>
</div>
<img class="img-fluid" src="portfolio/Mind.MeImg.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 7-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal7" onclick="getModal(7)">
<div class="portfolio-item-caption2 d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><img class="text-center" src="icon/search.png"></div>
</div>
<img class="img-fluid" src="portfolio/CreativeGameImg.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 8-->
<div class="col-md-6 col-lg-4 mb-5 mb-md-0">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal8" onclick="getModal(8)">
<div class="portfolio-item-caption2 d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><img class="text-center" src="icon/search.png"></div>
</div>
<img class="img-fluid" src="portfolio/GoldMinerImg.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 9-->
<div class="col-md-6 col-lg-4 mb-5 mb-md-0">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal9" onclick="getModal(9)">
<div class="portfolio-item-caption2 d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><img class="text-center" src="icon/search.png"></div>
</div>
<img class="img-fluid" src="portfolio/QuizImg.png" alt="..." />
</div>
</div>
</div>
<!-- MORE PROJECTS
<div class="text-center container">
<br><br><br><a style="font-size: 21px;" class="text-uppercase text-white text-center" href="MoreProjects.html">More Projects</a>
-->
</div>
</div>
</section>
<!-- Contact Section-->
<section class="page-section bg-bg" id="contact">
<div class="container">
<!-- Contact Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-white mb-0">Contact</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Contact Section Form-->
<div class="row justify-content-center">
<div class="text-center mb-0">
<a class="btn btn-outline-light btn-social mx-1" href="mailto:bfmmdc96@hotmail.com"><i class="fa fa-envelope"></i></a>
<a class="btn btn-outline-light btn-social mx-1" href="https://www.linkedin.com/in/filipe-c-9103911b8/"><i class="fab fa-fw fa-linkedin-in"></i></a>
<!--<a class="btn btn-outline-light btn-social mx-1" href="https://www.linkedin.com/in/filipe-c-9103911b8/?original_referer="><i class="fab fa-fw fa-linkedin-in"></i></a>-->
<a class="btn btn-outline-light btn-social mx-1" href="https://github.com/MbfcM"><i class="fab fa-fw fa-github"></i></a>
<a class="btn btn-outline-light btn-social mx-1" href="https://www.youtube.com/@FlpC."><i class="fab fa-fw fa-youtube"></i></a>
</div>
</div>
</div>
</section>
<!-- Portfolio Modals-->
<!-- Portfolio Modal 1-->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" aria-labelledby="portfolioModal1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-bg3">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal(1)"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase text-white mb-0">Seacrawlers</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div >
<!-- Portfolio Modal - Video-->
<div class="video-container">
<iframe id="videoPlayer1" class="mm" src="https://www.youtube.com/embed/jhmkSHSVibw?enablejsapi=1" title="Seacrawlers" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Portfolio Modal - Text-->
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Description:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Seacrawlers is an action-adventure role-playing game that puts players in the role of a fearless pirate looking to become captain of the Seacrawlers. In this vast and dangerous world, full of secrets, the player will dive into an exciting journey of 30 days, where he must take the opportunity to explore, complete quests and kill enemies in order to get stronger. He should also try not to die or use his resting ability, as each time one of these happens, the player ends up having less time to prepare for the final challenge. As the player progresses, he will be able to unlock new skills that will be very important during his journey. Once the time is up, the player must win his last challenge to be named captain.</p>
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Developed:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">This game was created as a final project for the Applied Games Engineering and Development course. It was developed by Afonso Abreu, Filipe Carvalho, Rafael Silva, (ABR Games), and with special participation of Vitor Mendes, Diogo Pinheira, Jorge Mourão, Margarida de Mira (IPCB), working in the Music/SFX. It was developed between March and June 2023, 2023, using C# and Unity.</p>
<!--
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Tasks:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Main character: Implement Movement, Life, Damage (give and receive), Level Upgrade, Select class, Animation (movement, damage) <br> Others: Implement Xp system,Abilitys, Gold system, camera follow and free camera, days countdown system, day night system, implemented water, compass, shop, loading system between scenes, minimap, water monsters, create military camps, win and lose condition, settings (audio), clean code, bug fixes, boat movement holding click, implemented sounds, implemented plot, implemented some npcs, Implement UI, natural disasters (not implemented final version)</p>
-->
<button class="btn btn-primary" data-bs-dismiss="modal" onclick="closeModal(1)">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 2-->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" aria-labelledby="portfolioModal2" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-bg3">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal(2)"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Forge - In search of the Ancient Gold</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Video-->
<div class="video-container">
<iframe id="videoPlayer2" class="mm" src="https://www.youtube.com/embed/hlH-zvlYha4?enablejsapi=1" title="Forge - In search of the Ancient Gold" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Portfolio Modal - Text-->
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Description:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Forge - In search of the Ancient Gold is a first person game with low poly style (art) and which the genre is fantasy/roguelike. Here you play as Ron, an adventurer who's looking for the Ancient Gold. To find it you will need crafting the best weapons (collect materials as much you can), kill enemies and getting all the flames. In the end, be sure that you don0tlet the dragon win.</p>
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Developed:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">This game was created as a project for the Applied Games Engineering and Development course. It was developed by Afonso Abreu, Filipe Carvalho, Rafael Silva, (ABR Games), between October 2022 and January 2023, using C# and Unity.</p>
<!--
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Tasks:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Implement simple enemies life, behaviour (patrol, pursuit, attack) and unique skills; Implement inventory (pick up, store, drop, use item); Implement Buffs (life, increase damage and speed) and Debuffs (stun, poison, burn, decrease damage), Implement map; Implement player life, Implement and test level1, implement transition between scenes, Implement throwables; Implement breakable objects; Implement advance level system; Create tutorial; Clean code; Bug fixes; Organize Project;Receipes book; Compose levels with objects.</p>
-->
<button class="btn btn-primary" data-bs-dismiss="modal" onclick="closeModal(2)">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 3-->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" aria-labelledby="portfolioModal3" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-bg3">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal(3)"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Olympus Impostor</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Video-->
<div class="video-container">
<iframe id="videoPlayer3" class="mm" src="https://www.youtube.com/embed/9rZSAxP4ONk?enablejsapi=1" title="Olympus Impostor" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Portfolio Modal - Text-->
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Description:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Olympus Impostor is a game that puts you in the shoes of a god (a good or a bad one). If you play as a good god you need to upgrade the things so the happiness of the people grows and in the meetings you need to try to discover who is the impostor god. If the hapiness achives the maximum or if you kick the impostor you win. If you're playing as a bad god you can upgrade and destroy the things and your objective is getting the happiness to the 0% or kick all good gods.</p>
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Developed:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">This game was created as a project for the IPCA Game Jam 2023. It was developed by Bernardo, Fábio, Filipe, Marco, Nello, (Desclassificados), between 26 May and 28 May, 2023, using C# and Unity.</p>
<!--
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Tasks:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Animate trees, Implement wind, Animate god cloud, Implement de upgrade and destroy system, Create the prefabs of characters and builds,Implement timer per round, Implement zoom in/out.</p>
-->
<a class="text-white" style="font-size: 21px;" href="https://brc-ipcagj.itch.io/olympus-impostor">FIND IT HERE</a>
<br><br>
<button class="btn btn-primary" data-bs-dismiss="modal" onclick="closeModal(3)">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 4-->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" aria-labelledby="portfolioModal4" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-bg3">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal(4)"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Astro Man</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Video-->
<div class="video-container">
<iframe id="videoPlayer4" class="mm" src="https://www.youtube.com/embed/sBeXJvhrBow?enablejsapi=1" title="AstroMan" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Portfolio Modal - Text-->
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Description:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Astro Man is a first-person game that puts you in the shoes of an astronaut on the moon. You need to collect all the red orbs to get the energy to go back to earth. The purple orbs will help you against the enemies and the black orbs will make it harder to collect the orbs. In this project the objective was create different shaders that work nicely in the game, and for this we made one shader which is the terrain, other shader are the orbs, and the last shaders were made with post-processing and are a vignette and drunk effect.</p>
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Developed:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">This game was created as a project for the Applied Games Engineering and Development course. It was developed by Afonso Abreu, Filipe Carvalho, Rafael Silva (ABR Games), in June 2023, using C# and Unity.</p>
<!--
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Tasks:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Implement the nightvision and drunk shaders.</p>
-->
<button class="btn btn-primary" data-bs-dismiss="modal" onclick="closeModal(4)">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 5-->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" aria-labelledby="portfolioModal5" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-bg3">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal(5)"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Highway To Hell</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Video-->
<div class="video-container">
<iframe id="videoPlayer5" class="mm" src="https://www.youtube.com/embed/yvlSKuUOsfo?enablejsapi=1" title="HighwayToHell" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Portfolio Modal - Text-->
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Description:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Highway To Hell is a arcade car game, where you race to save human race. You have 3 tracks, each one with specific objectives. When you complete the track with the pre-defined objectives you unlock the next track, and if you win all tracks you complete your mission, saving the human race.</p>
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Developed:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">This game was created as a project for the Applied Games Engineering and Development course. It was developed by Afonso Abreu, Filipe Carvalho, Rafael Silva (ABR Games), between March and June, 2022, using C# and Unity.</p>
<!--
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Tasks:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Implement the nitrous, Implement UI, Implement Minimap, Implement timers, Implement Camera and Implement objectives, Implement victory, loose and pause menus and systems.</p>
-->
<a class="text-white" style="font-size: 21px;" href="https://abr-games.itch.io/highway-to-hell">FIND IT HERE</a>
<br><br>
<button class="btn btn-primary" data-bs-dismiss="modal" onclick="closeModal(5)">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 6-->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" aria-labelledby="portfolioModal6" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-bg3">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal(6)"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Mind.Me</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Video-->
<div class="video-container">
<iframe id="videoPlayer6" class="mm" src="https://www.youtube.com/embed/qvEl91dj6Lc?enablejsapi=1" title="mind.me" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Portfolio Modal - Text-->
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Description:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Mind.me is a 2D Platform game, where you play as creature who suffers from social anxiety. In the game you're gonna pass through experiences that people suffers in real world, and the objective during this journey is trying to pass the message to the player that everything gonna be ok, he's not alone, this problem really exist, and try to help lead with it.</p>
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Developed:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">This game was created as a project for the Game Changing Games SAP. It was developed by André, Anna, Filipe, Isabella, Jorge, (Angry Vegetables), during the October month, 2021, using C# and Unity.</p>
<!--
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Tasks:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Implement and animate the bonfire, Implement the enemies and the end game.</p>
-->
<button class="btn btn-primary" data-bs-dismiss="modal" onclick="closeModal(6)">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 7-->
<div class="portfolio-modal modal fade" id="portfolioModal7" tabindex="-1" aria-labelledby="portfolioModal7" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-bg3">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal(7)"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Creative Game</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Video-->
<div class="video-container">
<iframe id="videoPlayer7" class="mm" src="https://www.youtube.com/embed/x5hGx4mnN-c?enablejsapi=1" title="CreativeGame" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Portfolio Modal - Text-->
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Description:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Creative Game is a 2D Platform game, where you play as Santa Claus and you need to collect all the coins each level so you can advance to the next, until the end. You need to becarefull with the obstacles and the enemies, this last, if you want to kill them, you will need to collect the gift so you can activate your shoot ability. Finally to advance to the next level you need to find and enter in your home..</p>
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Developed:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">This game was created as a project for the Applied Games Engineering and Development course. It was developed by Filipe Carvalho, Paulo Macedo and Rui Cardoso, between May and June, 2021, using C#, Monogame and Hyperlap2d.</p>
<!--
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Tasks:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Create the levels, Implement the enemies, Implement UI, Implement win and game over, Implement coins, gifts, lifes, sounds, pause, timer, snowball effect, mute/unmute and player death.</p>
-->
<button class="btn btn-primary" data-bs-dismiss="modal" onclick="closeModal(7)">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 8-->
<div class="portfolio-modal modal fade" id="portfolioModal8" tabindex="-1" aria-labelledby="portfolioModal8" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-bg3">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal(8)"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Gold Miner</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Video-->
<div class="video-container">
<iframe id="videoPlayer8" class="mm" src="https://www.youtube.com/embed/C6xtlZ7v72Y?enablejsapi=1" title="GoldMiner" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Portfolio Modal - Text-->
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Description:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Gold Miner is a 2D game, where you play as a Miner, who needs to collect all the diamonds, to advance to the next level, until the end. You need to becarefull because the TNT can kill you, but can also destroy the diamonds, and in this last case, if it happens you will need to start afrom the beggining.</p>
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Developed:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">This game was created as a project for the Applied Games Engineering and Development course. It was developed by Filipe Carvalho, Paulo Macedo and Rui Cardoso, between March and April, 2021, using C# and Monogame.</p>
<!--
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Tasks:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Create the levels, Implement the UI, Implement TNT and Diamonds, Implement box fall, Implement walls explosion, Implemente restart and Implement victory and game over.</p>
-->
<button class="btn btn-primary" data-bs-dismiss="modal" onclick="closeModal(8)">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 9-->
<div class="portfolio-modal modal fade" id="portfolioModal9" tabindex="-1" aria-labelledby="portfolioModal9" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-bg3">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal(9)"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Quiz</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Video-->
<div class="video-container">
<iframe id="videoPlayer9" class="mm" src="https://www.youtube.com/embed/-pQepOOJngs?enablejsapi=1" title="Quiz" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Portfolio Modal - Text-->
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Description:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">Quiz is a web game where you have one question and four answers. Your objective is to choose the right answer as many times as you can, so you can have a better score in the final.</p>
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Developed:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">This game was created as a project for the Mobile Applications course. It was developed by Filipe Carvalho, between October 2019 and January 2020, using Html, CSS and JS.</p>
<!--
<br><p class="mb-4 text-white text-center" style="font-size: 21px;">Tasks:</p>
<p class="mb-4 text-white text-justify" style="font-size: 21px;">All</p>
-->
<button class="btn btn-primary" data-bs-dismiss="modal" onclick="closeModal(9)">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
<script>
var clicked = null;
var modalNumber = null;
var players = {};
function closeModal() {
// Pause the video if it's a YouTube iframe
if (clicked && players[modalNumber]) {
players[modalNumber].pauseVideo();
}
// Close the modal
if (modalNumber !== null) {
var modal = document.getElementById("portfolioModal" + modalNumber);
modal.style.display = "none";
}
}
function getModal(mN) {
// Store the clicked YouTube iframe and modal number
clicked = document.getElementById("videoPlayer" + mN);
modalNumber = mN;
if (clicked && !players[mN]) {
players[mN] = new YT.Player("videoPlayer" + mN, {
events: {
'onReady': onPlayerReady,
// Add other event listeners if needed
}
});
}
}
// Event listener for pressing the Escape key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeModal();
}
});
// Event listener for clicking outside the modal
window.addEventListener('click', function(event) {
closeModal();
});
function onPlayerReady(event) {
// You can add custom logic here when the player is ready
}
</script>
<script>
var born = new Date("02-10-1996");
var today = new Date();
if(today.getMonth() > born.getMonth())
var age = today.getFullYear() - born.getFullYear();
else if (today.getMonth() < born.getMonth())
var age = (today.getFullYear() - born.getFullYear()) - 1;
else if (today.getMonth() == born.getMonth())
if(today.getDate() >= born.getDate())
var age = today.getFullYear() - born.getFullYear();
else
var age = (today.getFullYear() - born.getFullYear()) - 1;
document.getElementById("age").textContent = age;
</script>
</body>
</html>