[feat]: mobile dock added

src/app/page.tsx

@@ -9,14 +9,16 @@ import { BlurDiv } from "@/components/ui/Blur";
 import { DELAY } from "@/constants/misc";
 export default function Home() {
   return (
-    <main className="flex  flex-col min-h-[100dvh] my-16 scroll-smooth">
+    <main className="flex  flex-col min-h-[100dvh] mt-2 md:mt-16 scroll-smooth">
       <Introduction name={DATA.name} desc={DATA.shortDescription} />
       <About about={DATA.about} />
       <BlurDiv delay={DELAY * 1.88}>
         <Heading classname="text-7xl my-8">BLOGS</Heading>
       </BlurDiv>
       <Blogs showMore />
-      <Footer />
+      <BlurDiv delay={DELAY * 1.99}>
+        <Footer />
+      </BlurDiv>
     </main>
   );
 }

src/components/About.tsx

@@ -5,7 +5,7 @@ import { DATA } from "@/data/info";
 import { GithubGraph } from "./ui/github";
 export const About = ({ about }: { about: string }) => {
   return (
-    <section id="about">
+    <section id="about" className="my-8">
       <BlurDiv delay={DELAY * 1.45}>
         <h2 className="text-xl font-bold">About</h2>
       </BlurDiv>

src/components/Footer.tsx

@@ -21,7 +21,7 @@ export const Footer = () => {
           on twitter
         </Link>{" "}
       </p>
-      <Heading classname="text-7xl my-8">VINEET.TECH</Heading>
+      <Heading classname=" my-8">VINEET.TECH</Heading>
     </div>
   );
 };

src/components/Heading.tsx

@@ -14,7 +14,7 @@ export const Heading = ({
   return (
     <h1
       className={cn(
-        "font-bold  w-full flex justify-center items-center  bg-gradient-to-t from-neutral-800 to-neutral-300 bg-clip-text text-transparent text-3xl md:text-7xl",
+        "font-bold  w-full flex justify-center items-center  bg-gradient-to-t from-neutral-800 to-neutral-300 bg-clip-text text-transparent text-5xl md:text-7xl",
         classname
       )}
     >

src/components/Navbar.tsx

@@ -1,15 +1,13 @@
 import { DATA } from "@/data/info";
-import { Dock } from "./ui/Dock";
+import { Dock } from "./ui/dock";
 import React from "react";
 
 export default function Navbar() {
   return (
-    <div className="pointer-events-none fixed inset-x-0 top-5 z-30 mx-auto mb-4 flex origin-bottom h-full max-h-14">
-      <div className="fixed top-0 inset-x-0 h-16 w-full bg-background to-transparent backdrop-blur-lg [-webkit-mask-image:linear-gradient(to_top,transparent,transparent)] dark:bg-background"></div>
-      <Dock
-        navbar={DATA}
-        className="cursor-pointer rounded-full z-50 pointer-events-auto relative mx-auto flex min-h-full h-full items-center  bg-background [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] "
-      ></Dock>
-    </div>
+    <Dock
+      navbar={DATA}
+      mobileClassName="rounded-full z-50 cursor-pointer md:flex  items-center  pointer-events-auto bg-background [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_-2px_4px_rgba(0,0,0,.05),0_-12px_24px_rgba(0,0,0,.05)] transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_20px_80px_-20px_#ffffff1f_inset] "
+      DesktopClassName="hidden cursor-pointer rounded-full z-50  mx-auto md:flex min-h-full h-full items-center  bg-background [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] "
+    />
   );
 }

src/components/cards/Blog-card.tsx

@@ -1,6 +1,6 @@
 "use client";
 import getFormattedDate from "@/lib/formatdate";
-import { TitleHover } from "../title-hover";
+import { TitleHover } from "../ui/title-hover";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { FileText } from "lucide-react";

src/components/introduction.tsx

@@ -24,7 +24,7 @@ export const Introduction = ({ name, desc }: IntroductionProps) => {
               </span>
             </BlurDiv>
           </div>
-          <BlurDiv delay={0.2} isView>
+          <BlurDiv delay={DELAY * 1.2} isView>
             <Avatar className="size-28 border">
               <AvatarImage src={DATA.image} />
               <AvatarFallback>CN</AvatarFallback>

src/components/theme-toggle.tsx

@@ -16,7 +16,7 @@ export function ModeToggle() {
       variant="toggle"
       size="icon"
       onClick={toggleTheme}
-      className="border-l-[1px] border-solid border-gray-500 rounded-none pl-2"
+      className="md:border-l-[1px] md:border-solid border-gray-500 rounded-none md:pl-2"
     >
       <Sun className=" rotate-0  scale-100 transition-all dark:-rotate-90 dark:scale-0" />
       <Moon className="absolute  rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />

src/components/ui/dock.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { VariantProps, cva } from "class-variance-authority";
+import React, { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { dataProps } from "@/data/info";
+import Link from "next/link";
+
+export interface DockProps {
+  mobileClassName?: string;
+  DesktopClassName?: string;
+  navbar: dataProps;
+}
+
+const Dock: React.FC<DockProps> = ({
+  DesktopClassName,
+  navbar,
+  mobileClassName,
+}) => {
+  return (
+    <>
+      <DockMobile navbar={navbar} mobileClassName={mobileClassName} />
+      <DockDesktop navbar={navbar} DesktopClassName={DesktopClassName} />
+    </>
+  );
+};
+
+const DockMobile = React.forwardRef<HTMLDivElement, DockProps>(
+  ({ mobileClassName, navbar }) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div className="flex md:hidden pointer-events-none fixed  bottom-3 right-5 z-30 mx-auto  origin-bottom h-full max-h-14">
+        <AnimatePresence>
+          {open && (
+            <motion.div className="absolute bottom-full mb-2 inset-x-0 flex flex-col gap-2 items-center">
+              {navbar.navbar.socials.map((social, idx) => (
+                <motion.div
+                  key={idx}
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{
+                    opacity: 0,
+                    y: 10,
+                    transition: { delay: idx * 0.06 },
+                  }}
+                  transition={{
+                    delay: (navbar.navbar.socials.length - 1 - idx) * 0.05,
+                  }}
+                >
+                  <DockIcon
+                    key={idx}
+                    {...social}
+                    className="h-10 w-10 rounded-full bg-gray-50 dark:bg-neutral-900 flex items-center justify-center"
+                  />
+                </motion.div>
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <div
+          onClick={() => setOpen(!open)}
+          className={cn(
+            "flex gap-4 items-end  rounded-2xl bg-gray-50 dark:bg-neutral-900 px-4",
+            mobileClassName
+          )}
+        >
+          <motion.span
+            initial={{ rotate: 0 }}
+            animate={open ? { rotate: 360 } : { rotate: 0 }}
+            transition={{ duration: 0.5, ease: "easeInOut" }}
+          >
+            🎒
+          </motion.span>
+        </div>
+      </div>
+    );
+  }
+);
+
+const DockDesktop = React.forwardRef<HTMLDivElement, DockProps>(
+  ({ DesktopClassName, navbar }) => {
+    const [isBlurred, setIsBlurred] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+
+    const iconWidth = 40;
+    const totalIcons = navbar.navbar.socials.length * iconWidth + 35;
+    const handleMouseEnter = () => {
+      setIsBlurred(true);
+      setIsHovered(true);
+      setTimeout(() => {
+        setIsBlurred(false);
+      }, 300);
+    };
+    const handleMouseLeave = () => {
+      setIsBlurred(true);
+      setIsHovered(false);
+      setTimeout(() => {
+        setIsBlurred(false);
+      }, 100);
+    };
+    return (
+      <div className="pointer-events-auto` fixed inset-x-0 top-5 z-30 mx-auto mb-4 flex origin-bottom h-full max-h-14">
+        <AnimatePresence>
+          <motion.div
+            initial={{ scale: 1 }}
+            whileHover={{ width: `${totalIcons}px` }}
+            transition={{
+              type: "spring",
+              stiffness: 90,
+              damping: 10,
+            }}
+            onHoverStart={handleMouseEnter}
+            onHoverEnd={handleMouseLeave}
+            animate={{ scale: 1.1 }}
+            className={cn(
+              "flex gap-4 items-end  rounded-2xl bg-gray-50 dark:bg-neutral-900 px-4",
+              isBlurred && "blur-sm",
+              DesktopClassName
+            )}
+          >
+            <span className={cn(!isHovered ? "visible" : "hidden")}>🎒</span>
+            {isHovered && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{
+                  type: "spring",
+                  stiffness: 90,
+                  damping: 10,
+                  delay: 0.2,
+                }}
+                className="flex gap-5 justify-center items-center"
+              >
+                {navbar.navbar.socials.map((social, idx) => (
+                  <DockIcon key={idx} {...social} />
+                ))}
+              </motion.div>
+            )}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    );
+  }
+);
+
+type DockIconProps = {
+  name: string;
+  link: string;
+  icon: React.ReactNode;
+  className?: string;
+};
+const DockIcon = React.forwardRef<HTMLDivElement, DockIconProps>(
+  ({ link, icon, className }) => {
+    return (
+      <div className={cn(className)}>
+        <Link href={link}>{icon}</Link>
+      </div>
+    );
+  }
+);
+
+DockIcon.displayName = "DockIcon";
+Dock.displayName = "Dock";
+
+export { Dock };

src/data/info.tsx

@@ -21,10 +21,10 @@ export const DATA: dataProps = {
   image:
     "https://www.vineet.tech/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimage.a96af8f3.jpg&w=640&q=75",
   shortDescription:
-    "Software Engineer turned Entrepreneur. I love building things and helping people. Very active on Twitter.",
+    "Student Turned Software Engineer. I have a love for designs and building products. I like to code in 0's & 1's",
   githubUsername: "vineetagarwal-code",
   about:
-    "At the end of 2022, I quit my job as a software engineer to go fulltime into building and scaling my own SaaS businesses. In the past, [I pursued a double degree in computer science and business](/#education), [interned at big tech companies in Silicon Valley](https://www.youtube.com/watch?v=d-LJ2e5qKdE), and [competed in over 21 hackathons for fun](/#hackathons). I also had the pleasure of being a part of the first ever in-person cohort of buildspace called [buildspace sf1](https://buildspace.so/sf1).",
+    "At the end of 2023, I tried to change my life by learning to ACTUALLY code and I have been coding ever since, I have a nick for building cool looking designs and core backend systems. You can find me on twitter [@vineetwts](https://twitter.com/vineetwts) and on github [@vineetagarwal-code](https://github.com/vineetagarwal-code). I also happen to write and share sometimes and below are some of my blogs.",
   navbar: {
     socials: [
       {