-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
121 lines (102 loc) · 11.3 KB
/
index.html
File metadata and controls
121 lines (102 loc) · 11.3 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
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/images/favicon.ico"/>
</head>
<body>
<center>
<h2><img width="50" height="50" class="avatar" src="assets/images/avatar.jpg" style="vertical-align:middle"> Hi, I'm <a href="https://github.com/ngraf">Norbert</a> and these are</h2>
<h2>My self-written <a href="https://phaser.io/phaser3">Phaser3</a> browser games</h2>
<div class="container">
<div class="imageBox"><a href="quizgame" title="My first game. It is a simple quiz game with not many features"><img class="thumbnail blackBorder" src="assets/images/1_quizgame.jpg" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/1_quizgame.gif" loading="lazy"></div><br/><br/><div class="caption">Quizgame!</a> <span class="date">(August 2020)</span></div></div>
<div class="imageBox"><a href="bughunter" title="A simulation of a test engineer's daily life (autobiographic to some extent 😀)"><img class="thumbnail blackBorder" src="assets/images/2_bughunter.jpg" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/2_bughunter.gif" loading="lazy"></div><br/><br/><div class="caption">Bughunter</a> <span class="date">(August 2020)</span></div></div>
<div class="imageBox"><a href="javascript:alert('Not playable anymore. Server is down.');" title="A co-op multiplayer drawing game"><!-- <a href="https://phaser3-draw-together.herokuapp.com/" title="A co-op multiplayer drawing game"> --><img width="350" height="350" class="thumbnail blackBorder" src="assets/images/3_drawtogether.jpg" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/3_drawtogether.gif" loading="lazy"></div><br/><br/><div class="caption">Draw Together</a> <span class="date">(September 2020)</span></div></div>
<div class="imageBox"><a href="drivetheworld" title="A top-down car racing game that spans the whole world."><img class="thumbnail blackBorder" src="assets/images/4_drivetheworld.webp" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/4_drivetheworld.gif" loading="lazy"></div><br/><br/><div class="caption">Drive the World</a> <span class="date">(September 2020)</span></div></div>
<div class="imageBox"><a href="epidemic" title="Simple simulation of a pandemic"><img class="thumbnail blackBorder" src="assets/images/5_epidemic.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/5_epidemic.gif" loading="lazy"></div><br/><br/><div class="caption">Epidemic</a> <span class="date">(October 2020)</span></div></div>
<div class="imageBox"><a href="newlands" title="Economic simulator with a hero you can move (unfinished Proof of Concept)"><img class="thumbnail blackBorder" src="assets/images/6_newlands.jpg" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/6_newlands.gif" loading="lazy"></div><br/><br/><div class="caption">New Lands</a> <span class="date">(November 2020)</span></div></div>
<div class="imageBox"><a href="phaser-chess" title="A chess game for 1,2 or 4 players"><img class="thumbnail blackBorder" src="assets/images/7_phaserchess.jpg" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/7_phaserchess.gif" loading="lazy"></div><br/><br/><div class="caption">Phaser Chess</a> <span class="date">(December 2020)</span></div></div>
<div class="imageBox"><a href="travelmania" title="Collect sights on a map"><img class="thumbnail blackBorder" src="assets/images/8_travelmania.jpg" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/8_travelmania.gif" loading="lazy"></div><br/><br/><div class="caption">Travelmania</a> <span class="date">(April 2021)</span></div></div>
<div class="imageBox"><a href="accurate-soccer" title="Score goals"><img class="thumbnail blackBorder" src="assets/images/9_accuratesoccer.jpg" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/9_accuratesoccer.gif" loading="lazy"></div><br/><br/><div class="caption">Accurate Soccer</a> <span class="date">(May 2021)</span></div></div>
<div class="imageBox"><a href="restart" title="A side-scroller survival game (unfinished Proof of Concept)"><img class="thumbnail blackBorder" src="assets/images/10_restart.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/10_restart.gif" loading="lazy"></div><br/><br/><div class="caption">Restart</a> <span class="date">(January 2022)</span></div></div>
<div class="imageBox"><a href="raw-kubernetes" title="An educational game about the technology Kubernetes"><img class="thumbnail blackBorder" src="assets/images/11_rawkubernetes.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/11_rawkubernetes.gif" loading="lazy"></div><br/><br/><div class="caption">Raw Kubernetes</a> <span class="date">(April 2022)</span></div></div>
<div class="imageBox"><a href="noahs-ark" title="A puzzle game with animals"><img class="thumbnail blackBorder" src="assets/images/12_noahsark.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/12_noahsark.gif" loading="lazy"></div><br/><br/><div class="caption">Noahs Ark</a> <span class="date">(September 2022)</span></div></div>
<div class="imageBox"><a href="bauer-defense" title="A tower-defense game in farmer setting"><img class="thumbnail blackBorder" src="assets/images/13_bauerdefense.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/13_bauerdefense.gif" loading="lazy"></div><br/><br/><div class="caption">Bauer Defense</a> <span class="date">(March 2023)</span></div></div>
<div class="imageBox"><a href="battle-of-the-decks" title="A trump card game with different topics"><img class="thumbnail blackBorder" src="assets/images/14_battleofthedecks.jpg" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/14_battleofthedecks.gif" loading="lazy"></div><br/><br/><div class="caption">Battle of the Decks</a> <span class="date">(April 2023)</span></div></div>
<div class="imageBox"><a href="country-smash" title="Compare shape of countries against each other"><img class="thumbnail blackBorder" src="assets/images/15_countrysmash.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/15_countrysmash.gif" loading="lazy"></div><br/><br/><div class="caption">Country Smash</a> <span class="date">(February 2024)</span></div></div>
<div class="imageBox"><a href="javascript:alert('Not playable anymore. Server is down.');" title="Challenge your knowledge in a genre of your choice and build up ELO score"><img class="thumbnail blackBorder" src="assets/images/16_eloquiz.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/16_eloquiz.gif" loading="lazy"></div><br/><br/><div class="caption">Elo Quiz</a> <span class="date">(February 2024)</span></div></div>
<div class="imageBox"><a href="pixel-world" title="Make any place in the world look like a game"><img class="thumbnail blackBorder" src="assets/images/17_pixelworld.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/17_pixelworld_newyork.gif" loading="lazy"></div><br/><br/><div class="caption">Pixel World</a> <span class="date">(May 2024)</span></div></div>
<div class="imageBox"><a href="draw-a-circle" title="Draw a circle! As perfect as possible to score 100%"><img class="thumbnail blackBorder" src="assets/images/18_drawacircle.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/18_draw-a-circle.gif" loading="lazy"></div><br/><br/><div class="caption">Draw a Circle</a> <span class="date">(February 2025)</span></div></div>
<div class="imageBox"><a href="docs/walk-the-page.html" title="Walk any page as if it were a 2d physics-based jump'n'run game and destroy its content by shooting at it."><img class="thumbnail blackBorder" src="assets/images/19_walkthepage.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/19_walkthepage.gif" loading="lazy"></div><br/><br/><div class="caption">Walk the Page</a> <span class="date">(March 2025)</span></div></div>
<div class="imageBox"><a href="lan-party-simulator" title="Simulation of a LAN Party. Play as much as you can, while keeping up your necessities like hygiene."><img class="thumbnail blackBorder" src="assets/images/20_lanpartysimulator.png" width="350" height="350"><div class="hoverImg"><img class="thumbnail" src="assets/gifs/20_lanpartysimulator.gif" loading="lazy"></div><br/><br/><div class="caption">LAN Party Simulator</a> <span class="date">(April 2026)</span></div></div>
</div>
</center>
<script>
// Add class "displayAnimation" to div that contains class "hoverImg" when the image is in viewport (mobile only. this criteria is handled in CSS rules)
var observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
// console.log(entry.isIntersecting)
entry.target.classList.toggle("displayAnimation", entry.isIntersecting);
});
}, {threshold: 1}); // info: threshold 1 means 100% of the image has to be in the viewport to trigger the event
document.querySelectorAll('.imageBox').forEach(function(img) {
observer.observe(img);
});
</script>
<style>
@font-face {
font-family: "Blessed";
src: url("./assets/fonts/Blessed.ttf") format("truetype");
/*font-display: swap; <-- it was a nice idea to display page earlier, but it produces CLS */
}
* {
font-family: Blessed, Verdana, serif;
/*font-size: 30px;*/
letter-spacing: 1px;
}
.avatar {
border-radius: 50%;
}
.thumbnail { /* Make thumbnails for games cool */
max-width: 300px;
max-height: 300px;
border-radius: 10%;
border: 5px solid white;
}
.blackBorder {
border: 5px solid black;
}
.date { /* Display dates when games are developed less important */
color: lightgray;
}
a { /* Remove annoying blue color from links */
color: inherit;
}
.container > div {
display: inline-block;
margin-left: 30px;
margin-right: 30px;
margin-top: 50px;
}
.caption {
font-size: 30px;
}
.imageBox {
position: relative;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
/* On mobile device show hoverImg when user has image in viewport */
@media (hover: none), (pointer: coarse) {
.imageBox.displayAnimation .hoverImg {
display: block;
}
}
</style>
</body>