added scroll motion

package-lock.json

@@ -11,7 +11,8 @@
         "hamburger-react": "^2.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.3.0"
+        "react-router-dom": "^6.3.0",
+        "react-scroll-motion": "^0.3.0"
       },
       "devDependencies": {
         "@types/react": "^18.0.15",
@@ -1287,6 +1288,15 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-scroll-motion": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/react-scroll-motion/-/react-scroll-motion-0.3.0.tgz",
+      "integrity": "sha512-/7VUbyu0nONmlyQsnivcAOPCdc6GnS6LFL7R3QygtBjVAmA7dD29B/jje3jNa0fLlrwycriXq/Nm9sWgX7A1Bw==",
+      "peerDependencies": {
+        "react": "^18.0.11",
+        "react-dom": "^18.0.11"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
@@ -2293,6 +2303,12 @@
         "react-router": "6.3.0"
       }
     },
+    "react-scroll-motion": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/react-scroll-motion/-/react-scroll-motion-0.3.0.tgz",
+      "integrity": "sha512-/7VUbyu0nONmlyQsnivcAOPCdc6GnS6LFL7R3QygtBjVAmA7dD29B/jje3jNa0fLlrwycriXq/Nm9sWgX7A1Bw==",
+      "requires": {}
+    },
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",

package.json

@@ -12,7 +12,8 @@
     "hamburger-react": "^2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "react-scroll-motion": "^0.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.15",

src/App.css

@@ -5,15 +5,26 @@
 }
 
 .nav .container {
-  height: 3em;
+  height: 4em;
+}
+
+.content {
+  margin-top: 5em;
 }
 
 .nav {
-  background-color: rgb(47, 46, 58);
+  background-color: #302f38;
-  height: 3em;
+  height: 4em;
-  box-shadow: inset 0px 3px 20px 10px rgba(0, 0, 0, 0.3);
+
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 100000;
 }
 
+/*box-shadow: inset 0px 3px 20px 10px rgba(0, 0, 0, 0.3);*/
+
 .nav a {
   text-decoration: none;
   color: #e5e5ff;
@@ -46,7 +57,8 @@
 }
 
 .logo a {
-  text-shadow: 0 0 5px #ccff00, 0 0 15px #ccff00, 0 0 30px #ccff00;
+  text-shadow: 0 0 5px #ccff00, 0 0 15px #ccff00;
+  z-index: 10000;
 }
 
 .hamburger {
@@ -59,13 +71,13 @@
 }
 
 .hamburger-menu {
-  background-color: rgba(47, 46, 58, 0.9);
+  background-color: #302f38;
   z-index: 100;
-  position: absolute;
+  position: fixed;
   right: 0;
   backdrop-filter: blur(3px) contrast(60%);
   -webkit-backdrop-filter: blur(3px) contrast(60%);
-  top: 3em;
+  top: 4em;
   bottom: 0;
   left: 0px;
   display: flex;

src/pages/Contact.jsx

@@ -1,6 +1,6 @@
 function Contact() {
   return (
-    <div className="container">
+    <div className="container content">
       <h1>Welcome to Contact</h1>
     </div>
   );

src/pages/Experience.jsx

@@ -1,6 +1,6 @@
 function Experiance() {
   return (
-    <div className="container">
+    <div className="container content">
       <h1>Welcome to Experiance</h1>
     </div>
   );

src/pages/Home.jsx

@@ -1,8 +1,75 @@
+import {
+  Animator,
+  ScrollContainer,
+  ScrollPage,
+  batch,
+  Fade,
+  FadeIn,
+  FadeOut,
+  Move,
+  MoveIn,
+  MoveOut,
+  Sticky,
+  StickyIn,
+  StickyOut,
+  Zoom,
+  ZoomIn,
+  ZoomOut,
+} from "react-scroll-motion";
+
 function Home() {
+  const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn());
+  const FadeUp = batch(Fade(), Move(), Sticky());
+
   return (
-    <div className="container">
+    <ScrollContainer>
-      <h1>Welcome to Home + About me</h1>
+      <ScrollPage>
+        <Animator animation={batch(Fade(), Sticky(), MoveOut(0, 200))}>
+          <span>Let me show you scroll animation 😀</span>
+        </Animator>
+      </ScrollPage>
+
+      <ScrollPage>
+        <Animator animation={ZoomInScrollOut}>
+          <span style={{ fontSize: "40px" }}>I'm FadeUpScrollOut ✨</span>
+        </Animator>
+      </ScrollPage>
+
+      <ScrollPage>
+        <Animator animation={FadeUp}>
+          <span style={{ fontSize: "40px" }}>I'm FadeUp ⛅️</span>
+        </Animator>
+      </ScrollPage>
+
+      <ScrollPage>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+          }}
+        >
+          <span style={{ fontSize: "40px" }}>
+            <Animator animation={MoveIn(-1000, 0)}>Hello Guys 👋🏻</Animator>
+            <Animator animation={MoveIn(1000, 0)}>Nice to meet you 🙋🏻‍♀️</Animator>
+            - I'm Dante Chun -
+            <Animator animation={MoveOut(1000, 0)}>Good bye ✋🏻</Animator>
+            <Animator animation={MoveOut(-1000, 0)}>See you 💛</Animator>
+          </span>
         </div>
+      </ScrollPage>
+
+      <ScrollPage>
+        <Animator animation={batch(Fade(), Sticky())}>
+          <span style={{ fontSize: "40px" }}>Done</span>
+          <br />
+          <span style={{ fontSize: "30px" }}>
+            There's FadeAnimation, MoveAnimation, StickyAnimation, ZoomAnimation
+          </span>
+        </Animator>
+      </ScrollPage>
+    </ScrollContainer>
   );
 }