---
order: 1
---
<article id="bio">
	{%include "../data/articles/home-bio.html"%}
</article>
<article id="interests">
	{%include "../data/articles/home-interests.html"%}
	<details open="">
		<summary>
			<h3>Games</h3>
		</summary>
		<ul class="games" role="list">
			{%for item in media-games.items%}
			<li>
				<a href="{{item.src}}">
				<span><img src="/assets/img/media/games/{{item.cover}}" alt=""/></span><span>{{item.title}}</span>
				</a>
			</li>
			{%endfor%}
		</ul>
	</details>
	<details open="">
		<summary>
			<h3>Albums</h3>
		</summary>
		<ul class="music" role="list">
			{%for item in media-albums.items%}
			<li>
				<a href="{{item.src}}">
				<span><img src="/assets/img/media/music/albums/{{item.cover}}" alt=""/></span><span>{{item.artist}} - {{item.title}}</span>
				</a>
			</li>
			{%endfor%}
		</ul>
	</details>
	<details open="">
		<summary>
			<h3>Tracker modules</h3>
		</summary>
		<ul class="music" role="list">
			{%for item in media-modules.items%}
			<li>
				<a href="{{item.src}}">
				<span><img src="/assets/img/media/music/{{item.tracker}}.png" alt=""/></span><span>{{item.artist}} - {{item.title}}</span>
				</a>
			</li>
			{%endfor%}
		</ul>
	</details>
	<details open="">
		<summary>
			<h3>Manga</h3>
		</summary>
		<ul class="manga" role="list">
			{%for item in media-manga.items%}
			<li>
				<a href="{{item.src}}">
				<span><img src="/assets/img/media/manga/{{item.cover}}" alt=""/></span><span>{{item.title}}</span>
				</a>
			</li>
			{%endfor%}
		</ul>
	</details>
</article>
<article id="badges">
	<nav>
		<h3>My buttons!</h3>
		<p>Link back to my site, if you'd like! Hotlinking is fine with me.</p>
		<ul role="list">
			{%for item in 88x31-mine.items%}
			<li>
				<a href="/" title="sunbun">
				<img
				{%if
				item.id%}id="{{item.id}}"
				{%endif%}
				src="/assets/img/button/sunbun_{{item.button}}"
				alt="Sunny's website"
				/>
				</a>
			</li>
			{%endfor%}
		</ul>
		<h3>Critters!</h3>
		<p>↓↓↓↓ awesome ↓↓↓↓</p>
		<ul role="list">
			{%for item in 88x31-critters.items%}
			<li>
				<a href="{{item.src}}" title="{{item.name}}">
				<img
				{%if
				item.id%}id="{{item.id}}"
				{%endif%}
				src="/assets/img/button/{{item.button}}"
				alt="{{item.alt}}"
				/>
				</a>
			</li>
			{%endfor%}
		</ul>
		<p>↑↑↑↑ awesome ↑↑↑↑</p>
		<h3>Fun!</h3>
		<p>i stole these off the highway</p>
		<ul role="list">
			{%for item in 88x31.items%}
			<li>
				<a href="{{item.src}}" title="{{item.name}}">
				<img
				{%if
				item.id%}id="{{item.id}}"
				{%endif%}
				src="/assets/img/button/{{item.button}}"
				alt="{{item.alt}}"
				/>
				</a>
			</li>
			{%endfor%}
		</ul>
		<script src="/assets/js/cat.js" type="module"></script>
		<script src="/assets/js/fox.js" type="module"></script>
		<script src="/assets/js/bob.js" type="module"></script>
		<script src="/assets/js/piss.js" type="module"></script>
	</nav>
	<section>
		<h2>Favorite Pokémon</h2>
		<p>These are randomized, but I like a lot of them.</p>
		<ul id="pkmn" role="list">
			<script src="/assets/js/fav-poke.js" type="module"></script>
		</ul>
	</section>
</article>