johanleroy/portfolio
1
1
Fork 0
Code Actions Activity

prod setup

Browse Source
This commit is contained in:
Johan LEROY
2026-05-04 11:00:44 +02:00
parent 9e9bc0f23d
commit d30e8e9376
45 changed files with 1998 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/formations.astro
View File

@@ -24,7 +24,7 @@ function extractLocation(school: string): string {
<span class="led led-cyan"></span>
// bpm log · crate digging
</p>
<h1 class="stencil text-5xl md:text-7xl uppercase leading-none">
<h1 class="stencil text-4xl sm:text-5xl md:text-7xl uppercase leading-none">
Mes <span class="text-[color:var(--color-cyan)] glow-text-cyan">formations</span>
</h1>
</div>
@@ -53,8 +53,8 @@ function extractLocation(school: string): string {
client:visible
>
<div
class="relative group transition-transform duration-500 hover:rotate-0"
style={`transform: rotate(${tilt}deg); max-width: 640px; margin-${isEven ? 'right' : 'left'}: auto;`}
class="formation-ticket relative group transition-transform duration-500"
style={`--tilt: ${tilt}deg; max-width: 640px; margin-${isEven ? 'right' : 'left'}: auto;`}
>
<article
class="relative bg-[#F5EDE0] text-[#14130E] rounded-sm overflow-hidden shadow-[0_20px_50px_-20px_rgba(0,0,0,0.8)]"
@@ -71,8 +71,8 @@ function extractLocation(school: string): string {
</div>
<!-- Body -->
<div class="p-5 md:p-8 grid grid-cols-1 md:grid-cols-[auto_1fr] gap-6">
<div class="font-mono text-[10px] uppercase tracking-widest space-y-2 md:border-r-2 md:border-dashed md:border-[#14130E]/30 md:pr-6">
<div class="p-5 md:p-8 grid grid-cols-1 sm:grid-cols-[auto_1fr] gap-5 sm:gap-6">
<div class="font-mono text-[10px] uppercase tracking-widest space-y-2 sm:border-r-2 sm:border-dashed sm:border-[#14130E]/30 sm:pr-6">
<div>
<div class="text-[#14130E]/50">DATE</div>
<div class="stencil text-base tracking-wider">{f.period}</div>
@@ -141,3 +141,24 @@ function extractLocation(school: string): string {
</div>
</section>
</BaseLayout>
<style>
.formation-ticket {
transform: rotate(0deg);
}
@media (min-width: 640px) {
.formation-ticket {
transform: rotate(var(--tilt, 0deg));
}
.formation-ticket:hover {
transform: rotate(0deg);
}
}
@media (prefers-reduced-motion: reduce) {
.formation-ticket,
.formation-ticket:hover {
transform: none;
transition: none;
}
}
</style>