nzambello.dev/src/pages/index.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import IconsTech from '../components/IconsTech.astro';
import ContactLinks from '../components/ContactLinks.astro';
import Greeting from '../components/Greeting.astro';
import Plone from '../components/Plone.astro';
import OpenSource from '../components/OpenSource.astro';
import Privacy from '../components/Privacy.astro';
---

<BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
  <hgroup class="home-heading-hero">
    <div class="container">
      <Greeting />
      <p>I'm a web frontend developer, working as freelance consultant.</p>
    </div>
  </hgroup>

  <div id="content" class="container">
    <div class="contact-links">
      <a role="button" class="" href="https://github.com/nzambello" target="_blank" rel="noopener noreferrer">
        <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle color-fg-default">
          <path
            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
          ></path>
        </svg>
        GitHub
      </a>
      <a role="button" class="" href="https://cal.nzambello.dev" target="_blank" rel="noopener noreferrer">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"
          ><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"
          ></line></svg
        >
        Book a meeting
      </a>
    </div>

    <section class="bio">
      <p>
        I'm passionate about <strong>frontend</strong> and a CSS lover, developing usable and <strong>accessible</strong> UIs paying attention to performances and <strong>energy consumption</strong>.
        <br />
        <ul>
          <li>I'm curious and a perfectionist.</li>
          <li>GitHub-addicted, <strong>Plone CMS</strong> maintainer and foundation member, <strong>Open Source</strong> evangelist.</li>
          <li>Advocate of <strong>privacy</strong> and <strong>social rights</strong>.</li>
          <li>Supporter of <strong>Net Neutrality</strong> and Free Software.</li>
        </ul>
      </p>
    </section>

    <IconsTech />

    <OpenSource />

    <Plone />

    <Privacy />

    <ContactLinks />
  </div>
</BaseLayout>
<style>
  .home-heading-hero {
    margin-bottom: 3rem;
  }

  .bio {
    --font-size: 16px;
  }

  .contact-links {
    margin-bottom: 1rem;
  }

  .contact-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    margin-right: 1rem;
    font-size: 0.85rem;
  }
  .contact-links a svg {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    margin-right: 0.5rem;
  }
</style>