---
import Layout from "../layouts/Layout.astro";

import Header from "../components/astro/Header.astro";
import SocialLinks from "../components/astro/SocialLinks.astro";

import ProjectsPane from "../components/jsx/ProjectsPane.jsx";
import Status from "../components/jsx/Status.jsx";
import Tealfm from "../components/jsx/Tealfm";
---

<Layout title="hello" description="insert wave emoji">
  <main id="page" class="text-center">
    <Header />
    <Status client:load />
    <Tealfm client:load />
    <SocialLinks />
    <!--
    <img
      src="https://ziit.indexx.dev/api/public/badge/cmh6t4rlk0001lz1wau6e8c83/all/month"
      alt="Ziit Coding Statistics"
    />
    -->
    <br />
    <a
      id="projects-button"
      href="#"
      data-bs-toggle="tooltip"
      data-bs-title="(Some of) My Projects"
      data-bs-placement="bottom"
    >
      . . .
    </a>
  </main>
  <ProjectsPane client:load />
  <script>
    import { initializeProjects } from "../scripts/projects";
    initializeProjects();
  </script>
</Layout>