60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { PROFILE } from "@/data/content";
|
|
import { useMountTransition } from "@/hooks/useAnimations";
|
|
import Nav from "@/components/Nav";
|
|
import Profile from "@/components/Profile";
|
|
import Projects from "@/components/Projects";
|
|
import Footer from "@/components/Footer";
|
|
|
|
export default function Home() {
|
|
const [section, setSection] = useState("profile");
|
|
const mounted = useMountTransition();
|
|
|
|
return (
|
|
<div style={{ minHeight: "100vh", paddingBottom: 36 }}>
|
|
<div
|
|
style={{
|
|
maxWidth: 880,
|
|
margin: "0 auto",
|
|
padding: "0 24px",
|
|
opacity: mounted ? 1 : 0,
|
|
transform: mounted ? "none" : "translateY(8px)",
|
|
transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
|
|
}}
|
|
>
|
|
<header
|
|
style={{
|
|
padding: "24px 0 0",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 14,
|
|
fontWeight: 700,
|
|
color: "var(--accent)",
|
|
letterSpacing: "-0.02em",
|
|
}}
|
|
>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<Nav section={section} setSection={setSection} />
|
|
|
|
<main>
|
|
{section === "profile" && <Profile />}
|
|
{section === "projects" && <Projects />}
|
|
</main>
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|