From f56297d0693ce91714972c660e992005e49aadc5 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Thu, 1 Jun 2023 17:01:11 +0200
Subject: [PATCH] feat: add contact links + icons tech list

---
 src/components/ContactLinks.astro | 59 +++++++++++++++++++++
 src/components/IconsTech.astro    | 86 +++++++++++++++++++++++++++++++
 src/pages/index.astro             | 39 ++++----------
 3 files changed, 155 insertions(+), 29 deletions(-)
 create mode 100644 src/components/ContactLinks.astro
 create mode 100644 src/components/IconsTech.astro

diff --git a/src/components/ContactLinks.astro b/src/components/ContactLinks.astro
new file mode 100644
index 0000000..b79ca9d
--- /dev/null
+++ b/src/components/ContactLinks.astro
@@ -0,0 +1,59 @@
+<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>
+  </hgroup>
+
+  <div class="grid">
+    <a role="button" class="" href="mailto:hello@nzambello.dev">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        role="presentation"
+        stroke="currentColor"
+        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
+      >
+      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
+      >
+      Book a meeting
+    </a>
+  </div>
+</article>
+<style>
+  .contact-links a {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .contact-links a svg {
+    width: 1.5em;
+    height: 1.5em;
+    font-size: 1em;
+    margin-right: 0.5rem;
+  }
+</style>
diff --git a/src/components/IconsTech.astro b/src/components/IconsTech.astro
new file mode 100644
index 0000000..2158f2b
--- /dev/null
+++ b/src/components/IconsTech.astro
@@ -0,0 +1,86 @@
+<div class="icons-tech" role="presentation">
+  <figure>
+    <svg viewBox="0 0 128 128" aria-label="css"
+      ><path
+        fill="currentColor"
+        d="m19.67 26 8.069 90.493 36.206 10.05 36.307-10.063L108.33 26H19.67zm69.21 50.488L86.53 98.38l.009 1.875L64 106.55v.001l-.018.015-22.719-6.225L39.726 83h11.141l.79 8.766 12.347 3.295-.004.015v-.032l12.394-3.495L77.702 77H51.795l-.222-2.355-.506-5.647L50.802 66h27.886l1.014-11H37.229l-.223-2.589-.506-6.03L36.235 43h55.597l-.267 3.334-2.685 30.154M89 14.374 81.851 6H89V1H73v4.363L81.39 13H73v5h16zm-19 0L63.193 6H70V1H55v4.363L62.733 13H55v5h15zM52 13h-8V6h8V1H38v17h14z"
+      ></path></svg
+    >
+    <figcaption>CSS</figcaption>
+  </figure>
+  <figure>
+    <svg viewBox="0 0 128 128" aria-label="typescript"
+      ><path
+        fill="currentColor"
+        d="M2 63.91v62.5h125v-125H2zm100.73-5a15.56 15.56 0 0 1 7.82 4.5 20.58 20.58 0 0 1 3 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 0 0-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 0 0 .54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 0 1-9.52-.1A23 23 0 0 1 80 109.19c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 0 1 1.15-.73l4.6-2.64 3.59-2.08.75 1.11a16.78 16.78 0 0 0 4.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 0 0 .69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 0 1-3.43-6.25 25 25 0 0 1-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 0 1 9.49.26zm-29.34 5.24v5.12H57.16v46.23H45.65V69.26H29.38v-5a49.19 49.19 0 0 1 .14-5.16c.06-.08 10-.12 22-.1h21.81z"
+      ></path></svg
+    >
+    <figcaption>TypeScript</figcaption>
+  </figure>
+  <figure>
+    <svg viewBox="0 0 128 128" aria-label="react"
+      ><g fill="currentColor"
+        ><circle cx="64" cy="64" r="11.4"></circle><path
+          d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"
+        ></path></g
+      ></svg
+    >
+    <figcaption>React</figcaption>
+  </figure>
+  <figure>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 297" aria-label="remix"
+      ><path
+        fill="currentColor"
+        d="M141.675 0C218.047 0 256 36.35 256 94.414c0 43.43-26.707 71.753-62.785 76.474c30.455 6.137 48.259 23.604 51.54 58.065l.474 6.337l.415 5.924l.358 5.542l.249 4.179l.267 4.93l.138 2.814l.198 4.47l.159 4.222l.079 2.427l.107 3.888l.092 4.446l.033 2.148l.06 6.226l.02 6.496v3.885h-78.758l.004-1.62l.028-3.147l.047-3.065l.136-7.424l.035-2.489l.027-3.902l-.004-2.496l-.023-2.617l-.032-2.054l-.064-2.876l-.094-3.05l-.125-3.242l-.16-3.455l-.096-1.813l-.16-2.833l-.186-2.976l-.287-4.204l-.247-3.342a116.56 116.56 0 0 0-.247-3.02l-.202-1.934c-2.6-22.827-11.655-32.157-27.163-35.269l-1.307-.245a60.184 60.184 0 0 0-2.704-.408l-1.397-.164c-.236-.025-.472-.05-.71-.073l-1.442-.127l-1.471-.103l-1.502-.081l-1.514-.058l-1.544-.039l-1.574-.018L0 198.74V136.9h127.62c2.086 0 4.108-.04 6.066-.12l1.936-.095l1.893-.122l1.85-.15c.305-.028.608-.056.909-.086l1.785-.193a86.3 86.3 0 0 0 3.442-.475l1.657-.28c20.709-3.755 31.063-14.749 31.063-36.2c0-24.075-16.867-38.666-50.602-38.666H0V0h141.675ZM83.276 250.785c10.333 0 14.657 5.738 16.197 11.23l.203.79l.167.782l.109.617l.046.306l.078.603l.058.59l.023.29l.031.569l.01.278l.008.54v29.507H0v-46.102h83.276Z"
+      ></path></svg
+    >
+    <figcaption>Remix</figcaption>
+  </figure>
+  <figure>
+    <svg aria-label="plone" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <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>
+    <figcaption>Plone</figcaption>
+  </figure>
+</div>
+<style>
+  .icons-tech {
+    margin: 3rem 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+  .icons-tech svg {
+    width: 3rem;
+    height: 3rem;
+    color: var(--text-color);
+    opacity: 0.25;
+  }
+  .icons-tech figure {
+    text-align: center;
+    margin: 1rem;
+    flex-grow: 1;
+  }
+  .icons-tech figure figcaption {
+    font-size: 0.8em;
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d39a823..4295cd9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,36 +1,17 @@
 ---
 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'
 ---
 
 <BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <h1>🧑‍🚀 Hello, Astronaut!</h1>
-  <p>
-    Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This template serves as a lightweight,
-    minimally-styled starting point for anyone looking to build a personal website, blog, or portfolio with Astro.
-  </p>
-  <p>
-    This template comes with a few integrations already configured in your
-    <code>astro.config.mjs</code> file. You can customize your setup with
-    <a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind, React, or Vue to your project.
-  </p>
-  <p>Here are a few ideas on how to get started with the template:</p>
-  <ul>
-    <li>Edit this page in <code>src/pages/index.astro</code></li>
-    <li>Edit the site header items in <code>src/components/Header.astro</code></li>
-    <li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
-    <li>Check out the included blog posts in <code>src/pages/blog/</code></li>
-    <li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
-  </ul>
-  <p>
-    Have fun! If you get stuck, remember to <a href="https://docs.astro.build/">read the docs</a> or <a
-      href="https://astro.build/chat">join us on Discord</a
-    > to ask questions.
-  </p>
-  <p>
-    Looking for a blog template with a bit more personality? Check out <a
-      href="https://github.com/Charca/astro-blog-template"
-      >astro-blog-template
-    </a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
-  </p>
+  <hgroup>
+    <h1>🧑‍🚀 Hello, Astronaut!</h1>
+    <p>I'm a web frontend developer, working as freelance consultant</p>
+  </hgroup>
+
+  <IconsTech />
+
+  <ContactLinks />
 </BaseLayout>