This commit is contained in:
@@ -1,107 +1,181 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
import portrait from '$lib/assets/stan.jpg?url';
|
||||
import ProgressBar from '$lib/components/ProgressBar.svelte';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data }: PageProps = $props();
|
||||
|
||||
const projects = [
|
||||
{
|
||||
name: 'vash esports',
|
||||
subtitle: 'the best way to play osu!',
|
||||
href: 'https://esports.vash.software',
|
||||
external: true
|
||||
},
|
||||
{
|
||||
name: 'catchemall',
|
||||
subtitle: 'catch 1025 pokemon across 53 games',
|
||||
href: '/projects/catch-em-all',
|
||||
external: false
|
||||
},
|
||||
{
|
||||
name: 'animaldex',
|
||||
subtitle: 'add neighborhood pets to the world map 😼',
|
||||
href: '/projects/animaldex',
|
||||
external: false
|
||||
},
|
||||
{
|
||||
name: 'osu! map finder',
|
||||
subtitle: 'find osu! maps for Spotify songs/albums/playlists',
|
||||
href: '/projects/spotify-beatmap-finder',
|
||||
external: false
|
||||
},
|
||||
{
|
||||
name: 'derby lens',
|
||||
subtitle: 'estimate odds for horse betting',
|
||||
href: '/projects/derby',
|
||||
external: false
|
||||
}
|
||||
] as const;
|
||||
const experience = [
|
||||
{ when: '2026–now', role: 'associate software engineer', place: 'Cargill' },
|
||||
{
|
||||
when: '2021–2026',
|
||||
role: 'BSc computer science · software engineering',
|
||||
place: 'The Hague University of Applied Sciences'
|
||||
},
|
||||
{ when: '2026', role: 'software engineering intern', place: '3webapps' },
|
||||
{ when: '2023', role: 'software engineering intern', place: 'h5mag' },
|
||||
{ when: '2021–2023', role: 'junior IT specialist', place: 'Finance Plus' }
|
||||
] as const;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="preload" as="image" href={portrait} fetchpriority="high" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex justify-around py-8">
|
||||
<div class="max-w-150">
|
||||
<h2 class="font-bold text-2xl underline text-center">experience</h2>
|
||||
<div class="flex gap-2">
|
||||
<p class="min-w-28 text-right">2026 - <b>current</b></p>
|
||||
<div>
|
||||
<p class="font-bold">Associate Software Engineer</p>
|
||||
|
||||
<p>Cargill</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p class="min-w-28 text-right">2021 - 2026</p>
|
||||
<div>
|
||||
<p class="font-bold">BSc. Computer Science (Software Engineering)</p>
|
||||
<p>The Hague University of Applied Sciences</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p class="min-w-28 text-right">2026</p>
|
||||
<p class="font-bold">internship at 3webapps</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p class="min-w-28 text-right">2023</p>
|
||||
<p class="font-bold">internship at h5mag</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p class="min-w-28 text-right">2021 - 2023</p>
|
||||
<p class="font-bold">junior IT specialist at Finance Plus</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p class="min-w-28 text-right">2020 - <b>current</b></p>
|
||||
<p class="font-bold">300+ IT problems solved in Netherlands</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-8">
|
||||
<h1 class="font-black text-center text-4xl pb-8">Stan Runge</h1>
|
||||
<enhanced:img
|
||||
class="rounded-2xl"
|
||||
src="$lib/assets/stan.jpg?enhanced"
|
||||
alt="stan runge"
|
||||
sizes="(min-width: 768px) 760px, 90vw"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<p class="italic text-sm text-center py-2">
|
||||
me preparing for my presentation about <a href="https://arxiv.org/abs/2209.08167"
|
||||
>quantum vision transformers</a
|
||||
<div class="mx-auto max-w-6xl px-4 sm:px-6">
|
||||
<section
|
||||
class="grid items-center gap-8 pt-7 pb-12 sm:py-20 md:grid-cols-[minmax(0,1fr)_minmax(0,320px)] md:gap-16"
|
||||
>
|
||||
<div class="min-w-0 text-center md:text-left">
|
||||
<h1 class="text-5xl font-semibold tracking-[-0.055em] sm:text-6xl lg:text-7xl">stan runge</h1>
|
||||
<nav
|
||||
class="mt-7 grid grid-cols-2 justify-items-center gap-x-4 gap-y-3 text-base text-[var(--site-muted)] sm:flex sm:flex-wrap sm:justify-center sm:gap-x-6 md:justify-start"
|
||||
aria-label="Find me online"
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-100">
|
||||
<div>
|
||||
<h2 class="font-bold text-2xl underline text-center">projects</h2>
|
||||
<a
|
||||
href="https://git.stanrunge.dev/stan"
|
||||
rel="external"
|
||||
class="hover:text-[var(--site-text)]">git ↗</a
|
||||
>
|
||||
<a href="https://x.com/stanrunge" rel="external" class="hover:text-[var(--site-text)]"
|
||||
>twitter ↗</a
|
||||
>
|
||||
<a href="https://esports.vash.software" rel="external" class="hover:text-[var(--site-text)]"
|
||||
>vash esports ↗</a
|
||||
>
|
||||
<a href="mailto:stan@stanrunge.dev" class="hover:text-[var(--site-text)]">email ↗</a>
|
||||
</nav>
|
||||
</div>
|
||||
<img
|
||||
src={portrait}
|
||||
alt="Stan at his desk"
|
||||
width="760"
|
||||
height="746"
|
||||
loading="eager"
|
||||
decoding="sync"
|
||||
fetchpriority="high"
|
||||
class="aspect-square w-full max-w-80 justify-self-center rounded-md bg-[var(--site-surface)] object-cover md:justify-self-end"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<a href="https://esports.vash.software">
|
||||
<p class="font-bold text-xl">vash esports</p>
|
||||
<p>automated osu! matchmaking/tournament platform</p>
|
||||
</a>
|
||||
<div>
|
||||
<p class="font-bold text-xl">eudi-auth for 3webapps</p>
|
||||
<p>
|
||||
plugin for WooCommerce/Magento2 that adds authentication with the European Digital
|
||||
Identity (EUDI) wallet
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-xl">realtime collaboration for h5mag</p>
|
||||
<p>
|
||||
socket.io server for h5mag (magazine web editor) that broadcasts user actions to other
|
||||
editors, similar to writing a Google Doc together
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-xl">infra</p>
|
||||
<p>server, project deployments and dev config as code with setup script</p>
|
||||
</div>
|
||||
<a href={resolve('/projects/animaldex')}>
|
||||
<p class="font-bold text-xl">animaldex</p>
|
||||
<p>world map with pets & other animals around the neighborhood 😼</p>
|
||||
</a>
|
||||
<a href={resolve('/projects/catch-em-all')}>
|
||||
<p class="font-bold text-xl">catch em all</p>
|
||||
<p>table of all 1025 pokemon across 38 games with checkboxes for catching them all</p>
|
||||
</a>
|
||||
<a href={resolve('/projects/spotify-beatmap-finder')}>
|
||||
<p class="font-bold text-xl">spotify osu! map finder</p>
|
||||
<p>small tool for finding osu! maps using a spotify url of a song or playlist</p>
|
||||
</a>
|
||||
<a href="https://beeriokart.stanrunge.dev">
|
||||
<p class="font-bold text-xl">beerio kart</p>
|
||||
<div>Go</div>
|
||||
<p>webserver in go with a double-elim bracket for a one-time mario kart tournament</p>
|
||||
</a>
|
||||
<section aria-labelledby="projects-heading" class="border-t border-[var(--site-border)] pt-8">
|
||||
<h2 id="projects-heading" class="mb-4 text-2xl font-semibold tracking-tight">
|
||||
<a href={resolve('/projects')} class="hover:text-[var(--site-muted)]">projects ↗</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{#each projects as project (project.name)}
|
||||
<li class="border-b border-[var(--site-border)] text-lg">
|
||||
{#if project.external}
|
||||
<a
|
||||
href={project.href}
|
||||
rel="external"
|
||||
class="flex items-center justify-between gap-4 py-4 hover:text-[var(--site-muted)]"
|
||||
>
|
||||
<span class="min-w-0">
|
||||
<span class="block">{project.name}</span>
|
||||
<span class="mt-1 block text-base text-[var(--site-muted)]">{project.subtitle}</span
|
||||
>
|
||||
</span><span aria-hidden="true" class="shrink-0 text-[var(--site-muted)]">↗</span>
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
href={resolve(project.href)}
|
||||
class="flex items-center justify-between gap-4 py-4 hover:text-[var(--site-muted)]"
|
||||
>
|
||||
<span class="min-w-0">
|
||||
<span class="block">{project.name}</span>
|
||||
<span class="mt-1 block text-base text-[var(--site-muted)]">{project.subtitle}</span
|
||||
>
|
||||
</span><span aria-hidden="true" class="shrink-0 text-[var(--site-muted)]">↗</span>
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<p>+ a lot more planned (soon™)</p>
|
||||
</div>
|
||||
</div>
|
||||
<section aria-labelledby="lists-heading" class="pt-14 sm:pt-20">
|
||||
<h2 id="lists-heading" class="mb-4 text-2xl font-semibold tracking-tight">
|
||||
<a href={resolve('/lists')} class="hover:text-[var(--site-muted)]">lists ↗</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{#each data.lists as list (list.id)}
|
||||
<li class="border-b border-[var(--site-border)] text-lg">
|
||||
<a
|
||||
href={resolve('/lists/[slug]', { slug: list.slug })}
|
||||
class="block py-4 hover:text-[var(--site-muted)]"
|
||||
>
|
||||
<span class="flex flex-wrap items-center justify-between gap-x-6 gap-y-1">
|
||||
<span>{list.name}</span>
|
||||
<span class="text-base text-[var(--site-muted)]">
|
||||
{#if list.isProgress && data.user}
|
||||
{list.total ? Math.round((list.checked / list.total) * 100) : 0}% · {list.checked}/{list.total}
|
||||
{:else}
|
||||
{list.total} {list.total === 1 ? 'item' : 'items'}
|
||||
{/if} ↗
|
||||
</span>
|
||||
</span>
|
||||
{#if list.isProgress}<span class="mt-3 block"
|
||||
><ProgressBar
|
||||
value={list.checked}
|
||||
max={list.total}
|
||||
label={`Progress on ${list.name}`}
|
||||
small
|
||||
/></span
|
||||
>{/if}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="experience-heading" class="pt-14 sm:pt-20">
|
||||
<h2 id="experience-heading" class="mb-4 text-2xl font-semibold tracking-tight">experience</h2>
|
||||
<ol>
|
||||
{#each experience as item (item.when + item.place)}
|
||||
<li
|
||||
class="grid gap-1 border-t border-[var(--site-border)] py-4 sm:grid-cols-[minmax(0,1fr)_130px] sm:gap-6"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<h3 class="font-medium">{item.role}</h3>
|
||||
<p class="mt-1 text-base text-[var(--site-muted)]">{item.place}</p>
|
||||
</div>
|
||||
<span class="text-base text-[var(--site-muted)] sm:text-right">{item.when}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user