Initial Commit

src/vite/App.jsx

@@ -0,0 +1,71 @@
+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;