import { BasePage } from "./bases.js";
import { projects } from "./projects.js"
import { updates } from "./updates.js"

const title = "Hornwitser's Site";
export const index = {
	title,
	ref: "index.html",
	content: <BasePage title={title}>
		<main>
			<div class="hero" />
			<div class="author">
				<div style="width: 4em; height: 4em; background-color: grey" />
				<hgroup>
					<h1>Hi, I'm Hornwitser!</h1>
					<p>
						Grown up, he/him, aro, gray ace
					</p>
				</hgroup>
			</div>
			<p>
				I'm a red dragon that mostly dabble in hobby programming and the occasional artwork.
			</p>
			<h2>Latest <a href="./updates.html">Updates</a></h2>
			<ul>
				{ updates.map(update => <li><a href={"./" + update.ref}>{update.title}</a></li>)}
			</ul>
			<h2>Projects</h2>
			<ul>
				{ projects.map(project => <li><a href={"./" + project.ref}>{project.title}</a></li>)}
			</ul>
		</main>
	</BasePage>,
};