kayomn
/
kayomn.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update website

This commit is contained in:
kayomn 2024-06-23 23:48:29 +01:00
parent 789500aead
commit a8e1b39023
7 changed files with 203 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/base.css
View File

@ -74,6 +74,14 @@ body .banner > *:first-child {
font-size: 1.5em; font-size: 1.5em;
} }
body .columns {
display: flex;
}
body .columns > *:not(:last-child) {
margin-right: 20px;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
color: white; color: white;

11
static/scripts/gitea.js Normal file
View File

@ -0,0 +1,11 @@
const apiURL = "https://sauce.pizzawednes.day/api/v1/"
const jsonify = response => response.json()
/**
* Fetches a manifest of all public Github repositories belonging to a given user.
*
* @param {string} username Identifier of the target Github user.
* @returns @see Promise of an array containing all public repository metadata for a given user.
*/
export const fetchRepos = username => fetch(`${apiURL}users/${username}/repos`).then(jsonify)

BIN
static/showreel/afterglow-menu.png (Stored with Git LFS)
View File

Binary file not shown.

BIN
static/showreel/le-mans-ultimate-hud.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

4
templates/base.html
View File

@ -11,12 +11,12 @@
<body> <body>
<header><a href="/"><img src="/logo.png" /></a></header> <header><a href="/"><img src="/logo.png" /></a></header>
<main> <main style="min-height: 700px;">
{% block content %}{% endblock content %} {% block content %}{% endblock content %}
</main> </main>
<footer> <footer>
<span>Website designed and built by myself using the <a href="https://www.getzola.org/">Zola</a> site generator.</span> <span>Website written by <a href="https://sauce.pizzawednes.day/kayomn/kayomn.net">Me</a> and powered by the <a href="https://www.getzola.org/">Zola</a> site generation tool.</span>
</footer> </footer>
</body> </body>
</html> </html>

175
templates/index.html
View File

@ -1,5 +1,178 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
hello world <h1>My Work</h1>
<div class="columns">
<div class="slideshow" style="min-width: 70%;">
<a href="https://store.steampowered.com/app/2399420/Le_Mans_Ultimate/">
<div class="title">Le Mans Ultimate</div>
<img src="/showreel/le-mans-ultimate-hud.png" />
<div class="summary">World Endurance Championship racing simulation.</div>
</a>
<a href="https://www.youtube.com/watch?v=zm8Sx6cVbmM">
<div class="title">Afterglow</div>
<img src="/showreel/afterglow.png" />
<div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div>
</a>
<a href="https://www.youtube.com/watch?v=ijJhM8nfthw">
<div class="title">Afterglow</div>
<img src="/showreel/afterglow-menu.png" />
<div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div>
</a>
<a href="https://sauce.pizzawednes.day/protectorate/game">
<div class="title">Protectorate Map Editor</div>
<img src="/showreel/protectorate-interior-editor.png" />
<div class="summary">Interior map editor for a turn-based RPG-lite built in the Godot game engine.</div>
</a>
<a href="https://sauce.pizzawednes.day/protectorate/game">
<div class="title">Protectorate Map Editor</div>
<img src="/showreel/protectorate-exterior-editor.png" />
<div class="summary">Exterior map editor for a turn-based RPG-lite built in the Godot game engine.</div>
</a>
<a href="https://www.myenergygame.net/">
<div class="title">My Energy Game® Quest</div>
<img src="/showreel/my-energy-game-intro.png" />
<div class="summary">Sports therapy simulation designed to help athletes with their mental state.</div>
</a>
<a href="https://www.myenergygame.net/">
<div class="title">My Energy Game® Quest</div>
<img src="/showreel/my-energy-game-activity.png" />
<div class="summary">Sports therapy simulation designed to help athletes with their mental state.</div>
</a>
</div>
<div style="min-width: 30%;">
<div>Here's what I'm working on over at my <a href="https://sauce.pizzawednes.day/kayomn">Gitea instance</a>.</div>
<div id="git-feed"></div>
</div>
</div>
<h1>Articles</h1>
{% set blog_section = get_section(path="blog/_index.md") %}
{% for page in blog_section.pages %}
<div>
<a href="{{ page.permalink }}"><h2>{{ page.title }}</h2></a>
{% set day = page.date | date(format="%e") %}
{% set month = page.date | date(format="%B") %}
{% set year = page.date | date(format="%Y") %}
{% set day_suffix = "" %}
{% if day in ["1", "21", "31"] %}
{% set day_suffix = "st" %}
{% elif day in ["2", "22"] %}
{% set day_suffix = "nd" %}
{% elif day in ["3", "23"] %}
{% set day_suffix = "rd" %}
{% else %}
{% set day_suffix = "th" %}
{% endif %}
Posted {{ day }}{{ day_suffix }} {{ month }} {{ year }}
<p>{{ page.content | striptags | truncate(length=255) }}</p>
</div>
{% endfor %}
<style>
.slideshow {
min-height: 320px;
background-color: black;
position: relative;
color: white;
border-radius: 5px;
text-wrap: nowrap;
text-overflow: ellipsis;
}
.slideshow a {
color: white;
text-decoration: none;
}
.slideshow .title {
font-size: 1.5em;
font-weight: bold;
padding: 5px 15px;
}
.slideshow img {
max-width: 100%;
margin: auto;
display: block;
}
.slideshow .summary {
font-size: 1em;
font-weight: bold;
padding: 5px 15px;
}
</style>
<script type="module">
const slideshowIntervalSeconds = 7.5;
window.addEventListener("load", async () => {
let slideshows = document.getElementsByClassName("slideshow")
for (let slideshow of slideshows) {
if (!slideshow.hasChildNodes()) {
continue;
}
let slideIndex = 0
setInterval(() => {
let children = slideshow.children
slideIndex = (slideIndex + 1) % children.length
for (let index = 0; index < children.length; index += 1)
children[index].style.display = (index == slideIndex) ? "block" : "none"
}, slideshowIntervalSeconds * 1000)
let children = slideshow.children
children[0].style.display = "block"
for (let index = 1; index < children.length; index += 1) {
children[index].style.display = "none"
}
}
});
</script>
<script type="module">
import {fetchRepos} from "/scripts/gitea.js"
window.addEventListener("load", async () => {
const feed = document.getElementById("git-feed")
fetchRepos("kayomn").catch(reason => {
console.warn(reason)
feed.innerHTML = `<div style="font-style: italic;">Feed unavailable at this time.</div>`
}).then(repos => {
const htmlBlocks = []
for (const repo of repos.sort((a, b) => (b.stars_count - a.stars_count))) {
if (!repo.fork) htmlBlocks.push(`<div style="animation: slide-up 0.4s ease; margin: 15px 0;">
<a class="subtitle" href="${repo.html_url}">${repo.name}</a>
<div>${repo.description || `<span style="font-style: italic;">No description.</span>`}</div>
</div>`)
}
feed.innerHTML = htmlBlocks.join("\n")
})
})
</script>
{% endblock content %} {% endblock content %}