style: fixed footer animation

No0ne003 · May 22, 2024 · 0112cf0 · 0112cf0
1 parent b0290de
commit 0112cf0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -86,6 +86,7 @@ function App() {
               element={
                 <>
                   <Home setCursorVariant={setCursorVariant} />
+                  <Footer setCursorVariant={setCursorVariant} />
                   <Cursor cursorVariant={cursorVariant} />
                 </>
               }
@@ -136,8 +137,6 @@ function App() {
             <Route path="*" element={<NotFound />} />
           </Route>
         </Routes>
-
-        <Footer setCursorVariant={setCursorVariant} />
       </Suspense>
     </ThemeProvider>
   );

diff --git a/src/index.css b/src/index.css
@@ -69,7 +69,7 @@
   }
 
   #root {
-    @apply h-screen w-screen flex flex-col overflow-x-hidden;
+    @apply h-screen w-screen flex flex-col overflow-x-hidden box-border;
   }
 
   input::-webkit-outer-spin-button,

diff --git a/src/layouts/Footer.jsx b/src/layouts/Footer.jsx
@@ -11,32 +11,49 @@ const socialLinks = [
 
 const Footer = memo(function Footer({ setCursorVariant }) {
   return (
-    <footer className="flex flex-col items-center justify-center bg-secondary/40 py-5 text-sm mt-20">
-      <div className="container relative z-10">
-        <div className="flex flex-col items-center gap-3 text-center">
-          <p className="max-w-md">Awesome React js Projects</p>
-          <div className="flex justify-center w-full gap-1">
-            <p>Made with &lt;3 by No0ne</p>
-            <p className="text-foreground/85 text-sm leading-5">
-              | &copy; {new Date().getFullYear()} No0ne003.
-            </p>
-          </div>
-          <div className="flex items-center gap-3 mt-2">
-            {socialLinks.map(({ link, icon }) => (
-              <FooterLink
-                key={link}
-                setCursorVariant={setCursorVariant}
-                link={link}
-                icon={icon}
-              />
-            ))}
-          </div>
+    <footer
+      className="relative mt-20 w-full min-h-[220px]"
+      style={{ clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)" }}
+    >
+      <div className="relative h-[calc(100vh+220px)] -top-[100vh]">
+        <div className="h-[220px] sticky top-[calc(100vh-220px)]">
+          <Content setCursorVariant={setCursorVariant} />
         </div>
       </div>
     </footer>
   );
 });
 
+const Content = ({ setCursorVariant }) => {
+  return (
+    <div className="relative bg-secondary/40 overflow-hidden py-8 px-12 w-full h-full flex flex-col items-center border-border/50 border-2">
+      <p className="absolute top-[-5%] sm:top-[-10%] left-3 sm:left-10 text-4xl sm:text-7xl max-w-full md:max-w-8xl font-bold text-gray-500/60">
+        Awesome React js Projects
+      </p>
+
+      <div className="flex flex-col gap-3 justify-end h-full w-full">
+        <div className="flex justify-center w-full gap-1 text-xs sm:text-sm">
+          <p>Made with &lt;3 by No0ne</p>
+          <p className="text-gray-400 text-sm leading-5">
+            | &copy; {new Date().getFullYear()} No0ne003.
+          </p>
+        </div>
+
+        <div className="flex items-center justify-center gap-3 mt-2">
+          {socialLinks.map(({ link, icon }) => (
+            <FooterLink
+              key={link}
+              setCursorVariant={setCursorVariant}
+              link={link}
+              icon={icon}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const FooterLink = ({ setCursorVariant, link, icon }) => {
   const handleMouseEnter = () => setCursorVariant("text");
   const handleMouseLeave = () => setCursorVariant("default");