few changes

src/app/about/page.tsx

@@ -0,0 +1,38 @@
+import Background from "@/components/Background";
+
+export default function About() {
+    return (
+        <div>
+            <Background/>
+            <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 lg:pl-[6%] relative z-20 pb-16 md:pb">
+                <div className="p-10">
+                    <div className="pb-10 pt-5 w-full max-w-screen-lg mx-auto backdrop-blur-3xl border-red border rounded-xl">
+                        <div className="px-8 md:px-10 lg:px-15 xl:px-24">
+                            <h1 className="py-2 text-red">Klesti Selimaj</h1>
+                            <p className="font-semibold text-gray-300">A passionate software enginner in Albania. I build full stack web apps but mainly desktop apps and TUI apps.</p>
+                            <div className="grid w-full grid-cols-2 gap-8 pt-10">
+                                <div className="border-red border rounded-xl p-4 bg-transparent-ish">
+                                    <h2 className="text-xl text-red">Skills</h2>
+                                    <ul className="list-disc list-inside text-gray-300">
+                                        <li>Rust, OSUI</li>
+                                        <li>TypeScript, React, Next.js, Tailwind</li>
+                                        <li>Go, Python</li>
+                                    </ul>
+                                </div>
+                                <div className="border-red border rounded-xl p-4 bg-transparent-ish">
+                                    <h2 className="text-xl text-red">Experience</h2>
+                                    <ul className="list-disc list-inside text-gray-300">
+                                        <li>OSUI</li>
+                                        <li>Orus</li>
+                                        <li>Personal projects</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <footer className="px-8 md:px-10 lg:px-15 xl:px-24 text-red-400 prose absolute bottom-0 py-4"><p className="m-0 text-sm"><a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://opensource.org/license/apache-2-0">Apache-2.0</a> © <a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://github.com/kleo-dev">Kleo</a></p></footer>
+        </div>
+    )
+}

src/app/globals.css

@@ -2,6 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: 'Kodchasan Medium';
+  src: url('/fonts/Kodchasan-Medium.ttf');
+}
+
+@font-face {
+  font-family: 'Kodchasan';
+  src: url('/fonts/Kodchasan-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'Kodchasan Semi Bold';
+  src: url('/fonts/Kodchasan-SemiBold.ttf');
+}
+
 :root {
   --background: #ffffff;
   --foreground: #171717;
@@ -17,7 +32,7 @@
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Kodchasan Semi Bold', sans-serif;
 }
 
 h1 {

src/app/page.tsx

@@ -6,15 +6,19 @@ export default function App() {
   return (
     <div>
       <Background/>
-      <div className="content-center mx-auto sm:w-[900px]">
+      <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 lg:pl-[6%] relative z-20 pb-16 md:pb-0">
-        <h1 className="py-2">Hey, I'm Leo 👋🏻</h1>
+        <div className="w-full max-w-screen-lg mx-auto">
-        <p className="font-semibold">A passionate software enginner in Albania. I build full stack web apps but mainly desktop apps and TUI apps.</p>
+          <div className="px-8 md:px-10 lg:px-15 xl:px-24">
-        <h1 className="py-3 text-red-400">Pinned Projects</h1>
+            <h1 className="py-2 text-gray-300">Hey, I'm Leo 👋🏻</h1>
-        <section className="w-full max-w-4xl mb-10 px-6 sm:px-0">
+            <p className="font-semibold text-gray-300">A passionate software enginner in Albania. I build full stack web apps but mainly desktop apps and TUI apps.</p>
+            <h1 className="pt-20 py-3 text-red-400">Pinned Projects</h1>
+            <section className="mb-10">
               <PinnedRepos />
             </section>
-        <footer className="text-red-400 flex w-full prose absolute bottom-0 py-4 lg:px-0 md:px-8 px-8"><p className="m-0 text-sm"><a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://opensource.org/license/apache-2-0">Apache-2.0</a> © <a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://github.com/kleo-dev">Kleo</a></p></footer>
           </div>
         </div>
+      </div>
+      <footer className="px-8 md:px-10 lg:px-15 xl:px-24 text-red-400 prose absolute bottom-0 py-4"><p className="m-0 text-sm"><a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://opensource.org/license/apache-2-0">Apache-2.0</a> © <a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://github.com/kleo-dev">Kleo</a></p></footer>
+    </div>
   );
 }

src/components/Navbar.tsx

@@ -8,6 +8,9 @@ const Navbar = () => {
           <a href="/" className="hover:text-red transition-colors duration-300">
             Home
           </a>
+          <a href="/about" className="hover:text-red transition-colors duration-300">
+            About
+          </a>
           <a href="/contact" className="hover:text-red transition-colors duration-300">
             Contact
           </a>

src/components/PinnedRepos.tsx

@@ -23,7 +23,7 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
         hover:shadow-md
         transition-shadow
         duration-300
-        bg-transparent
+        bg-transparent-ish
         backdrop-blur-xl
         `}
     >
@@ -41,7 +41,7 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
                 {name}
               </a>
             </h3>
-            <p className="text-xs sm:text-sm text-gray-400 line-clamp-2 mt-1">
+            <p className="text-xs sm:text-sm text-gray-300 line-clamp-2 mt-1">
               {desc}
             </p>
           </div>
@@ -63,7 +63,7 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
                   >
                     <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                   </svg>
-                  <span className="text-gray-400">{stars}</span>
+                  <span className="text-gray-300">{stars}</span>
                 </div>
                 <div className="flex items-center gap-1 text-xs sm:text-sm" data-state="closed">
                   <svg
@@ -84,7 +84,7 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
                     <path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" />
                     <path d="M12 12v3" />
                   </svg>
-                  <span className="text-gray-400">{forks}</span>
+                  <span className="text-gray-300">{forks}</span>
                 </div>
               </div>
               <div className="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs bg-red-600/10 border-red-600" data-sentry-component="Badge" data-sentry-source-file="badge.tsx">

tailwind.config.ts

@@ -14,7 +14,7 @@ export default {
         red: '#f5304c',
         'red-400': '#fa5770',
         'red-600': '#eb2642',
-        'transparent-ish': '#0000000F'
+        'transparent-ish': '#0000006F'
       },
     },
   },