---
import "../styles/leftNav.scss";
import { Content as ShortBio } from "../content/partials/shortBio.md";
import links from "../data/links";
import { Image } from "astro:assets";
import portrait from "../assets/self.png";
---

<nav class="side-nav">
  <div class="side-nav-content">
    <a href="/" class="portrait">
      <Image src={portrait} alt="portrait" class="portrait" />
    </a>
    <div class="me">
      <h1 class="title">Michael Zhang</h1>
      <div class="links">
        {
          links.map((link) => {
            return (
              <a href={link.url} title={link.description}>
                {link.name}
              </a>
            );
          })
        }
      </div>
    </div>

    <div class="bio">
      <ShortBio />
      <a href="/about">More &raquo;</a>
    </div>
  </div>
</nav>