lassiecoder · lassiecoder · Nov 25, 2025 · Nov 25, 2025 · Nov 25, 2025
diff --git a/components.json b/components.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
+  }
+}
diff --git a/package.json b/package.json
@@ -21,9 +21,11 @@
     "@tsparticles/engine": "^3.3.0",
     "@tsparticles/react": "^3.0.0",
     "@tsparticles/slim": "^3.3.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.13.1",
+    "framer-motion": "^12.23.24",
     "gh-pages": "^6.1.1",
+    "lucide-react": "^0.554.0",
     "next": "^15.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -32,7 +34,8 @@
     "react-icons": "^5.0.1",
     "react-social-media-embed": "^2.5.17",
     "sonner": "^1.4.41",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
     "typewriter-effect": "^2.21.0"
   },
   "devDependencies": {

diff --git a/public/networking-15.png b/public/networking-15.png
diff --git a/public/networking-16.png b/public/networking-16.png
diff --git a/public/networking-17.png b/public/networking-17.png
diff --git a/public/project-0.png b/public/project-0.png
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -16,16 +16,6 @@
   }
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
 @layer utilities {
   .text-balance {
     text-wrap: balance;
@@ -72,3 +62,72 @@ body {
     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
   }
 }
+
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,23 +7,23 @@ export const metadata: Metadata = {
   title:
     "Portfolio | Priyanka Sharma (lassiecoder) | Mobile & Web app developer",
   description:
-    "Crafting compelling narratives through design, merging creativity with functionality seamlessly."
+    "Crafting compelling narratives through design, merging creativity with functionality seamlessly.",
 };
 
 const montserrat = Montserrat({
   subsets: ["latin"],
   display: "swap",
-  variable: "--font-montserrat"
+  variable: "--font-montserrat",
 });
 
 export default function RootLayout({
-  children
+  children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={`${montserrat.variable}`}>
-      <body className={montserrat.className}>{children}</body>
+    <html lang="en" className={`${montserrat.variable} dark`}>
+      <body className={`${montserrat.className} bg-black`}>{children}</body>
     </html>
   );
 }
diff --git a/src/app/pages/about.tsx b/src/app/pages/about.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import React from "react";
 import { HiMiniBellAlert } from "react-icons/hi2";
 import { IoGitNetworkOutline } from "react-icons/io5";
+import { FaAws } from "react-icons/fa";
 
 const About = () => {
   return (
@@ -80,7 +81,17 @@ const About = () => {
           delivering impactful solutions that drive success. My commitment to
           innovation and excellence defines every project I undertake.
         </p>
+        <p className="mt-6">
+          I was also selected for the{" "}
+          <span className="bg-gradient-to-r from-purple-600 to-gray-400 text-transparent bg-clip-text">
+            <FaAws className="inline text-2xl lg:text-3xl text-purple-600" />{" "}
+            re:Invent All Builders Welcome Grant 2025
+          </span>
+          , a global program that recognizes and supports promising builders in
+          the tech community.
+        </p>
       </h3>
+
       <div className="flex justify-center items-center space-x-3 max-[478px]:flex-col max-[478px]:space-x-0 max-[478px]:space-y-3">
         <Link
           href={"https://techscoop.hashnode.dev/newsletter"}

diff --git a/src/app/pages/articles.tsx b/src/app/pages/articles.tsx
@@ -9,7 +9,7 @@ export function Article() {
   const trackReadMoreClick = () => {
     ReactGA.event("article_read_more", {
       category: "Articles",
-      label: "Read more - Tech Scoop"
+      label: "Read more - Tech Scoop",
     });
   };
 
@@ -54,60 +54,75 @@ export function Article() {
 }
 
 const pinData = [
+  {
+    techstack: "@medium/lassiecoder",
+    href: "https://techscoop.hashnode.dev/gemini-ai-in-chrome-devtools",
+    heading:
+      "Stitch by Google — A new era for designing UIs faster and smarter",
+    description:
+      "Stitch is an experimental AI tool from Google that bridges design and development by letting you design UIs that are backed by real, working code from the start.",
+  },
+  {
+    techstack: "@medium/lassiecoder",
+    href: "https://techscoop.hashnode.dev/gemini-ai-in-chrome-devtools",
+    heading: "Automating your social media with n8n",
+    description:
+      "Managing multiple social media accounts can quickly turn into a full-time job. From posting updates to responding to messages, the repetitive tasks eat into time you could spend on creating valuable content.",
+  },
   {
     techstack: "@techscoop/lassiecoder",
     href: "https://techscoop.hashnode.dev/gemini-ai-in-chrome-devtools",
     heading: "Gemini AI in Chrome DevTools",
     description:
-      "Google integrates Gemini AI into Chrome DevTools, offering AI-powered debugging, code optimization, security insights, and accessibility improvements for developers."
+      "Google integrates Gemini AI into Chrome DevTools, offering AI-powered debugging, code optimization, security insights, and accessibility improvements for developers.",
   },
   {
     techstack: "@techscoop/lassiecoder",
     href: "https://techscoop.hashnode.dev/using-deepseek-r1-for-free-in-visual-studio-code",
     heading: "Using DeepSeek R1 for Free in VSCode",
     description:
-      "DeepSeek R1 - an open-source AI tool for code generation, seamlessly integrating with VSCode to enhance developer productivity and workflow efficiency."
+      "DeepSeek R1 - an open-source AI tool for code generation, seamlessly integrating with VSCode to enhance developer productivity and workflow efficiency.",
   },
   {
     techstack: "@medium.com/lassiecoder",
     href: "https://medium.com/nerd-for-tech/how-to-become-an-open-source-contributor-c07acbc8e9ca",
     heading: "How to Become an Open-Source Contributor",
     description:
-      "If you’re looking to become an open-source contributor, this guide will walk you through everything you need to know to get started, from finding projects to making your first contribution."
+      "If you’re looking to become an open-source contributor, this guide will walk you through everything you need to know to get started, from finding projects to making your first contribution.",
   },
   {
     techstack: "@medium.com/lassiecoder",
     href: "https://medium.com/@sharmapriyanka84510/commit-guidelines-f41b23f0bf4a",
     heading: "Git Commit Guidelines",
     description:
-      "A comprehensive guide to crafting clear and meaningful Git commit messages, enhancing collaboration, maintainability, and understanding throughout the development process for future contributors."
+      "A comprehensive guide to crafting clear and meaningful Git commit messages, enhancing collaboration, maintainability, and understanding throughout the development process for future contributors.",
   },
   {
     techstack: "@medium.com/lassiecoder",
     href: "https://sharmapriyanka84510.medium.com/navigating-the-upgrade-odyssey-a-journey-through-react-native-project-upgrades-and-helpful-tools-1b4384dc7f6d",
     heading: "Navigating React Native Project Upgrades: A Journey & Tools.",
     description:
-      "Upgrade React Native projects effortlessly using tools like Renovate, React Native CLI, npm-check-updates, Dependabot, and react-native-template-upgrade."
+      "Upgrade React Native projects effortlessly using tools like Renovate, React Native CLI, npm-check-updates, Dependabot, and react-native-template-upgrade.",
   },
   {
     techstack: "@medium.com/lassiecoder",
     href: "https://medium.com/nerd-for-tech/fastlane-with-react-native-part-2-a1adea3321aa",
     heading: "Fastlane with React Native — Part-2",
     description:
-      "Discover Fastlane's efficiency in Android app deployment, transitioning from manual to automated processes, enhancing workflow with its robust automation features."
+      "Discover Fastlane's efficiency in Android app deployment, transitioning from manual to automated processes, enhancing workflow with its robust automation features.",
   },
   {
     techstack: "@medium.com/lassiecoder",
     href: "https://sharmapriyanka84510.medium.com/fastlane-with-react-native-part-1-ac916d99cb83",
     heading: "Fastlane with React Native — Part-1",
     description:
-      "Fastlane optimizes iOS app development, automating build increments and metadata uploads, enhancing deployment efficiency with streamlined processes."
+      "Fastlane optimizes iOS app development, automating build increments and metadata uploads, enhancing deployment efficiency with streamlined processes.",
   },
   {
     techstack: "@medium.com/lassiecoder",
     href: "https://medium.com/swlh/javascript-array-mutability-immutability-93d366c90751",
     heading: "JavaScript: Array, mutability & immutability",
     description:
-      "JavaScript array methods explained briefly: length, map, immutable code, push/pop, delete/splice, filter, shift/unshift, reduce, and reduceRight."
-  }
+      "JavaScript array methods explained briefly: length, map, immutable code, push/pop, delete/splice, filter, shift/unshift, reduce, and reduceRight.",
+  },
 ];
diff --git a/src/app/pages/homescreen.tsx b/src/app/pages/homescreen.tsx
@@ -5,17 +5,19 @@ import {
   IconExchange,
   IconHome,
   IconNewSection,
-  IconTerminal2
+  IconTerminal2,
 } from "@tabler/icons-react";
 import Image from "next/image";
 import { FlipWords } from "@/components/ui/flip-words";
 import { SparklesCore } from "@/components/ui/sparkles";
+import { EbookStickyBanner } from "../sticky-banner";
 
 export default function HomeScreen() {
   const words = ["Hi! I'm Priyanka Sharma"];
   return (
-    <div className="h-screen ">
+    <div className="h-screen">
       {/* home screen */}
+      <EbookStickyBanner />
       <Footer />
       <div className="h-screen w-full bg-black flex flex-col items-center justify-center overflow-hidden">
         <h1 className="md:text-5xl text-2xl lg:text-6xl font-bold text-center text-white relative z-20 mt-30">
@@ -71,22 +73,22 @@ const links = [
     icon: (
       <IconHome className="h-full w-full text-neutral-500 dark:text-neutral-300" />
     ),
-    href: "#"
+    href: "#",
   },
 
   {
     title: "Products",
     icon: (
       <IconTerminal2 className="h-full w-full text-neutral-500 dark:text-neutral-300" />
     ),
-    href: "#"
+    href: "#",
   },
   {
     title: "Components",
     icon: (
       <IconNewSection className="h-full w-full text-neutral-500 dark:text-neutral-300" />
     ),
-    href: "#"
+    href: "#",
   },
   {
     title: "Aceternity UI",
@@ -98,28 +100,28 @@ const links = [
         alt="Aceternity Logo"
       />
     ),
-    href: "#"
+    href: "#",
   },
   {
     title: "Changelog",
     icon: (
       <IconExchange className="h-full w-full text-neutral-500 dark:text-neutral-300" />
     ),
-    href: "#"
+    href: "#",
   },
 
   {
     title: "Twitter",
     icon: (
       <IconBrandX className="h-full w-full text-neutral-500 dark:text-neutral-300" />
     ),
-    href: "#"
+    href: "#",
   },
   {
     title: "GitHub",
     icon: (
       <IconBrandGithub className="h-full w-full text-neutral-500 dark:text-neutral-300" />
     ),
-    href: "#"
-  }
+    href: "#",
+  },
 ];