Add macchinisti page (WIP)

package.json

@@ -25,6 +25,7 @@
         "astro": "^4.15.11",
         "fuse.js": "^7.0.0",
         "katex": "^0.16.9",
+        "lucide-static": "^0.468.0",
         "preact": "^10.19.6",
         "typescript": "^5.3.3"
     },

src/components/Bubble.astro

@@ -0,0 +1,47 @@
+---
+import iconGithub from 'lucide-static/icons/github.svg'
+import iconLinkedin from 'lucide-static/icons/linkedin.svg'
+import iconGlobe from 'lucide-static/icons/globe.svg'
+import iconMail from 'lucide-static/icons/mail.svg'
+
+const ICONS_MAP = {
+    github: iconGithub,
+    linkedin: iconLinkedin,
+    website: iconGlobe,
+    mail: iconMail,
+}
+
+type Props = {
+    image: ImageMetadata
+    fullName: string
+    date: string
+    description: string
+    social?: {
+        github?: string
+        linkedin?: string
+        website?: string
+        mail?: string
+    }
+}
+
+const { image, fullName, date, description, social } = Astro.props
+---
+
+<div class="bubble">
+    <img src={image.src} alt={fullName.toLowerCase()} />
+    <div class="title">{fullName}</div>
+    <div class="date">{date}</div>
+    <div class="description">{description}</div>
+    {
+        social && (
+            <div class="social">
+                {Object.entries(social).map(([key, value]) => (
+                    <a href={value} target="_blank" rel="noopener noreferrer">
+                        {/* @ts-ignore */}
+                        <img src={ICONS_MAP[key].src} alt={key} />
+                    </a>
+                ))}
+            </div>
+        )
+    }
+</div>

src/components/Header.astro

@@ -5,6 +5,7 @@
     <input type="checkbox" id="header-menu-toggle" />
     <div class="links desktop-only">
         <a role="button" href="/utenti">Utenti</a>
+        <a role="button" href="/macchinisti">Macchinisti</a>
         <!-- <a role="button" href="/appunti">Appunti</a> -->
         <a role="button" href="/notizie">Notizie</a>
         <a role="button" href="/guide">Guide</a>
@@ -22,6 +23,7 @@
     <div class="side-menu">
         <div class="links">
             <a role="button" href="/utenti">Utenti</a>
+            <a role="button" href="/macchinisti">Macchinisti</a>
             <!-- <a role="button" href="/appunti">Appunti</a> -->
             <a role="button" href="/notizie">Notizie</a>
             <a role="button" href="/guide">Guide</a>

src/pages/macchinisti.astro

@@ -0,0 +1,88 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+
+import Header from '../components/Header.astro'
+import Footer from '../components/Footer.astro'
+
+import francescoMinnocci from '@/assets/macchinisti/francesco-minnocci.png'
+
+import Bubble from '../components/Bubble.astro'
+---
+
+<BaseLayout title="Macchinisti | PHC" pageTags={'macchinisti'}>
+    <Header />
+    <main>
+        <div class="card large" style={{ '--card-base': '#e1766b' }}>
+            <div class="title">Ecco i Macchinisti!</div>
+            <div class="text">
+                <p>Le persone che hanno reso questo possibile vi dicono ciao!</p>
+            </div>
+        </div>
+
+        <div class="bubble-array">
+            <Bubble
+                image={francescoMinnocci}
+                fullName="Antonio De Lucreziis"
+                date="2019—Presente"
+                description="Fanno coose Lorem ipsum dolor sit amet."
+            />
+            <Bubble
+                image={francescoMinnocci}
+                fullName="Illya Serdyuk"
+                date="2019—Presente"
+                description="Fanno coose Lorem ipsum dolor sit amet."
+            />
+            <Bubble
+                image={francescoMinnocci}
+                fullName="Francesco Minnocci"
+                date="2022—Presente"
+                description="Ho una laurea(?)"
+                social={{
+                    github: 'https://github.com/BachoSeven',
+                    website: 'https://bachoseven.com',
+                }}
+            />
+
+            <Bubble
+                image={francescoMinnocci}
+                fullName="Francesco Baldino"
+                date="2022—Presente"
+                description="Fanno coose Lorem ipsum dolor sit amet."
+            />
+
+            <Bubble
+                image={francescoMinnocci}
+                fullName="Luca Lombardo"
+                date="2024—Presente"
+                description="quello che fa le cose serie."
+                social={{ linkedin: 'https://it.linkedin.com/in/l-lombardo' }}
+            />
+        </div>
+
+        <div class="card large" style={{ '--card-base': '#6BD6E1' }}>
+            <div class="title"><s>Deus</s> Ex Macchinisti</div>
+            <div class="text">
+                <p>
+                    Gli vogliamo molto bene, molti di loro hanno fatto cose eccoveli che ve li presentiamo
+                    subito ora ADESSO!
+                </p>
+            </div>
+        </div>
+
+        <div class="bubble-array">
+            <Bubble
+                image={francescoMinnocci}
+                fullName="Nome Cognome"
+                date="2004—2008"
+                description="Fanno coose Lorem ipsum dolor sit amet."
+            />
+            <Bubble
+                image={francescoMinnocci}
+                fullName="Nome Cognome"
+                date="2004—2008"
+                description="Fanno coose Lorem ipsum dolor sit amet."
+            />
+        </div>
+    </main>
+    <Footer />
+</BaseLayout>

src/styles/pages.scss

@@ -637,6 +637,64 @@
         }
     }
 
+    .macchinisti {
+        main {
+            justify-self: center;
+            // make a gradient between red and blue
+            background: linear-gradient(to top, #d5fbff, #ffd9d5);
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            padding: 6rem 4rem;
+            gap: 4rem;
+        }
+
+        .bubble-array {
+            display: flex;
+            width: 100%;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 4rem;
+
+            > .bubble {
+                display: grid;
+                grid-template-rows: auto auto auto auto;
+                grid-auto-rows: auto;
+                gap: 0.5rem;
+                text-align: center;
+                justify-items: center;
+                width: 25ch;
+
+                .date {
+                    display: grid;
+                    place-content: center;
+                    font-size: 16px;
+                    font-weight: 600;
+                    padding: 0rem 0.5rem;
+                    background: #0002;
+                    border-radius: 0.25rem;
+                }
+
+                .social {
+                    display: grid;
+                    grid-auto-flow: column;
+                    gap: 0.5rem;
+                    justify-content: center;
+                }
+
+                > img {
+                    border-radius: 100%;
+                    border: 4px solid #333;
+                    object-fit: cover;
+                    width: 100%;
+                    aspect-ratio: 1 / 1;
+                }
+            }
+        }
+    }
+
     //
     // Meta
     //