kayomn.net/templates/index.html

{% extends "base.html" %}

{% block content %}
<h1>My Work</h1>

<div class="columns">
	<div style="min-width: 70%;">
		<div class="slideshow">
			<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 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 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>

		<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 %}
	</div>
</div>

<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 = 5; 

	window.addEventListener("load", async () => {
		let slideshows = document.getElementsByClassName("slideshow");

		for (let slideshow of slideshows) {
			if (!slideshow.hasChildNodes()) {
				continue;
			}

			let slideIndex = 0;
			let intervalId;

			const startSlideshow = () => {
				intervalId = 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);
			};

			slideshow.addEventListener("mouseenter", () => {
				clearInterval(intervalId);
			});

			slideshow.addEventListener("mouseleave", startSlideshow);

			let children = slideshow.children;
			children[0].style.display = "block";

			for (let index = 1; index < children.length; index += 1) {
				children[index].style.display = "none";
			}

			startSlideshow();
		}
	});
</script>
{% endblock content %}