---
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://app.twincreator.com/en/nzambello/Nicola"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Opens in a new tab/window"
      >
        <svg
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          width="32"
          height="32"
          id="screenshot-ee7a4028-0499-8054-8002-d551e0c3ba31"
          viewBox="-2 -2 150 150"
          style="-webkit-print-color-adjust: exact;"
          fill="none"
          version="1.1"
          ><g id="shape-ee7a4028-0499-8054-8002-d551e0c3ba31" rx="0" ry="0"
            ><g id="shape-ee7a4028-0499-8054-8002-d551c1b8f59c"
              ><defs
                ><linearGradient
                  x1="-139"
                  y1="-42"
                  x2="184.376"
                  y2="9.78136"
                  id="rumext-id-2-paint0_linear_108_7"
                  gradientUnits="userSpaceOnUse"
                  gradientTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, -48.000000, -2.000000)"
                  ><stop offset="0.572834" stop-color="var(--primary-inverse)"
                  ></stop><stop offset="1" stop-color="var(--item-bg-color)"
                  ></stop></linearGradient
                ></defs
              ><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b8f59c"
                ><path
                  fill="url(#rumext-id-2-paint0_linear_108_7)"
                  rx="0"
                  ry="0"
                  d="M31.621,30.914L29.621,30.914L29.621,32.914L29.621,146.000L0.000,146.000L0.000,0.000L146.000,0.000L146.000,146.000L116.379,146.000L116.379,32.914L116.379,30.914L114.379,30.914L31.621,30.914ZZM62.069,60.776L85.224,60.776L85.224,146.000L62.069,146.000L62.069,60.776ZZ"
                  style='fill: url("#rumext-id-2-paint0_linear_108_7");'
                ></path></g
              ></g
            ><g id="shape-ee7a4028-0499-8054-8002-d551c1b906ac"
              ><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b906ac"
                ><path
                  rx="0"
                  ry="0"
                  d="M31.621,30.914L29.621,30.914L29.621,32.914L29.621,146.000L0.000,146.000L0.000,0.000L146.000,0.000L146.000,146.000L116.379,146.000L116.379,32.914L116.379,30.914L114.379,30.914L31.621,30.914ZZM62.069,60.776L85.224,60.776L85.224,146.000L62.069,146.000L62.069,60.776ZZ"
                  style="fill: rgb(255, 255, 255); fill-opacity: 0.18;"
                ></path></g
              ></g
            ><g
              id="shape-ee7a4028-0499-8054-8002-d551c1b9733a"
              style="mix-blend-mode: overlay;"
              ><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b9733a"
                ><path
                  fill="none"
                  rx="0"
                  ry="0"
                  d="M31.621,30.914L29.621,30.914L29.621,32.914L29.621,146.000L0.000,146.000L0.000,0.000L146.000,0.000L146.000,146.000L116.379,146.000L116.379,32.914L116.379,30.914L114.379,30.914L31.621,30.914ZZM62.069,60.776L85.224,60.776L85.224,146.000L62.069,146.000L62.069,60.776ZZ"
                  style="fill: none;"></path></g
              ><g
                id="strokes-ee7a4028-0499-8054-8002-d551c1b9733a"
                class="strokes"
                ><g class="stroke-shape"
                  ><path
                    rx="0"
                    ry="0"
                    d="M31.621,30.914L29.621,30.914L29.621,32.914L29.621,146.000L0.000,146.000L0.000,0.000L146.000,0.000L146.000,146.000L116.379,146.000L116.379,32.914L116.379,30.914L114.379,30.914L31.621,30.914ZZM62.069,60.776L85.224,60.776L85.224,146.000L62.069,146.000L62.069,60.776ZZ"
                    style="fill: none; stroke-width: 4; stroke: rgb(200, 200, 200);"
                  ></path></g
                ></g
              ></g
            ></g
          ></svg
        >
        <span>Digital Twin</span>
      </a>
      <a
        role="button"
        class=""
        href="https://cal.nzambello.dev"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Opens in a new tab/window"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          aria-hidden="true"
          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
        >
        <span>Book a meeting</span>
      </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 span {
    line-height: 1;
  }

  .contact-links a svg {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    margin-right: 0.5rem;
  }
</style>