Add macchinisti page (WIP)

dev
Francesco Minnocci 2 months ago
parent 39133d8aed
commit f608ea4f93

Binary file not shown.

@ -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"
},

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

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

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

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

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

Loading…
Cancel
Save