mirror of
https://github.com/kforney/kforney.github.io.git
synced 2025-02-22 04:38:40 -07:00
Expand games section, and add dropdown to navbar.
This commit is contained in:
parent
fc790336ed
commit
804a75a370
GPG key ID:
3AB4E2E04CEF656F
2 changed files with 347 additions and 253 deletions
20
css/main.css
20
css/main.css
|
|
@ -223,6 +223,20 @@ iframe[src*=itch]
|
||||||
text-shadow: #B17300 2px 2px 3px;
|
text-shadow: #B17300 2px 2px 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-menu{
|
||||||
|
background-color: RGBA(22, 26, 37, 70%);
|
||||||
|
box-shadow: #B17300 0px 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
color: #FFBC42;
|
||||||
|
font-family: "IBM Plex Mono", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item:hover{
|
||||||
|
background-color: #78a1bb;
|
||||||
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background-color: RGBA(22, 26, 37, 70%);
|
background-color: RGBA(22, 26, 37, 70%);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
|
|
@ -243,7 +257,8 @@ iframe[src*=itch]
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
|
max-height: 60%;
|
||||||
|
padding-top: 50.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
|
||||||
}
|
}
|
||||||
|
|
||||||
.youtube-iframe {
|
.youtube-iframe {
|
||||||
|
|
@ -253,7 +268,8 @@ iframe[src*=itch]
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 80%;
|
||||||
|
border-radius: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fa-brands {
|
.fa-brands {
|
||||||
|
|
|
||||||
172
index.html
172
index.html
|
|
@ -10,7 +10,8 @@
|
||||||
<link rel="manifest" href="site.webmanifest">
|
<link rel="manifest" href="site.webmanifest">
|
||||||
<link rel="apple-touch-icon" href="icon.png">
|
<link rel="apple-touch-icon" href="icon.png">
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
|
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="css/normalize.css">
|
<link rel="stylesheet" href="css/normalize.css">
|
||||||
<link rel="stylesheet" href="css/main.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
|
||||||
|
|
@ -22,19 +23,27 @@
|
||||||
|
|
||||||
<body class="parallax">
|
<body class="parallax">
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark sticky-top bg-dark shadow-lg">
|
<nav class="navbar navbar-expand-lg navbar-dark sticky-top bg-dark shadow-lg">
|
||||||
<a class="navbar-brand" href="#">
|
<a class="navbar-brand" href="#">
|
||||||
<img src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.png" alt="Logo" class="navbar-logo">
|
<img src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.png" alt="Logo" class="navbar-logo">
|
||||||
Kaj Forney
|
Kaj Forney
|
||||||
</a>
|
</a>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||||
|
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item">
|
<li class="nav-item dropdown">
|
||||||
<a class="navbar-link" href="#games">GAMES</a>
|
<a class="navbar-link" href="#" role="button" data-bs-toggle="dropdown"
|
||||||
|
aria-expanded="false">
|
||||||
|
GAMES
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#gamesMade">GAMES I MADE</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#gamesHelped">GAMES I HELPED WITH</a></li>
|
||||||
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<span class="navbar-text d-none d-sm-block">|</span>
|
<span class="navbar-text d-none d-sm-block">|</span>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
|
|
@ -50,11 +59,11 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="mt-5"></div>
|
<div class="mt-5"></div>
|
||||||
|
|
||||||
<div class="container-lg card">
|
<div class="container-lg card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
|
|
@ -69,18 +78,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="games"></div>
|
<div id="gamesMade"></div>
|
||||||
|
|
||||||
<div class="mt-5"></div>
|
<div class="mt-5"></div>
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
||||||
<div class="container-lg">
|
<div class="container-lg">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<h1 class="section-title">GAMES</h1>
|
<h1 class="section-title">GAMES I MADE</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -94,8 +103,11 @@
|
||||||
<p>[2021]</p>
|
<p>[2021]</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<p>The Climb is a small game I created in Unity, originally as part of my work in my GIMM 100 course. In the game, you control a robot who must escape by climbing on tetrominoes as they fall from above.</p>
|
<p>The Climb is a small game I created in Unity, originally as part of my work in my GIMM 100
|
||||||
<p>Later, I updated the game to add additional levels, as well as improved lighting using Unity's 2D Lighting system and the Universal Render Pipeline.</p>
|
course. In the game, you control a robot who must escape by climbing on tetrominoes as they fall
|
||||||
|
from above.</p>
|
||||||
|
<p>Later, I updated the game to add additional levels, as well as improved lighting using Unity's 2D
|
||||||
|
Lighting system and the Universal Render Pipeline.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -103,17 +115,64 @@
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="youtube-container">
|
<div class="youtube-container">
|
||||||
<iframe class="youtube-iframe" src="https://www.youtube.com/embed/N5unzGlC9ME" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
<iframe class="youtube-iframe" src="https://www.youtube.com/embed/N5unzGlC9ME"
|
||||||
|
title="YouTube video player"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowfullscreen></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row mt-3">
|
<div class="row mt-3">
|
||||||
<iframe src="https://itch.io/embed/1308115?border_width=0&bg_color=12161f&fg_color=78a1bb&link_color=ffbc42&border_color=283044"><a href="https://lunarpenguin.itch.io/the-climb">The Climb by Lunar_Penguin</a></iframe>
|
<iframe src="https://itch.io/embed/1308115?border_width=0&bg_color=12161f&fg_color=78a1bb&link_color=ffbc42&border_color=283044">
|
||||||
|
<a href="https://lunarpenguin.itch.io/the-climb">The Climb by Lunar_Penguin</a></iframe>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="gamesHelped"></div>
|
||||||
|
|
||||||
|
<div class="mt-5"></div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<div class="container-lg">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<h1 class="section-title">GAMES I HELPED WITH</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-md card mt-5">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row mt-5">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<h2>Mr. Saitou</h2>
|
||||||
|
<hr/>
|
||||||
|
<p>[Unreleased, 2023]</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<p>I assisted in a minor role with Mr. Saitou, a game created by Laura Shigihara/Morizora Studios. My role in the
|
||||||
|
project involved organizing a team of various testers and translators, as well as providing
|
||||||
|
additional in-depth testing on multiple platforms. In addition, I created localized graphical
|
||||||
|
assets for several languages, while maintaining their original visual style.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5"></div>
|
||||||
|
|
||||||
|
<div class="row youtube-container">
|
||||||
|
<iframe class="youtube-iframe" width="560" height="315"
|
||||||
|
src="https://www.youtube-nocookie.com/embed/nra31mia8Y0" title="YouTube video player"
|
||||||
|
frameborder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="container-md card mt-5">
|
<div class="container-md card mt-5">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mt-5">
|
<div class="row mt-5">
|
||||||
|
|
@ -123,26 +182,30 @@
|
||||||
<p>[2020]</p>
|
<p>[2020]</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<p>Megashigi is a game that I helped create using the Godot Engine, along with several friends, as a birthday gift. My portion of the project included the implementation of the game's playable, interactive credits sequence, as well as general level design, and subtitles for the game's boss rap sequence.</p>
|
<p>Megashigi is a game that I helped create using the Godot Engine, along with several friends, as a
|
||||||
|
birthday gift. My portion of the project included the implementation of the game's playable,
|
||||||
|
interactive credits sequence, as well as general level design, and subtitles for the game's boss
|
||||||
|
rap sequence.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4"></div>
|
<div class="mt-4"></div>
|
||||||
|
|
||||||
<div class="row mt-3">
|
<div class="row mt-3">
|
||||||
<iframe src="https://itch.io/embed/630032?border_width=0&bg_color=12161f&fg_color=78a1bb&link_color=ffbc42&border_color=283044"><a href="https://lopar.itch.io/megashigi">The Climb by Lunar_Penguin</a></iframe>
|
<iframe src="https://itch.io/embed/630032?border_width=0&bg_color=12161f&fg_color=78a1bb&link_color=ffbc42&border_color=283044">
|
||||||
</div>
|
<a href="https://lopar.itch.io/megashigi">The Climb by Lunar_Penguin</a></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="art"></div>
|
<div id="art"></div>
|
||||||
|
|
||||||
<div class="mt-5"></div>
|
<div class="mt-5"></div>
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
||||||
<div class="container-lg">
|
<div class="container-lg">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
|
|
@ -154,13 +217,20 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div id="art-carousel" class="carousel slide" data-bs-ride="false">
|
<div id="art-carousel" class="carousel slide" data-bs-ride="false">
|
||||||
<div class="carousel-indicators">
|
<div class="carousel-indicators">
|
||||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
|
||||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
aria-current="true" aria-label="Slide 1"></button>
|
||||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
|
||||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
|
aria-label="Slide 2"></button>
|
||||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
|
||||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
|
aria-label="Slide 3"></button>
|
||||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="6" aria-label="Slide 7"></button>
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"
|
||||||
|
aria-label="Slide 4"></button>
|
||||||
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4"
|
||||||
|
aria-label="Slide 5"></button>
|
||||||
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5"
|
||||||
|
aria-label="Slide 6"></button>
|
||||||
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="6"
|
||||||
|
aria-label="Slide 7"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="carousel-item active">
|
<div class="carousel-item active">
|
||||||
|
|
@ -225,22 +295,28 @@
|
||||||
<div class="row mt-5">
|
<div class="row mt-5">
|
||||||
<div class="col-sm">
|
<div class="col-sm">
|
||||||
<div class="youtube-container">
|
<div class="youtube-container">
|
||||||
<iframe class="youtube-iframe" src="https://www.youtube.com/embed/LaloFVeUvOk" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
<iframe class="youtube-iframe" src="https://www.youtube.com/embed/LaloFVeUvOk"
|
||||||
|
title="YouTube video player"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowfullscreen></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm">
|
<div class="col-sm">
|
||||||
<div class="youtube-container">
|
<div class="youtube-container">
|
||||||
<iframe class="youtube-iframe" src="https://www.youtube.com/embed/ahQPl9FOX7A" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
<iframe class="youtube-iframe" src="https://www.youtube.com/embed/ahQPl9FOX7A"
|
||||||
</div>
|
title="YouTube video player"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowfullscreen></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="social"></div>
|
<div id="social"></div>
|
||||||
|
|
||||||
<hr class="mt-5">
|
<hr class="mt-5">
|
||||||
|
|
||||||
<div class="container-lg mw-25 w-50">
|
<div class="container-lg mw-25 w-50">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<h1 class="section-title">OTHER PLACES I EXIST</h1>
|
<h1 class="section-title">OTHER PLACES I EXIST</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -307,23 +383,25 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-5"></div>
|
<div class="mt-5"></div>
|
||||||
|
|
||||||
<footer class="footer bg-dark">
|
<footer class="footer bg-dark">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span id="footerText"></span>
|
<span id="footerText"></span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||||
<script src="js/plugins.js"></script>
|
<script src="js/plugins.js"></script>
|
||||||
<script src="js/bootstrap.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||||
|
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.getElementById("footerText").innerHTML = "Copyright © Kaj Forney 2018-" + new Date(Date.now()).getFullYear();
|
document.getElementById("footerText").innerHTML = "Copyright © Kaj Forney 2018-" + new Date(Date.now()).getFullYear();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue