62e1d134ed
All checks were successful
Build and Deploy Hugo / Deploy Hugo Website (pull_request) Successful in 21s
Set animation speed to 60s for the tech banner in French homepage and the tech-banner shortcode.
104 lines
3.1 KiB
Markdown
104 lines
3.1 KiB
Markdown
---
|
|
|
|
title: Damien's NoteBook
|
|
layout: hextra-home
|
|
|
|
---
|
|
|
|
<!-- markdownlint-disable MD033 MD034-->
|
|
|
|
<div class="hx-mt-6 hx-mb-6">
|
|
{{< hextra/hero-headline >}}
|
|
BlocNote Personnel
|
|
pour les NetDevOps et SRE
|
|
{{< /hextra/hero-headline >}}
|
|
</div>
|
|
|
|
<div class="hx-mb-12">
|
|
{{< hextra/hero-subtitle style="margin:.3rem 0 2rem 0">}}
|
|
Documentation et NetLab à déployer,
|
|
Pour tester et pratiquer 🚀
|
|
{{< /hextra/hero-subtitle >}}
|
|
</div>
|
|
|
|
<div class="hx-mt-6"></div>
|
|
|
|
{{< hextra/feature-grid >}}
|
|
{{< hextra/feature-card
|
|
title="Documentations"
|
|
subtitle="Liste des documents et explications sur le concept de réseau ou de système"
|
|
link="documentation"
|
|
class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
|
|
image="/images/documentation.png"
|
|
imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
|
|
style="background: radial-gradient(ellipse at 50% 80%,rgba(58, 56, 113, 0.1),hsla(0,0%,100%,0));"
|
|
>}}
|
|
{{< hextra/feature-card
|
|
title="NetLab"
|
|
subtitle="Des Labs pour s'entraîner"
|
|
link="netlab"
|
|
class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-lg:min-h-[340px]"
|
|
image="/images/netlab.png"
|
|
imageClass="hx:top-[40%] hx:left-[36px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
|
|
style="background: radial-gradient(ellipse at 50% 80%,rgba(203, 28, 66, 0.1),hsla(0,0%,100%,0));"
|
|
>}}
|
|
{{< /hextra/feature-grid >}}
|
|
|
|
<div style="margin-top: 8rem; margin-bottom: 1.5rem;">
|
|
<div style="text-align: center; margin-bottom: 3rem;">
|
|
<h2 class="tech-title" style="
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: gradient-shift 4s ease infinite;
|
|
letter-spacing: -0.02em;
|
|
margin: 0;
|
|
padding: 0.5rem 0;
|
|
">
|
|
Technologies utilisées
|
|
</h2>
|
|
<p style="
|
|
color: #6b7280;
|
|
font-size: 1rem;
|
|
margin-top: 0.75rem;
|
|
font-weight: 400;
|
|
" class="dark:text-gray-400">
|
|
Les outils et plateformes avec lesquels je travaille
|
|
</p>
|
|
</div>
|
|
{{< tech-banner speed="60s" height="80px" gap="4rem" >}}
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes gradient-shift {
|
|
0%, 100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.tech-title {
|
|
background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #fbbf24 100%) !important;
|
|
background-size: 200% 200% !important;
|
|
-webkit-background-clip: text !important;
|
|
-webkit-text-fill-color: transparent !important;
|
|
background-clip: text !important;
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] .tech-title {
|
|
background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #fbbf24 100%) !important;
|
|
background-size: 200% 200% !important;
|
|
-webkit-background-clip: text !important;
|
|
-webkit-text-fill-color: transparent !important;
|
|
background-clip: text !important;
|
|
}
|
|
</style>
|