personal website
nekomimi.pet
1import "./index.css"
2import { useEffect, useRef, useState } from "react"
3import { SectionNav } from "./components/SectionNav"
4import { Header } from "./components/sections/Header"
5import { Work } from "./components/sections/Work"
6import { Connect } from "./components/sections/Connect"
7import { sections } from "./data/portfolio"
8
9export function App() {
10 const [activeSection, setActiveSection] = useState("")
11 const sectionsRef = useRef<(HTMLElement | null)[]>([])
12
13 useEffect(() => {
14 const observer = new IntersectionObserver(
15 (entries) => {
16 entries.forEach((entry) => {
17 if (entry.isIntersecting) {
18 entry.target.classList.add("animate-fade-in-up")
19 setActiveSection(entry.target.id)
20 }
21 })
22 },
23 { threshold: 0.1, rootMargin: "0px 0px -5% 0px" },
24 )
25
26 sectionsRef.current.forEach((section) => {
27 if (section) observer.observe(section)
28 })
29
30 return () => observer.disconnect()
31 }, [])
32
33
34
35 return (
36 <div className="min-h-screen dark:bg-background text-foreground relative">
37 <SectionNav sections={sections} activeSection={activeSection} />
38
39 <main>
40 <div className="max-w-4xl mx-auto px-6 sm:px-8 lg:px-16">
41 <Header sectionRef={(el) => (sectionsRef.current[0] = el)} />
42 </div>
43 <Work sectionRef={(el) => (sectionsRef.current[1] = el)} />
44 <Connect sectionRef={(el) => (sectionsRef.current[2] = el)} />
45 </main>
46 </div>
47 )
48}
49
50export default App