Update website
This commit is contained in:
parent
789500aead
commit
a8e1b39023
|
|
@ -74,6 +74,14 @@ body .banner > *:first-child {
|
|||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
body .columns {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body .columns > *:not(:last-child) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
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>
|
||||
<header><a href="/"><img src="/logo.png" /></a></header>
|
||||
|
||||
<main>
|
||||
{% block content %}{% endblock content %}
|
||||
<main style="min-height: 700px;">
|
||||
{% block content %}{% endblock content %}
|
||||
</main>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,178 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% 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 %}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
{% block content %}
|
||||
<div class="banner">
|
||||
<div>{{ page.title }}</div>
|
||||
<div>{{ page.description }}</div>
|
||||
<div>{{ page.title }}</div>
|
||||
<div>{{ page.description }}</div>
|
||||
</div>
|
||||
|
||||
<article>{{ page.content | safe }}</article>
|
||||
|
|
|
|||
Loading…
Reference in New Issue