kforney.github.io/index.html

551 lines
24 KiB
HTML
Raw Permalink Normal View History

<!doctype html>
2022-12-04 22:21:44 -07:00
<html lang="en-us">
<head>
<meta charset="utf-8">
2023-02-21 18:21:43 -07:00
<title>Kaj Forney -- Portfolio</title>
<meta name="description" content="Portfolio website of Kaj Forney.">
<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 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/main.css">
<meta name="theme-color" content="#fafafa">
2023-02-21 18:44:19 -07:00
<script src="https://kit.fontawesome.com/55072ce5fd.js" crossorigin="anonymous" defer></script>
</head>
<body class="parallax">
<nav class="navbar navbar-expand-lg navbar-dark sticky-top bg-dark shadow-lg">
<a class="navbar-brand" href="#">
2023-02-23 11:31:22 -07:00
<img src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.webp" 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 dropdown">
<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></li>
<li class="nav-item">
<a class="navbar-link" href="#art">ART</a>
</li>
<li><span class="navbar-text d-none d-sm-block">|</span></li>
<li class="nav-item">
<a class="navbar-link" href="#social">SOCIAL</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">
2023-05-02 17:41:23 -06:00
<div class="col-lg-1"></div>
<div class="col-lg-3">
2023-04-30 00:00:23 -06:00
<img class="main-logo" src="img/branding/LunarPenguin_newPalette_transparency.webp"/>
</div>
2023-05-02 17:41:23 -06:00
<div class="col-lg-1"></div>
<div class="col-lg-7">
<p>Greetings! I am <span title="pronounced 'Kai'">Kaj Forney</span> (he/him). I am a human who enjoys
pixel art, programming, and penguins.</p>
<p>I am currently a sophomore student at Boise State University, majoring in Games, Interactive Media,
2023-05-02 18:02:16 -06:00
and Mobile Technology.<br>My goal is to learn how to use games to help make the world a brighter place.</p>
<p>Currently, my primary focus is learning and building my skills in UX, level design, and 3D modeling.</p>
<p>This site displays a few of the things I've made or helped to make.</p>
</div>
</div>
</div>
</div>
<div id="gamesMade"></div>
<div class="mt-5"></div>
<hr/>
<div class="container-lg">
<div class="row">
<div class="col">
<h1 class="section-title">GAMES I MADE</h1>
</div>
</div>
<div class="container-md card">
<div class="card-body">
<div class="row">
<div class="col-sm-4">
<h2>
<a class="game-link" href="https://lunarpenguin.itch.io/the-climb">The Climb</a>
</h2>
<hr/>
<p>[2021, Win/Mac/Linux]</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">
2023-02-23 12:48:48 -07:00
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="youtube-video" data-embed="N5unzGlC9ME">
<div class="playButton"></div>
</div>
</div>
2023-02-23 12:48:48 -07:00
<div class="col-sm-2"></div>
</div>
<div class="row mt-3">
2023-02-23 12:48:48 -07:00
<iframe loading="lazy"
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"
aria-label="The Climb on Itch.io">
<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>
<a class="game-link" href="https://lunarpenguin.itch.io/last-minute">Last Minute</a>
</h2>
<hr/>
<p>[2020, Win/Mac/Linux]</p>
</div>
<div class="col-sm-8">
<p>This is a tiny game I made for a community game jam in 2020. I primarily made it to work on
2023-05-02 17:41:23 -06:00
learning the basics of a new engine. Thus, it isn't the most polished game, but it's still
one I enjoyed making.</p>
2023-05-02 17:41:23 -06:00
<p>This project was my first experience using the open-source Godot Engine.</p>
</div>
<div class="mt-4"></div>
<div class="row mt-3">
2023-02-23 12:48:48 -07:00
<iframe loading="lazy"
src="https://itch.io/embed/689456?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044"
aria-label="Last Minute on Itch.io">
<a href="https://lunarpenguin.itch.io/last-minute">Last Minute by Lunar_Penguin</a></iframe>
</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>
<a class="game-link" href="https://store.steampowered.com/app/628740/Mr_Saitou/">Mr. Saitou</a>
</h2>
<hr/>
2023-03-27 21:15:57 -06:00
<p>[2023, Win/Mac/Linux/Switch]</p>
2023-04-14 14:34:56 -06:00
<p>[Localization/QA]</p>
</div>
<div class="col-sm-8">
2023-04-30 00:00:23 -06:00
<p>I assisted in a minor role with Mr. Saitou, a game created by Laura Shigihara (Morizora Studios).
My role in the project primarily involved organizing a team of various testers and translators,
as well as providing additional QA testing across Windows, Linux, and Nintendo Switch.</p>
2023-05-02 17:41:23 -06:00
<p>In addition, I created the localized versions of the game's graphical assets used for eight of
the
2023-04-30 00:00:23 -06:00
languages for the PC release, while maintaining their original visual style.</p>
</div>
</div>
<div class="mt-5"></div>
2023-02-21 18:21:43 -07:00
<div class="row">
2023-05-02 17:41:23 -06:00
<div class="col">
<div id="saitouCarousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#saitouCarousel" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#saitouCarousel" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#saitouCarousel" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#saitouCarousel" data-bs-slide-to="3"
aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/art/Long%20Day%20Club_en.png" class="d-block w-100 saitouItem"
alt="" loading="lazy">
<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/Long%20Day%20Club_it.png" class="d-block w-100 saitouItem" alt=""
loading="lazy">
<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/Long%20Day%20Club_uk.png" class="d-block w-100 saitouItem" alt=""
loading="lazy">
<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/Long%20Day%20Club_vi.png" class="d-block w-100 saitouItem" alt=""
loading="lazy">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow"></h5>
<p class="text-shadow"></p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#saitouCarousel" 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="#saitouCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
2023-02-23 12:48:48 -07:00
</div>
2023-02-21 18:21:43 -07:00
</div>
</div>
</div>
2023-05-02 17:41:23 -06:00
<div class="container-md card mt-5">
<div class="card-body">
<div class="row mt-5">
<div class="col-sm-4">
<h2>
2023-05-03 11:37:23 -06:00
<a class="game-link" href="https://lopar.itch.io/megashigi">Mega<wbr>shigi</a>
2023-05-02 17:41:23 -06:00
</h2>
<hr/>
<p>[2020, Win/Mac/Linux]</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>
<p>This project provided me with an opportunity to dive into the Godot Engine further, as well as
learn to work on a complex project as part of a team.</p>
</div>
2023-02-23 12:48:48 -07:00
</div>
2023-05-02 17:41:23 -06:00
<div class="mt-4"></div>
2023-05-02 17:41:23 -06:00
<div class="row mt-3">
<iframe loading="lazy"
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"
aria-label="Megashigi on Itch.io">
<a href="https://lopar.itch.io/megashigi">MEGASHIGI by Lopar</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">
2023-02-21 18:21:43 -07:00
<button type="button" data-bs-target="#artCarousel" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
2023-02-21 18:21:43 -07:00
<button type="button" data-bs-target="#artCarousel" data-bs-slide-to="1"
aria-label="Slide 2"></button>
2023-02-21 18:21:43 -07:00
<button type="button" data-bs-target="#artCarousel" data-bs-slide-to="2"
aria-label="Slide 3"></button>
2023-02-21 18:21:43 -07:00
<button type="button" data-bs-target="#artCarousel" data-bs-slide-to="3"
aria-label="Slide 4"></button>
2023-02-21 18:21:43 -07:00
<button type="button" data-bs-target="#artCarousel" data-bs-slide-to="4"
aria-label="Slide 5"></button>
2023-02-21 18:21:43 -07:00
<button type="button" data-bs-target="#artCarousel" data-bs-slide-to="5"
aria-label="Slide 6"></button>
2023-02-21 18:21:43 -07:00
<button type="button" data-bs-target="#artCarousel" data-bs-slide-to="6"
aria-label="Slide 7"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
2023-02-23 12:48:48 -07:00
<img src="img/art/rakuenDoor.webp" class="d-block w-100"
alt="A 3D rendering of a magical door floating in a void." loading="lazy">
<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">
2023-02-23 12:48:48 -07:00
<img src="img/art/airship1.webp" class="d-block w-100" alt="A 3D rendering of a sci-fi airship."
loading="lazy">
<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">
2023-02-23 12:48:48 -07:00
<img src="img/art/airship2.webp" class="d-block w-100" alt="A 3D rendering of a sci-fi airship."
loading="lazy">
<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">
2023-02-23 12:48:48 -07:00
<img src="img/art/cat.webp" class="d-block w-100" alt="A digital painting of a tabby cat."
loading="lazy">
<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">
2023-02-23 12:48:48 -07:00
<img src="img/art/portrait_dad.webp" class="d-block w-100" alt="Digital art of a man's face."
loading="lazy">
<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">
2023-02-23 12:48:48 -07:00
<img src="img/art/dadKaj.webp" class="d-block w-100"
alt="Digital art of a father and son, standing next to a radio antenna." loading="lazy">
<div class="carousel-caption d-none d-md-block"></div>
</div>
<div class="carousel-item">
2023-02-23 12:48:48 -07:00
<img src="img/art/symbolSet_fullSet.webp" class="d-block w-100"
alt="A collection of robot faces, made with vector art." loading="lazy">
<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-video" data-embed="LaloFVeUvOk">
<div class="playButton"></div>
</div>
</div>
<div class="col-sm">
<div class="youtube-video" data-embed="ahQPl9FOX7A">
<div class="playButton"></div>
</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>
2023-04-30 00:00:23 -06:00
<!--My email is intentionally absent... I don't like the idea of putting a working email address directly on a public-facing site.
If I were to do that, it would look something like this, and would be in the table below:
<div class="col">
<a href="mailto:kaj@example.com" target="_blank" aria-label="Email">
<h2 title="Email">
<i class="fa-solid fa-envelope"></i>
</h2>
</a>
</div> -->
<div class="row">
<div class="col">
2023-02-21 18:36:04 -07:00
<a href="https://youtube.com/@lunar_penguin" target="_blank" aria-label="YouTube">
<h2 title="YouTube">
<i class="fa-brands fa-youtube"></i>
</h2>
</a>
</div>
<div class="col">
2023-02-21 18:36:04 -07:00
<a href="https://twitch.tv/lunar_penguin" target="_blank" aria-label="Twitch">
<h2 title="Twitch.tv">
<i class="fa-brands fa-twitch"></i>
</h2>
</a>
</div>
<div class="col">
2023-03-29 21:16:38 -06:00
<a rel="me" href="https://peoplemaking.games/@lunar_penguin" target="_blank" aria-label="Mastodon">
<h2 title="Mastodon">
<i class="fa-brands fa-mastodon"></i>
</h2>
</a>
</div>
<div class="col">
2023-02-21 18:36:04 -07:00
<a href="https://www.linkedin.com/in/kajforney/" target="_blank" aria-label="LinkedIn">
<h2 title="LinkedIn">
<i class="fa-brands fa-linkedin"></i>
</h2>
</a>
</div>
</div>
<div class="row">
<div class="col">
2023-02-21 18:36:04 -07:00
<a href="https://lunarpenguin.itch.io" target="_blank" aria-label="Itch.io">
<h2 title="Itch.io">
<i class="fa-brands fa-itch-io"></i>
</h2>
</a>
</div>
<div class="col">
2023-02-21 18:36:04 -07:00
<a href="https://github.com/kforney" target="_blank" aria-label="GitHub">
<h2 title="Github">
<i class="fa-brands fa-github"></i>
</h2>
</a>
</div>
<div class="col">
2023-02-21 18:36:04 -07:00
<a href="https://artstation.com/lunar_penguin" target="_blank" aria-label="ArtStation">
<h2 title="ArtStation">
<i class="fa-brands fa-artstation"></i>
</h2>
</a>
</div>
<div class="col">
2023-02-21 18:36:04 -07:00
<a href="https://lunar--penguin.tumblr.com" target="_blank" aria-label="Tumblr">
<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>
2023-02-21 18:36:04 -07:00
<script src="js/vendor/modernizr-3.11.2.min.js" defer></script>
<script src="js/plugins.js" defer></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"
2023-02-21 18:25:23 -07:00
crossorigin="anonymous" defer></script>
<script>
//For setting footer text with current copyright year.
document.getElementById("footerText").innerHTML = "Copyright © Kaj Forney 2018-" + new Date(Date.now()).getFullYear();
</script>
<script>
//This script is for improving page performance by not loading YouTube iFrames until actually necessary.
//Code is originally from https://stackoverflow.com/questions/50410828/how-to-prevent-youtube-js-calls-from-slowing-down-page-load
//and was then modified by me as necessary.
2023-02-23 12:48:48 -07:00
let youtube = document.querySelectorAll(".youtube-video");
for (let i = 0; i < youtube.length; i++) {
let source = "https://i.ytimg.com/vi_webp/" + youtube[i].dataset.embed + "/maxresdefault.webp";
let image = new Image();
image.src = source;
2023-02-23 12:48:48 -07:00
image.alt = "YouTube thumbnail image.";
image.loading = "lazy";
2023-02-23 12:48:48 -07:00
image.addEventListener("load", function () {
youtube[i].appendChild(image);
}(i));
youtube[i].addEventListener("click", function () {
let iframe = document.createElement("iframe");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
iframe.setAttribute("src", "https://www.youtube-nocookie.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=1");
this.innerHTML = "";
2023-02-23 12:48:48 -07:00
this.appendChild(iframe);
});
}
</script>
</body>
2022-12-04 22:21:44 -07:00
</html>