Add KBar command bar integration, update styles, and enhance blog layout

Author: Utkarsh-Sorathia

package-lock.json

@@ -34,6 +34,7 @@
     "dompurify": "^3.3.1",
     "framer-motion": "^12.6.3",
     "github-markdown-css": "^5.8.1",
+    "kbar": "^0.1.0-beta.48",
     "lucide-react": "^0.546.0",
     "marked": "^17.0.1",
     "mongodb": "^6.16.0",

package.json

@@ -7,7 +7,7 @@ import projects from "@/data/projects";
 const ProjectSection = ({ id }: { id: string }) => {
   return (
     <ResponsiveBox
-      classNames="dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-white/[0.1] bg-grid-white/[0.1] items-center justify-center lg:px-40"
+      classNames="dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-white/[0.1] bg-grid-white/[0.1] items-center justify-center lg:px-40 scroll-mt-8 lg:scroll-mt-24"
       id={id}
     >
       <ConstrainedBox classNames="px-4 py-12 lg:py-16">

src/Components/Home/ProjectSection.tsx

@@ -8,7 +8,7 @@ import skills from "../../data/skills";
 const SkillSection = ({ id }: { id: string }) => {
   return (
     <ResponsiveBox
-      classNames="dark:bg-[var(--dialogColor)] bg-[var(--dialogColor)] items-center justify-center dark:bg-dot-white/[0.15] bg-dot-white/[0.15] lg:px-40"
+      classNames="dark:bg-[var(--dialogColor)] bg-[var(--dialogColor)] items-center justify-center dark:bg-dot-white/[0.15] bg-dot-white/[0.15] lg:px-40 scroll-mt-8 lg:scroll-mt-24"
       id={id}
     >
       <ConstrainedBox classNames="px-4 py-12">

src/Components/Home/SkillSection.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useKBar } from 'kbar';
+import { motion } from 'framer-motion';
+import { Command } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+const CommandBarTrigger = () => {
+  const { query } = useKBar();
+  const [isMac, setIsMac] = useState(false);
+
+  useEffect(() => {
+    setIsMac(navigator.platform.toUpperCase().indexOf('MAC') >= 0);
+  }, []);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.8, y: -20 }}
+      animate={{ opacity: 1, scale: 1, y: 0 }}
+      transition={{ duration: 0.2, ease: "easeOut" }}
+      style={{ willChange: 'transform, opacity' }}
+      className="hidden sm:fixed sm:block top-4 right-[160px] md:right-[210px] lg:right-[230px] z-[4999]"
+    >
+      <motion.button
+        onClick={() => query.toggle()}
+        whileTap={{ scale: 0.95 }}
+        className="border border-white/[0.25] rounded-full bg-[var(--dialogColor50)] backdrop-blur-sm shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] px-5 md:px-6 py-3 flex items-center gap-2 sm:gap-3 cursor-pointer transition-all duration-250 group hover:border-[var(--primaryColor)]"
+      >
+        <Command className="w-5 h-5 text-zinc-100 transition-colors duration-300 group-hover:text-[var(--primaryColor)]" />
+        <span className="text-[var(--textColor)] font-semibold text-sm md:text-base transition-colors duration-300 group-hover:text-[var(--primaryColor)]">
+          Search
+        </span>
+        <div className="hidden md:flex items-center gap-1.5 ml-1 opacity-60 group-hover:opacity-100 transition-opacity">
+            <kbd className="bg-zinc-800/50 px-1.5 py-1 rounded border border-white/10 text-[10px] text-zinc-400 font-bold">
+                {isMac ? '⌘' : 'Ctrl'}
+            </kbd>
+            <kbd className="bg-zinc-800/50 px-1.5 py-1 rounded border border-white/10 text-[10px] text-zinc-400 font-bold">
+                K
+            </kbd>
+        </div>
+      </motion.button>
+    </motion.div>
+  );
+};
+
+export default CommandBarTrigger;