kforney/kforney.github.io
1
0
Fork 0
mirror of https://github.com/kforney/kforney.github.io.git synced 2024-11-14 19:10:10 -07:00
Code Issues Projects Releases Packages Wiki Activity

Revert "Merge changes."

Browse source 
This reverts commit 8cf217ca9f.
This commit is contained in:
Kaj Forney 2023-02-14 19:19:13 -07:00
parent 8cf217ca9f
commit 048a29870b
Signed by: kforney
GPG key ID: 3AB4E2E04CEF656F
2 changed files with 499 additions and 638 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
css/main.css
View file

@ -101,13 +101,12 @@ textarea {
#B17300 RGBA(177, 115, 0, 1) HSL(39, 100%, 35%) #B17300 RGBA(177, 115, 0, 1) HSL(39, 100%, 35%)
*/ */
body, body, html {
html {
margin: 0; margin: 0;
} }
body { body {
background-color: #161a25; background-color: #161A25;
background-image: url("/img/branding/backgroundSmall.png"); background-image: url("/img/branding/backgroundSmall.png");
} }
@ -116,31 +115,31 @@ a {
} }
h1 { h1 {
font-family: VT323; font-family: VT323;
font-size: 64px; font-size: 64px;
color: #ffbc42; color: #FFBC42;
text-align: center; text-align: center;
} }
h2 { h2{
font-family: Oswald; font-family: Oswald;
font-size: 64px; font-size: 64px;
color: #78a1bb; color: #78a1bb;
text-align: center; text-align: center;
} }
h5 { h5 {
font-family: "IBM Plex Mono", monospace; font-family: 'IBM Plex Mono', monospace;
font-size: 28px; font-size: 28px;
color: #78a1bb; color: #78a1bb;
text-align: center; text-align: center;
} }
p { p {
font-family: "IBM Plex Sans", sans-serif; font-family: 'IBM Plex Sans', sans-serif;
font-size: 20px; font-size: 20px;
color: #78a1bb; color: #78a1bb;
text-align: center; text-align: center;
} }
hr { hr {
@ -150,15 +149,17 @@ hr {
margin-right: auto; margin-right: auto;
} }
iframe[src*="youtube"] { iframe[src*=youtube]
{
text-align: center; text-align: center;
display: block; display: block;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
max-width: 80%; max-width:80%;
} }
iframe[src*="itch"] { iframe[src*=itch]
{
text-align: center; text-align: center;
display: block; display: block;
margin-right: auto; margin-right: auto;
@ -183,7 +184,7 @@ iframe[src*="itch"] {
.navbar-brand { .navbar-brand {
font-family: VT323; font-family: VT323;
font-size: 36px; font-size: 36px;
color: #ffbc42; color: #FFBC42;
} }
.navbar-text { .navbar-text {
@ -195,7 +196,7 @@ iframe[src*="itch"] {
.navbar-logo { .navbar-logo {
max-height: 50px; max-height: 50px;
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left:15px;
padding-bottom: 6px; padding-bottom: 6px;
} }
@ -205,11 +206,11 @@ iframe[src*="itch"] {
.navbar-brand:hover { .navbar-brand:hover {
color: #78a1bb; color: #78a1bb;
text-shadow: #b17300 2px 2px 3px; text-shadow: #B17300 2px 2px 3px;
} }
.navbar-link { .navbar-link {
color: #ffbc42; color: #FFBC42;
font-family: VT323, monospace; font-family: VT323, monospace;
font-size: 36px; font-size: 36px;
padding-left: 50px; padding-left: 50px;
@ -219,23 +220,23 @@ iframe[src*="itch"] {
.navbar-link:hover { .navbar-link:hover {
color: #78a1bb; color: #78a1bb;
text-shadow: #b17300 2px 2px 3px; text-shadow: #B17300 2px 2px 3px;
} }
.card { .card {
background-color: RGBA(22, 26, 37, 70%); background-color: RGBA(22, 26, 37, 70%);
border-radius: 30px; border-radius: 30px;
box-shadow: #b17300 0px 0px 20px; box-shadow: #B17300 0px 0px 20px;
} }
.text-shadow { .text-shadow {
text-shadow: #ffbc42 1px 1px 2px; text-shadow: #ffbc42 1px 1px 2px;
} }
.section-title { .section-title{
padding-top: 5px; padding-top: 5px;
padding-bottom: 10px; padding-bottom: 10px;
text-shadow: #b17300 3px 3px 3px; text-shadow: #B17300 3px 3px 3px;
} }
.youtube-container { .youtube-container {
@ -262,14 +263,13 @@ iframe[src*="itch"] {
.fa-brands:hover { .fa-brands:hover {
color: #78a1bb; color: #78a1bb;
text-shadow: #b17300 2px 2px 3px; text-shadow: #B17300 2px 2px 3px;
} }
.footer { .footer {
width: 100%; width: 100%;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
text-align: center;
} }
#footerText { #footerText {
@ -299,12 +299,12 @@ iframe[src*="itch"] {
} }
@font-face { @font-face {
font-family: "IBM Plex Mono", monospace; font-family: 'IBM Plex Mono', monospace;
src: url("https://kforney.github.io/fonts/IBMPlexMono-Regular.ttf"); src: url("https://kforney.github.io/fonts/IBMPlexMono-Regular.ttf");
} }
@font-face { @font-face {
font-family: "IBM Plex Sans", sans-serif; font-family: 'IBM Plex Sans', sans-serif;
src: url("https://kforney.github.io/fonts/IBMPlexSans-Regular.ttf"); src: url("https://kforney.github.io/fonts/IBMPlexSans-Regular.ttf");
} }
@ -318,7 +318,7 @@ iframe[src*="itch"] {
.hidden, .hidden,
[hidden] { [hidden] {
display: none !important; display: none !important;
} }
/* /*
@ -481,3 +481,4 @@ iframe[src*="itch"] {
page-break-after: avoid; page-break-after: avoid;
} }
} }

274
index.html
View file

@ -1,47 +1,33 @@
<!DOCTYPE html> <!doctype html>
<html lang="en-us"> <html lang="en-us">
<head>
<meta charset="utf-8" /> <head>
<meta charset="utf-8">
<title></title> <title></title>
<meta name="description" content="" /> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1">
<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 rel="stylesheet" href="css/bootstrap.min.css">
<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">
<meta name="theme-color" content="#fafafa" /> <meta name="theme-color" content="#fafafa">
<script <script src="https://kit.fontawesome.com/55072ce5fd.js" crossorigin="anonymous"></script>
src="https://kit.fontawesome.com/55072ce5fd.js"
crossorigin="anonymous"
></script>
</head>
<body class="parallax"> </head>
<nav
class="navbar navbar-expand-lg navbar-dark sticky-top bg-dark shadow-lg" <body class="parallax">
>
<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 <img src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.png" alt="Logo" class="navbar-logo">
src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.png"
alt="Logo"
class="navbar-logo"
/>
Kaj Forney Kaj Forney
</a> </a>
<button <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
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>
@ -60,9 +46,7 @@
</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">
<a class="navbar-link" href="files/resume.pdf" target="_blank" <a class="navbar-link" href="files/resume.pdf">RESUME</a>
>RESUME</a
>
</li> </li>
</ul> </ul>
</div> </div>
@ -79,15 +63,9 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<p> <p>Greetings! I am a human who enjoys pixel art, programming, and penguins.</p>
Greetings! I am a human who enjoys pixel art, programming, and
penguins.
</p>
<p>Sometimes, I also make games.</p> <p>Sometimes, I also make games.</p>
<p> <p>This site displays a few of the things I've made or helped to make.</p>
This site displays a few of the things I've made or helped to
make.
</p>
</div> </div>
</div> </div>
</div> </div>
@ -97,7 +75,7 @@
<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">
@ -108,24 +86,16 @@
<div class="container-md card"> <div class="container-md card">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<h2>The Climb</h2> <h2>The Climb</h2>
<hr /> <hr/>
<p>[2021]</p> <p>[2021]</p>
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
<p> <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>
The Climb is a small game I created in Unity, originally as part <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>
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> </div>
@ -133,24 +103,14 @@
<div class="row"> <div class="row">
<div class="youtube-container"> <div class="youtube-container">
<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>
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 <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>
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>
</div> </div>
@ -159,29 +119,18 @@
<div class="row mt-5"> <div class="row mt-5">
<div class="col-sm-4"> <div class="col-sm-4">
<h2>Megashigi</h2> <h2>Megashigi</h2>
<hr /> <hr/>
<p>[2020]</p> <p>[2020]</p>
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
<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>
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 <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>
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> </div>
@ -191,9 +140,10 @@
<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">ART</h1> <h1 class="section-title">ART</h1>
@ -204,145 +154,68 @@
<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 <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
type="button" <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
data-bs-target="#carouselExampleCaptions" <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
data-bs-slide-to="0" <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
class="active" <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
aria-current="true" <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
aria-label="Slide 1" <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="6" aria-label="Slide 7"></button>
></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>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item active"> <div class="carousel-item active">
<img <img src="img/art/rakuenDoor.png" class="d-block w-100" alt="...">
src="img/art/rakuenDoor.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">RAKUEN ART [2022]</h5> <h5 class="text-shadow">RAKUEN ART [2022]</h5>
<p class="text-shadow"> <p class="text-shadow">A scene from the game <i>Rakuen</i>, recreated in Blender.</p>
A scene from the game <i>Rakuen</i>, recreated in Blender.
</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img <img src="img/art/airship1.png" class="d-block w-100" alt="...">
src="img/art/airship1.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">AIRSHIP MODEL [2022]</h5> <h5 class="text-shadow">AIRSHIP MODEL [2022]</h5>
<p class="text-shadow">Created in Blender</p> <p class="text-shadow">Created in Blender</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img <img src="img/art/airship2.png" class="d-block w-100" alt="...">
src="img/art/airship2.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">AIRSHIP MODEL [2022]</h5> <h5 class="text-shadow">AIRSHIP MODEL [2022]</h5>
<p class="text-shadow">Created in Blender.</p> <p class="text-shadow">Created in Blender.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="img/art/cat.png" class="d-block w-100" alt="..." /> <img src="img/art/cat.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">DIGITAL PORTRAIT [2021]</h5> <h5 class="text-shadow">DIGITAL PORTRAIT [2021]</h5>
<p class="text-shadow"> <p class="text-shadow">A digital painting of my cat, Okapi.</p>
A digital painting of my cat, Okapi.
</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img <img src="img/art/portrait_dad.png" class="d-block w-100" alt="...">
src="img/art/portrait_dad.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow"></h5> <h5 class="text-shadow"></h5>
<p class="text-shadow"></p> <p class="text-shadow"></p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="img/art/dadKaj.png" class="d-block w-100" alt="..." /> <img src="img/art/dadKaj.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"></div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img <img src="img/art/symbolSet_fullSet.png" class="d-block w-100" alt="...">
src="img/art/symbolSet_fullSet.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow"></h5> <h5 class="text-shadow"></h5>
<p class="text-shadow"></p> <p class="text-shadow"></p>
</div> </div>
</div> </div>
</div> </div>
<button <button class="carousel-control-prev" type="button" data-bs-target="#art-carousel" data-bs-slide="prev">
class="carousel-control-prev" <span class="carousel-control-prev-icon" aria-hidden="true"></span>
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> <span class="visually-hidden">Previous</span>
</button> </button>
<button <button class="carousel-control-next" type="button" data-bs-target="#art-carousel" data-bs-slide="next">
class="carousel-control-next" <span class="carousel-control-next-icon" aria-hidden="true"></span>
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> <span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
@ -352,24 +225,12 @@
<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 <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>
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 <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>
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> </div>
@ -377,7 +238,7 @@
<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">
@ -399,11 +260,7 @@
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<a <a rel="me" href="https://mastodon.gamedev.place/@lunar_penguin" target="_blank">
rel="me"
href="https://mastodon.gamedev.place/@lunar_penguin"
target="_blank"
>
<h2 title="Mastodon"> <h2 title="Mastodon">
<i class="fa-brands fa-mastodon"></i> <i class="fa-brands fa-mastodon"></i>
</h2> </h2>
@ -447,7 +304,9 @@
</a> </a>
</div> </div>
</div> </div>
<div class="row"></div> <div class="row">
</div>
</div> </div>
<div class="mt-5"></div> <div class="mt-5"></div>
@ -463,8 +322,9 @@
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script> <script>
document.getElementById("footerText").innerHTML = document.getElementById("footerText").innerHTML = "Copyright © Kaj Forney 2018-" + new Date(Date.now()).getFullYear();
"Copyright © Kaj Forney 2018-" + new Date(Date.now()).getFullYear();
</script> </script>
</body>
</body>
</html> </html>