Merge pull request #17 from Utkarsh-Sorathia/upcoming-design

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

@@ -4,8 +4,8 @@ import ResponsiveBox from "../../Components/core/ResponsiveBox";
 import ConstrainedBox from "../../Components/core/constrained-box";
 import SectionTitle from "../../Components/common/SectionTitle";
 import ContactForm from "../UI/ContactForm";
-import { MapPin, ArrowRight } from "lucide-react";
-import { SiWhatsapp, SiGmail } from "react-icons/si";
+import { ArrowRight } from "lucide-react";
+import { SiWhatsapp, SiGmail, SiLinkedin } from "react-icons/si";
 import Link from "next/link";
 import { motion } from "framer-motion";
 
@@ -29,15 +29,34 @@ const ContactSection = ({ id }: { id: string }) => {
             viewport={{ once: true }}
             className="flex flex-col gap-8 w-full"
           >
-            <div>
-              <h3 className="text-3xl font-bold text-white mb-4">Let&apos;s Talk</h3>
+            <div className="pt-8 bg-transparent">
+              <h3 className="text-2xl font-bold text-zinc-100 mb-4">Let&apos;s Talk</h3>
               <p className="text-zinc-400 text-lg leading-relaxed">
                 I&apos;m always open to discussing new projects, creative ideas, or opportunities to be part of your vision. 
               </p>
             </div>
 
             <div className="space-y-4">
               {/* Contact Cards */}
+              <Link 
+                href="https://www.linkedin.com/in/utkarsh-sorathia-a9292b22a"
+                target="_blank"
+                className="flex items-center justify-between p-4 md:p-6 bg-white/5 dark:bg-zinc-900/50 rounded-2xl border border-zinc-100/10 dark:border-zinc-800/50 backdrop-blur-sm group hover:border-[#0077b5]/30 transition-all duration-300"
+              >
+                <div className="flex items-center gap-4 md:gap-6 overflow-hidden">
+                  <div className="p-3 md:p-4 bg-blue-100 dark:bg-blue-900/20 rounded-xl text-[#0077b5] shrink-0">
+                    <SiLinkedin className="w-5 h-5 md:w-6 md:h-6" />
+                  </div>
+                  <div className="overflow-hidden">
+                    <p className="text-xs font-bold uppercase tracking-widest text-[#0077b5] mb-1 opacity-80">LinkedIn</p>
+                    <p className="text-white font-semibold truncate">utkarsh-sorathia</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-tighter text-[#0077b5] opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all">
+                  Connect <ArrowRight className="w-4 h-4" />
+                </div>
+              </Link>
+
               <Link 
                 href="mailto:utkarshsor03@gmail.com"
                 className="flex items-center justify-between p-4 md:p-6 bg-white/5 dark:bg-zinc-900/50 rounded-2xl border border-zinc-100/10 dark:border-zinc-800/50 backdrop-blur-sm group hover:border-[#EA4335]/30 transition-all duration-300"
@@ -59,31 +78,21 @@ const ContactSection = ({ id }: { id: string }) => {
               <Link 
                 href="https://wa.me/918758453292" 
                 target="_blank"
-                className="flex items-center justify-between p-4 md:p-6 bg-white/5 dark:bg-zinc-900/50 rounded-2xl border border-zinc-100/10 dark:border-zinc-800/50 backdrop-blur-sm group transition-all duration-300"
+                className="flex items-center justify-between p-4 md:p-6 bg-white/5 dark:bg-zinc-900/50 rounded-2xl border border-zinc-100/10 dark:border-zinc-800/50 backdrop-blur-sm group hover:border-[#25D366]/30 transition-all duration-300"
               >
                 <div className="flex items-center gap-4 md:gap-6">
                   <div className="p-3 md:p-4 bg-green-100 dark:bg-green-900/20 rounded-xl text-[#25D366] shrink-0">
                     <SiWhatsapp className="w-5 h-5 md:w-6 md:h-6" />
                   </div>
                   <div>
                     <p className="text-xs font-bold uppercase tracking-widest text-[#25D366] mb-1 opacity-80">WhatsApp</p>
-                    <p className="text-white font-semibold">+91 8758453292</p>
+                    <p className="text-white font-semibold">Utkarsh Sorathia</p>
                   </div>
                 </div>
                 <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-tighter text-[#25D366] opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all">
                   Chat Now <ArrowRight className="w-4 h-4" />
                 </div>
               </Link>
-
-              <div className="flex items-center gap-4 md:gap-6 p-4 md:p-6 bg-white/5 dark:bg-zinc-900/50 rounded-2xl shadow-sm border border-zinc-100/10 dark:border-zinc-800/50 backdrop-blur-sm">
-                <div className="p-3 md:p-4 bg-purple-100 dark:bg-purple-900/30 rounded-xl text-purple-600 dark:text-purple-400 shrink-0">
-                  <MapPin className="w-5 h-5 md:w-6 md:h-6" />
-                </div>
-                <div>
-                  <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-1 opacity-80">Location</p>
-                  <p className="text-white font-semibold">Surat, Gujarat, India</p>
-                </div>
-              </div>
             </div>
           </motion.div>
 

public/og-image.webp

@@ -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/ContactSection.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/ProjectSection.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;