migrate/v3

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "type-check": "tsc --noEmit",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -14,6 +15,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@devicon/react": "^0.0.3",
     "@headlessui/react": "^2.2.9",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.11",
@@ -29,11 +31,13 @@
     "@react-email/preview": "^0.0.14",
     "@react-email/render": "^2.0.4",
     "@react-email/tailwind": "^2.0.4",
+    "@react-pdf/renderer": "^4.3.2",
     "@tailwindcss/postcss": "^4.1.18",
     "autoprefixer": "10.4.24",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "devicons": "^1.8.0",
     "eslint-plugin-oxlint": "^1.43.0",
     "framer-motion": "^12.33.0",
     "globals": "^17.3.0",
@@ -55,7 +59,8 @@
     "sharp": "^0.34.5",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "use-scramble": "^2.2.15"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",

src/app/_components/GitHubStats.tsx

@@ -1,26 +1,65 @@
 "use client";
 
 import { GitHubCalendar } from "react-github-calendar";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { motion } from "framer-motion";
+import { FaGithub } from "react-icons/fa";
 
 export default function GitHubStats() {
   return (
-    <Card className="my-4 sm:hidden border-4 bg-gradient-to-br from-black/35 to-black/50 border-accent overflow-x-auto rounded-xl">
-      <CardHeader>
-        <CardTitle className="text-md font-bold text-center">
-          GitHub Contributions
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="py-4 flex justify-center overflow-x-auto">
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+      className="group relative glass-card glass-card-hover overflow-hidden w-full mx-auto"
+      style={{
+        borderLeft: "3px solid var(--color-accent)",
+        background:
+          "linear-gradient(135deg, rgba(22, 100, 102, 0.08) 0%, transparent 60%), rgba(15, 23, 42, 0.5)",
+      }}
+    >
+      {/* Header */}
+      <div className="px-6 pt-6 pb-3 flex items-center gap-3">
+        <span
+          className="flex items-center justify-center w-9 h-9 rounded-lg"
+          style={{ backgroundColor: "rgba(22, 100, 102, 0.15)" }}
+        >
+          <FaGithub className="w-5 h-5 text-accent" />
+        </span>
+        <div>
+          <h3 className="text-white/90 font-semibold text-base">
+            GitHub Contributions
+          </h3>
+          <p className="text-white/40 text-xs">
+            @Coderx85 · {new Date().getFullYear()} activity
+          </p>
+        </div>
+      </div>
+
+      {/* Calendar */}
+      <div className="px-6 pb-6 pt-2 overflow-x-auto mx-auto w-full">
         <GitHubCalendar
+          className="w-full"
           username="Coderx85"
-          blockSize={7}
-          blockMargin={5}
-          fontSize={10}
+          blockSize={11}
+          blockMargin={4}
+          fontSize={11}
           colorScheme="dark"
           year={new Date().getFullYear()}
+          style={{
+            color: "rgba(255, 255, 255, 0.5)",
+          }}
         />
-      </CardContent>
-    </Card>
+      </div>
+
+      {/* Hover glow */}
+      <div
+        className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
+        style={{
+          background:
+            "radial-gradient(circle at top left, rgba(22, 100, 102, 0.12), transparent 70%)",
+        }}
+      />
+    </motion.div>
   );
 }