New Commits

components/Grid.tsx

@@ -5,7 +5,7 @@ import { gridItems } from "@/data";
 const Grid = () => {
   return (
     <>
-      <section id="about">
+      <section>
         <BentoGrid>
           {gridItems.map(
             ({

components/MacBookScroll.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { MacbookScroll } from "./ui/macbook-scroll";
+import Link from "next/link";
+
+export function MacbookScrollDemo() {
+  return (
+    <div className="overflow-hidden bg-black-100 w-full">
+      <MacbookScroll
+        title={
+          <h1 className="heading">
+            Learn more <span className="text-purple">About me</span>
+          </h1>
+        }
+        src={`/linear.webp`}
+        showGradient={false}
+      />
+    </div>
+  );
+}

components/TabsDemo.tsx

@@ -7,29 +7,53 @@ export function TabsDemo() {
       title: "About Me",
       value: "product",
       content: (
-        <div className="w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900">
-          <p>About Me</p>
-          <img src="/about.png" alt="myImg1" />
+        <div
+          id="about"
+          className="w-full overflow-hidden bg-pink-100 relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900"
+          style={{
+            boxShadow: "0px 0px 17px 1px #7EC5FF",
+          }}
+        >
+          <p className="mb-8">About Me</p>
+          <img src="/about.png" alt="myImg1" className=" m-auto rounded-2xl" />
         </div>
       ),
     },
     {
       title: "Tech Stack",
       value: "teach stack",
       content: (
-        <div className="w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900">
-          <p>Tech Stack</p>
-          <img src="/my_tech_stack.png" alt="myImg2" />
+        <div
+          className="w-full overflow-hidden bg-pink-100 relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900"
+          style={{
+            boxShadow: "0px 0px 17px 1px #7EC5FF",
+          }}
+        >
+          <p className="mb-8">Tech Stack</p>
+          <img
+            src="/my_tech_stack.png"
+            alt="myImg2"
+            className="w-[110%] m-auto rounded-2xl"
+          />
         </div>
       ),
     },
     {
       title: "GitHub Stats",
       value: "github stats",
       content: (
-        <div className="w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900">
-          <p>GitHub Stats</p>
-          <img src="/github_stats.png" alt="myImg3" />
+        <div
+          className="w-full overflow-hidden bg-pink-100 relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900"
+          style={{
+            boxShadow: "0px 0px 17px 1px #7EC5FF",
+          }}
+        >
+          <p className="mb-8">GitHub Stats</p>
+          <img
+            src="/github_stats.png"
+            alt="myImg3"
+            className="w-[90%] m-auto rounded-2xl"
+          />
         </div>
       ),
     },

components/ui/tabs.tsx

@@ -52,7 +52,7 @@ export const Tabs = ({
             }}
             onMouseEnter={() => setHovering(true)}
             onMouseLeave={() => setHovering(false)}
-            className={cn("relative px-4 py-2 rounded-full", tabClassName)}
+            className={cn("relative px-4 py-3 rounded-full", tabClassName)}
             style={{
               transformStyle: "preserve-3d",
             }}
@@ -100,7 +100,7 @@ export const FadeInDiv = ({
     return tab.value === tabs[0].value;
   };
   return (
-    <div className="relative w-full h-full">
+    <div className="relative w-full h-full" id="about">
       {tabs.map((tab, idx) => (
         <motion.div
           key={tab.value}

tailwind.config.ts

@@ -41,6 +41,9 @@ const config = {
         blue: {
           "100": "#E4ECFF",
         },
+        pink: {
+          "100": "#111f4d",
+        },
         purple: "#CBACF9",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",