feat: add homepage content, add theme from rawmaterial
This commit is contained in:
parent
fe29563024
commit
f6c6758469
GPG key ID:
56E4A92C2C1E50BA
51
src/components/Blockquote.astro
Normal file
51
src/components/Blockquote.astro
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
interface Props {
|
||||
text: string;
|
||||
source?: string;
|
||||
}
|
||||
|
||||
const { text, source } = Astro.props;
|
||||
---
|
||||
|
||||
<blockquote>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 36px; width: auto; fill: currentcolor;"
|
||||
><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"
|
||||
fill-rule="evenodd"></path></svg
|
||||
>
|
||||
{text}
|
||||
{
|
||||
source && (
|
||||
<footer>
|
||||
<cite>— {source}</cite>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
</blockquote>
|
||||
|
||||
<style>
|
||||
blockquote {
|
||||
border: 1px solid rgba(34, 36, 38, 0.15);
|
||||
margin: 1rem 0;
|
||||
border-color: transparent;
|
||||
border-radius: 1rem;
|
||||
position: relative;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 0.25rem 0.25rem 2rem var(--neumorph-shadow-darker), -0.5rem -0.5rem 1rem var(--neumorph-shadow-lighter);
|
||||
background: var(--bg-color);
|
||||
--spacing: 2rem 2.5rem 2rem 2rem;
|
||||
padding: 2rem 2.5rem 2rem 2rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
line-height: 1;
|
||||
}
|
||||
blockquote svg {
|
||||
opacity: 0.33333;
|
||||
height: 3rem !important;
|
||||
flex-shrink: 0;
|
||||
margin-right: 1rem;
|
||||
margin-top: -0.75rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,7 @@
|
|||
<article class="contact-links">
|
||||
<hgroup>
|
||||
<h2 id="contact">Contact me</h2>
|
||||
<p>
|
||||
Whether you're willing to hire me, or want a chat with me about tech, 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>
|
||||
|
||||
<div class="grid">
|
||||
|
|
@ -18,33 +15,32 @@
|
|||
stroke-width="2"
|
||||
stroke-linecap="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"><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
|
||||
>
|
||||
Email me
|
||||
</a>
|
||||
<a role="button" class="" href="https://cal.nzambello.dev">
|
||||
<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
|
||||
<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>
|
||||
</article>
|
||||
<style>
|
||||
.contact-links {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.contact-links a {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
const today = new Date()
|
||||
const today = new Date();
|
||||
---
|
||||
|
||||
<footer>
|
||||
© {today.getFullYear()} Nicola Zambello. No rights reserved.
|
||||
© {today.getFullYear()} Nicola Zambello. <em data-tooltip="😉">No rights reserved</em>.
|
||||
</footer>
|
||||
<style>
|
||||
footer {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
---
|
||||
const messages = ['Hi', 'Hello', 'Hey', 'Welcome', 'Ciao'];
|
||||
const messages = ['Hi', 'Hello', 'Hey', 'Welcome', 'Ciao', 'Xin chào'];
|
||||
const emojis = ['🍻', '🧑💻', '👋', '🤪', '😎'];
|
||||
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
|
||||
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
|
||||
---
|
||||
|
||||
<h1>
|
||||
<h1 class="documentFirstHeading">
|
||||
{randomMessage}!
|
||||
<span role="presentation">{randomEmoji}</span>
|
||||
</h1>
|
||||
<style>
|
||||
h1.documentFirstHeading {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,9 +22,8 @@ import Logo from './Logo.astro';
|
|||
</button>
|
||||
<div class="menu-backdrop"></div>
|
||||
<ul class="menu">
|
||||
<HeaderLink href="/blog">Blog</HeaderLink>
|
||||
<HeaderLink href="/about">About</HeaderLink>
|
||||
<HeaderLink href="https://twitter.com/astrodotbuild" target="_blank" rel="noopener noreferrer">Twitter</HeaderLink>
|
||||
<HeaderLink href="/#contact">Contacts</HeaderLink>
|
||||
<HeaderLink href="https://cal.nzambello.dev">Book a call</HeaderLink>
|
||||
<HeaderLink href="https://github.com/nzambello" target="_blank" rel="noopener noreferrer">GitHub</HeaderLink>
|
||||
</ul>
|
||||
<ul class="theme-button-container">
|
||||
|
|
@ -63,7 +62,7 @@ import Logo from './Logo.astro';
|
|||
height: 100vh;
|
||||
order: 2;
|
||||
z-index: 10;
|
||||
background: var(--secondary);
|
||||
background: var(--item-bg-color, var(--secondary));
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 1.3em;
|
||||
|
|
@ -84,11 +83,12 @@ import Logo from './Logo.astro';
|
|||
cursor: pointer;
|
||||
width: 60px;
|
||||
margin: 0;
|
||||
flex-grow: 0;
|
||||
height: 49px;
|
||||
background: none;
|
||||
border-color: transparent;
|
||||
order: 2;
|
||||
flex-grow: 0;
|
||||
flex-shrink: initial;
|
||||
}
|
||||
|
||||
.mobile-icon-button:focus,
|
||||
|
|
@ -96,6 +96,10 @@ import Logo from './Logo.astro';
|
|||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.mobile-icon-button.hamburger {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.mobile-icon-button.hamburger .line {
|
||||
display: block;
|
||||
width: 40px;
|
||||
|
|
@ -181,6 +185,7 @@ import Logo from './Logo.astro';
|
|||
background: none;
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
ul.menu:focus,
|
||||
ul.menu:focus-within {
|
||||
|
|
@ -189,6 +194,8 @@ import Logo from './Logo.astro';
|
|||
}
|
||||
nav ul.theme-button-container {
|
||||
order: 2;
|
||||
flex-grow: 0;
|
||||
flex-shrink: initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -86,6 +86,7 @@
|
|||
height: 3.75rem;
|
||||
color: var(--text-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s ease-in;
|
||||
}
|
||||
.icons-tech svg:hover,
|
||||
.icons-tech svg:focus {
|
||||
|
|
|
|||
74
src/components/OpenSource.astro
Normal file
74
src/components/OpenSource.astro
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<section class="opensource-section">
|
||||
<hgroup class="clearfix">
|
||||
<svg
|
||||
id="opensource-logo"
|
||||
role="presentation"
|
||||
width="100px"
|
||||
height="100px"
|
||||
viewBox="0 -4 256 256"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M143.337088,167.832012 C165.399793,159.359312 176.418809,134.600586 167.948778,112.530928 C159.478747,90.4617104 134.72738,79.4392224 112.665115,87.9114818 C90.6024096,96.384182 79.5838348,121.143349 88.0534251,143.212566 C92.3992565,154.536974 101.344716,163.484812 112.665115,167.832012 L83.8415422,242.961058 C20.2997866,218.565076 -11.4398072,147.260933 12.9489294,83.6991531 C37.3376661,20.1373733 108.618905,-11.6122228 172.160661,12.7841996 C235.702417,37.180622 267.44201,108.484324 243.053274,172.046104 C230.537033,204.666198 204.770478,230.440872 172.160661,242.961058 L143.337088,167.832012"
|
||||
fill="#3DA639"
|
||||
>
|
||||
</path>
|
||||
<path
|
||||
d="M172.160661,247.368643 C171.54864,247.368643 170.937501,247.241263 170.36778,246.987386 C169.300158,246.512249 168.465625,245.631613 168.047036,244.540736 L139.223463,169.41125 C138.351477,167.138699 139.486072,164.589793 141.757907,163.717091 C151.329487,160.041606 158.89757,152.857243 163.067153,143.4876 C167.237177,134.118397 167.509921,123.685203 163.835153,114.110606 C156.249886,94.3452333 134.003883,84.4378643 114.244296,92.026403 C94.4855904,99.6145009 84.5813425,121.867956 92.1670499,141.632888 C96.059043,151.77474 104.106079,159.823872 114.244296,163.717091 C116.516131,164.589793 117.650726,167.138699 116.77874,169.41125 L87.955167,244.540736 C87.5365783,245.631613 86.7016041,246.512249 85.6339828,246.987386 C84.5668021,247.463406 83.3542169,247.49514 82.2628021,247.075979 C50.4324406,234.855069 25.2646885,210.9664 11.3961859,179.810065 C-2.4723167,148.65417 -3.38175559,113.960308 8.83530465,82.1199155 C21.0523649,50.2795231 44.9339484,25.1038398 76.0800275,11.2309667 C107.226107,-2.64190631 141.90904,-3.5516318 173.739401,8.66927846 C205.569762,20.8901887 230.737515,44.7788574 244.606017,75.9351925 C258.47452,107.091087 259.384399,141.78495 247.166898,173.625342 C234.223697,207.35747 207.460461,234.129139 173.739401,247.075979 C173.230485,247.271676 172.695133,247.368643 172.160661,247.368643 L172.160661,247.368643 Z M127.957701,8.94122644 C111.524792,8.94122644 95.1271325,12.3967729 79.6644682,19.2840648 C50.6686127,32.1991697 28.4362685,55.6365017 17.0625542,85.2788314 C5.68883993,114.92072 6.53571084,147.219061 19.446747,176.224495 C31.7589811,203.883852 53.634864,225.390221 81.3352978,237.192852 L107.046775,170.173762 C96.493494,164.938874 88.1966265,155.883491 83.9398003,144.792245 C74.6127642,120.489263 86.7906093,93.1269769 111.085935,83.7970015 C135.382582,74.4661445 162.734926,86.6487088 172.062403,110.95125 C176.580516,122.724349 176.245205,135.552625 171.117714,147.072729 C166.592991,157.240586 158.81253,165.315722 148.957191,170.179051 L174.666024,237.190207 C204.131139,224.59906 227.417446,200.495742 238.939649,170.466426 C250.313363,140.824537 249.466933,108.526197 236.555456,79.5212035 C223.64442,50.5157697 200.214472,28.2759785 170.581921,16.8991207 C156.750871,11.5888626 142.340847,8.94122644 127.957701,8.94122644 L127.957701,8.94122644 Z"
|
||||
fill="#1D531D"
|
||||
>
|
||||
</path>
|
||||
<path
|
||||
d="M237.741318,229.574755 C236.144321,231.208048 235.345834,233.145285 235.345834,235.386526 C235.345834,237.709431 236.157931,239.682963 237.78215,241.307182 C239.397295,242.9314 241.348143,243.743497 243.634752,243.743497 C245.912288,243.743497 247.858599,242.926863 249.473744,241.293571 C251.088889,239.651204 251.896449,237.682209 251.896449,235.386526 C251.896449,233.154359 251.093426,231.217122 249.487355,229.574755 C247.863136,227.905167 245.912288,227.070386 243.634752,227.070386 C241.329995,227.070386 239.365537,227.905167 237.741318,229.574755 L237.741318,229.574755 Z M250.657875,242.586588 C248.706998,244.473948 246.36598,245.417614 243.634752,245.417614 C240.812786,245.417614 238.435473,244.451264 236.502744,242.518534 C234.570014,240.585805 233.603664,238.208492 233.603664,235.386526 C233.603664,232.455673 234.647141,230.019381 236.734126,228.077578 C238.694077,226.262809 240.994263,225.355437 243.634752,225.355437 C246.402276,225.355437 248.765978,226.335398 250.725929,228.295349 C252.68588,230.2553 253.665841,232.619002 253.665841,235.386526 C253.665841,238.235714 252.663195,240.63571 250.657875,242.586588 L250.657875,242.586588 Z M244.546669,232.038293 C244.14742,231.884037 243.58485,231.806911 242.858942,231.806911 L242.151186,231.806911 L242.151186,235.032647 L243.280874,235.032647 C243.961413,235.032647 244.492225,234.896542 244.873326,234.624326 C245.254428,234.352111 245.444976,233.912036 245.444976,233.304088 C245.444976,232.69614 245.145543,232.274213 244.546669,232.038293 L244.546669,232.038293 Z M239.238495,240.966914 L239.238495,229.846969 C239.928108,229.846969 240.960242,229.849238 242.33493,229.853775 C243.709618,229.858312 244.474078,229.865117 244.628334,229.874191 C245.508497,229.937708 246.238931,230.128256 246.819657,230.44584 C247.808706,230.990271 248.303224,231.874958 248.303224,233.099928 C248.303224,234.034534 248.042354,234.710525 247.520608,235.127922 C246.998862,235.545319 246.356897,235.794846 245.594694,235.876511 C246.29338,236.021693 246.819655,236.234925 247.173535,236.516214 C247.826852,237.042497 248.153506,237.872742 248.153506,239.006973 L248.153506,240.000554 C248.153506,240.10944 248.160311,240.218325 248.173922,240.327211 C248.187533,240.436097 248.212485,240.544982 248.248781,240.653868 L248.344056,240.966914 L245.567472,240.966914 C245.476734,240.613034 245.417755,240.100369 245.390533,239.428904 C245.363312,238.75744 245.304332,238.303754 245.213594,238.067834 C245.068412,237.677659 244.796201,237.405447 244.396952,237.251192 C244.179179,237.160454 243.847989,237.101474 243.40337,237.074253 L242.763667,237.033421 L242.151186,237.033421 L242.151186,240.966914 L239.238495,240.966914 Z"
|
||||
fill="#1D531D"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
<h2 id="opensource">Open Source</h2>
|
||||
<p>
|
||||
I believe in open source as a form of sharing, networking between companies and training between developers.
|
||||
<br />
|
||||
With open source, developers from all over the world collaborate on shared projects.
|
||||
</p>
|
||||
</hgroup>
|
||||
|
||||
<details>
|
||||
<summary>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>
|
||||
<a href="https://opensource.org/osd" target="_blank" rel="noopener noreferrer">Open source definition</a>
|
||||
</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>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>
|
||||
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>
|
||||
</details>
|
||||
|
||||
<style>
|
||||
.opensource-section {
|
||||
font-size: 16px;
|
||||
--font-size: 16px;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
#opensource-logo {
|
||||
float: left;
|
||||
margin: 0 1.5rem 1.5rem 0;
|
||||
}
|
||||
</style>
|
||||
</section>
|
||||
80
src/components/Plone.astro
Normal file
80
src/components/Plone.astro
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
import Blockquote from './Blockquote.astro';
|
||||
---
|
||||
|
||||
<section class="plone-section">
|
||||
<hgroup class="clearfix">
|
||||
<a href="https://plone.org" target="_blank" rel="noopener noreferrer">
|
||||
<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">
|
||||
<g clip-path="url(#clip0_1_2)">
|
||||
<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"
|
||||
fill="#0083BE"></path>
|
||||
<path
|
||||
d="M31.069 20.355C31.069 22.791 29.1 24.756 26.669 24.756C24.239 24.756 22.269 22.786 22.269 20.355C22.269 17.922 24.247 15.957 26.669 15.957C29.101 15.954 31.069 17.924 31.069 20.355Z"
|
||||
fill="#0083BE"></path>
|
||||
<path
|
||||
d="M17.702 33.578C20.1331 33.578 22.104 31.6071 22.104 29.176C22.104 26.7448 20.1331 24.774 17.702 24.774C15.2708 24.774 13.3 26.7448 13.3 29.176C13.3 31.6071 15.2708 33.578 17.702 33.578Z"
|
||||
fill="#0083BE"></path>
|
||||
<path
|
||||
d="M20.343 0C9.108 0.001 0.001 9.107 0 20.343C0.001 31.577 9.105 40.684 20.343 40.686C31.578 40.684 40.684 31.582 40.686 20.343C40.684 9.107 31.578 0.001 20.343 0ZM31.792 31.792C28.854 34.726 24.816 36.534 20.341 36.535C15.862 36.534 11.828 34.723 8.891 31.792C5.958 28.854 4.15 24.816 4.149 20.343C4.15 15.865 5.96 11.83 8.892 8.893C11.83 5.959 15.864 4.151 20.342 4.15C24.82 4.151 28.855 5.962 31.792 8.893C34.727 11.831 36.534 15.869 36.536 20.343C36.535 24.819 34.726 28.854 31.792 31.792Z"
|
||||
fill="#0083BE"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_2">
|
||||
<rect width="40.686" height="40.686" fill="white"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</a>
|
||||
<h2 id="plone">
|
||||
<a href="https://plone.org" target="_blank" rel="noopener noreferrer"> Plone</a>
|
||||
</h2>
|
||||
<p>The world's most secure content management system, with a user-friendly interface and a growing open-source community.</p>
|
||||
</hgroup>
|
||||
|
||||
<Blockquote text="Plone is backed up by the Plone Foundation, so it will stay open source forever." />
|
||||
|
||||
<details>
|
||||
<summary>Why Plone?</summary>
|
||||
<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
|
||||
standard for content management systems by offering the most functionality and customization out of the box.
|
||||
</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
|
||||
and has the best security track record of any major CMS.
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>What is Plone?</summary>
|
||||
<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,
|
||||
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>
|
||||
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
|
||||
of Plone and the Plone community.
|
||||
</p>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.plone-section {
|
||||
font-size: 16px;
|
||||
--font-size: 16px;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
#plone-logo {
|
||||
float: right;
|
||||
margin: 0 0 1.5rem 1.5rem;
|
||||
}
|
||||
</style>
|
||||
34
src/components/Privacy.astro
Normal file
34
src/components/Privacy.astro
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<section class="privacy-section">
|
||||
<hgroup class="clearfix">
|
||||
<h2 id="privacy">Privacy</h2>
|
||||
<p>I believe that privacy is a fundamental human right. I support Net Neutrality and Free Software movements as I think freedom on the Internet is essential for a free society.</p>
|
||||
</hgroup>
|
||||
|
||||
<p>
|
||||
A free Internet is one where nor governments nor companies can take away your freedom to access information, to share information, to communicate with others, to express yourself, to innovate, to
|
||||
create, to learn, to teach, to collaborate, to organize, to participate in politics, to be anonymous, to be private, to be secure, to be free.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I try to only use open-source software, I self-host most of my utilities and try my best to build accessible software. All of this is to ensure my work and efforts in the web are accessible from
|
||||
anyone.
|
||||
</p>
|
||||
|
||||
<style>
|
||||
.privacy-section {
|
||||
font-size: 16px;
|
||||
--font-size: 16px;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
#opensource-logo {
|
||||
float: left;
|
||||
margin: 0 1.5rem 1.5rem 0;
|
||||
}
|
||||
</style>
|
||||
</section>
|
||||
|
|
@ -18,8 +18,14 @@
|
|||
|
||||
<style>
|
||||
#themeToggle {
|
||||
border: 0;
|
||||
background: none;
|
||||
border: 1px solid var(--item-bg-color-var);
|
||||
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;
|
||||
color: var(--text-color);
|
||||
padding: 0.5rem;
|
||||
aspect-ratio: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sun {
|
||||
fill: #fff;
|
||||
|
|
@ -51,30 +57,30 @@
|
|||
<script>
|
||||
const theme = (() => {
|
||||
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
|
||||
return localStorage.getItem('theme')
|
||||
return localStorage.getItem('theme');
|
||||
}
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
return 'dark'
|
||||
return 'dark';
|
||||
}
|
||||
return 'light'
|
||||
})()
|
||||
return 'light';
|
||||
})();
|
||||
|
||||
if (theme === 'light') {
|
||||
document.documentElement.setAttribute('data-theme', 'light')
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'dark')
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
|
||||
window.localStorage.setItem('theme', theme || 'dark')
|
||||
window.localStorage.setItem('theme', theme || 'dark');
|
||||
|
||||
const handleToggleClick = () => {
|
||||
const element = document.documentElement
|
||||
const currentTheme = element.getAttribute('data-theme')
|
||||
const themeToSet = currentTheme === 'light' ? 'dark' : 'light'
|
||||
document.documentElement.setAttribute('data-theme', themeToSet)
|
||||
const element = document.documentElement;
|
||||
const currentTheme = element.getAttribute('data-theme');
|
||||
const themeToSet = currentTheme === 'light' ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', themeToSet);
|
||||
|
||||
localStorage.setItem('theme', themeToSet)
|
||||
}
|
||||
localStorage.setItem('theme', themeToSet);
|
||||
};
|
||||
|
||||
document.getElementById('themeToggle')?.addEventListener('click', handleToggleClick)
|
||||
document.getElementById('themeToggle')?.addEventListener('click', handleToggleClick);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
---
|
||||
import '@picocss/pico/css/pico.min.css'
|
||||
import '@fontsource/ubuntu-mono/400.css'
|
||||
import '@fontsource/ubuntu-mono/700.css'
|
||||
import '@fontsource/ubuntu/400.css'
|
||||
import '@fontsource/ubuntu/700.css'
|
||||
import '@fontsource/ubuntu/400-italic.css'
|
||||
import '../styles/global.css'
|
||||
import '@picocss/pico/css/pico.min.css';
|
||||
import '@fontsource/ubuntu-mono/400.css';
|
||||
import '@fontsource/ubuntu-mono/700.css';
|
||||
import '@fontsource/ubuntu/400.css';
|
||||
import '@fontsource/ubuntu/700.css';
|
||||
import '@fontsource/ubuntu/400-italic.css';
|
||||
import '../styles/global.css';
|
||||
|
||||
import Header from '../components/Header.astro'
|
||||
import Footer from '../components/Footer.astro'
|
||||
const { title, description, image = '/logo.png' } = Astro.props
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
const { title, description, image = '/logo.png' } = Astro.props;
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -30,10 +30,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
|
|||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
|
||||
<meta
|
||||
name="viewport"
|
||||
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover"
|
||||
/>
|
||||
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
|
|
@ -56,7 +53,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
|
|||
<a class="skip-link" href="#navigation">Skip to navigation</a>
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
<Header />
|
||||
<main class="container" id="main">
|
||||
<main id="main">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,18 +1,90 @@
|
|||
---
|
||||
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 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>
|
||||
<Greeting />
|
||||
<p>I'm a web frontend developer, working as freelance consultant</p>
|
||||
<hgroup class="home-heading-hero">
|
||||
<div class="container">
|
||||
<Greeting />
|
||||
<p>I'm a web frontend developer, working as freelance consultant.</p>
|
||||
</div>
|
||||
</hgroup>
|
||||
|
||||
<IconsTech />
|
||||
<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>
|
||||
|
||||
<ContactLinks />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
import rss from '@astrojs/rss'
|
||||
import { getCollection } from 'astro:content'
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'
|
||||
|
||||
export async function get(context) {
|
||||
const posts = await getCollection('blog')
|
||||
return rss({
|
||||
title: SITE_TITLE,
|
||||
description: SITE_DESCRIPTION,
|
||||
site: context.site,
|
||||
items: posts.map((post) => ({
|
||||
...post.data,
|
||||
link: `/blog/${post.slug}/`
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
|
@ -1,12 +1,24 @@
|
|||
/* Amber Light scheme (Default) */
|
||||
/* Can be forced with data-theme="light" */
|
||||
[data-theme="light"],
|
||||
:root[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--primary: #007db9;
|
||||
--primary-hover: #026ea0;
|
||||
--primary-focus: rgb(0, 125, 185, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--text-color: hsl(205, 20%, 32%);
|
||||
--primary: #20a235;
|
||||
--primary-hover: #1d8e2f;
|
||||
--primary-focus: rgba(21, 32, 23, 0.25);
|
||||
--primary-inverse: #ffffff;
|
||||
--secondary: #fff;
|
||||
--text-color: #222;
|
||||
--background-color: #f6f1e7;
|
||||
--accordion-border-color: rgba(32, 162, 53, 0.25);
|
||||
--bg-color: #f6f1e7;
|
||||
--item-bg-color: #fff;
|
||||
--item-bg-color-var: #eee;
|
||||
--box-shadow: -35.43195724px -35.43195724px 88.57988739px 0px rgba(17, 17, 17, 0.4);
|
||||
--neumorph-shadow-darker: #aaa;
|
||||
--neumorph-shadow-darker-inset: #aaa;
|
||||
--neumorph-shadow-lighter: #fff;
|
||||
--neumorph-shadow-lighter-inset: #fff;
|
||||
}
|
||||
|
||||
/* Amber Dark scheme (Auto) */
|
||||
|
|
@ -17,20 +29,41 @@
|
|||
--primary-hover: #ffc107;
|
||||
--primary-focus: rgba(255, 179, 0, 0.25);
|
||||
--primary-inverse: rgba(0, 0, 0, 0.75);
|
||||
--background-color: #212222;
|
||||
--text-color: hsl(205, 16%, 77%);
|
||||
--secondary: #343434;
|
||||
--background-color: #222;
|
||||
--accordion-border-color: rgba(255, 179, 0, 0.25);
|
||||
--bg-color: #222;
|
||||
--item-bg-color: #343434;
|
||||
--item-bg-color-var: #272727;
|
||||
--text-color: #fff;
|
||||
--box-shadow: 17.71597862px 17.71597862px 53.14793396px 0px rgba(0, 0, 0, 0.6);
|
||||
--neumorph-shadow-darker: #000;
|
||||
--neumorph-shadow-darker-inset: #000;
|
||||
--neumorph-shadow-lighter: #555;
|
||||
--neumorph-shadow-lighter-inset: #555;
|
||||
}
|
||||
}
|
||||
|
||||
/* Amber Dark scheme (Forced) */
|
||||
/* Enabled if forced with data-theme="dark" */
|
||||
[data-theme="dark"] {
|
||||
[data-theme="dark"],
|
||||
:root[data-theme="dark"] {
|
||||
--primary: #ffb300;
|
||||
--primary-hover: #ffc107;
|
||||
--primary-focus: rgba(255, 179, 0, 0.25);
|
||||
--primary-inverse: rgba(0, 0, 0, 0.75);
|
||||
--background-color: #212222;
|
||||
--text-color: hsl(205, 16%, 77%);
|
||||
--secondary: #343434;
|
||||
--background-color: #222;
|
||||
--accordion-border-color: rgba(255, 179, 0, 0.25);
|
||||
--bg-color: #222;
|
||||
--item-bg-color: #343434;
|
||||
--item-bg-color-var: #272727;
|
||||
--text-color: #fff;
|
||||
--box-shadow: 17.71597862px 17.71597862px 53.14793396px 0px rgba(0, 0, 0, 0.6);
|
||||
--neumorph-shadow-darker: #000;
|
||||
--neumorph-shadow-darker-inset: #000;
|
||||
--neumorph-shadow-lighter: #555;
|
||||
--neumorph-shadow-lighter-inset: #555;
|
||||
}
|
||||
|
||||
/* Amber (Common styles) */
|
||||
|
|
@ -94,3 +127,38 @@ a:focus {
|
|||
clip-path: inset(50%) !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
article {
|
||||
--border-radius: 1rem;
|
||||
--card-box-shadow: .25rem .25rem 2rem var(--neumorph-shadow-darker), -.5rem -.5rem 1rem var(--neumorph-shadow-lighter);
|
||||
--card-background-color: var(--background-color);
|
||||
}
|
||||
|
||||
a[role="button"],
|
||||
button {
|
||||
--box-shadow: .25rem .25rem 0.5rem var(--neumorph-shadow-darker), -.25rem -.25rem 0.5rem var(--neumorph-shadow-lighter);
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--border-radius: 1rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
a[role="button"]:hover,
|
||||
a[role="button"]:focus,
|
||||
button:hover,
|
||||
button:focus {
|
||||
--box-shadow: -0.25rem -0.25rem 0.5rem var(--neumorph-shadow-darker), 0.25rem 0.25rem 0.5rem var(--neumorph-shadow-lighter);
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[role="button"]:active,
|
||||
button:active {
|
||||
--box-shadow: inset .25rem .25rem 0.5rem var(--neumorph-shadow-darker-inset), inset -.25rem -.25rem 0.5rem var(--neumorph-shadow-lighter-inset);
|
||||
--background-color: var(--primary-focus);
|
||||
--border-color: transparent;
|
||||
--color: var(--text-color);
|
||||
}
|
||||
Loading…
Reference in a new issue