Contribution graph

package-lock.json

@@ -22,6 +22,7 @@
         "notion-to-md": "^3.1.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-github-calendar": "^4.5.10",
         "react-markdown": "^9.0.3",
         "react-syntax-highlighter": "^15.6.1",
         "rehype-katex": "^7.0.1",
@@ -1269,6 +1270,16 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -3703,6 +3714,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-activity-calendar": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/react-activity-calendar/-/react-activity-calendar-2.7.14.tgz",
+      "integrity": "sha512-/yzI76ioAWLQ/xnYt1buDlHhQxDFI3EZV5EFoMVZ4VloMZpCk2TXKSOUY7IO+dliQwLRuS9zbY0VL6LYUA1+IA==",
+      "license": "MIT",
+      "dependencies": {
+        "date-fns": "^4.1.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
@@ -3715,6 +3738,18 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-github-calendar": {
+      "version": "4.5.10",
+      "resolved": "https://registry.npmjs.org/react-github-calendar/-/react-github-calendar-4.5.10.tgz",
+      "integrity": "sha512-p8MeJuM13rLsIIiJmpdNiiWLQfmoVRlq7lRI2z+aX58kYyibioA7vllDQudUzUmvvpV78HXNgsWKUIuaKTCMuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-activity-calendar": "^2.7.14"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -23,6 +23,7 @@
     "notion-to-md": "^3.1.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-github-calendar": "^4.5.10",
     "react-markdown": "^9.0.3",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-katex": "^7.0.1",

src/app/layout.tsx

@@ -15,9 +15,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`antialiased bg-black`}>
+      <body className="antialiased bg-black">
         <Background>
-          {children}
+          <div className="relative h-screen overflow-y-scroll">
+            {children}
+          </div>
         </Background>
       </body>
     </html>

src/app/page.tsx

@@ -12,6 +12,7 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 import { faJava } from "@fortawesome/free-brands-svg-icons/faJava";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import GitHubCalendar from "react-github-calendar";
 
 export default function App() {
   return (
@@ -21,14 +22,14 @@ export default function App() {
           <div className="px-8 md:px-10 lg:px-15 xl:px-24">
             <h1 className="py-2 text-gray-300">Hey, I'm Klesti! 👋🏻</h1>
             <p className="font-semibold text-gray-300">
-              A 15 year old Software Engineer from Tirane, Albania, with 5 years
+              A 15 year old Software Engineer from Tirane, Albania, with 6 years
               of experience, specializing in full-stack web development, desktop
-              applications, TUI apps, and hacking. I have a deep interest in
+              applications, TUI apps, and hacking. I also have a deep interest in
               low-level programming.
             </p>
 
             {/* Socials and skill */}
-            <div className="pt-10 grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
               {/* socials */}
               <div className="pt-5 flex flex-row gap-5 w-max">
                 <a href="https://github.com/kleo-dev/" target="blank_">
@@ -70,10 +71,16 @@ export default function App() {
               </div>
             </div>
             
-            <h1 className="pt-5 text-red-400">Pinned Projects</h1>
+            <h1 className="text-red-400">Pinned Projects</h1>
             <section className="">
               <PinnedRepos />
             </section>
+            <section className="mt-8">
+              <GitHubCalendar username="kleo-dev" theme={{
+                light: ["#1a000f", "#5c001d", "#9f0030", "#d10045", "#f5304c"],
+                dark: ["#1a000f", "#5c001d", "#9f0030", "#d10045", "#f5304c"],
+              }} />
+            </section>
           </div>
         </div>
       </div>