kforney.github.io/index.html
2023-02-14 18:58:21 -07:00

470 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="site.webmanifest" />
<link rel="apple-touch-icon" href="icon.png" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="theme-color" content="#fafafa" />
<script
src="https://kit.fontawesome.com/55072ce5fd.js"
crossorigin="anonymous"
></script>
</head>
<body class="parallax">
<nav
class="navbar navbar-expand-lg navbar-dark sticky-top bg-dark shadow-lg"
>
<a class="navbar-brand" href="#">
<img
src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.png"
alt="Logo"
class="navbar-logo"
/>
Kaj Forney
</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"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-link" href="#games">GAMES</a>
</li>
<span class="navbar-text d-none d-sm-block">|</span>
<li class="nav-item">
<a class="navbar-link" href="#art">ART</a>
</li>
<span class="navbar-text d-none d-sm-block">|</span>
<li class="nav-item">
<a class="navbar-link" href="#social">SOCIAL</a>
</li>
<span class="navbar-text d-none d-sm-block">|</span>
<li class="nav-item">
<a class="navbar-link" href="files/resume.pdf" target="_blank"
>RESUME</a
>
</li>
</ul>
</div>
</nav>
<div class="mt-5"></div>
<div class="container-lg card">
<div class="card-body">
<div class="row">
<div class="col">
<h1 class="section-title">Kaj Forney</h1>
</div>
</div>
<div class="row">
<div class="col">
<p>
Greetings! I am a human who enjoys pixel art, programming, and
penguins.
</p>
<p>Sometimes, I also make games.</p>
<p>
This site displays a few of the things I've made or helped to
make.
</p>
</div>
</div>
</div>
</div>
<div id="games"></div>
<div class="mt-5"></div>
<hr />
<div class="container-lg">
<div class="row">
<div class="col">
<h1 class="section-title">GAMES</h1>
</div>
</div>
<div class="container-md card">
<div class="card-body">
<div class="row">
<div class="col-sm-4">
<h2>The Climb</h2>
<hr />
<p>[2021]</p>
</div>
<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>
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 class="mt-4"></div>
<div class="row">
<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>
</div>
</div>
<div class="row mt-3">
<iframe
src="https://itch.io/embed/1308115?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044"
><a href="https://lunarpenguin.itch.io/the-climb"
>The Climb by Lunar_Penguin</a
></iframe
>
</div>
</div>
</div>
<div class="container-md card mt-5">
<div class="card-body">
<div class="row mt-5">
<div class="col-sm-4">
<h2>Megashigi</h2>
<hr />
<p>[2020]</p>
</div>
<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>
</div>
</div>
<div class="mt-4"></div>
<div class="row mt-3">
<iframe
src="https://itch.io/embed/630032?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044"
><a href="https://lopar.itch.io/megashigi"
>The Climb by Lunar_Penguin</a
></iframe
>
</div>
</div>
</div>
</div>
<div id="art"></div>
<div class="mt-5"></div>
<hr />
<div class="container-lg">
<div class="row">
<div class="col">
<h1 class="section-title">ART</h1>
</div>
</div>
<div class="row">
<div class="col">
<div id="art-carousel" class="carousel slide" data-bs-ride="false">
<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="1"
aria-label="Slide 2"
></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="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 class="carousel-inner">
<div class="carousel-item active">
<img
src="img/art/rakuenDoor.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">RAKUEN ART [2022]</h5>
<p class="text-shadow">
A scene from the game <i>Rakuen</i>, recreated in Blender.
</p>
</div>
</div>
<div class="carousel-item">
<img
src="img/art/airship1.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">AIRSHIP MODEL [2022]</h5>
<p class="text-shadow">Created in Blender</p>
</div>
</div>
<div class="carousel-item">
<img
src="img/art/airship2.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">AIRSHIP MODEL [2022]</h5>
<p class="text-shadow">Created in Blender.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/art/cat.png" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">DIGITAL PORTRAIT [2021]</h5>
<p class="text-shadow">
A digital painting of my cat, Okapi.
</p>
</div>
</div>
<div class="carousel-item">
<img
src="img/art/portrait_dad.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow"></h5>
<p class="text-shadow"></p>
</div>
</div>
<div class="carousel-item">
<img src="img/art/dadKaj.png" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block"></div>
</div>
<div class="carousel-item">
<img
src="img/art/symbolSet_fullSet.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow"></h5>
<p class="text-shadow"></p>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#art-carousel"
data-bs-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#art-carousel"
data-bs-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-sm">
<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>
</div>
</div>
<div class="col-sm">
<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>
</div>
</div>
</div>
</div>
<div id="social"></div>
<hr class="mt-5" />
<div class="container-lg mw-25 w-50">
<div class="row">
<h1 class="section-title">OTHER PLACES I EXIST</h1>
</div>
<div class="row">
<div class="col">
<a href="https://youtube.com/@lunar_penguin" target="_blank">
<h2 title="YouTube">
<i class="fa-brands fa-youtube"></i>
</h2>
</a>
</div>
<div class="col">
<a href="https://twitch.tv/lunar_penguin" target="_blank">
<h2 title="Twitch.tv">
<i class="fa-brands fa-twitch"></i>
</h2>
</a>
</div>
<div class="col">
<a
rel="me"
href="https://mastodon.gamedev.place/@lunar_penguin"
target="_blank"
>
<h2 title="Mastodon">
<i class="fa-brands fa-mastodon"></i>
</h2>
</a>
</div>
<div class="col">
<a href="https://www.linkedin.com/in/kajforney/" target="_blank">
<h2 title="LinkedIn">
<i class="fa-brands fa-linkedin"></i>
</h2>
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="https://lunarpenguin.itch.io" target="_blank">
<h2 title="Itch.io">
<i class="fa-brands fa-itch-io"></i>
</h2>
</a>
</div>
<div class="col">
<a href="https://github.com/kforney" target="_blank">
<h2 title="Github">
<i class="fa-brands fa-github"></i>
</h2>
</a>
</div>
<div class="col">
<a href="https://artstation.com/lunar_penguin" target="_blank">
<h2 title="ArtStation">
<i class="fa-brands fa-artstation"></i>
</h2>
</a>
</div>
<div class="col">
<a href="https://lunar--penguin.tumblr.com" target="_blank">
<h2 title="Tumblr">
<i class="fa-brands fa-tumblr"></i>
</h2>
</a>
</div>
</div>
<div class="row"></div>
</div>
<div class="mt-5"></div>
<footer class="footer bg-dark">
<div class="container">
<span id="footerText"></span>
</div>
</footer>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
document.getElementById("footerText").innerHTML =
"Copyright © Kaj Forney 2018-" + new Date(Date.now()).getFullYear();
</script>
</body>
</html>