nzambello.dev/src/pages/index.astro

201 lines
6.9 KiB
Plaintext

---
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>