71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
import React, { Suspense, useState, useEffect } from "react";
|
|
|
|
const Hero = React.lazy(() => import("./pages/Hero.jsx"));
|
|
const Project = React.lazy(() => import("./pages/Project.jsx"));
|
|
const Skill = React.lazy(() => import("./pages/Skill.jsx"));
|
|
const Contact = React.lazy(() => import("./pages/Contact.jsx"));
|
|
const Experience = React.lazy(() => import("./pages/Experience.jsx"));
|
|
|
|
function App() {
|
|
const [scrolled, setScrolled] = useState("0%");
|
|
|
|
function scrollProgress() {
|
|
const scrollPx = document.documentElement.scrollTop;
|
|
const winHeightPx =
|
|
document.documentElement.scrollHeight -
|
|
document.documentElement.clientHeight;
|
|
const scrolling = `${(scrollPx / winHeightPx) * 100}%`;
|
|
setScrolled(scrolling);
|
|
}
|
|
|
|
const progressContainerStyle = {
|
|
height: "10px",
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100vw",
|
|
zIndex: 99,
|
|
};
|
|
|
|
const progressBarStyle = {
|
|
height: "10px",
|
|
background: "linear-gradient(43deg, #a162e8 0%, #f7ce68 46%, #85ffbd 100%)",
|
|
width: scrolled,
|
|
};
|
|
|
|
useEffect(() => {
|
|
window.addEventListener("scroll", scrollProgress);
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<Suspense
|
|
fallback={
|
|
<div className="sk-folding-cube">
|
|
<div className="sk-cube" />
|
|
<div className="sk-cube2 sk-cube" />
|
|
<div className="sk-cube4 sk-cube" />
|
|
<div className="sk-cube3 sk-cube" />
|
|
</div>
|
|
}
|
|
>
|
|
<div className="container mx-auto bg-black">
|
|
{scrolled !== "0%" && (
|
|
<div style={progressContainerStyle}>
|
|
<div style={progressBarStyle} />
|
|
</div>
|
|
)}
|
|
<main>
|
|
<Hero />
|
|
<Experience />
|
|
<Project />
|
|
<Skill />
|
|
<Contact />
|
|
</main>
|
|
</div>
|
|
</Suspense>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|