Add animated text gradient component and update references in content files

This commit is contained in:
2025-04-19 16:04:02 +02:00
parent 5b03f3bdad
commit 215f0c0e8e
6 changed files with 40 additions and 48 deletions

View File

@@ -1,44 +0,0 @@
<script setup lang="ts">
const props = withDefaults(defineProps<{
text?: string
gradient?: string
class?: string
speed?: number
}>(), {
text: 'This is a text',
gradient: 'bg-radial from-orange-400 to-pink-500',
class: 'font-bold',
speed: 2,
})
const styleVars = {
'--animated-speed': `${props.speed}s`,
}
</script>
<template>
<span
class="inline-block bg-clip-text text-transparent animate-gradient" :class="[
gradient,
props.class,
]"
:style="styleVars"
>
<slot>{{ text }}</slot>
</span>
</template>
<style scoped>
.animate-gradient {
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: animatedTextGradient-to-right var(--animated-speed) linear infinite;
}
@keyframes animatedTextGradient-to-right {
to {
background-position: 200% center;
}
}
</style>

View File

@@ -0,0 +1,36 @@
<script setup lang="ts">
const styleVars = {
'--animated-speed': '40s',
}
</script>
<template>
<span
class="text-xl inline-block font-bold animate-gradient"
:style="styleVars"
>
<slot>Arthur Danjou</slot>
</span>
</template>
<style scoped>
.animate-gradient {
background-image: linear-gradient(
90deg,
#f43f5e, #f97316, #f59e0b, #eab308, #84cc16, #22c55e,
#10b981, #14b8a6, #06b6d4, #0ea5e9, #3b82f6, #6366f1,
#8b5cf6, #a855f7, #d946ef, #ec4899, #f43f5e
);
background-size: 1400% auto;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: gradient-animation var(--animated-speed) linear infinite;
}
@keyframes gradient-animation {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
</style>

View File

@@ -3,7 +3,7 @@ title: Arthur Danjou • Mathematics Lover and IA Enthusiast
description: I'm Arthur, a Mathematics lover and IA enthusiast. I'm currently studying at the University of Paris-Saclay. I'm passionate about Mathematics, Computer Science, and Artificial Intelligence.
---
Hey, I'm :animated-text-gradient{text="Arthur Danjou"}, a Mathematics student in Statistics at the Paris-Dauphine University in France.
Hey, I'm :home-name, a Mathematics student in Statistics at the Paris-Dauphine University in France.
With a :hover-text{hover="Technology is evolving far too quickly 🤯" position="top" text="deep understanding"} of emerging technologies, I'm at the heart of a rapidly expanding field. My background in :hover-text{hover="Maths is my main passion ∑" position="right" text="mathematics"} gives me a head start in understanding the concepts and theories behind these :hover-text{hover="My second passion 📱" text="technologies"} and in designing them effectively.

View File

@@ -3,7 +3,7 @@ title: Arthur Danjou • Mathematics Lover and IA Enthusiast
description: I'm Arthur, a Mathematics lover and IA enthusiast. I'm currently studying at the University of Paris-Saclay. I'm passionate about Mathematics, Computer Science, and Artificial Intelligence.
---
Hola ! Soy :animated-text-gradient{text="Arthur Danjou"}, estudiante de matemáticas especializado en Estadística en la Universidad Paris-Dauphine, en Francia.
Hola ! Soy :home-name, estudiante de matemáticas especializado en Estadística en la Universidad Paris-Dauphine, en Francia.
Con una :hover-text{hover="la tecnología avanza demasiado rápido 🤯" position="top" text="comprensión profunda"} de las tecnologías emergentes, me sitúo en el centro de un ámbito en plena expansión. Mi formación en :hover-text{hover="las matemáticas son mi mayor pasión Σ" position="right" text="matemáticas"} me permite comprender ampliamente los conceptos y las teorías que gobiernan las dichas :hover-text{hover="mi segunda pasión 📲" text="tecnologías"} y también poder concebirlas de manera eficaz.

View File

@@ -3,7 +3,7 @@ title: Arthur Danjou • Mathematics Lover and IA Enthusiast
description: I'm Arthur, a Mathematics lover and IA enthusiast. I'm currently studying at the University of Paris-Saclay. I'm passionate about Mathematics, Computer Science, and Artificial Intelligence.
---
Salut, je suis :animated-text-gradient{text="Arthur Danjou"}, étudiant en mathématiques spécialisé en Statistiques à l'Université Paris-Dauphine en France.
Salut, je suis :home-name, étudiant en mathématiques spécialisé en Statistiques à l'Université Paris-Dauphine en France.
Avec une :hover-text{hover="La technologie évolue beaucoup trop vite 🤯" position="top" text="compréhension profonde"}
des technologies émergentes, je suis au cœur d'un domaine en pleine expansion. Ma formation en :hover-text{hover="Les

View File

@@ -35,7 +35,7 @@ export default defineNuxtConfig({
kv: true,
database: true,
analytics: true,
// FIXME: workers: true,
workers: true,
},
// Nuxt Content