Improved portfolio

package-lock.json

@@ -18,6 +18,7 @@
         "@types/react-syntax-highlighter": "^15.5.13",
         "dotenv": "^16.4.7",
         "katex": "^0.16.19",
+        "lucide-react": "^0.554.0",
         "next": "15.1.3",
         "notion-to-md": "^3.1.3",
         "react": "^19.0.0",
@@ -2228,6 +2229,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/lucide-react": {
+      "version": "0.554.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.554.0.tgz",
+      "integrity": "sha512-St+z29uthEJVx0Is7ellNkgTEhaeSoA42I7JjOCBCrc5X6LYMGSv0P/2uS5HDLTExP5tpiqRD2PyUEOS6s9UXA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "dotenv": "^16.4.7",
     "katex": "^0.16.19",
+    "lucide-react": "^0.554.0",
     "next": "15.1.3",
     "notion-to-md": "^3.1.3",
     "react": "^19.0.0",

src/app/page.tsx

@@ -14,6 +14,7 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 import { faJava } from "@fortawesome/free-brands-svg-icons/faJava";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { CoffeeIcon, HeartIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import GitHubCalendar from "react-github-calendar";
 
@@ -41,6 +42,14 @@ export default function App() {
           low-level programming.
         </p>
 
+        <div className="pt-6">
+          <a href="https://ko-fi.com/X8X01OX1WR" target="_blank">
+            <span className="bg-transparent-ish rounded-md border border-slate-400 p-2 flex w-max gap-2 items-center">
+              <CoffeeIcon /> Support me on Ko-fi
+            </span>
+          </a>
+        </div>
+
         {/* Socials and skill */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
           {/* socials */}
@@ -48,7 +57,7 @@ export default function App() {
             <a href="https://github.com/kleo-dev/" target="blank_">
               <FontAwesomeIcon
                 icon={faGithub}
-                className="text-slate-300 size-[2.3rem]"
+                className="text-slate-400 size-[2.3rem]"
               />
             </a>
             <a
@@ -57,13 +66,13 @@ export default function App() {
             >
               <FontAwesomeIcon
                 icon={faLinkedin}
-                className="text-slate-300 size-[2.3rem]"
+                className="text-slate-400 size-[2.3rem]"
               />
             </a>
             <a href="https://www.instagram.com/selimaj.dev/" target="blank_">
               <FontAwesomeIcon
                 icon={faInstagram}
-                className="text-slate-300 size-[2.3rem]"
+                className="text-slate-400 size-[2.3rem]"
               />
             </a>
           </div>
@@ -111,7 +120,9 @@ export default function App() {
           />
         </section>
         <footer className="mt-8 border-t pt-3 pb-8">
-          If you see this i ❤️ you
+          <p className="flex gap-1 items-center">
+            If you see this i <HeartIcon className="size-4" /> you
+          </p>
           <p className="text-slate-300 mx-auto w-max mt-2">
             © 2025 Klesti. All rights reserved.
           </p>

src/components/PinnedRepos.tsx

@@ -31,7 +31,7 @@ export function Repo({
         rounded-xl
         h-full
         border
-        border-slate-300
+        border-slate-400
         hover:shadow-md
         transition-shadow
         duration-300

src/components/Skill.tsx

@@ -22,7 +22,7 @@ export default function Skill({
 
       <FontAwesomeIcon
         icon={icon}
-        className={`text-gray-300 ${classInsert} size-[2.3rem]`}
+        className={`text-slate-400 ${classInsert} size-[2.3rem]`}
       />
     </div>
   );