refactor: accessibility fixes
This commit is contained in:
parent
fd11ef2439
commit
b90b0a3b36
GPG key ID:
56E4A92C2C1E50BA
|
|
@ -8,7 +8,12 @@ const { text, source } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 36px; width: auto; fill: currentcolor;"
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 36 36"
|
||||||
|
class="icon"
|
||||||
|
style="height: 36px; width: auto; fill: currentcolor;"
|
||||||
|
aria-hidden="true"
|
||||||
><path
|
><path
|
||||||
d="M28 18L28 10 20 10 20 18 26 18C26 21.3137085 23.3137085 24 20 24L20 26C24.418278 26 28 22.418278 28 18L28 18zM26 12L26 16 22 16 22 12 26 12 26 12zM16 18L16 10 8 10 8 18 14 18C14 21.3137085 11.3137085 24 8 24L8 26C12.418278 26 16 22.418278 16 18L16 18zM14 12L14 16 10 16 10 12 14 12 14 12z"
|
d="M28 18L28 10 20 10 20 18 26 18C26 21.3137085 23.3137085 24 20 24L20 26C24.418278 26 28 22.418278 28 18L28 18zM26 12L26 16 22 16 22 12 26 12 26 12zM16 18L16 10 8 10 8 18 14 18C14 21.3137085 11.3137085 24 8 24L8 26C12.418278 26 16 22.418278 16 18L16 18zM14 12L14 16 10 16 10 12 14 12 14 12z"
|
||||||
fill-rule="evenodd"></path></svg
|
fill-rule="evenodd"></path></svg
|
||||||
|
|
@ -33,7 +38,9 @@ const { text, source } = Astro.props;
|
||||||
margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
margin-bottom: 4rem;
|
margin-bottom: 4rem;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
box-shadow: 0.25rem 0.25rem 2rem var(--neumorph-shadow-darker), -0.5rem -0.5rem 1rem var(--neumorph-shadow-lighter);
|
box-shadow:
|
||||||
|
0.25rem 0.25rem 2rem var(--neumorph-shadow-darker),
|
||||||
|
-0.5rem -0.5rem 1rem var(--neumorph-shadow-lighter);
|
||||||
background: var(--bg-color);
|
background: var(--bg-color);
|
||||||
--spacing: 2rem 2.5rem 2rem 2rem;
|
--spacing: 2rem 2.5rem 2rem 2rem;
|
||||||
padding: 2rem 2.5rem 2rem 2rem;
|
padding: 2rem 2.5rem 2rem 2rem;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,10 @@
|
||||||
<article class="contact-links">
|
<article class="contact-links">
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h2 id="contacts">Contact me</h2>
|
<h2 id="contacts">Contact me</h2>
|
||||||
<p>Whether you're willing to work with me, or want a chat with me, feel free to contact me any time! I'll do my best to answer to emails in short time.</p>
|
<p>
|
||||||
|
Whether you're willing to work with me, or want a chat with me, feel free
|
||||||
|
to contact me any time! I'll do my best to answer to emails in short time.
|
||||||
|
</p>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
|
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
|
|
@ -15,22 +18,65 @@
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg
|
class="feather feather-mail"
|
||||||
|
aria-hidden="true"
|
||||||
|
><path
|
||||||
|
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
|
||||||
|
></path><polyline points="22,6 12,13 2,6"></polyline></svg
|
||||||
>
|
>
|
||||||
<span>Email me</span>
|
<span>Email me</span>
|
||||||
</a>
|
</a>
|
||||||
<a role="button" class="" href="https://github.com/nzambello" target="_blank" rel="noopener noreferrer">
|
<a
|
||||||
<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">
|
role="button"
|
||||||
|
class=""
|
||||||
|
href="https://github.com/nzambello"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Opens in a new tab/window"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
<path
|
<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"
|
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>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span>GitHub</span>
|
<span>GitHub</span>
|
||||||
</a>
|
</a>
|
||||||
<a role="button" class="" href="https://cal.nzambello.dev" target="_blank" rel="noopener noreferrer">
|
<a
|
||||||
<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"
|
role="button"
|
||||||
><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"
|
class=""
|
||||||
></line></svg
|
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"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="feather feather-calendar"
|
||||||
|
aria-hidden="true"
|
||||||
|
><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>
|
<span>Book a meeting</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,8 @@ const today = new Date();
|
||||||
Hosted on <a
|
Hosted on <a
|
||||||
href="https://www.hetzner.com/unternehmen/umweltschutz/"
|
href="https://www.hetzner.com/unternehmen/umweltschutz/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer">green energy</a
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Opens in a new tab/window">green energy</a
|
||||||
> in Europe.
|
> in Europe.
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
const messages = ['Hi', 'Hello', 'Hey', 'Welcome', 'Ciao', 'Xin chào'];
|
const messages = ['Hi', 'Hello', 'Hey', 'Welcome', 'Ciao'];
|
||||||
const emojis = ['🍻', '🧑💻', '👋', '😎'];
|
const emojis = ['🍻', '🧑💻', '👋', '😎'];
|
||||||
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
|
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
|
||||||
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
|
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
|
||||||
|
|
@ -10,12 +10,12 @@ const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
|
||||||
<span role="presentation">{randomEmoji}</span>
|
<span role="presentation">{randomEmoji}</span>
|
||||||
</h1>
|
</h1>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
const messages = ['Hi', 'Hello', 'Hey', 'Welcome', 'Ciao', 'Xin chào'];
|
const messages = ['Hi', 'Hello', 'Hey', 'Welcome', 'Ciao'];
|
||||||
const emojis = ['🍻', '🧑💻', '👋', '😎'];
|
const emojis = ['🍻', '🧑💻', '👋', '😎'];
|
||||||
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
|
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
|
||||||
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
|
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
|
||||||
|
|
||||||
document.querySelector('.documentFirstHeading').innerHTML = `
|
document.querySelector('.documentFirstHeading').innerHTML = `
|
||||||
${randomMessage}!
|
${randomMessage}!
|
||||||
<span role="presentation">${randomEmoji}</span>
|
<span role="presentation">${randomEmoji}</span>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,11 @@ import Logo from './Logo.astro';
|
||||||
</HeaderLink>
|
</HeaderLink>
|
||||||
</ul>
|
</ul>
|
||||||
<input type="checkbox" id="mobile-checkbox" />
|
<input type="checkbox" id="mobile-checkbox" />
|
||||||
<label for="mobile-checkbox" class="mobile-icon-button" title="Toggle navigation">
|
<label
|
||||||
|
for="mobile-checkbox"
|
||||||
|
class="mobile-icon-button"
|
||||||
|
title="Toggle navigation"
|
||||||
|
>
|
||||||
<div class="mobile-icon-button-icon icon-open">
|
<div class="mobile-icon-button-icon icon-open">
|
||||||
<span class="line"></span>
|
<span class="line"></span>
|
||||||
<span class="line"></span>
|
<span class="line"></span>
|
||||||
|
|
@ -25,8 +29,22 @@ import Logo from './Logo.astro';
|
||||||
<div class="menu-backdrop"></div>
|
<div class="menu-backdrop"></div>
|
||||||
</label>
|
</label>
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
<HeaderLink href="https://app.twincreator.com/en/nzambello/Nicola" target="_blank" rel="noopener noreferrer">Twin</HeaderLink>
|
<HeaderLink
|
||||||
<HeaderLink href="https://github.com/nzambello" target="_blank" rel="noopener noreferrer">GitHub</HeaderLink>
|
href="https://app.twincreator.com/en/nzambello/Nicola"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Opens in a new tab/window"
|
||||||
|
>
|
||||||
|
Twin
|
||||||
|
</HeaderLink>
|
||||||
|
<HeaderLink
|
||||||
|
href="https://github.com/nzambello"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Opens in a new tab/window"
|
||||||
|
>
|
||||||
|
GitHub
|
||||||
|
</HeaderLink>
|
||||||
<HeaderLink href="/#contacts">Contacts</HeaderLink>
|
<HeaderLink href="/#contacts">Contacts</HeaderLink>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="theme-button-container">
|
<ul class="theme-button-container">
|
||||||
|
|
@ -69,7 +87,9 @@ import Logo from './Logo.astro';
|
||||||
max-width: 0;
|
max-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
transition: all 0.3s ease, padding 0.2s ease-out;
|
transition:
|
||||||
|
all 0.3s ease,
|
||||||
|
padding 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul.menu li a {
|
nav ul.menu li a {
|
||||||
|
|
@ -147,7 +167,9 @@ import Logo from './Logo.astro';
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mobile-checkbox:checked ~ .mobile-icon-button .mobile-icon-button-icon.icon-close {
|
#mobile-checkbox:checked
|
||||||
|
~ .mobile-icon-button
|
||||||
|
.mobile-icon-button-icon.icon-close {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
height="94"
|
height="94"
|
||||||
viewBox="0 0 435 94"
|
viewBox="0 0 435 94"
|
||||||
fill="none"
|
fill="none"
|
||||||
|
aria-label="nzambello.dev"
|
||||||
>
|
>
|
||||||
<g class="text-container">
|
<g class="text-container">
|
||||||
<text
|
<text
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -10,6 +10,7 @@
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
preserveAspectRatio="xMidYMid"
|
preserveAspectRatio="xMidYMid"
|
||||||
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<g>
|
<g>
|
||||||
<path
|
<path
|
||||||
|
|
@ -31,29 +32,50 @@
|
||||||
</svg>
|
</svg>
|
||||||
<h2 id="opensource">Open Source</h2>
|
<h2 id="opensource">Open Source</h2>
|
||||||
<p>
|
<p>
|
||||||
I believe in open source as a form of sharing, networking between companies and training between developers. With open source, developers from all over the world collaborate on shared projects.
|
I believe in open source as a form of sharing, networking between
|
||||||
|
companies and training between developers. With open source, developers
|
||||||
|
from all over the world collaborate on shared projects.
|
||||||
</p>
|
</p>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
|
|
||||||
<article class="github-banner">
|
<article class="github-banner">
|
||||||
You can find my open source projects and contributions at <a href="https://github.com/nzambello">github.com/nzambello</a>.
|
You can find my open source projects and contributions at <a
|
||||||
|
href="https://github.com/nzambello">github.com/nzambello</a
|
||||||
|
>.
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>What is open source software?</summary>
|
<summary tabindex="0">What is open source software?</summary>
|
||||||
<p>Open source software is software with source code that anyone can inspect, review, modify, and enhance.</p>
|
|
||||||
<p>
|
<p>
|
||||||
<a href="https://opensource.org/osd" target="_blank" rel="noopener noreferrer">Open source definition</a>
|
Open source software is software with source code that anyone can inspect,
|
||||||
|
review, modify, and enhance.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a
|
||||||
|
href="https://opensource.org/osd"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Opens in a new tab/window">Open source definition</a
|
||||||
|
>
|
||||||
</p>
|
</p>
|
||||||
</details>
|
</details>
|
||||||
<details>
|
<details>
|
||||||
<summary>Why open source?</summary>
|
<summary tabindex="0">Why open source?</summary>
|
||||||
<p>Open source software is a great way to learn new technologies, to share knowledge and to collaborate with other developers.</p>
|
|
||||||
<p>
|
<p>
|
||||||
Building a project using open source software is building it on top of the shoulders of thousands of developers. You get efforts on the subject from all over the world for free, and you can
|
Open source software is a great way to learn new technologies, to share
|
||||||
contribute back to the community by sharing your own code.
|
knowledge and to collaborate with other developers.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Building a project using open source software is building it on top of the
|
||||||
|
shoulders of thousands of developers. You get efforts on the subject from
|
||||||
|
all over the world for free, and you can contribute back to the community
|
||||||
|
by sharing your own code.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Furthermore, open source software is often more secure than proprietary
|
||||||
|
software, since tons of developers can review the code. This also enhance
|
||||||
|
privacy and transparency.
|
||||||
</p>
|
</p>
|
||||||
<p>Furthermore, open source software is often more secure than proprietary software, since tons of developers can review the code. This also enhance privacy and transparency.</p>
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,23 @@ import Blockquote from './Blockquote.astro';
|
||||||
|
|
||||||
<section class="plone-section">
|
<section class="plone-section">
|
||||||
<hgroup class="clearfix">
|
<hgroup class="clearfix">
|
||||||
<a href="https://plone.org" target="_blank" rel="noopener noreferrer">
|
<a
|
||||||
<svg role="presentation" id="plone-logo" aria-label="Plone" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
|
href="https://plone.org"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Opens in a new tab/window"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
role="presentation"
|
||||||
|
id="plone-logo"
|
||||||
|
aria-label="Plone"
|
||||||
|
viewBox="0 0 41 41"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="100px"
|
||||||
|
height="100px"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
<g clip-path="url(#clip0_1_2)">
|
<g clip-path="url(#clip0_1_2)">
|
||||||
<path
|
<path
|
||||||
d="M17.717 15.963C20.1482 15.963 22.119 13.9922 22.119 11.561C22.119 9.12984 20.1482 7.159 17.717 7.159C15.2858 7.159 13.315 9.12984 13.315 11.561C13.315 13.9922 15.2858 15.963 17.717 15.963Z"
|
d="M17.717 15.963C20.1482 15.963 22.119 13.9922 22.119 11.561C22.119 9.12984 20.1482 7.159 17.717 7.159C15.2858 7.159 13.315 9.12984 13.315 11.561C13.315 13.9922 15.2858 15.963 17.717 15.963Z"
|
||||||
|
|
@ -28,35 +43,64 @@ import Blockquote from './Blockquote.astro';
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<h2 id="plone">
|
<h2 id="plone">
|
||||||
<a href="https://plone.org" target="_blank" rel="noopener noreferrer"> Plone</a>
|
<a
|
||||||
|
href="https://plone.org"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Opens in a new tab/window"
|
||||||
|
>
|
||||||
|
Plone</a
|
||||||
|
>
|
||||||
</h2>
|
</h2>
|
||||||
<p>The world's most secure content management system, with a user-friendly interface and a growing open-source community.</p>
|
<p>
|
||||||
|
The world's most secure content management system, with a user-friendly
|
||||||
|
interface and a growing open-source community.
|
||||||
|
</p>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
|
|
||||||
<Blockquote text="Plone is backed up by the Plone Foundation, so it will stay open source forever." />
|
<Blockquote
|
||||||
|
text="Plone is backed up by the Plone Foundation, so it will stay open source forever."
|
||||||
|
/>
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>Why Plone?</summary>
|
<summary tabindex="0">Why Plone?</summary>
|
||||||
<p>
|
<p>
|
||||||
Plone is an open-source content management system (CMS) with over 20 years of stability and security wrapped in a modern, powerful user-centric package with Plone 6. It continues to set the
|
Plone is an open-source content management system (CMS) with over 20 years
|
||||||
standard for content management systems by offering the most functionality and customization out of the box.
|
of stability and security wrapped in a modern, powerful user-centric
|
||||||
|
package with Plone 6. It continues to set the standard for content
|
||||||
|
management systems by offering the most functionality and customization
|
||||||
|
out of the box.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
With so many content management systems, why should you choose Plone? It's simple: Plone is powerful, flexible, secure and true open source! The project has been actively developed since 2001
|
With so many content management systems, why should you choose Plone? It's
|
||||||
and has the best security track record of any major CMS.
|
simple: Plone is powerful, flexible, secure and true open source! The
|
||||||
|
project has been actively developed since 2001 and has the best security
|
||||||
|
track record of any major CMS.
|
||||||
</p>
|
</p>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>What is Plone?</summary>
|
<summary tabindex="0">What is Plone?</summary>
|
||||||
<p>
|
<p>
|
||||||
<a href="http://plone.org" target="_blank" rel="noopener noreferrer">Plone</a> is an open-source content management system that is used to create, edit, and manage digital content, like websites,
|
<a
|
||||||
intranets and custom solutions. It comes with over 20 years of growth, optimisations, and refinements. The result is a system trusted by governments, universities, businesses, and other organisations
|
href="http://plone.org"
|
||||||
all over the world.
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Opens in a new tab/window">Plone</a
|
||||||
|
> is an open-source content management system that is used to create, edit,
|
||||||
|
and manage digital content, like websites, intranets and custom solutions.
|
||||||
|
It comes with over 20 years of growth, optimisations, and refinements. The
|
||||||
|
result is a system trusted by governments, universities, businesses, and other
|
||||||
|
organisations all over the world.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
The <a href="https://beta.plone.org/foundation" target="_blank" rel="noopener noreferrer">Plone Foundation</a> protects and promotes Plone by furthering the development, marketing, and legal affairs
|
The <a
|
||||||
of Plone and the Plone community.
|
href="https://beta.plone.org/foundation"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Opens in a new tab/window">Plone Foundation</a
|
||||||
|
> protects and promotes Plone by furthering the development, marketing, and
|
||||||
|
legal affairs of Plone and the Plone community.
|
||||||
</p>
|
</p>
|
||||||
</details>
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,14 @@
|
||||||
---
|
---
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<button id="themeToggle" title="Toggle theme">
|
<button id="themeToggle" title="Toggle theme">
|
||||||
<svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
<svg
|
||||||
|
width="30px"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
aria-label="Toggle theme"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
class="sun"
|
class="sun"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
|
|
@ -21,7 +27,9 @@
|
||||||
background: none;
|
background: none;
|
||||||
border: 1px solid var(--item-bg-color-var);
|
border: 1px solid var(--item-bg-color-var);
|
||||||
background: var(--item-bg-color);
|
background: var(--item-bg-color);
|
||||||
box-shadow: 0.25rem 0.25rem 1rem var(--neumorph-shadow-darker), -0.25rem -0.25rem 1rem var(--neumorph-shadow-lighter) !important;
|
box-shadow:
|
||||||
|
0.25rem 0.25rem 1rem var(--neumorph-shadow-darker),
|
||||||
|
-0.25rem -0.25rem 1rem var(--neumorph-shadow-lighter) !important;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
|
|
@ -82,5 +90,7 @@
|
||||||
localStorage.setItem('theme', themeToSet);
|
localStorage.setItem('theme', themeToSet);
|
||||||
};
|
};
|
||||||
|
|
||||||
document.getElementById('themeToggle')?.addEventListener('click', handleToggleClick);
|
document
|
||||||
|
.getElementById('themeToggle')
|
||||||
|
?.addEventListener('click', handleToggleClick);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -19,10 +19,18 @@ import Privacy from '../components/Privacy.astro';
|
||||||
|
|
||||||
<div id="content" class="container">
|
<div id="content" class="container">
|
||||||
<div class="contact-links">
|
<div class="contact-links">
|
||||||
<a role="button" class="" href="https://app.twincreator.com/en/nzambello/Nicola" target="_blank" rel="noopener noreferrer">
|
<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
|
<svg
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
width="32"
|
width="32"
|
||||||
height="32"
|
height="32"
|
||||||
id="screenshot-ee7a4028-0499-8054-8002-d551e0c3ba31"
|
id="screenshot-ee7a4028-0499-8054-8002-d551e0c3ba31"
|
||||||
|
|
@ -41,7 +49,9 @@ import Privacy from '../components/Privacy.astro';
|
||||||
id="rumext-id-2-paint0_linear_108_7"
|
id="rumext-id-2-paint0_linear_108_7"
|
||||||
gradientUnits="userSpaceOnUse"
|
gradientUnits="userSpaceOnUse"
|
||||||
gradientTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, -48.000000, -2.000000)"
|
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
|
><stop offset="0.572834" stop-color="var(--primary-inverse)"
|
||||||
|
></stop><stop offset="1" stop-color="var(--item-bg-color)"
|
||||||
|
></stop></linearGradient
|
||||||
></defs
|
></defs
|
||||||
><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b8f59c"
|
><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b8f59c"
|
||||||
><path
|
><path
|
||||||
|
|
@ -49,7 +59,8 @@ import Privacy from '../components/Privacy.astro';
|
||||||
rx="0"
|
rx="0"
|
||||||
ry="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"
|
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
|
style='fill: url("#rumext-id-2-paint0_linear_108_7");'
|
||||||
|
></path></g
|
||||||
></g
|
></g
|
||||||
><g id="shape-ee7a4028-0499-8054-8002-d551c1b906ac"
|
><g id="shape-ee7a4028-0499-8054-8002-d551c1b906ac"
|
||||||
><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b906ac"
|
><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b906ac"
|
||||||
|
|
@ -57,9 +68,12 @@ import Privacy from '../components/Privacy.astro';
|
||||||
rx="0"
|
rx="0"
|
||||||
ry="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"
|
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
|
style="fill: rgb(255, 255, 255); fill-opacity: 0.18;"
|
||||||
|
></path></g
|
||||||
></g
|
></g
|
||||||
><g id="shape-ee7a4028-0499-8054-8002-d551c1b9733a" style="mix-blend-mode: overlay;"
|
><g
|
||||||
|
id="shape-ee7a4028-0499-8054-8002-d551c1b9733a"
|
||||||
|
style="mix-blend-mode: overlay;"
|
||||||
><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b9733a"
|
><g class="fills" id="fills-ee7a4028-0499-8054-8002-d551c1b9733a"
|
||||||
><path
|
><path
|
||||||
fill="none"
|
fill="none"
|
||||||
|
|
@ -67,13 +81,16 @@ import Privacy from '../components/Privacy.astro';
|
||||||
ry="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"
|
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
|
style="fill: none;"></path></g
|
||||||
><g id="strokes-ee7a4028-0499-8054-8002-d551c1b9733a" class="strokes"
|
><g
|
||||||
|
id="strokes-ee7a4028-0499-8054-8002-d551c1b9733a"
|
||||||
|
class="strokes"
|
||||||
><g class="stroke-shape"
|
><g class="stroke-shape"
|
||||||
><path
|
><path
|
||||||
rx="0"
|
rx="0"
|
||||||
ry="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"
|
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
|
style="fill: none; stroke-width: 4; stroke: rgb(200, 200, 200);"
|
||||||
|
></path></g
|
||||||
></g
|
></g
|
||||||
></g
|
></g
|
||||||
></g
|
></g
|
||||||
|
|
@ -81,10 +98,33 @@ import Privacy from '../components/Privacy.astro';
|
||||||
>
|
>
|
||||||
<span>Digital Twin</span>
|
<span>Digital Twin</span>
|
||||||
</a>
|
</a>
|
||||||
<a role="button" class="" href="https://cal.nzambello.dev" target="_blank" rel="noopener noreferrer">
|
<a
|
||||||
<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"
|
role="button"
|
||||||
><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"
|
class=""
|
||||||
></line></svg
|
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>
|
<span>Book a meeting</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -92,13 +132,24 @@ import Privacy from '../components/Privacy.astro';
|
||||||
|
|
||||||
<section class="bio">
|
<section class="bio">
|
||||||
<p>
|
<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>.
|
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 />
|
<br />
|
||||||
<ul>
|
<ul>
|
||||||
<li>I'm curious and a perfectionist.</li>
|
<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>
|
||||||
<li>Advocate of <strong>privacy</strong> and <strong>social rights</strong>.</li>
|
GitHub-addicted, <strong>Plone CMS</strong> maintainer and foundation
|
||||||
<li>Supporter of <strong>Net Neutrality</strong> and Free Software.</li>
|
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>
|
</ul>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue