♻️ refactor: adjust footer and layout

andrehadianto · Jul 30, 2024 · 573fd98 · 573fd98
1 parent 42777a9
commit 573fd98
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 16 deletions.
diff --git a/common/components/Footer/Footer.tsx b/common/components/Footer/Footer.tsx
@@ -5,13 +5,16 @@ import { MY_EMAIL, Links } from "@/common/constants/links";
 
 export const Footer = () => {
   return (
-    <footer className="z-header border-border-base fixed bottom-0 w-full border-t px-2 py-2">
-      <div className="mx-1 flex items-center justify-between sm:mx-2 md:mx-3 lg:mx-4">
+    <footer className="fixed bottom-0 z-header w-full border-t border-border-base px-2 py-2 after:pointer-events-none after:absolute after:inset-0 after:border-t-2 after:border-t-white/20">
+      <div className="mx-1 flex h-full items-center justify-between sm:mx-2 md:mx-3 lg:mx-4">
         <div className="flex flex-1 justify-start">
-          <Text as="p" className="font-bold">{`// Designer, Developer`}</Text>
+          <Text
+            as="p"
+            className="text-xs font-bold sm:text-sm lg:text-base"
+          >{`// Designer, Developer`}</Text>
         </div>
         <div className="flex flex-1 justify-center">
-          <div className="border-border-base flex w-fit items-center gap-2 border p-2">
+          <div className="flex w-fit items-center gap-2 rounded-md border border-border-base p-2">
             <Button
               external
               iconOnly
@@ -20,10 +23,10 @@ export const Footer = () => {
               variant="ghost"
             >
               <Icon
-                className="h-8 w-8"
-                height={32}
+                className="h-6 w-6"
+                height={24}
                 icon="lucide:github"
-                width={32}
+                width={24}
               />
             </Button>
             <Button
@@ -34,25 +37,27 @@ export const Footer = () => {
               variant="ghost"
             >
               <Icon
-                className="h-8 w-8"
-                height={32}
+                className="h-6 w-6"
+                height={24}
                 icon="lucide:linkedin"
-                width={32}
+                width={24}
               />
             </Button>
           </div>
         </div>
         <div className="flex flex-1 justify-end">
-          <div className="border-border-base flex w-fit items-center gap-2 border p-2">
+          <div className="flex h-16 w-fit min-w-16 items-center justify-center gap-2 rounded-md border border-border-base p-2">
             <Button iconOnly variant="ghost">
               <Icon
-                className="h-8 w-8"
-                height={32}
+                className="h-6 w-6"
+                height={24}
                 icon="lucide:mail"
-                width={32}
+                width={24}
               />
             </Button>
-            <Text>{MY_EMAIL}</Text>
+            <Text as="p" className="hidden md:block">
+              {MY_EMAIL}
+            </Text>
           </div>
         </div>
       </div>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,6 +1,9 @@
+import { motion } from "framer-motion";
+import Image from "next/image";
 import { useState } from "react";
 
 import { SegmentedControl } from "@/common/components/SegmentedControl";
+import { Text } from "@/common/components/Text";
 
 export default function Home() {
   const [selectedtab, setSelectedTab] = useState("home");
@@ -20,14 +23,74 @@ export default function Home() {
     },
   ];
 
+  const flyInMotion = (direction: "up" | "down" | "left" | "right") => {
+    const initial = {
+      opacity: 0,
+      x: direction === "left" ? -100 : direction === "right" ? 100 : 0,
+      y: direction === "up" ? -100 : direction === "down" ? 100 : 0,
+    };
+    const animate = { opacity: 1, x: 0, y: 0 };
+    return { initial, animate, transition: { duration: 0.5 } };
+  };
+
+  const fadeInMotion = () => ({
+    initial: { opacity: 0, scale: 0.5 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { duration: 0.5 },
+  });
+
   return (
-    <main className="mx-auto flex min-h-screen max-w-screen-xl flex-col items-center px-24 py-10">
+    <main className="h-screen-safe-no-footer mx-auto flex max-w-screen-xl flex-col items-center gap-10 px-24 py-10">
       <SegmentedControl
         options={OPTIONS}
         style="connected"
         value={selectedtab}
         onValueChange={setSelectedTab}
       />
+      <div className="grid h-full w-full grid-flow-col grid-rows-3 gap-4">
+        <motion.div
+          {...flyInMotion("left")}
+          className="col-span-1 row-span-2 rounded-md bg-red-400/10"
+        >
+          01
+        </motion.div>
+        <motion.div
+          {...flyInMotion("up")}
+          className="col-span-2 row-span-1 rounded-md bg-red-400/10"
+        >
+          02
+        </motion.div>
+        <motion.div
+          {...flyInMotion("right")}
+          className="col-span-2 row-span-1 rounded-md bg-red-400/10"
+        >
+          03
+        </motion.div>
+        <motion.div
+          {...fadeInMotion()}
+          className="bg-primary-default col-span-1 row-span-1 rounded-md"
+        >
+          <div className="flex h-full w-full flex-col items-center justify-center gap-2">
+            <Image
+              unoptimized
+              alt="pfp"
+              className="h-18 w-18 rounded-full"
+              height={72}
+              src={"andrehadianto.com/assets/pfp.png"}
+              width={72}
+            />
+            <Text as="h3" className="text-lg font-bold">
+              Andre Hadianto Lesmana
+            </Text>
+          </div>
+        </motion.div>
+        <motion.div
+          {...flyInMotion("down")}
+          className="col-span-1 row-span-2 rounded-md bg-red-400/10"
+        >
+          05
+        </motion.div>
+      </div>
     </main>
   );
 }
diff --git a/public/assets/pfp.png b/public/assets/pfp.png
diff --git a/styles/globals.scss b/styles/globals.scss
@@ -54,6 +54,15 @@ input[type="number"]::-webkit-outer-spin-button {
       100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)
     );
   }
+
+  .h-screen-safe-no-footer {
+    height: calc(
+      100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 80px
+    );
+    height: calc(
+      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 80px
+    );
+  }
 }
 
 // text area resizer

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -56,6 +56,7 @@ const config: Config = {
         success: "#29C244",
         error: "#E31E1E",
         warning: "#FB9F05",
+        nice1: "#7289da",
       },
     },
   },