kforney/kforney.github.io
1
0
Fork 0
mirror of https://github.com/kforney/kforney.github.io.git synced 2024-05-08 15:33:35 -06:00
Code Issues Packages Projects Releases Wiki Activity

Aesthetic changes.

Browse source
This commit is contained in:
Kaj Forney 2023-02-07 17:27:53 -07:00
parent ad1f96ef20
commit 23d2be2d19
Signed by: kforney
GPG key ID: 3AB4E2E04CEF656F
3 changed files with 61 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
css/main.css
View file

@ -86,6 +86,21 @@ textarea {
/* ==========================================================================
Author's custom styles
========================================================================== */
/* Color Palette:
BACKGROUND
#283044 RGBA(40, 48, 68, 1) HSL(223, 26%, 21%)
#161A25 RGBA(22, 26, 37, 1) HSL(224, 25%, 12%)
TEXT
#78A1BB RGBA(120, 161, 187, 1) HSL(203, 33%, 60%)
#385B70 RGBA(56, 91, 112, 1) HSL(203, 33%, 33%)
ACCENTS
#FFBC42 RGBA(255, 188, 66, 1) HSL(39, 100%, 63%)
#B17300 RGBA(177, 115, 0, 1) HSL(39, 100%, 35%)
*/
body, html {
margin: 0;
}
@ -186,6 +201,11 @@ iframe[src*=itch]
padding-top: 7px;
}
.navbar-brand:hover {
color: #78a1bb;
text-shadow: #B17300 2px 2px 3px;
}
.navbar-link {
color: #FFBC42;
font-family: VT323, monospace;
@ -196,13 +216,14 @@ iframe[src*=itch]
}
.navbar-link:hover {
color: #FFFFFF;
text-decoration: underline;
color: #78a1bb;
text-shadow: #B17300 2px 2px 3px;
}
.card {
background-color: RGBA(22, 26, 37, 70%);
border-radius: 30px;
box-shadow: #B17300 0px 0px 20px;
}
.text-shadow {
@ -230,6 +251,11 @@ iframe[src*=itch]
color: #FFBC42;
}
.fa-brands:hover {
color: #78a1bb;
text-shadow: #B17300 2px 2px 3px;
}
.footer {
width: 100%;
height: 60px;
@ -240,6 +266,18 @@ iframe[src*=itch]
color: steelblue;
}
@media screen and (min-width: 700px) {
#social {
font-size: 64px;
}
}
@media screen and (max-width: 699px) {
#social {
font-size: 45px;
}
}
@font-face {
font-family: VT323;
src: url("https://kforney.github.io/fonts/VT323-Regular.ttf");

36
index.html
View file

@ -10,7 +10,7 @@
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
@ -73,8 +73,6 @@
<div class="mt-5"></div>
<hr />
<div class="container-lg">
<div class="row">
<div class="col">
@ -88,20 +86,25 @@
<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. Later, I updated the game to add additional levels, as well as improved lighting using Unity's 2D Lighting system via the Universal Render Pipeline.</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>
<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" frameborder="0" 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 class="row mt-3">
<iframe src="https://itch.io/embed/1308115?border_width=0&amp;bg_color=283044&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044" frameborder="0"><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&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>
@ -112,14 +115,18 @@
<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 in the Godot Engine, along with a few 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 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 class="mt-4"></div>
<div class="row mt-3">
<iframe src="https://itch.io/embed/630032?border_width=0&amp;bg_color=283044&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044" frameborder="0"><a href="https://lopar.itch.io/megashigi">The Climb by Lunar_Penguin</a></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>
</div>
</div>
</div>
@ -153,28 +160,28 @@
<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</h5>
<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</h5>
<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</h5>
<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</h5>
<h5 class="text-shadow">DIGITAL PORTRAIT [2021]</h5>
<p class="text-shadow">A digital painting of my cat, Okapi.</p>
</div>
</div>
@ -227,7 +234,7 @@
<div class="container-lg mw-25 w-50">
<div class="row">
<h1 id="social">Other Places I Exist</h1>
<h1 id="social">OTHER PLACES I EXIST</h1>
</div>
<div class="row">
<div class="col">
@ -304,8 +311,7 @@
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script>
document.getElementById("footerText").innerHTML = "Copyright © Kaj Forney 2018-" + new Date(Date.now()).getFullYear();

0
js/main.js
View file