From e8451b8253d88d2ff13b3dd50ffe6f6cfb616937 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Sat, 22 Nov 2025 11:34:41 +0100
Subject: [PATCH] Improved portfolio

---
 src/app/api/contribs/route.ts |   4 +-
 src/app/layout.tsx            |   2 +-
 src/app/page.tsx              | 167 ++++++++++++++++------------------
 src/components/Background.tsx |   4 +-
 4 files changed, 85 insertions(+), 92 deletions(-)

diff --git a/src/app/api/contribs/route.ts b/src/app/api/contribs/route.ts
index a107556..3f11ff3 100644
--- a/src/app/api/contribs/route.ts
+++ b/src/app/api/contribs/route.ts
@@ -27,8 +27,8 @@ export async function GET(req: NextRequest) {
 
   const data = await response.json();
   const total =
-    data.data.user.contributionsCollection.contributionCalendar
-      .totalContributions;
+    data?.data?.user?.contributionsCollection?.contributionCalendar
+      ?.totalContributions;
 
   return NextResponse.json({ total }, { status: 200 });
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7db9358..28c1d98 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -17,7 +17,7 @@ export default function RootLayout({
     <html lang="en">
       <body className="antialiased bg-black">
         <Background>
-          <div className="relative h-screen overflow-y-scroll">{children}</div>
+          <div className="relative h-screen">{children}</div>
         </Background>
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 41c8f45..59372e4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -31,98 +31,91 @@ export default function App() {
   }, []);
 
   return (
-    <div>
-      <div className="content-center w-full lg:mx-auto pt-5 relative z-20 pb-5 animate-fadeIn">
-        <div className="w-full max-w-screen-lg mx-auto">
-          <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 6 years
-              of experience, specializing in full-stack web development, desktop
-              applications, TUI apps, and hacking. I also have a deep interest
-              in low-level programming.
-            </p>
+    <div className="w-full max-w-screen-lg mx-auto">
+      <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 6 years of
+          experience, specializing in full-stack web development, desktop
+          applications, TUI apps, and hacking. I also have a deep interest in
+          low-level programming.
+        </p>
 
-            {/* Socials and skill */}
-            <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_">
-                  <FontAwesomeIcon
-                    icon={faGithub}
-                    className="text-slate-300 size-[2.3rem]"
-                  />
-                </a>
-                <a
-                  href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
-                  target="blank_"
-                >
-                  <FontAwesomeIcon
-                    icon={faLinkedin}
-                    className="text-slate-300 size-[2.3rem]"
-                  />
-                </a>
-                <a
-                  href="https://www.instagram.com/selimaj.dev/"
-                  target="blank_"
-                >
-                  <FontAwesomeIcon
-                    icon={faInstagram}
-                    className="text-slate-300 size-[2.3rem]"
-                  />
-                </a>
-              </div>
-              <div>
-                <div className="p-3 bg-transparent-ish rounded-xl">
-                  <div className="mx-auto w-max flex flex-row gap-5">
-                    <Skill skill="Rust" icon={faRust} />
-                    <Skill skill="Go" icon={faGolang} />
-                    <Skill skill="JavaScript" icon={faJs} />
-                    <Skill skill="Java" icon={faJava} classInsert="p-1" />
-                    <Skill skill="Python" icon={faPython} />
-                    <Skill skill="React" icon={faReact} />
-                  </div>
-                </div>
+        {/* Socials and skill */}
+        <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_">
+              <FontAwesomeIcon
+                icon={faGithub}
+                className="text-slate-300 size-[2.3rem]"
+              />
+            </a>
+            <a
+              href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
+              target="blank_"
+            >
+              <FontAwesomeIcon
+                icon={faLinkedin}
+                className="text-slate-300 size-[2.3rem]"
+              />
+            </a>
+            <a href="https://www.instagram.com/selimaj.dev/" target="blank_">
+              <FontAwesomeIcon
+                icon={faInstagram}
+                className="text-slate-300 size-[2.3rem]"
+              />
+            </a>
+          </div>
+          <div>
+            <div className="p-3 bg-transparent-ish rounded-xl">
+              <div className="mx-auto w-max flex flex-row gap-5">
+                <Skill skill="Rust" icon={faRust} />
+                <Skill skill="Go" icon={faGolang} />
+                <Skill skill="JavaScript" icon={faJs} />
+                <Skill skill="Java" icon={faJava} classInsert="p-1" />
+                <Skill skill="Python" icon={faPython} />
+                <Skill skill="React" icon={faReact} />
               </div>
             </div>
-
-            <h1 className="text-slate-300">Pinned Projects</h1>
-            <section className="">
-              <PinnedRepos />
-            </section>
-            <h2 className="text-slate-300 mt-7">
-              {contribs || "Loading.."} contributions in the last year
-            </h2>
-            <section className="mt-4">
-              <GitHubCalendar
-                hideTotalCount
-                username="kleo-dev"
-                theme={{
-                  light: [
-                    "rgba(255, 255, 255, 0.1)",
-                    "rgba(255, 255, 255, 0.3)",
-                    "rgba(255, 255, 255, 0.5)",
-                    "rgba(255, 255, 255, 0.7)",
-                    "rgba(255, 255, 255, 1)",
-                  ],
-                  dark: [
-                    "rgba(255, 255, 255, 0.1)",
-                    "rgba(255, 255, 255, 0.3)",
-                    "rgba(255, 255, 255, 0.5)",
-                    "rgba(255, 255, 255, 0.7)",
-                    "rgba(255, 255, 255, 1)",
-                  ],
-                }}
-              />
-            </section>
-            <footer className="mt-8 border-t pt-3">
-              If you see this i ❤️ you
-              <p className="text-slate-300 mx-auto w-max mt-2">
-                © 2025 Klesti. All rights reserved.
-              </p>
-            </footer>
           </div>
         </div>
+
+        <h1 className="text-slate-300">Pinned Projects</h1>
+        <section className="">
+          <PinnedRepos />
+        </section>
+        <h2 className="text-slate-300 mt-7">
+          {contribs || "Loading.."} contributions in the last year
+        </h2>
+        <section className="mt-4">
+          <GitHubCalendar
+            hideTotalCount
+            username="kleo-dev"
+            theme={{
+              light: [
+                "rgba(255, 255, 255, 0.1)",
+                "rgba(255, 255, 255, 0.3)",
+                "rgba(255, 255, 255, 0.5)",
+                "rgba(255, 255, 255, 0.7)",
+                "rgba(255, 255, 255, 1)",
+              ],
+              dark: [
+                "rgba(255, 255, 255, 0.1)",
+                "rgba(255, 255, 255, 0.3)",
+                "rgba(255, 255, 255, 0.5)",
+                "rgba(255, 255, 255, 0.7)",
+                "rgba(255, 255, 255, 1)",
+              ],
+            }}
+          />
+        </section>
+        <footer className="mt-8 border-t pt-3 pb-8">
+          If you see this i ❤️ you
+          <p className="text-slate-300 mx-auto w-max mt-2">
+            © 2025 Klesti. All rights reserved.
+          </p>
+        </footer>
       </div>
     </div>
   );
diff --git a/src/components/Background.tsx b/src/components/Background.tsx
index c0e6291..5d88653 100644
--- a/src/components/Background.tsx
+++ b/src/components/Background.tsx
@@ -72,9 +72,9 @@ export default function Background({
         }}
         src="/logo.png"
         alt="Logo"
-        className="size-24 rounded-full border-slate-500 border"
+        className="size-24 rounded-full border-slate-500 border z-10 absolute"
       />
-      <div className="relative z-10">{children}</div>
+      <div className="relative z-50 overflow-y-scroll">{children}</div>
     </div>
   );
 }