+
GitHub
diff --git a/components/ui/animated-marquee.tsx b/components/ui/animated-marquee.tsx
index a0c7086..7b4824b 100644
--- a/components/ui/animated-marquee.tsx
+++ b/components/ui/animated-marquee.tsx
@@ -1,29 +1,18 @@
"use client"
-import { motion } from "framer-motion"
-
interface AnimatedMarqueeProps {
items: string[]
}
export function AnimatedMarquee({ items }: AnimatedMarqueeProps) {
- // Duplicate items to ensure smooth infinite loop
const marqueeItems = [...items, ...items, ...items, ...items]
return (
-
-
+
{marqueeItems.map((item, i) => (
))}
-
+
{skills.map((skill) => (
-
- {skill}
-
+ {skill}
+
))}
-
+
)
}
diff --git a/components/ui/animated-stats.tsx b/components/ui/animated-stats.tsx
index ea8dee1..51ba3c7 100644
--- a/components/ui/animated-stats.tsx
+++ b/components/ui/animated-stats.tsx
@@ -1,37 +1,47 @@
"use client"
-import { motion } from "framer-motion"
+
+import { useRef, useEffect, useState } from "react"
import { AboutStatViewModel } from "@/src/interface-adapters/presenters/about-presenter"
-const container = {
- hidden: { opacity: 0 },
- visible: {
- opacity: 1,
- transition: {
- staggerChildren: 0.1
- }
- }
-}
+export function AnimatedStats({ stats }: { stats: AboutStatViewModel[] }) {
+ const ref = useRef(null)
+ const [mounted, setMounted] = useState(false)
-const item = {
- hidden: { opacity: 0, y: 10 },
- visible: { opacity: 1, y: 0 }
-}
+ useEffect(() => { setMounted(true) }, [])
+
+ useEffect(() => {
+ if (!mounted || !ref.current) return
+
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ ref.current!.querySelectorAll("[data-stat]").forEach((el, i) => {
+ ;(el as HTMLElement).style.animationDelay = `${i * 0.1}s`
+ el.classList.remove("stat-hidden")
+ el.classList.add("stat-visible")
+ })
+ observer.disconnect()
+ }
+ },
+ { rootMargin: "-50px" }
+ )
+
+ observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [mounted])
-export function AnimatedStats({ stats }: { stats: AboutStatViewModel[] }) {
return (
-
+
{stats.map((stat) => (
-
- {stat.label}
- {stat.value}
-
+
+ {stat.label}
+ {stat.value}
+
))}
-
+
Loading…
- ) : content === '' ? (
+ {loadFailed ? (
Could not load CV content.
+ ) : content === null ? (
+ Loading…
) : (
)}
diff --git a/components/ui/experience-card.tsx b/components/ui/experience-card.tsx
index 3469a86..3f6aba8 100644
--- a/components/ui/experience-card.tsx
+++ b/components/ui/experience-card.tsx
@@ -3,7 +3,6 @@
import Image from "next/image"
import { useRef, useEffect } from "react"
import { ExperienceViewModel } from "@/src/interface-adapters/presenters/experience-presenter"
-import { motion, AnimatePresence } from "framer-motion"
import { ChevronDown } from "lucide-react"
import { useGlassTilt } from "@/hooks/use-glass-tilt"
@@ -17,7 +16,7 @@ const TEASER_HEIGHT = "2.875rem"
export function ExperienceCard({ experience, isOpen, onToggle }: ExperienceCardProps) {
const cardRef = useRef(null)
- const { ref: tiltRef, tilt, onMouseMove, onMouseLeave } = useGlassTilt(0.6)
+ const { ref: tiltRef, onMouseMove, onMouseLeave } = useGlassTilt(0.6)
useEffect(() => {
if (isOpen) cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
@@ -43,13 +42,11 @@ export function ExperienceCard({ experience, isOpen, onToggle }: ExperienceCardP
{/* Card */}
-
@@ -60,38 +57,34 @@ export function ExperienceCard({ experience, isOpen, onToggle }: ExperienceCardP
{experience.company}
-
- {experience.description}
-
+
+
{experience.description}
+
-
+