feat: ajouter le composant BackgroundTitle et l'utiliser dans les pages de projets et de contenu

This commit is contained in:
2026-02-16 21:16:07 +01:00
parent f489f933b5
commit 0beb1d8b4e
4 changed files with 36 additions and 19 deletions

View File

@@ -0,0 +1,11 @@
<script lang="ts" setup>
defineProps<{
title: string
}>()
</script>
<template>
<h1 class="mb-2 font-bold text-7xl text-transparent opacity-15 text-stroke-neutral-400 dark:text-stroke-neutral-500 text-stroke-2 -translate-x-16">
{{ title }}
</h1>
</template>

View File

@@ -79,9 +79,7 @@ const grouped_projects = computed(() => {
:key="group"
class="relative"
>
<h1 class="mb-2 font-bold text-7xl text-transparent opacity-15 text-stroke-neutral-400 dark:text-stroke-neutral-500 text-stroke-2 -translate-x-8">
{{ group }}
</h1>
<BackgroundTitle :title="group" />
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 grid-rows-auto">
<NuxtLink
v-for="project in projects"

View File

@@ -20,7 +20,8 @@ When I'm not deriving generalization bounds or fixing pipelines, I enjoy :hover-
---
## 🛠 Scientific & Technical Arsenal
::BackgroundTitle{title="Scientific & Technical Arsenal"}
::
My research capabilities rely on a :hover-text{text="dual expertise" hover="The Scientist & The Builder"}: :hover-text{text="advanced mathematical modeling" hover="Stochastic Calculus, Optimization, Probability"} for conception, and :hover-text{text="robust engineering" hover="CI/CD, Docker, Kubernetes"} for execution.
@@ -29,7 +30,8 @@ My research capabilities rely on a :hover-text{text="dual expertise" hover="The
---
## 💼 Research & Engineering Path
::BackgroundTitle{title="Research & Engineering Path"}
::
Theoretical knowledge is nothing without concrete application. From :hover-text{text="building distributed systems" hover="High-availability architectures"} to designing :hover-text{text="defensive AI pipelines" hover="Adversarial Robustness"}, my journey reflects a constant shift towards critical challenges.
@@ -38,7 +40,8 @@ Theoretical knowledge is nothing without concrete application. From :hover-text{
---
## 🎓 Academic Foundation
::BackgroundTitle{title="Academic Foundation"}
::
Mathematical rigor is the cornerstone of Safe AI. My background in :hover-text{text="Statistics, Probability, and Optimization" hover="The M280 Trinity 📐"} provides the necessary tools to understand and secure modern Deep Learning architectures.
@@ -47,7 +50,8 @@ Mathematical rigor is the cornerstone of Safe AI. My background in :hover-text{t
---
## 📊 Live Telemetry
::BackgroundTitle{title="Live Telemetry"}
::
Research requires discipline and transparency. Here is a real-time overview of my :hover-text{text="current environment" hover="OS, Editor, Activity"} and historical data.
@@ -58,6 +62,7 @@ Research requires discipline and transparency. Here is a real-time overview of m
::
::home-live-stats
::
---
@@ -65,4 +70,4 @@ Research requires discipline and transparency. Here is a real-time overview of m
::
::home-catch-phrase
::
::

View File

@@ -9,11 +9,12 @@ Research requires a reliable environment. This page documents the hardware infra
---
## 🖥️ Workstations & Compute
::BackgroundTitle{title="Workstations & Compute"}
::
My setup is split between mobile efficiency for academic writing and a fixed station for heavier computation.
::div{class="grid grid-cols-1 md:grid-cols-2 gap-6"}
:::div{class="grid grid-cols-1 md:grid-cols-2 gap-6"}
::card{title="Daily Driver" icon="i-ph-laptop-duotone"}
**Apple MacBook Pro 13"**
@@ -30,7 +31,7 @@ My setup is split between mobile efficiency for academic writing and a fixed sta
* **Usage:** Local Deep Learning training, gaming, and heavy compilation tasks.
::
::
:::
### Peripherals
I rely on a specific set of tools to maintain flow during deep work sessions.
@@ -42,17 +43,18 @@ I rely on a specific set of tools to maintain flow during deep work sessions.
---
## 🛠️ Development Ecosystem
::BackgroundTitle{title="Development Ecosystem"}
::
I prioritize tools that offer **AI-integration** and **strong type-checking**.
::div{class="grid grid-cols-1 md:grid-cols-2 gap-6"}
:::div{class="grid grid-cols-1 md:grid-cols-2 gap-6"}
::card{title="IDEs & Editors" icon="i-ph-code-duotone"}
* :prose-icon[VS Code]{color="blue" icon="i-logos:visual-studio-code"} — For general-purpose scripting and remote SSH development.
* :prose-icon[Positron]{color="cyan" icon="i-devicon:positron"} — Lightweight IDE for R and statistical analysis, offering superior performance to RStudio while maintaining VS Code familiarity.
* :prose-icon[JetBrains]{color="purple" icon="i-logos:jetbrains"} — *PyCharm* & *DataGrip* are unrivaled for complex refactoring and database management.
* **Theme:** Catppuccin Latte (Light) / Macchiato (Dark).
* **Theme:** :prose-icon[ArtLab]{color="indigo" icon="i-ph-palette-duotone"} — A custom VS Code theme with optimized contrast for extended coding sessions, supporting both light and dark modes.
* **Font:** GitHub Monaspace Neon (primary, ligatures enabled) & JetBrains Mono.
```python [main.py]
@@ -69,17 +71,18 @@ I prioritize tools that offer **AI-integration** and **strong type-checking**.
* :prose-icon[Firefox]{color="orange" icon="i-logos:firefox"} — Chosen for its privacy features and robust DevTools.
::
::
:::
---
## 🏠 Infrastructure & Homelab
::BackgroundTitle{title="Infrastructure & Homelab"}
::
To bridge the gap between theory and MLOps, I maintain a **self-hosted cluster**. This allows me to experiment with distributed systems, data pipelines, and network security in a controlled environment.
### Hardware Infrastructure
::div{class="grid grid-cols-1 md:grid-cols-3 gap-4"}
:::div{class="grid grid-cols-1 md:grid-cols-3 gap-4"}
::card{title="Compute Node" icon="i-ph-cpu-duotone"}
**Beelink EQR6** *:hover-text{text="AMD Ryzen" hover="Proxmox Host"}*
@@ -99,7 +102,7 @@ Centralized Data Lake for datasets and backups.
Ensures fast, stable local communication.
::
::
:::
### Service Stack
I run these services using **Docker** and **Portainer**, strictly behind a **Traefik** reverse proxy.
@@ -113,4 +116,4 @@ I run these services using **Docker** and **Portainer**, strictly behind a **Tra
* :prose-icon[Utilities]{icon="i-ph-wrench-duotone"} — BentoPDF, Palmr, Home Assistant.
::
> *This list is constantly updated as I experiment with new tools and equipment.*
> *This list is constantly updated as I experiment with new tools and equipment.*