Update website
This commit is contained in:
parent
789500aead
commit
a8e1b39023
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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)
BIN
static/showreel/afterglow-menu.png (Stored with Git LFS)
Binary file not shown.
Binary file not shown.
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 %}
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<div>{{ page.title }}</div>
|
<div>{{ page.title }}</div>
|
||||||
<div>{{ page.description }}</div>
|
<div>{{ page.description }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<article>{{ page.content | safe }}</article>
|
<article>{{ page.content | safe }}</article>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue