updated portfolio

package-lock.json

@@ -8,6 +8,12 @@
       "name": "portfolio",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.7.2",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-brands-svg-icons": "^6.7.2",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "next": "15.1.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
@@ -44,6 +50,85 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@@ -1268,6 +1353,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -1288,6 +1379,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -1471,7 +1574,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -1717,6 +1819,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1759,6 +1872,12 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -9,16 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "next": "15.1.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.0.0"
-    "next": "15.1.3"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

src/app/about/page.tsx

@@ -1,38 +0,0 @@
-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

@@ -39,3 +39,12 @@ h1 {
   font-size: 30px;
   font-weight: bold;
 }
+
+.skill .tooltip {
+  opacity: 0;
+  transition: opacity .3s linear;
+}
+
+.skill:hover .tooltip {
+  opacity: 1;
+}

src/app/page.tsx

@@ -1,20 +1,54 @@
 import Background from "@/components/Background";
 import PinnedRepos from "@/components/PinnedRepos";
-
+import Skill from "@/components/Skill";
+import { faGithub, faGolang, faInstagram, faJs, faLinkedin, faPython, faReact, faRust } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function App() {
   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-0">
+      <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0">
         <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 Leo 👋🏻</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>
+            <p className="font-semibold text-gray-300">A passionate software engineer and freelancer from Tirane, Albania, specializing in full-stack web development, desktop applications, and TUI apps. I have a deep interest in low-level programming, often building projects like CPU emulators from scratch.</p>
-            <h1 className="pt-20 py-3 text-red-400">Pinned Projects</h1>
+            <div className="pt-5 flex flex-row gap-5 w-max">
-            <section className="mb-10">
+              <a href="https://github.com/kleo-dev/" target="blank_"><FontAwesomeIcon icon={faGithub} width={36} className="text-red" /></a>
+              <a href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/" target="blank_"><FontAwesomeIcon icon={faLinkedin} width={36} className="text-red" /></a>
+              <a href="https://www.instagram.com/kleo.dev/" target="blank_"><FontAwesomeIcon icon={faInstagram} width={36} className="text-red" /></a>
+              </div>
+            <h1 className="pt-5 text-red-400">Pinned Projects</h1>
+            <section className="">
               <PinnedRepos />
             </section>
+            
+            {/* Experience and skill */}
+            <div className="pt-10 grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
+              {/* skill */}
+              <div>
+                <h1 className="pb-3 text-red-400 w-max">My Skills</h1>
+                <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="Python" icon={faPython}/>
+                    <Skill skill="Go" icon={faGolang} mt="mt-2"/>
+                    <Skill skill="JavaScript" icon={faJs}/>
+                    <Skill skill="React" icon={faReact}/>
+                  </div>
+                </div>
+              </div>
+
+            {/* Experience */}
+            <div>
+                <h1 className="pb-3 text-red-400 w-max">My Experience</h1>
+                <div className="p-3 bg-transparent-ish rounded-xl">
+                  <div className="mx-auto w-max">
+                    Soon
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/app/pricing/page.tsx

@@ -0,0 +1,83 @@
+import Background from "@/components/Background";
+import { faCheck, faCode, faDatabase } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export default function Pricing() {
+    return (
+        <div>
+            <Background/>
+            <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0">
+            <div className="w-full max-w-screen-lg mx-auto">
+                <div className="px-8 md:px-10 lg:px-15 xl:px-24"></div>
+                    <h1 className="pt-10 w-max mx-auto text-red-400">Choose a plan</h1>
+                    <div className="px-24 pt-10 h-full grid grid-cols-1 lg:grid-cols-2 grid-rows-2 gap-8">
+                        <div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
+                            <FontAwesomeIcon className="w-max mx-auto text-red-600" icon={faCode} width={35}/>
+                            <h1 className="w-max mx-auto text-red-400">Standard</h1>
+                            <h2 className="text-2xl w-max mx-auto text-red">$25</h2>
+                            <ul className="pt-4 list-none space-y-2">
+                                <li className="flex items-center">
+                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                                    Up to 4 hours
+                                </li>
+                                <li className="flex items-center">
+                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                                    Simple projects or tasks (e.g., bug fixes)
+                                </li>
+                                <li className="flex items-center">
+                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                                    Response via Email or Discord
+                                </li>
+                            </ul>
+                        </div>
+                        
+                        <div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
+                            <FontAwesomeIcon className="w-max mx-auto text-red-600" icon={faCode} width={35}/>
+                            <h1 className="w-max mx-auto text-red-400">Premium</h1>
+                            <h2 className="text-2xl w-max mx-auto text-red">$60</h2>
+                            <ul className="pt-4 list-none space-y-2">
+                                <li className="flex items-center">
+                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                                    Up to a day
+                                </li>
+                                <li className="flex items-center">
+                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                                    Simple to medium projects
+                                </li>
+                                <li className="flex items-center">
+                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                                    Larger tasks (e.g., refractoring, bug hunting)
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
+                            <FontAwesomeIcon className="w-max mx-auto text-red-600" icon={faDatabase} width={35}/>
+                            <h1 className="w-max mx-auto text-red-400">Enterprise</h1>
+                            <h2 className="text-2xl w-max mx-auto text-red">$150</h2>
+                            <ul className="pt-4 list-none space-y-2">
+                                <li className="flex items-center">
+                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                                    Up to a week
+                                </li>
+                                <li className="flex items-center">
+                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                                    Complex projects
+                                </li>
+                                <li className="flex items-center">
+                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                                    Large tasks (e.g., refractoring, bug hunting)
+                                </li>
+                                <li className="flex items-center">
+                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                                    Documenting
+                                </li>
+                            </ul>
+                        </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/components/Navbar.tsx

@@ -1,20 +1,12 @@
 const Navbar = () => {
   return (
-    <nav className="p-4 flex items-center justify-center">
+    <nav className="py-4 flex">
-      <div className="max-w-7xl mx-auto flex items-center justify-between">
+      <div className="mx-auto flex">
-        <div
+        <div className="space-x-4 text-white block font-bold">
-          className="space-x-4 text-white block font-bold"
-        >
           <a href="/" className="hover:text-red transition-colors duration-300">
             Home
           </a>
-          <a href="/about" className="hover:text-red transition-colors duration-300">
+          <a href="/pricing" className="hover:text-red transition-colors duration-300">
-            About
-          </a>
-          <a href="/contact" className="hover:text-red transition-colors duration-300">
-            Contact
-          </a>
-          <a href="/services" className="hover:text-red transition-colors duration-300">
             Pricing
           </a>
           <a href="/blog" className="hover:text-red transition-colors duration-300">

src/components/PinnedRepos.tsx

@@ -18,7 +18,8 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
         size-full
         overflow-hidden
         rounded-xl
-        h-full border
+        h-full
+        border
         border-red
         hover:shadow-md
         transition-shadow

src/components/Skill.tsx

@@ -0,0 +1,13 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export default function Skill({skill, icon, mt}: {skill: string, icon: IconProp, mt?: string}) {
+  return (
+    <div className="skill">
+      <FontAwesomeIcon icon={icon} width={40} className={`text-red ${mt}`} />
+      <span className="tooltip absolute bg-transparent-ish">
+        {skill}
+      </span>
+    </div>
+  );
+}