---
import { SEO } from "astro-seo";
import { Icon } from "astro-icon/components";
import Section from "../components/Section.astro";
import { projects } from "../projects";
---

<html lang="en">
  <head>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="stylesheet" href="/font.css" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <SEO
      charset="utf-8"
      title="Zvonimir Rudinski | Full Stack Developer"
      description="Looking for a fully commited developer who can digitalize your business and make it more efficient? Look no further, I am here to help you!"
      twitter={{
        creator: "@rudinskiz",
      }}
    />
  </head>
  <body class="bg-primary m-12">
    <h1 class="text-2xl md:text-4xl text-secondary font-squada">
      $ Zvonimir Rudinski / Home
    </h1>

    <Section title="About" isMain hasBorder>
      <p class="font-pt-sans font-bold">
        Looking for a fully commited developer who can digitalize your business?
      </p>
      <p class="font-pt-sans">
        Someone who can make your business more efficient and help you reach
        your goals?
      </p>
      <br />
      <p class="font-pt-sans">Look no further, I am here to help you!</p>
      <br />
      <p class="font-pt-sans">
        I am a full stack developer with a passion for creating and improving
        digital products. I have experience in building web applications and
        websites using modern technologies and frameworks.
      </p>
      <br />
      <p class="font-pt-sans">
        Be sure to check out my projects and contact me if you are interested in
        launching your business into the digital world.
      </p>
    </Section>

    <Section title="Projects" isMain hasBorder>
      <p class="font-pt-sans">
        Here are some of the projects I have worked on. You can find more
        information about a project by clicking on its name.
      </p>
      <ul class="list-disc list-inside mt-2">
        {
          projects.map((project) => (
            <li>
              <a
                href={`/projects/${project.id}`}
                class="font-pt-sans text-secondary hover:underline"
              >
                {project.name}
              </a>
            </li>
          ))
        }
      </ul>
    </Section>

    <a
      href="/blog"
      class="text-lg md:text-xl text-white lowercase transition-colors opacity-60 hover:text-secondary hover:cursor-pointer hover:opacity-80 group-[.open]:text-secondary group-[.open]:underline group-[.open]:opacity-100"
      >blog</a
    >

    <Section title="Contact" isMain>
      <div class="flex gap-4 mt-4">
        <abbr title="Send me an email">
          <a
            href="mailto:zvonimir@mailfence.com"
            class="opacity-50 hover:opacity-100 hover:text-secondary"
          >
            <Icon name="mdi:email" size={32} />
          </a>
        </abbr>
        <abbr title="Check out my GitHub">
          <a
            href="https://github.com/zvonimirr"
            class="opacity-50 hover:opacity-100 hover:text-secondary"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Icon name="mdi:github" size={32} />
          </a>
        </abbr>
        <abbr title="Connect with me on LinkedIn">
          <a
            href="https://linkedin.com/in/zvonimirr"
            class="opacity-50 hover:opacity-100 hover:text-secondary"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Icon name="mdi:linkedin" size={32} />
          </a>
        </abbr>
      </div>
    </Section>

    <footer class="mt-12">
      <p class="text-secondary text-center">&copy; 2024 Zvonimir Rudinski</p>
    </footer>

    <script>
      function onMount() {
        const openSection = sessionStorage.getItem("openSection");
        if (!openSection) return;
        const section = document.querySelector<HTMLElement>(
          `#${openSection} > abbr > h2`
        );

        if (!section) return;

        section.click();
      }

      window.addEventListener("DOMContentLoaded", onMount);
    </script>
  </body>
</html>
