mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-01-14 15:54:13 +01:00
Add animated text gradient component and update references in content files
This commit is contained in:
44
app/components/content/AnimatedTextGradient.vue
Normal file
44
app/components/content/AnimatedTextGradient.vue
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<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>
|
||||||
@@ -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.
|
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 **Arthur Danjou**, a Mathematics student in Statistics at the Paris-Dauphine University in France.
|
Hey, I'm :animated-text-gradient{text="Arthur Danjou"}, 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.
|
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.
|
||||||
|
|
||||||
|
|||||||
@@ -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.
|
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 **Arthur Danjou**, estudiante de matemáticas especializado en Estadística en la Universidad Paris-Dauphine, en Francia.
|
Hola ! Soy :animated-text-gradient{text="Arthur Danjou"}, 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.
|
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.
|
||||||
|
|
||||||
|
|||||||
@@ -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.
|
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 **Arthur Danjou**, étudiant en mathématiques spécialisé en Statistiques à l'Université Paris-Dauphine en France.
|
Salut, je suis :animated-text-gradient{text="Arthur Danjou"}, é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"}
|
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
|
des technologies émergentes, je suis au cœur d'un domaine en pleine expansion. Ma formation en :hover-text{hover="Les
|
||||||
|
|||||||
Reference in New Issue
Block a user