diff --git a/components/AnimatedName.js b/components/AnimatedName.js index e146307..ee2f2e8 100644 --- a/components/AnimatedName.js +++ b/components/AnimatedName.js @@ -1,27 +1,33 @@ import { useState, useEffect } from 'react'; +import { profile } from '../data/profile'; -const names = ['πŸ‘¨πŸΏβ€πŸ’Ό Jesse Egbosionu', 'πŸ‘¨πŸΏβ€πŸ’» jesseinit', '😎 jessewithit']; +const names = profile.handles; export default function AnimatedName() { const [currentIndex, setCurrentIndex] = useState(0); const [isAnimating, setIsAnimating] = useState(false); useEffect(() => { + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; + + let timeout; const interval = setInterval(() => { setIsAnimating(true); - - setTimeout(() => { + timeout = setTimeout(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % names.length); setIsAnimating(false); - }, 500); // Half of animation duration for smooth transition - }, 3000); // Change name every 3 seconds + }, 350); + }, 3000); - return () => clearInterval(interval); + return () => { + clearInterval(interval); + clearTimeout(timeout); + }; }, []); return ( - - + + diff --git a/components/Footer.js b/components/Footer.js index 62f872c..becbd03 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -1,11 +1,14 @@ +import SocialLinks from './SocialLinks'; +import { profile } from '../data/profile'; + export default function Footer() { return (
-
-

- Built with ❀️ +

+

+ Β© {new Date().getFullYear()} {profile.name}. Built with Next.js, shipped on Kubernetes.

-

Β© {new Date().getFullYear()}

+
); diff --git a/components/Header.js b/components/Header.js index d778c16..977745d 100644 --- a/components/Header.js +++ b/components/Header.js @@ -1,31 +1,58 @@ +import { useEffect, useState } from 'react'; import Link from 'next/link'; +import ThemeToggle from './ThemeToggle'; +import Icon from './Icon'; + +const links = [ + { href: '/#about', label: 'About' }, + { href: '/#stack', label: 'Stack' }, + { href: '/#projects', label: 'Projects' }, +]; + +export default function Header() { + const [scrolled, setScrolled] = useState(false); + const [open, setOpen] = useState(false); + + useEffect(() => { + const onScroll = () => setScrolled(window.scrollY > 8); + onScroll(); + window.addEventListener('scroll', onScroll, { passive: true }); + return () => window.removeEventListener('scroll', onScroll); + }, []); -export default function Header({ showNavLinks = true }) { return ( -
-