import Layout from "ui/Layout"
import Markdown from "ui/shared/Markdown"
import intro from "./intro.md?raw"
import details from "./details.md?raw"
import skills from "./skills.md?raw"
import interests from "./interests.md?raw"
import Window from "ui/Layout/Window"

const title = "Dan Finch - About Me"

export default function Home() {
  return Layout(
    { title, url: "/" },
    Window(
      { title },
      div.content(padding("8px"), [
        h1("About Me"),
        Markdown(intro),
        aside.fieldBorderDisabled(
          img({ src: "/pfp.jpg", width: "200" }),
        ),
        Markdown(details),
        h2("Skills"),
        Markdown(skills),
        h2("Interests"),
        Markdown(interests),
      ]),
    ),
  )
}