---
import Header from "../sections/header.astro";
import Profile from "../sections/profile.astro";
import Projects from "../sections/projects.astro";
import Contact from "../sections/contact.astro";
import Footer from "../sections/footer.astro";

import type { ISourceOptions } from "tsparticles-engine";
import { options } from "../../particles";
import Particles from "astro-particles";
const opts = options as ISourceOptions;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />

    <!-- metadata -->
    <meta name="robots" content="index, follow" />
    <meta
      name="description"
      content="Noah Swerhun is a mathematics student at the University of Chicago, studying for a career in finance."
    />
    <meta name="keywords" content="noah,noah swerhun,swerhun" />
    <meta name="author" content="Noah Swerhun" />

    <meta property="og:site_name" content="Noah Swerhun's Website" />
    <meta
      name="twitter:domain"
      property="twitter:domain"
      content="noahsw.xyz"
    />
    <meta
      name="og:title"
      property="og:title"
      content="Noah Swerhun's Profile"
    />
    <meta
      property="og:description"
      content="Noah Swerhun is a mathematics student at the University of Chicago, studying for a career in finance."
    />
    <meta
      name="twitter:description"
      property="twitter:description"
      content="Noah Swerhun is a mathematics student at the University of Chicago, studying for a career in finance."
    />
    <meta name="og:image" content="https://noahsw.xyz/assets/portrait.jpg" />

    <meta
      property="twitter:card"
      content="https://noahsw.xyz/assets/portrait.jpg"
    />
    <meta
      name="twitter:image:src"
      property="twitter:image:src"
      content="https://noahsw.xyz/assets/portrait.jpg"
    />
    <meta
      name="twitter:image"
      property="twitter:image"
      content="https://noahsw.xyz/assets/portrait.jpg"
    />
    <meta
      name="og:image:alt"
      property="og:image:alt"
      content="Portrait of Noah Swerhun"
    />

    <meta property="og:url" content="noahsw.xyz" />
    <meta property="og:type" content="website" />
    <!-- end metadata -->

    <link rel="preconnect" href="https://fonts.bunny.net" />
    <link
      href="https://fonts.bunny.net/css?family=azeret-mono:500|fahkwang:700"
      rel="stylesheet"
    />
    <title>Noah Swerhun</title>
  </head>

  <body class="bg-secondary text-primary relative" id="tsparticles">
    <Header />
    <Profile id="profile" />
    <Projects id="projects" />
    <Contact id="contact" />
    <Footer />
    <div class="hidden md:block absolute left-0 top-0 z-[-2] h-full w-full">
      <Particles id="tsparticles" options={opts} init="particlesInit" />
    </div>
  </body>
</html>

<script>
  import { type Container, type Engine, tsParticles } from "tsparticles-engine";
  import { loadFull } from "tsparticles";

  window.particlesInit = async function (engine: Engine) {
    await loadFull(engine);
  };

  window.particlesLoaded = function (container: Container) {
    console.log("particlesLoaded callback");
  };
</script>
