selimaj-dev/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Proffesional freelance ui

Browse Source
This commit is contained in:
selimaj-dev
2026-01-21 02:52:49 +01:00
parent 3824322aa9
commit e226455c96
24 changed files with 1739 additions and 912 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+49 -117
View File
@@ -14,8 +14,10 @@
"@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"@icons-pack/react-simple-icons": "^13.8.0",
"@notionhq/client": "^2.2.15",
"@types/react-syntax-highlighter": "^15.5.13",
"clsx": "^2.1.1",
"dotenv": "^16.4.7",
"framer-motion": "^12.23.25",
"katex": "^0.16.19",
@@ -32,10 +34,12 @@
"remark-breaks": "^4.0.0",
"remark-gfm": "^4.0.0",
"remark-math": "^6.0.0",
"tailwind-merge": "^3.4.0",
"tailwindcss-animate": "^1.0.7",
"tsparticles-slim": "^2.12.0"
},
"devDependencies": {
"@types/node": "^20",
"@types/node": "^20.19.30",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
@@ -47,7 +51,6 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
@@ -157,6 +160,15 @@
"react": ">=16.3"
}
},
"node_modules/@icons-pack/react-simple-icons": {
"version": "13.8.0",
"resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-13.8.0.tgz",
"integrity": "sha512-iZrhL1fSklfCCVn68IYHaAoKfcby3RakUTn2tRPyHBkhr2tkYqeQbjJWf+NizIYBzKBn2IarDJXmTdXd6CuEfw==",
"license": "MIT",
"peerDependencies": {
"react": "^16.13 || ^17 || ^18 || ^19"
}
},
"node_modules/@img/colour": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
@@ -627,7 +639,6 @@
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
"integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
"dev": true,
"license": "ISC",
"dependencies": {
"string-width": "^5.1.2",
@@ -645,7 +656,6 @@
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/set-array": "^1.2.1",
@@ -660,7 +670,6 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
@@ -670,7 +679,6 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
@@ -680,14 +688,12 @@
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
@@ -832,7 +838,6 @@
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@nodelib/fs.stat": "2.0.5",
@@ -846,7 +851,6 @@
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 8"
@@ -856,7 +860,6 @@
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@nodelib/fs.scandir": "2.1.5",
@@ -883,7 +886,6 @@
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
"integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
"dev": true,
"license": "MIT",
"optional": true,
"engines": {
@@ -954,12 +956,12 @@
"license": "MIT"
},
"node_modules/@types/node": {
"version": "20.17.11",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.11.tgz",
"integrity": "sha512-Ept5glCK35R8yeyIeYlRIZtX6SLRyqMhOFTgj5SOkMpLTdw3SEHI9fHx60xaUZ+V1aJxQJODE+7/j5ocZydYTg==",
"version": "20.19.30",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
"integrity": "sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==",
"license": "MIT",
"dependencies": {
"undici-types": "~6.19.2"
"undici-types": "~6.21.0"
}
},
"node_modules/@types/node-fetch": {
@@ -1016,7 +1018,6 @@
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
@@ -1029,7 +1030,6 @@
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
"integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
@@ -1042,14 +1042,12 @@
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
"integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
"dev": true,
"license": "MIT"
},
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dev": true,
"license": "ISC",
"dependencies": {
"normalize-path": "^3.0.0",
@@ -1063,7 +1061,6 @@
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
"dev": true,
"license": "MIT"
},
"node_modules/asynckit": {
@@ -1086,14 +1083,12 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true,
"license": "MIT"
},
"node_modules/binary-extensions": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -1106,7 +1101,6 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
"dev": true,
"license": "MIT",
"dependencies": {
"balanced-match": "^1.0.0"
@@ -1116,7 +1110,6 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"dev": true,
"license": "MIT",
"dependencies": {
"fill-range": "^7.1.1"
@@ -1129,7 +1122,6 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
@@ -1209,7 +1201,6 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dev": true,
"license": "MIT",
"dependencies": {
"anymatch": "~3.1.2",
@@ -1234,7 +1225,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.1"
@@ -1249,11 +1239,19 @@
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
"license": "MIT"
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"color-name": "~1.1.4"
@@ -1266,7 +1264,6 @@
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"license": "MIT"
},
"node_modules/combined-stream": {
@@ -1295,7 +1292,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
@@ -1305,7 +1301,6 @@
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
"integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
"dev": true,
"license": "MIT",
"dependencies": {
"path-key": "^3.1.0",
@@ -1320,7 +1315,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true,
"license": "MIT",
"bin": {
"cssesc": "bin/cssesc"
@@ -1420,14 +1414,12 @@
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
"dev": true,
"license": "Apache-2.0"
},
"node_modules/dlv": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
"dev": true,
"license": "MIT"
},
"node_modules/dotenv": {
@@ -1446,14 +1438,12 @@
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
"dev": true,
"license": "MIT"
},
"node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
"dev": true,
"license": "MIT"
},
"node_modules/entities": {
@@ -1500,7 +1490,6 @@
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
"integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
"dev": true,
"license": "MIT",
"dependencies": {
"@nodelib/fs.stat": "^2.0.2",
@@ -1517,7 +1506,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.1"
@@ -1530,7 +1518,6 @@
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
"integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
"dev": true,
"license": "ISC",
"dependencies": {
"reusify": "^1.0.4"
@@ -1553,7 +1540,6 @@
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"dev": true,
"license": "MIT",
"dependencies": {
"to-regex-range": "^5.0.1"
@@ -1566,7 +1552,6 @@
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
"integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
"dev": true,
"license": "ISC",
"dependencies": {
"cross-spawn": "^7.0.0",
@@ -1632,7 +1617,6 @@
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
@@ -1647,7 +1631,6 @@
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
@@ -1657,7 +1640,6 @@
"version": "10.4.5",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
"dev": true,
"license": "ISC",
"dependencies": {
"foreground-child": "^3.1.0",
@@ -1678,7 +1660,6 @@
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
"dev": true,
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.3"
@@ -1691,7 +1672,6 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.2"
@@ -2086,7 +2066,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"license": "MIT",
"dependencies": {
"binary-extensions": "^2.0.0"
@@ -2099,7 +2078,6 @@
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
"integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
"dev": true,
"license": "MIT",
"dependencies": {
"hasown": "^2.0.2"
@@ -2125,7 +2103,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@@ -2135,7 +2112,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -2145,7 +2121,6 @@
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dev": true,
"license": "MIT",
"dependencies": {
"is-extglob": "^2.1.1"
@@ -2168,7 +2143,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.12.0"
@@ -2190,14 +2164,12 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true,
"license": "ISC"
},
"node_modules/jackspeak": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
"integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"@isaacs/cliui": "^8.0.2"
@@ -2213,7 +2185,6 @@
"version": "1.21.7",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
"dev": true,
"license": "MIT",
"bin": {
"jiti": "bin/jiti.js"
@@ -2254,7 +2225,6 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
"integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14"
@@ -2267,7 +2237,6 @@
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
"dev": true,
"license": "MIT"
},
"node_modules/longest-streak": {
@@ -2310,7 +2279,6 @@
"version": "10.4.3",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
"dev": true,
"license": "ISC"
},
"node_modules/lucide-react": {
@@ -2652,7 +2620,6 @@
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 8"
@@ -3244,7 +3211,6 @@
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
"dev": true,
"license": "MIT",
"dependencies": {
"braces": "^3.0.3",
@@ -3279,7 +3245,6 @@
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
"dev": true,
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.1"
@@ -3295,7 +3260,6 @@
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=16 || 14 >=14.17"
@@ -3326,7 +3290,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
"integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"any-promise": "^1.0.0",
@@ -3456,7 +3419,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@@ -3488,7 +3450,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
@@ -3498,7 +3459,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
"integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
"dev": true,
"license": "BlueOak-1.0.0"
},
"node_modules/parse-entities": {
@@ -3542,7 +3502,6 @@
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -3552,14 +3511,12 @@
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
"dev": true,
"license": "MIT"
},
"node_modules/path-scurry": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
"integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"lru-cache": "^10.2.0",
@@ -3582,7 +3539,6 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8.6"
@@ -3595,7 +3551,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@@ -3605,7 +3560,6 @@
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
"integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
@@ -3615,7 +3569,6 @@
"version": "8.4.49",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
"dev": true,
"funding": [
{
"type": "opencollective",
@@ -3644,7 +3597,6 @@
"version": "15.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
"dev": true,
"license": "MIT",
"dependencies": {
"postcss-value-parser": "^4.0.0",
@@ -3662,7 +3614,6 @@
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
"dev": true,
"license": "MIT",
"dependencies": {
"camelcase-css": "^2.0.1"
@@ -3682,7 +3633,6 @@
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
"integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
@@ -3718,7 +3668,6 @@
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
"integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
@@ -3744,7 +3693,6 @@
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
"integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
"dev": true,
"license": "MIT",
"dependencies": {
"cssesc": "^3.0.0",
@@ -3758,7 +3706,6 @@
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true,
"license": "MIT"
},
"node_modules/prismjs": {
@@ -3795,7 +3742,6 @@
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
"dev": true,
"funding": [
{
"type": "github",
@@ -3910,7 +3856,6 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
"dev": true,
"license": "MIT",
"dependencies": {
"pify": "^2.3.0"
@@ -3920,7 +3865,6 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"license": "MIT",
"dependencies": {
"picomatch": "^2.2.1"
@@ -4195,7 +4139,6 @@
"version": "1.22.10",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
"integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
"dev": true,
"license": "MIT",
"dependencies": {
"is-core-module": "^2.16.0",
@@ -4216,7 +4159,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
"dev": true,
"license": "MIT",
"engines": {
"iojs": ">=1.0.0",
@@ -4227,7 +4169,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
"dev": true,
"funding": [
{
"type": "github",
@@ -4315,7 +4256,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
"dev": true,
"license": "MIT",
"dependencies": {
"shebang-regex": "^3.0.0"
@@ -4328,7 +4268,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -4338,7 +4277,6 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=14"
@@ -4370,7 +4308,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
"dev": true,
"license": "MIT",
"dependencies": {
"eastasianwidth": "^0.2.0",
@@ -4389,7 +4326,6 @@
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"dev": true,
"license": "MIT",
"dependencies": {
"emoji-regex": "^8.0.0",
@@ -4404,7 +4340,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -4414,14 +4349,12 @@
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true,
"license": "MIT"
},
"node_modules/string-width-cjs/node_modules/strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
@@ -4448,7 +4381,6 @@
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^6.0.1"
@@ -4465,7 +4397,6 @@
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
@@ -4478,7 +4409,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -4520,7 +4450,6 @@
"version": "3.35.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
"integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.2",
@@ -4543,7 +4472,6 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -4552,11 +4480,20 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/tailwind-merge": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
"integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/dcastil"
}
},
"node_modules/tailwindcss": {
"version": "3.4.17",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
"integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
"dev": true,
"license": "MIT",
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
@@ -4590,11 +4527,19 @@
"node": ">=14.0.0"
}
},
"node_modules/tailwindcss-animate": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
"integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
"license": "MIT",
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders"
}
},
"node_modules/thenify": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
"integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
"dev": true,
"license": "MIT",
"dependencies": {
"any-promise": "^1.0.0"
@@ -4604,7 +4549,6 @@
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
"integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
"dev": true,
"license": "MIT",
"dependencies": {
"thenify": ">= 3.1.0 < 4"
@@ -4617,7 +4561,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"is-number": "^7.0.0"
@@ -4656,7 +4599,6 @@
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
"dev": true,
"license": "Apache-2.0"
},
"node_modules/tslib": {
@@ -5126,9 +5068,9 @@
}
},
"node_modules/undici-types": {
"version": "6.19.8",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
"version": "6.21.0",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
"license": "MIT"
},
"node_modules/unified": {
@@ -5250,7 +5192,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true,
"license": "MIT"
},
"node_modules/vfile": {
@@ -5325,7 +5266,6 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
"dev": true,
"license": "ISC",
"dependencies": {
"isexe": "^2.0.0"
@@ -5341,7 +5281,6 @@
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^6.1.0",
@@ -5360,7 +5299,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^4.0.0",
@@ -5378,7 +5316,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -5388,7 +5325,6 @@
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"license": "MIT",
"dependencies": {
"color-convert": "^2.0.1"
@@ -5404,14 +5340,12 @@
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true,
"license": "MIT"
},
"node_modules/wrap-ansi-cjs/node_modules/string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"dev": true,
"license": "MIT",
"dependencies": {
"emoji-regex": "^8.0.0",
@@ -5426,7 +5360,6 @@
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
@@ -5448,7 +5381,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
"integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
"dev": true,
"license": "ISC",
"bin": {
"yaml": "bin.mjs"
package.json
+5 -1
View File
@@ -15,8 +15,10 @@
"@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"@icons-pack/react-simple-icons": "^13.8.0",
"@notionhq/client": "^2.2.15",
"@types/react-syntax-highlighter": "^15.5.13",
"clsx": "^2.1.1",
"dotenv": "^16.4.7",
"framer-motion": "^12.23.25",
"katex": "^0.16.19",
@@ -33,10 +35,12 @@
"remark-breaks": "^4.0.0",
"remark-gfm": "^4.0.0",
"remark-math": "^6.0.0",
"tailwind-merge": "^3.4.0",
"tailwindcss-animate": "^1.0.7",
"tsparticles-slim": "^2.12.0"
},
"devDependencies": {
"@types/node": "^20",
"@types/node": "^20.19.30",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
src/app/about/page.tsx
+379
View File
@@ -0,0 +1,379 @@
import { Layout } from "@/components/layout/Layout";
import {
Github,
Linkedin,
Youtube,
Instagram,
ExternalLink,
MapPin,
Crown,
Code,
Trophy,
Box,
FileText,
} from "lucide-react";
import {
SiRust,
SiTypescript,
SiReact,
SiGo,
SiPython,
SiDocker,
SiLinux,
} from "@icons-pack/react-simple-icons";
import { cn } from "@/lib/utils";
const timeline = [
{
year: "2020",
title: "Started Programming Journey",
description:
"Began learning programming at age 10, with C# .net WinForms applications.",
},
{
year: "2021",
title: "Started learning Python and Web Development",
description:
"Began learning Python and web development, building my first fully coded applications.",
},
{
year: "2022",
title: "First Open Source Contributions",
description:
"Started contributing to open source projects and building my GitHub presence.",
},
{
year: "2023",
title: "Hacking tools",
description:
"Started building hacking tools and security-focused applications.",
},
{
year: "2024",
title: "Founded ORUS",
description: "Created the orus-dev organization to house major projects.",
},
{
year: "2025",
title: "Expanding Horizons",
description:
"Taking on freelance work and building products that make a difference.",
},
];
export default function About() {
const techStack = [
{ name: "Rust", icon: <SiRust />, color: "text-orange-500" },
{ name: "TypeScript", icon: <SiTypescript />, color: "text-blue-500" },
{ name: "React", icon: <SiReact />, color: "text-cyan-500" },
{ name: "Go", icon: <SiGo />, color: "text-cyan-400" },
{ name: "Python", icon: <SiPython />, color: "text-yellow-500" },
{
name: "Java",
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M8.717 18.555s-.922.561.641.721c1.882.24 2.885.2 4.969-.2a7.515 7.515 0 0 0 1.322.641c-4.688 2.004-10.62-.12-6.933-1.163zm-.6-2.605s-1.002.761.561.923c2.044.2 3.647.24 6.412-.32a2.445 2.445 0 0 0 .962.601c-5.651 1.683-11.982.16-7.935-1.202zm11.06 4.568s.681.561-.761 1.002c-2.685.803-11.261 1.043-13.665 0-.842-.36.761-.881 1.275-.961.521-.12.803-.12.803-.12-.922-.641-6.131 1.322-2.645 1.882 9.578 1.563 17.472-.681 14.987-1.803zM9.15 13.225s-4.368 1.043-1.563 1.402c1.202.161 3.566.12 5.771-.04 1.803-.16 3.608-.48 3.608-.48s-.641.281-1.082.561c-4.448 1.163-12.984.641-10.539-.561 2.084-1.002 3.807-.881 3.807-.881zm7.815 4.368c4.488-2.325 3.004-4.568.962-4.288-.36.08-.521.16-.521.16s.12-.24.401-.32c2.846-1.002 5.089 3.005-0.922 4.568 0 0 .04-.04.08-.12zm-7.373 6.332c4.328.28 10.94-.16 11.1-2.205 0 0-.32.803-3.566 1.402-3.687.681-8.255.6-10.94.16 0 0 .561.48 3.407.641z"
fill="currentColor"
/>
<path
d="M14.247.001s2.485 2.525-2.364 6.332c-3.887 3.086-.881 4.848 0 6.853-2.285-2.044-3.927-3.848-2.805-5.53C10.72 5.17 15.249 3.975 14.247.001zm-1.275 11.501c1.163 1.322-.32 2.525-.32 2.525s2.966-1.523 1.605-3.407c-1.242-1.803-2.205-2.685 3.005-5.69 0 0-8.215 2.044-4.288 6.572z"
fill="currentColor"
/>
</svg>
),
color: "text-red-500",
},
{ name: "Docker", icon: <SiDocker />, color: "text-blue-400" },
{ name: "Linux", icon: <SiLinux />, color: "text-yellow-400" },
];
const achievements = [
{
icon: <Trophy className="w-10 h-10 text-accent mx-auto" />,
title: "Top GitHub Contributor in Albania",
description:
"Ranked #2 nationally based on commits, contributions, and repository activity.",
},
{
icon: <Github className="w-10 h-10 text-accent mx-auto" />,
title: "Contributor to 80+ Public Repositories",
description:
"Actively contributed code, bug fixes, and features to multiple open-source projects.",
},
{
icon: <Box className="w-10 h-10 text-accent mx-auto" />,
title: "Built & Deployed 3 Full-Stack Applications",
description:
"Completed end-to-end development projects using Next.js, React, and TypeScript.",
},
{
icon: <FileText className="w-10 h-10 text-accent mx-auto" />,
title: "Published Technical Guides & Documentation",
description:
"Authored clear technical documentation and tutorials in public repositories.",
},
];
return (
<Layout>
{/* Hero */}
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
<div className="absolute top-1/4 right-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
<div className="container mx-auto px-6 relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
{/* Image/Avatar */}
<div className="relative">
<div className="aspect-square max-w-md mx-auto rounded-3xl overflow-hidden glass-card p-2">
<div className="w-full h-full rounded-2xl bg-gradient-to-br from-accent/20 to-accent/5 flex items-center justify-center">
<img
src="https://avatars.githubusercontent.com/u/103524696?v=4"
alt="Klesti Selimaj"
className="w-full h-full object-cover rounded-2xl"
/>
</div>
</div>
{/* Floating badges */}
<div className="absolute -bottom-4 -right-4 glass-card rounded-xl px-4 py-2 flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
<span className="text-sm text-foreground">Available</span>
</div>
</div>
{/* Content */}
<div>
<span className="text-accent text-sm font-medium uppercase tracking-wider">
About Me
</span>
<h1 className="text-4xl md:text-5xl font-bold text-foreground mt-2 mb-6">
Hey, I'm{" "}
<span className="text-gradient-gold">Klesti Selimaj</span>
</h1>
<p className="text-lg text-muted-foreground mb-6">
A 16-year-old software engineer from Albania with 6+ years of
experience. I'm passionate about building things that matter,
from low-level systems to beautiful user interfaces.
</p>
<p className="text-muted-foreground mb-8">
My journey started at age 10 when I had my first laptop (a Asus
with pre installed endless linux), and since then I've been
hooked on computers, but i didn't exactly know what programming
was but i was doing it unconsciously, making winforms apps in c#
with visual studio.
</p>
{/* Quick Info */}
<div className="flex flex-wrap gap-4 mb-8">
<div className="flex items-center gap-2 text-muted-foreground">
<MapPin className="w-4 h-4 text-accent" />
<span>Albania</span>
</div>
<div className="flex items-center gap-2 text-muted-foreground">
<Code className="w-4 h-4 text-accent" />
<span>6+ Years Experience</span>
</div>
<div className="flex items-center gap-2 text-muted-foreground">
<Crown className="w-4 h-4 text-accent" />
<span>@orus-dev</span>
</div>
</div>
{/* Social Links */}
<div className="flex items-center gap-4">
<a
href="https://github.com/selimaj-dev"
target="_blank"
rel="noopener noreferrer"
className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-all"
>
<Github className="w-5 h-5 text-foreground" />
</a>
<a
href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
target="_blank"
rel="noopener noreferrer"
className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-all"
>
<Linkedin className="w-5 h-5 text-foreground" />
</a>
<a
href="https://www.youtube.com/@0xkleo"
target="_blank"
rel="noopener noreferrer"
className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-all"
>
<Youtube className="w-5 h-5 text-foreground" />
</a>
<a
href="https://www.instagram.com/selimaj.dev/"
target="_blank"
rel="noopener noreferrer"
className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-all"
>
<Instagram className="w-5 h-5 text-foreground" />
</a>
<a
href="https://dev.to/selimaj"
target="_blank"
rel="noopener noreferrer"
className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-all"
>
<ExternalLink className="w-5 h-5 text-foreground" />
</a>
</div>
</div>
</div>
</div>
</section>
{/* Tech Stack */}
<section className="py-24 bg-card/50">
<div className="container mx-auto px-6">
<div className="max-w-2xl mb-16">
<span className="text-accent text-sm font-medium uppercase tracking-wider">
Tech Stack
</span>
<h2 className="text-3xl md:text-4xl font-bold text-foreground mt-2 mb-4">
Tools I Work With
</h2>
<p className="text-muted-foreground">
A carefully curated set of technologies that I use to build
exceptional products.
</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{techStack.map((tech, index) => (
<div
key={tech.name}
className="glass-card rounded-2xl p-6 text-center hover-lift group"
style={{ animationDelay: `${index * 50}ms` }}
>
<div className={cn("text-4xl mb-3 mx-auto w-max", tech.color)}>
{tech.icon}
</div>
<h3 className="font-semibold text-foreground group-hover:text-accent transition-colors">
{tech.name}
</h3>
</div>
))}
</div>
</div>
</section>
{/* Achievements */}
<section className="py-24 bg-background">
<div className="container mx-auto px-6">
<div className="max-w-2xl mb-16">
<span className="text-accent text-sm font-medium uppercase tracking-wider">
Recognition
</span>
<h2 className="text-3xl md:text-4xl font-bold text-foreground mt-2 mb-4">
My Achievements
</h2>
<p className="text-muted-foreground">
Achievements earned through consistent contributions and learning.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{achievements.map((achievement, index) => (
<div
key={achievement.title}
className="glass-card rounded-2xl p-6 text-center hover-lift"
style={{ animationDelay: `${index * 100}ms` }}
>
<div className="text-4xl mb-4">{achievement.icon}</div>
<h3 className="font-semibold text-foreground mb-2">
{achievement.title}
</h3>
<p className="text-sm text-muted-foreground">
{achievement.description}
</p>
</div>
))}
</div>
</div>
</section>
{/* Timeline */}
<section className="py-24 bg-card/50">
<div className="container mx-auto px-6">
<div className="max-w-2xl mb-16">
<span className="text-accent text-sm font-medium uppercase tracking-wider">
Journey
</span>
<h2 className="text-3xl md:text-4xl font-bold text-foreground mt-2 mb-4">
My Story
</h2>
<p className="text-muted-foreground">
From curious kid to entrepreneurial developer, here's how I got
here.
</p>
</div>
<div className="max-w-3xl mx-auto">
{timeline.map((item, index) => (
<div
key={item.year}
className="relative flex gap-6 pb-12 last:pb-0"
style={{ animationDelay: `${index * 100}ms` }}
>
{/* Line */}
{index !== timeline.length - 1 && (
<div className="absolute left-[19px] top-10 w-0.5 h-[calc(100%-2.5rem)] bg-border" />
)}
{/* Dot */}
<div className="relative flex-shrink-0">
<div className="w-10 h-10 rounded-full bg-accent flex items-center justify-center">
<span className="text-accent-foreground text-xs font-bold">
{item.year.slice(2)}
</span>
</div>
</div>
{/* Content */}
<div className="glass-card rounded-2xl p-6 flex-1">
<div className="flex items-center gap-3 mb-2">
<span className="text-sm font-mono text-accent">
{item.year}
</span>
</div>
<h3 className="text-lg font-semibold text-foreground mb-2">
{item.title}
</h3>
<p className="text-muted-foreground text-sm">
{item.description}
</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* Philosophy */}
<section className="py-24 bg-background relative overflow-hidden">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent/5 rounded-full blur-3xl" />
<div className="container mx-auto px-6 relative z-10">
<div className="max-w-3xl mx-auto text-center">
<span className="text-accent text-sm font-medium uppercase tracking-wider">
Philosophy
</span>
<blockquote className="text-xl md:text-2xl text-foreground font-medium italic mb-6 mt-4">
"One day or Day one?"
</blockquote>
<p className="text-muted-foreground">- Klesti Selimaj</p>
</div>
</div>
</section>
</Layout>
);
}
src/app/globals.css
+225 -29
View File
@@ -1,41 +1,237 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'Kodchasan Medium';
src: url('/fonts/Kodchasan-Medium.ttf');
}
/* Premium Monochromatic Design System with Gold Accents */
@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;
}
@media (prefers-color-scheme: dark) {
@layer base {
:root {
--background: #0a0a0a;
--foreground: #ededed;
--background: 0 0% 100%;
--foreground: 0 0% 5%;
--card: 0 0% 98%;
--card-foreground: 0 0% 5%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 5%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 94%;
--muted-foreground: 0 0% 45%;
--accent: 43 41% 59%;
--accent-foreground: 0 0% 5%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 43 41% 59%;
--radius: 0.75rem;
/* Premium Gold Tokens */
--gold: 43 41% 59%;
--gold-light: 43 45% 70%;
--gold-dark: 43 38% 45%;
/* Gradient tokens */
--gradient-gold: linear-gradient(135deg, hsl(43 41% 59%), hsl(43 45% 70%));
--gradient-dark: linear-gradient(180deg, hsl(0 0% 100%), hsl(0 0% 96%));
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
--shadow-gold: 0 0 30px -5px hsl(43 41% 59% / 0.15);
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 0 0% 25%;
--sidebar-primary: 0 0% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 0 0% 95%;
--sidebar-accent-foreground: 0 0% 10%;
--sidebar-border: 0 0% 91%;
--sidebar-ring: 43 41% 59%;
}
.dark {
--background: 0 0% 4%;
--foreground: 0 0% 95%;
--card: 0 0% 7%;
--card-foreground: 0 0% 95%;
--popover: 0 0% 6%;
--popover-foreground: 0 0% 95%;
--primary: 0 0% 95%;
--primary-foreground: 0 0% 5%;
--secondary: 0 0% 12%;
--secondary-foreground: 0 0% 95%;
--muted: 0 0% 15%;
--muted-foreground: 0 0% 55%;
--accent: 43 41% 59%;
--accent-foreground: 0 0% 5%;
--destructive: 0 62% 30%;
--destructive-foreground: 0 0% 95%;
--border: 0 0% 15%;
--input: 0 0% 15%;
--ring: 43 41% 59%;
/* Premium Gold Tokens (adjusted for dark) */
--gold: 43 41% 59%;
--gold-light: 43 50% 68%;
--gold-dark: 43 35% 48%;
/* Gradient tokens */
--gradient-gold: linear-gradient(135deg, hsl(43 41% 59%), hsl(43 50% 68%));
--gradient-dark: linear-gradient(180deg, hsl(0 0% 4%), hsl(0 0% 8%));
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
--shadow-gold: 0 0 40px -5px hsl(43 41% 59% / 0.25);
--sidebar-background: 0 0% 6%;
--sidebar-foreground: 0 0% 90%;
--sidebar-primary: 43 41% 59%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 0 0% 12%;
--sidebar-accent-foreground: 0 0% 90%;
--sidebar-border: 0 0% 12%;
--sidebar-ring: 43 41% 59%;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: 'Kodchasan Semi Bold', sans-serif;
@layer base {
* {
@apply border-border;
}
html {
scroll-behavior: smooth;
}
body {
@apply bg-background text-foreground antialiased;
font-family: 'Inter', system-ui, sans-serif;
}
::selection {
@apply bg-accent/30 text-foreground;
}
}
h1 {
font-size: 30px;
font-weight: bold;
@layer components {
.text-gradient-gold {
@apply bg-clip-text text-transparent;
background-image: linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-light)));
}
.border-gradient-gold {
border-image: linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-light))) 1;
}
.glow-gold {
box-shadow: 0 0 40px -5px hsl(var(--gold) / 0.3);
}
.glass-card {
@apply bg-card/80 backdrop-blur-xl border border-border/50;
}
.hover-lift {
@apply transition-all duration-300 ease-out;
}
.hover-lift:hover {
@apply -translate-y-1;
box-shadow: var(--shadow-lg);
}
.font-mono {
font-family: 'JetBrains Mono', monospace;
}
}
@layer utilities {
.animate-fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}
.animate-fade-in-delay-1 {
animation: fadeIn 0.6s ease-out 0.1s forwards;
opacity: 0;
}
.animate-fade-in-delay-2 {
animation: fadeIn 0.6s ease-out 0.2s forwards;
opacity: 0;
}
.animate-fade-in-delay-3 {
animation: fadeIn 0.6s ease-out 0.3s forwards;
opacity: 0;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.animate-shimmer {
background: linear-gradient(
90deg,
hsl(var(--gold) / 0) 0%,
hsl(var(--gold) / 0.3) 50%,
hsl(var(--gold) / 0) 100%
);
background-size: 200% 100%;
animation: shimmer 3s infinite;
}
}
src/app/layout.tsx
+2 -8
View File
@@ -1,10 +1,8 @@
import type { Metadata } from "next";
import "./globals.css";
import Navbar from "@/components/Navbar";
import Background from "@/components/Background";
export const metadata: Metadata = {
title: "Klesti's Portfolio",
title: "Selimaj.dev",
description: "",
};
@@ -15,11 +13,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className="antialiased bg-black">
<Background>
<div className="relative h-screen">{children}</div>
</Background>
</body>
<body className="antialiased bg-black">{children}</body>
</html>
);
}
src/app/page.tsx
+12 -227
View File
@@ -1,231 +1,16 @@
"use client";
import { motion, spring } from "framer-motion";
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 { 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";
import { fadeInUp, popIn, staggerContainer } from "@/components/effects";
export default function App() {
const [contribs, setContribs] = useState<number>();
useEffect(() => {
const fetchContributions = async () => {
const res = await fetch("/api/contribs");
const data = await res.json();
setContribs(data.total || undefined);
};
fetchContributions();
}, []);
import { Layout } from "@/components/layout/Layout";
import { HeroSection } from "@/components/home/HeroSection";
import { ProjectsSection } from "@/components/home/ProjectsSection";
import { SkillsSection } from "@/components/home/SkillsSection";
import { CTASection } from "@/components/home/CTASection";
export default function Home() {
return (
<motion.div
className="w-full max-w-screen-lg mx-auto mt-10"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.6 }}
>
<div className="px-8 md:px-10 lg:px-15 xl:px-24">
{/* HEADER */}
<motion.h1
className="py-2 text-gray-300"
variants={fadeInUp}
initial="hidden"
animate="show"
>
Hey, I'm Klesti! 👋🏻
</motion.h1>
<motion.p
className="font-semibold text-gray-300"
variants={fadeInUp}
initial="hidden"
animate="show"
transition={{ delay: 0.15 }}
>
A 16 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.
</motion.p>
{/* KO-FI BUTTON */}
<motion.div
className="pt-6"
animate={{ y: [0, -3, 0] }}
transition={{ repeat: Infinity, duration: 3 }}
>
<a href="https://ko-fi.com/X8X01OX1WR" target="_blank">
<motion.span
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="bg-transparent-ish rounded-md border border-slate-400 p-2 flex w-max gap-2 items-center cursor-pointer"
>
<CoffeeIcon /> Support me on Ko-fi
</motion.span>
</a>
</motion.div>
{/* SOCIALS + SKILLS */}
<motion.div
className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent"
variants={staggerContainer}
initial="hidden"
animate="show"
>
{/* socials */}
<motion.div className="pt-5 flex flex-row gap-5 w-max">
{[faGithub, faLinkedin, faInstagram].map((icon, i) => (
<motion.a
key={i}
href={
icon === faGithub
? "https://github.com/selimaj-dev/"
: icon === faLinkedin
? "https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
: "https://www.instagram.com/selimaj.dev/"
}
target="blank_"
variants={popIn}
whileHover={{ scale: 1.2, rotate: 3 }}
whileTap={{ scale: 0.9 }}
>
<FontAwesomeIcon
icon={icon}
className="text-slate-400 size-[2.3rem]"
/>
</motion.a>
))}
</motion.div>
{/* skills */}
<motion.div variants={popIn}>
<div className="p-3 rounded-xl">
<motion.div
className="mx-auto w-max flex flex-row gap-5"
variants={staggerContainer}
initial="hidden"
animate="show"
>
<motion.div variants={popIn}>
<Skill skill="Rust" icon={faRust} />
</motion.div>
<motion.div variants={popIn}>
<Skill skill="Go" icon={faGolang} />
</motion.div>
<motion.div variants={popIn}>
<Skill skill="JavaScript" icon={faJs} />
</motion.div>
<motion.div variants={popIn}>
<Skill skill="Java" icon={faJava} classInsert="p-1" />
</motion.div>
<motion.div variants={popIn}>
<Skill skill="Python" icon={faPython} />
</motion.div>
<motion.div variants={popIn}>
<Skill skill="React" icon={faReact} />
</motion.div>
</motion.div>
</div>
</motion.div>
</motion.div>
{/* PINNED PROJECTS */}
<motion.h1
className="text-slate-300 mt-4"
variants={fadeInUp}
initial="hidden"
animate="show"
>
Pinned Projects
</motion.h1>
<motion.section>
<PinnedRepos />
</motion.section>
{/* CONTRIBUTIONS */}
<motion.h2
className="text-slate-300 mt-7"
variants={fadeInUp}
initial="hidden"
animate="show"
>
{contribs || "Loading.."} contributions in the last year
</motion.h2>
<motion.section
className="mt-4"
variants={fadeInUp}
initial="hidden"
animate="show"
>
<motion.div variants={fadeInUp}>
<GitHubCalendar
// hideTotalCount
username="selimaj-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)",
],
}}
/>
</motion.div>
</motion.section>
{/* FOOTER */}
<footer className="mt-8 border-t pt-3 pb-8">
<motion.p
className="flex gap-1 items-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.4 }}
>
If you see this i{" "}
<motion.span
animate={{ scale: [1, 1.16, 1] }}
transition={{ repeat: Infinity, duration: 1.0 }}
>
<HeartIcon className="size-4 text-slate-300" />
</motion.span>{" "}
you
</motion.p>
<motion.p
className="text-slate-300 mx-auto w-max mt-2"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.6 }}
>
© 2025 Klesti. All rights reserved.
</motion.p>
</footer>
</div>
</motion.div>
<Layout>
<HeroSection />
<ProjectsSection />
<SkillsSection />
<CTASection />
</Layout>
);
}
src/app/pricing/page.tsx
+267
View File
@@ -0,0 +1,267 @@
"use client";
import { Layout } from "@/components/layout/Layout";
import { Check, ArrowRight, Zap, Crown, Rocket } from "lucide-react";
import { useState } from "react";
const plans = [
{
name: "Starter",
description: "Perfect for small projects and quick fixes",
price: "$500",
period: "project",
icon: Zap,
features: [
"Single page application",
"Responsive design",
"Basic animations",
"2 revision rounds",
"1 week delivery",
"Source code included",
],
cta: "Get Started",
popular: false,
},
{
name: "Professional",
description: "For complex applications and systems",
price: "$2,000",
period: "project",
icon: Crown,
features: [
"Multi-page application",
"Custom backend integration",
"Advanced animations & UI",
"5 revision rounds",
"2-3 weeks delivery",
"Full source code & docs",
"1 month support",
"Performance optimization",
],
cta: "Start Project",
popular: true,
},
{
name: "Enterprise",
description: "Full-scale systems and ongoing partnership",
price: "Custom",
period: "quote",
icon: Rocket,
features: [
"Complex systems architecture",
"Low-level development",
"TUI/CLI applications",
"Unlimited revisions",
"Priority support",
"Full documentation",
"Training & onboarding",
"Long-term partnership",
],
cta: "Contact Me",
popular: false,
},
];
const services = [
{
title: "Web Development",
description:
"Modern, performant web applications built with React, TypeScript, and cutting-edge technologies.",
},
{
title: "Systems Programming",
description:
"Low-level development in Rust and Go for performance-critical applications.",
},
{
title: "TUI/CLI Tools",
description:
"Beautiful terminal user interfaces and command-line tools that developers love.",
},
{
title: "API Development",
description: "Robust, scalable backend systems and API architectures.",
},
{
title: "DevOps & Deployment",
description:
"Docker, CI/CD pipelines, and self-hosted deployment solutions.",
},
{
title: "Consulting",
description:
"Technical guidance and architecture planning for your projects.",
},
];
export default function Pricing() {
const [hoveredPlan, setHoveredPlan] = useState<string | null>(null);
return (
<Layout>
{/* Hero */}
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
<div className="container mx-auto px-6 relative z-10">
<div className="max-w-3xl mx-auto text-center">
<span className="text-accent text-sm font-medium uppercase tracking-wider">
Pricing
</span>
<h1 className="text-4xl md:text-5xl font-bold text-foreground mt-2 mb-6">
Transparent Pricing for{" "}
<span className="text-gradient-gold">Premium Quality</span>
</h1>
<p className="text-lg text-muted-foreground">
Choose a plan that fits your needs. Every project receives the
same attention to detail and commitment to excellence.
</p>
</div>
</div>
</section>
{/* Pricing Cards */}
<section className="py-16 bg-card/50">
<div className="container mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
{plans.map((plan) => (
<div
key={plan.name}
className={`relative glass-card rounded-2xl p-8 transition-all duration-300 ${
plan.popular
? "ring-2 ring-accent scale-105 md:scale-110"
: "hover:ring-1 hover:ring-accent/30"
} ${hoveredPlan === plan.name ? "glow-gold" : ""}`}
onMouseEnter={() => setHoveredPlan(plan.name)}
onMouseLeave={() => setHoveredPlan(null)}
>
{plan.popular && (
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
<span className="bg-accent text-accent-foreground px-4 py-1 rounded-full text-sm font-medium">
Most Popular
</span>
</div>
)}
<div className="flex items-center gap-3 mb-4">
<div
className={`w-10 h-10 rounded-xl flex items-center justify-center ${
plan.popular ? "bg-accent" : "bg-secondary"
}`}
>
<plan.icon
className={`w-5 h-5 ${
plan.popular
? "text-accent-foreground"
: "text-foreground"
}`}
/>
</div>
<h3 className="text-xl font-semibold text-foreground">
{plan.name}
</h3>
</div>
<p className="text-muted-foreground text-sm mb-6">
{plan.description}
</p>
<div className="mb-6">
<span className="text-4xl font-bold text-foreground">
{plan.price}
</span>
{plan.period !== "quote" && (
<span className="text-muted-foreground">
/{plan.period}
</span>
)}
</div>
<ul className="space-y-3 mb-8">
{plan.features.map((feature) => (
<li
key={feature}
className="flex items-start gap-3 text-sm"
>
<Check className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
<span className="text-foreground">{feature}</span>
</li>
))}
</ul>
<a
href="mailto:[email protected]"
className={`w-full flex items-center justify-center gap-2 py-3 rounded-xl font-medium transition-all ${
plan.popular
? "bg-accent text-accent-foreground hover:bg-accent/90"
: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
}`}
>
{plan.cta}
<ArrowRight className="w-4 h-4" />
</a>
</div>
))}
</div>
</div>
</section>
{/* Services */}
<section className="py-24 bg-background">
<div className="container mx-auto px-6">
<div className="max-w-2xl mb-16">
<span className="text-accent text-sm font-medium uppercase tracking-wider">
Services
</span>
<h2 className="text-3xl md:text-4xl font-bold text-foreground mt-2 mb-4">
What I Offer
</h2>
<p className="text-muted-foreground">
From concept to deployment, I provide end-to-end development
services tailored to your needs.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{services.map((service, index) => (
<div
key={service.title}
className="glass-card rounded-2xl p-6 hover-lift group"
style={{ animationDelay: `${index * 100}ms` }}
>
<h3 className="text-lg font-semibold text-foreground mb-2 group-hover:text-accent transition-colors">
{service.title}
</h3>
<p className="text-muted-foreground text-sm">
{service.description}
</p>
</div>
))}
</div>
</div>
</section>
{/* Contact CTA */}
<section className="py-24 bg-card/50 relative overflow-hidden">
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-accent/5 rounded-full blur-3xl" />
<div className="container mx-auto px-6 relative z-10">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6">
Have a Custom Project in Mind?
</h2>
<p className="text-lg text-muted-foreground mb-10 max-w-xl mx-auto">
Let's discuss your requirements and create a tailored solution
that exceeds expectations.
</p>
<a
href="mailto:[email protected]"
className="inline-flex items-center gap-2 bg-accent text-accent-foreground px-8 py-4 rounded-xl font-medium hover:bg-accent/90 transition-all glow-gold"
>
Schedule a Call
<ArrowRight className="w-4 h-4" />
</a>
</div>
</div>
</section>
</Layout>
);
}
src/blogApi.ts
-129
View File
@@ -1,129 +0,0 @@
import { Client } from "@notionhq/client";
import { SearchResponse } from "@notionhq/client/build/src/api-endpoints";
import { NotionToMarkdown } from "notion-to-md";
interface Blog {
id: string;
title: string;
tags: { name: string; color: string }[];
date: string;
description: string;
}
type QueryResponse = { cursor: string | null; hasMore: boolean; items: Blog[] };
type Error = { msg: string };
export async function getBlogs(
notion: Client,
databaseId: string,
cursor: string | undefined,
pageSize: number
): Promise<[number, QueryResponse | Error]> {
try {
const response = await notion.databases.query({
database_id: databaseId,
filter: {
property: "Status",
status: {
equals: "Posted",
},
},
start_cursor: cursor,
page_size: pageSize,
});
return [
200,
{
cursor: response.next_cursor,
hasMore: response.has_more,
items: response.results.map(convertBlog),
},
];
} catch (err: any) {
return [400, { msg: String(err) }];
}
}
function convertBlog(page: any): Blog {
return {
id: page.id,
title: page.properties.Title.title[0].plain_text,
description: [
page.properties.Description.rich_text.map(
(d: { plain_text: string }) => d.plain_text
),
].join(" "),
date: page.properties.Date.created_time,
tags: page.properties.Tags.multi_select.map((tag: any) => ({
name: tag.name,
color: tag.color,
})),
};
}
interface FullBlog extends Blog {
markdown: string;
}
export async function getBlog(
notion: Client,
n2m: NotionToMarkdown,
pageId: string
): Promise<[number, FullBlog | Error]> {
try {
const page: any = await notion.pages.retrieve({ page_id: pageId });
if (page.properties.Status.status.name !== "Posted")
return [400, { msg: "Blog not found" }];
try {
const blog = convertBlog(page);
const mdBlocks = await n2m.pageToMarkdown(page.id);
return [
200,
{
id: blog.id,
title: blog.title,
description: blog.description,
tags: blog.tags,
date: blog.date,
markdown: n2m.toMarkdownString(mdBlocks).parent || "",
},
];
} catch (err: any) {
return [500, { msg: String(err) }];
}
} catch {
return [400, { msg: "Blog not found" }];
}
}
export async function searchBlog(
notion: Client,
query: string
): Promise<[200 | 400, QueryResponse | Error]> {
try {
var response = await notion.search({
query,
filter: {
value: "page",
property: "object",
},
sort: {
direction: "ascending",
timestamp: "last_edited_time",
},
});
response.results = response.results.filter(
(item: any) => item.properties.Status.status.name === "Posted"
);
return [
200,
{
cursor: response.next_cursor,
hasMore: response.has_more,
items: response.results.map(convertBlog),
},
];
} catch (err: any) {
return [400, { msg: String(err) }];
}
}
src/components/Background.tsx
-22
View File
@@ -1,22 +0,0 @@
"use client";
import React from "react";
export default function Background({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<div className="relative w-full min-h-screen overflow-hidden bg-black">
<div
className="absolute inset-0 bg-black"
style={{
backgroundImage:
"radial-gradient(circle, rgba(100, 116, 139, 0.5) 1px, transparent 1px)",
backgroundSize: "20px 20px",
}}
/>
<div className="relative z-50 overflow-y-scroll overflow-x-hidden">{children}</div>
</div>
);
}
src/components/MarkdownRenderer.tsx
-73
View File
@@ -1,73 +0,0 @@
import React from "react";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkBreaks from "remark-breaks";
import remarkMath from "remark-math";
import rehypeRaw from "rehype-raw";
import rehypeKatex from "rehype-katex";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { gruvboxDark } from "react-syntax-highlighter/dist/esm/styles/prism";
import "katex/dist/katex.min.css";
type MarkdownRendererProps = {
children: string;
};
export default function MarkdownRenderer({
children: markdown,
}: MarkdownRendererProps) {
return (
<Markdown
remarkPlugins={[remarkGfm, remarkMath, remarkBreaks]}
rehypePlugins={[rehypeRaw, rehypeKatex]}
components={{
code({ node, inline, className, children, ...props }: any) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
<SyntaxHighlighter
style={gruvboxDark}
PreTag="div"
language={match[1]}
{...props}
>
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
ul({ children, ...props }) {
return (
<ul
style={{ listStyleType: "disc", listStylePosition: "inside" }}
{...props}
>
{children}
</ul>
);
},
ol({ children, ...props }) {
return (
<ol
style={{ listStyleType: "decimal", listStylePosition: "inside" }}
{...props}
>
{children}
</ol>
);
},
li({ children, ...props }) {
return (
<li style={{ marginBottom: "4px" }} {...props}>
{children}
</li>
);
},
}}
>
{markdown}
</Markdown>
);
}
src/components/Navbar.tsx
-35
View File
@@ -1,35 +0,0 @@
"use client";
import { usePathname } from "next/navigation";
import Link from "next/link";
export default function Navbar() {
const pathname = usePathname();
return (
<nav className="py-4 flex">
<div className="mx-auto flex">
<div className="space-x-4 text-white block font-bold">
<Link
href="/"
className={
"hover:slate-200 transition-colors duration-300" +
(pathname === "/" ? " slate-200" : "")
}
>
Home
</Link>
<Link
href="/pricing"
className={
"hover:slate-200 transition-colors duration-300" +
(pathname === "/pricing" ? " slate-200" : "")
}
>
Pricing
</Link>
</div>
</div>
</nav>
);
}
src/components/PinnedRepos.tsx
-178
View File
@@ -1,178 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { fadeInUp, fadeInUp2, staggerContainer } from "./effects";
type PinnedRepo = {
author: string;
name: string;
description: string;
language: string;
stars: number;
forks: number;
href?: string;
};
export function Repo({
name,
description: desc,
language: lang,
stars,
forks,
href,
}: PinnedRepo) {
return (
<motion.div
variants={fadeInUp2}
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.2 }}
className="group relative flex size-full overflow-hidden rounded-xl h-full border border-slate-400 hover:shadow-md transition-shadow duration-300 backdrop-blur-[2px]"
>
<div className="w-full">
<div className="rounded-xl border text-card-foreground shadow h-full bg-transparent border-none flex flex-col">
<div className="flex flex-col space-y-1.5 p-6 flex-grow">
<h3 className="tracking-tight text-base sm:text-lg font-semibold text-slate-300">
<a
href={href}
target="_blank"
rel="noreferrer"
className="hover:underline"
style={{ cursor: "pointer" }}
>
{name}
</a>
</h3>
<p className="text-xs sm:text-sm text-gray-300 line-clamp-2 mt-1">
{desc}
</p>
</div>
<div className="p-6 pt-0 mt-auto">
<div className="flex flex-wrap justify-between items-center gap-2">
<div className="flex items-center gap-2 sm:gap-4">
<div
className="flex items-center gap-1 text-xs sm:text-sm"
data-state="closed"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-star text-gray-300 h-3 w-3 sm:h-4 sm:w-4"
>
<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-300">{stars}</span>
</div>
<div
className="flex items-center gap-1 text-xs sm:text-sm"
data-state="closed"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-git-fork text-gray-500 h-3 w-3 sm:h-4 sm:w-4"
>
<circle cx="12" cy="18" r="3" />
<circle cx="6" cy="6" r="3" />
<circle cx="18" cy="6" r="3" />
<path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" />
<path d="M12 12v3" />
</svg>
<span className="text-gray-300">{forks}</span>
</div>
</div>
{lang && (
<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-slate-400/10 border-slate-400"
data-sentry-component="Badge"
data-sentry-source-file="badge.tsx"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-code-xml h-3 w-3 mr-1"
>
<path d="m18 16 4-4-4-4" />
<path d="m6 8-4 4 4 4" />
<path d="m14.5 4-5 16" />
</svg>
{lang}
</div>
)}
</div>
</div>
</div>
</div>
</motion.div>
);
}
export default function PinnedRepos() {
try {
const [pinned, setPinned] = useState<PinnedRepo[]>([]);
useEffect(() => {
fetch("https://pinned.berrysauce.dev/get/selimaj-dev")
.then((r) => {
r.json()
.then((p) => {
setPinned(p);
})
.catch((e) => {
console.error(e);
});
})
.catch((e) => {
console.error(e);
});
}, []);
return (
<motion.div
variants={staggerContainer}
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.2 }}
className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent"
>
{pinned &&
pinned.map((repo, i) => (
<Repo
key={i}
author={repo.author}
name={repo.name}
description={repo.description}
language={repo.language}
stars={repo.stars}
forks={repo.forks}
href={`https://github.com/${repo.author}/${repo.name}`}
/>
))}
</motion.div>
);
} catch (e: any) {
return <p>{e.toString()}</p>;
}
}
src/components/Skill.tsx
-29
View File
@@ -1,29 +0,0 @@
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
export default function Skill({
skill,
icon,
classInsert,
}: {
skill: string;
icon: IconProp;
classInsert?: string;
}) {
return (
<div className="relative flex items-center justify-center group">
<span
className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2
bg-black text-white text-sm px-2 py-1 rounded
opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"
>
Skilled in {skill}
</span>
<FontAwesomeIcon
icon={icon}
className={`text-slate-400 ${classInsert} size-[2.3rem]`}
/>
</div>
);
}
src/components/effects.ts
-32
View File
@@ -1,32 +0,0 @@
import { easeOut, spring } from "framer-motion";
export const fadeInUp = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0, transition: { duration: 0.5 } },
};
export const fadeInUp2 = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.4, ease: easeOut },
},
};
export const staggerContainer = {
show: {
transition: {
staggerChildren: 0.12,
},
},
};
export const popIn = {
hidden: { opacity: 0, scale: 0.8 },
show: {
opacity: 1,
scale: 1,
transition: { type: spring, stiffness: 120 },
},
};
src/components/home/CTASection.tsx
+39
View File
@@ -0,0 +1,39 @@
import { ArrowRight } from "lucide-react";
import Link from "next/link";
export function CTASection() {
return (
<section className="py-24 bg-card/50 relative overflow-hidden">
{/* Background Effects */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-accent/5 rounded-full blur-3xl" />
<div className="container mx-auto px-6 relative z-10">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl md:text-5xl font-bold text-foreground mb-6">
Ready to build something{" "}
<span className="text-gradient-gold">extraordinary</span>?
</h2>
<p className="text-lg text-muted-foreground mb-10 max-w-xl mx-auto">
Whether you need a complex system, a modern web application, or specialized tooling,
I'm here to bring your vision to life.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link
href="/pricing"
className="group flex items-center gap-2 bg-accent text-accent-foreground px-8 py-4 rounded-xl font-medium hover:bg-accent/90 transition-all hover:gap-3 glow-gold"
>
View Pricing Plans
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
</Link>
<Link
href="/about"
className="flex items-center gap-2 text-foreground hover:text-accent font-medium transition-colors"
>
Learn more about me
</Link>
</div>
</div>
</div>
</section>
);
}
src/components/home/HeroSection.tsx
+97
View File
@@ -0,0 +1,97 @@
import { ArrowRight, Github, Linkedin, Youtube } from "lucide-react";
import Link from "next/link";
export function HeroSection() {
return (
<section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
{/* Background Effects */}
<div className="absolute inset-0 bg-gradient-to-b from-background via-background to-card" />
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-full blur-3xl" />
<div className="container mx-auto px-6 relative z-10">
<div className="max-w-4xl mx-auto text-center">
{/* Status Badge */}
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-8 animate-fade-in">
<span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
<span className="text-sm text-muted-foreground">
Available for new projects
</span>
</div>
{/* Main Heading */}
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 animate-fade-in-up">
<span className="text-foreground">Building</span>{" "}
<span className="text-gradient-gold">exceptional</span>
<br />
<span className="text-foreground">digital experiences</span>
</h1>
{/* Subheading */}
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 animate-fade-in-delay-1">
I'm{" "}
<span className="text-foreground font-medium">Klesti Selimaj</span>,
a 16-year-old software engineer with 6+ years of experience.
Passionate about low-level systems, modern web apps, and crafting
tools that make a difference.
</p>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12 animate-fade-in-delay-2">
<Link
href="/pricing"
className="group flex items-center gap-2 bg-accent text-accent-foreground px-8 py-4 rounded-xl font-medium hover:bg-accent/90 transition-all hover:gap-3"
>
Work with me
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
</Link>
<a
href="https://github.com/selimaj-dev"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 bg-secondary text-secondary-foreground px-8 py-4 rounded-xl font-medium hover:bg-secondary/80 transition-colors"
>
<Github className="w-4 h-4" />
View GitHub
</a>
</div>
{/* Social Links */}
<div className="flex items-center justify-center gap-6 animate-fade-in-delay-3">
<a
href="https://github.com/selimaj-dev"
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-accent transition-colors"
>
<Github className="w-5 h-5" />
</a>
<a
href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-accent transition-colors"
>
<Linkedin className="w-5 h-5" />
</a>
<a
href="https://www.youtube.com/@0xkleo"
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-accent transition-colors"
>
<Youtube className="w-5 h-5" />
</a>
</div>
</div>
</div>
{/* Scroll Indicator */}
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
<div className="w-6 h-10 border-2 border-muted-foreground/30 rounded-full flex items-start justify-center p-2">
<div className="w-1 h-2 bg-accent rounded-full animate-pulse" />
</div>
</div>
</section>
);
}
src/components/home/ProjectsSection.tsx
+159
View File
@@ -0,0 +1,159 @@
import { ExternalLink, Github, Star } from "lucide-react";
const projects = [
{
name: "DockShip",
description: "A powerful self-hosted Deployment Platform for modern teams.",
tech: ["TypeScript", "Docker", "React"],
stars: 1,
github: "https://github.com/orus-dev/dockship",
featured: true,
},
{
name: "OSUI",
description:
"A TUI library written in Rust for building beautiful terminal interfaces.",
tech: ["Rust", "TUI", "Systems"],
stars: 8,
github: "https://github.com/osui-rs/osui",
featured: true,
},
{
name: "Linear Linux",
description:
"Linux support for linear.app - bringing seamless project management to Linux users.",
tech: ["JavaScript", "Electron", "Linux"],
stars: 23,
github: "https://github.com/selimaj-dev/linear-linux",
featured: true,
},
{
name: "Saturn Client",
description:
"A Minecraft client full of customizability and free cosmetics.",
tech: ["Java", "Minecraft", "Gaming"],
stars: 3,
github: "https://github.com/saturnclientmc/saturnclient",
featured: false,
},
{
name: "Axiom Chat",
description: "A modern, feature-rich chat application built for teams.",
tech: ["TypeScript", "Real-time", "WebSockets"],
stars: 1,
github: "https://github.com/AxiomChat/axiom",
featured: false,
},
{
name: "Drift",
description: "An organized productivity app to get rid of distractions.",
tech: ["TypeScript", "Productivity", "Focus"],
stars: 1,
github: "https://github.com/orus-dev/drift",
featured: false,
},
];
export function ProjectsSection() {
return (
<section className="py-24 bg-card/50">
<div className="container mx-auto px-6">
{/* Section Header */}
<div className="max-w-2xl mb-16">
<span className="text-accent text-sm font-medium uppercase tracking-wider">
Portfolio
</span>
<h2 className="text-3xl md:text-4xl font-bold text-foreground mt-2 mb-4">
Featured Projects
</h2>
<p className="text-muted-foreground">
A selection of my open-source work and personal projects that
showcase my skills in systems programming, web development, and
tooling.
</p>
</div>
{/* Projects Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{projects.map((project, index) => (
<article
key={project.name}
className={"group glass-card rounded-2xl p-6 hover-lift"}
style={{ animationDelay: `${index * 100}ms` }}
>
{/* Header */}
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-2">
{project.featured && (
<span className="px-2 py-1 text-xs font-medium bg-accent/10 text-accent rounded-full">
Featured
</span>
)}
</div>
<div className="flex items-center gap-1 text-muted-foreground">
<Star className="w-4 h-4" />
<span className="text-sm">{project.stars}</span>
</div>
</div>
{/* Content */}
<h3 className="text-xl font-semibold text-foreground mb-2 group-hover:text-accent transition-colors">
{project.name}
</h3>
<p className="text-muted-foreground text-sm mb-4 line-clamp-2">
{project.description}
</p>
{/* Tech Stack */}
<div className="flex flex-wrap gap-2 mb-6">
{project.tech.map((tech) => (
<span
key={tech}
className="px-2 py-1 text-xs font-mono bg-secondary text-secondary-foreground rounded"
>
{tech}
</span>
))}
</div>
{/* Actions */}
<div className="flex items-center gap-4">
<a
href={project.github}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-accent transition-colors"
>
<Github className="w-4 h-4" />
Source
</a>
<a
href={project.github}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-accent transition-colors"
>
<ExternalLink className="w-4 h-4" />
View
</a>
</div>
</article>
))}
</div>
{/* View All CTA */}
<div className="text-center mt-12">
<a
href="https://github.com/selimaj-dev?tab=repositories"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 text-accent hover:text-accent/80 font-medium transition-colors"
>
View all projects on GitHub
<ExternalLink className="w-4 h-4" />
</a>
</div>
</div>
</section>
);
}
src/components/home/SkillsSection.tsx
+112
View File
@@ -0,0 +1,112 @@
const skills = [
{
category: "Languages",
items: [
{ name: "Rust", level: 90 },
{ name: "TypeScript", level: 95 },
{ name: "JavaScript", level: 95 },
{ name: "Python", level: 80 },
{ name: "Go", level: 75 },
{ name: "Java", level: 85 },
],
},
{
category: "Frontend",
items: [
{ name: "React", level: 95 },
{ name: "Next.js", level: 85 },
{ name: "Tailwind CSS", level: 95 },
{ name: "Framer Motion", level: 80 },
],
},
{
category: "Systems & Tools",
items: [
{ name: "Linux", level: 90 },
{ name: "Docker", level: 85 },
{ name: "Git", level: 95 },
{ name: "TUI Development", level: 90 },
],
},
];
const stats = [
{ label: "Years Experience", value: "6+" },
{ label: "GitHub Followers", value: "32" },
{ label: "Open Source Projects", value: "10+" },
{ label: "Technologies Mastered", value: "15+" },
];
export function SkillsSection() {
return (
<section className="py-24 bg-background">
<div className="container mx-auto px-6">
{/* Stats */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-20">
{stats.map((stat, index) => (
<div
key={stat.label}
className="text-center p-6 glass-card rounded-2xl hover-lift"
style={{ animationDelay: `${index * 100}ms` }}
>
<div className="text-3xl md:text-4xl font-bold text-gradient-gold mb-2">
{stat.value}
</div>
<div className="text-sm text-muted-foreground">{stat.label}</div>
</div>
))}
</div>
{/* Section Header */}
<div className="max-w-2xl mb-16">
<span className="text-accent text-sm font-medium uppercase tracking-wider">
Expertise
</span>
<h2 className="text-3xl md:text-4xl font-bold text-foreground mt-2 mb-4">
Technical Skills
</h2>
<p className="text-muted-foreground">
From low-level systems programming to modern web development, I
bring a diverse skill set to every project.
</p>
</div>
{/* Skills Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{skills.map((category, categoryIndex) => (
<div
key={category.category}
className="glass-card rounded-2xl p-6"
style={{ animationDelay: `${categoryIndex * 150}ms` }}
>
<h3 className="text-lg font-semibold text-foreground mb-6 flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-accent" />
{category.category}
</h3>
<div className="space-y-4">
{category.items.map((skill) => (
<div key={skill.name}>
<div className="flex justify-between text-sm mb-2">
<span className="text-foreground font-medium">
{skill.name}
</span>
<span className="text-muted-foreground">
{skill.level}%
</span>
</div>
<div className="h-1.5 bg-secondary rounded-full overflow-hidden">
<div
className="h-full bg-accent rounded-full transition-all duration-1000 ease-out"
style={{ width: `${skill.level}%` }}
/>
</div>
</div>
))}
</div>
</div>
))}
</div>
</div>
</section>
);
}
src/components/layout/Footer.tsx
+118
View File
@@ -0,0 +1,118 @@
import Link from "next/link";
export function Footer() {
const currentYear = new Date().getFullYear();
return (
<footer className="border-t border-border bg-card/50">
<div className="container mx-auto px-6 py-12">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
{/* Brand */}
<div className="md:col-span-2">
<Link href="/" className="flex items-center gap-2 mb-4">
<img
className="w-8 h-8 rounded-lg bg-accent flex items-center justify-center"
src="/logo.png"
alt="Logo"
/>
<span className="font-semibold text-foreground">selimaj.dev</span>
</Link>
<p className="text-muted-foreground text-sm max-w-sm">
Building digital experiences with precision and passion.
Specializing in low-level systems, modern web applications, and
everything in between.
</p>
</div>
{/* Quick Links */}
<div>
<h4 className="font-medium text-foreground mb-4">Quick Links</h4>
<ul className="space-y-2">
<li>
<Link
href="/"
className="text-sm text-muted-foreground hover:text-accent transition-colors"
>
Home
</Link>
</li>
<li>
<Link
href="/about"
className="text-sm text-muted-foreground hover:text-accent transition-colors"
>
About
</Link>
</li>
<li>
<Link
href="/pricing"
className="text-sm text-muted-foreground hover:text-accent transition-colors"
>
Hire Me
</Link>
</li>
</ul>
</div>
{/* Connect */}
<div>
<h4 className="font-medium text-foreground mb-4">Connect</h4>
<ul className="space-y-2">
<li>
<a
href="https://github.com/selimaj-dev"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-muted-foreground hover:text-accent transition-colors"
>
GitHub
</a>
</li>
<li>
<a
href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-muted-foreground hover:text-accent transition-colors"
>
LinkedIn
</a>
</li>
<li>
<a
href="https://www.youtube.com/@0xkleo"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-muted-foreground hover:text-accent transition-colors"
>
YouTube
</a>
</li>
<li>
<a
href="https://www.instagram.com/selimaj.dev/"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-muted-foreground hover:text-accent transition-colors"
>
Instagram
</a>
</li>
</ul>
</div>
</div>
<div className="border-t border-border mt-8 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-sm text-muted-foreground">
© {currentYear} Klesti Selimaj. All rights reserved.
</p>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
Available for work
</div>
</div>
</div>
</footer>
);
}
src/components/layout/Layout.tsx
+19
View File
@@ -0,0 +1,19 @@
"use client";
import { ReactNode } from "react";
import { Footer } from "./Footer";
import { Navbar } from "./Navbar";
interface LayoutProps {
children: ReactNode;
}
export function Layout({ children }: LayoutProps) {
return (
<div className="min-h-screen flex flex-col bg-background dark">
<Navbar />
<main className="flex-1 pt-16">{children}</main>
<Footer />
</div>
);
}
src/components/layout/Navbar.tsx
+152
View File
@@ -0,0 +1,152 @@
"use client";
import { cn } from "@/lib/utils";
import { CoffeeIcon, Github, Menu, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { motion } from "framer-motion";
const navLinks = [
{ href: "/", label: "Home" },
{ href: "/about", label: "About" },
{ href: "/pricing", label: "Hire Me" },
];
export function Navbar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const pathname = usePathname();
return (
<header className="fixed top-0 left-0 right-0 z-50 glass-card border-b">
<nav className="container mx-auto px-6 h-16 flex items-center justify-between">
<Link href="/" className="flex items-center gap-2 group">
<img
className="w-8 h-8 rounded-lg bg-accent flex items-center justify-center"
src="/logo.png"
alt="Logo"
/>
<span className="font-semibold text-foreground group-hover:text-accent transition-colors">
selimaj.dev
</span>
</Link>
{/* Desktop Nav */}
<ul className="hidden md:flex items-center gap-8">
{navLinks.map((link) => {
const isActive = pathname === link.href;
return (
<li key={link.href}>
<Link
href={link.href}
className={cn(
"text-sm font-medium transition-colors hover:text-accent relative py-2",
isActive ? "text-accent" : "text-muted-foreground",
)}
>
{link.label}
{isActive && (
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent rounded-full" />
)}
</Link>
</li>
);
})}
</ul>
<div className="hidden md:flex items-center gap-4">
<motion.li
animate={{ y: [0, -3, 0] }}
transition={{ repeat: Infinity, duration: 3 }}
>
<a href="https://ko-fi.com/X8X01OX1WR" target="_blank">
<motion.span
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="text-muted-foreground hover:text-foreground transition-colors"
>
<CoffeeIcon />
</motion.span>
</a>
</motion.li>
<a
href="https://github.com/selimaj-dev"
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-foreground transition-colors"
>
<Github />
</a>
<Link
href="/pricing"
className="bg-accent text-accent-foreground px-4 py-2 rounded-lg text-sm font-medium hover:bg-accent/90 transition-colors"
>
Get in Touch
</Link>
</div>
{/* Mobile Menu Button */}
<button
className="md:hidden text-foreground p-2"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
{mobileMenuOpen ? (
<X className="w-5 h-5" />
) : (
<Menu className="w-5 h-5" />
)}
</button>
</nav>
{/* Mobile Menu */}
{mobileMenuOpen && (
<div className="md:hidden glass-card border-t animate-fade-in">
<ul className="container mx-auto px-6 py-4 space-y-4">
{navLinks.map((link) => (
<li key={link.href}>
<Link
href={link.href}
onClick={() => setMobileMenuOpen(false)}
className={cn(
"block text-sm font-medium transition-colors",
location.pathname === link.href
? "text-accent"
: "text-muted-foreground",
)}
>
{link.label}
</Link>
</li>
))}
<li>
<Link
href="https://github.com/selimaj-dev"
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-foreground transition-colors"
>
<Github />
</Link>
</li>
<motion.li
animate={{ y: [0, -3, 0] }}
transition={{ repeat: Infinity, duration: 3 }}
>
<a href="https://ko-fi.com/X8X01OX1WR" target="_blank">
<motion.span
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="text-muted-foreground hover:text-foreground transition-colors"
>
<CoffeeIcon />
</motion.span>
</a>
</motion.li>
</ul>
</div>
)}
</header>
);
}
src/lib/utils.ts
+6
View File
@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
src/notion.ts
-15
View File
@@ -1,15 +0,0 @@
import dotenv from 'dotenv';
import { Client } from '@notionhq/client';
import { NotionToMarkdown } from 'notion-to-md';
dotenv.config();
export const notion = new Client( { auth: process.env.NOTION_API_KEY } )
export const n2m = new NotionToMarkdown({
notionClient: notion,
});
if (process.env.NOTION_DATABASE_ID === undefined) {
console.error('[server] Error: environment variable \'NOTION_DATABASE_ID\' not found')
process.exit();
}
export const databaseId: string = process.env.NOTION_DATABASE_ID;
tailwind.config.ts
+98 -17
View File
@@ -1,31 +1,112 @@
import type { Config } from "tailwindcss";
export default {
darkMode: ["class"],
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
prefix: "",
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
red: '#f5304c',
'red-400': '#fa5770',
'red-600': '#eb2642',
'transparent-ish': '#0000000A',
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
animation: {
fadeIn: "fadeIn 1s ease-in-out",
},
extend: {
fontFamily: {
sans: ["Inter", "system-ui", "sans-serif"],
mono: ["JetBrains Mono", "monospace"],
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
gold: {
DEFAULT: "hsl(var(--gold))",
light: "hsl(var(--gold-light))",
dark: "hsl(var(--gold-dark))",
},
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
sidebar: {
DEFAULT: "hsl(var(--sidebar-background))",
foreground: "hsl(var(--sidebar-foreground))",
primary: "hsl(var(--sidebar-primary))",
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
accent: "hsl(var(--sidebar-accent))",
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
border: "hsl(var(--sidebar-border))",
ring: "hsl(var(--sidebar-ring))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
fadeIn: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
"fade-in": {
"0%": { opacity: "0", transform: "translateY(10px)" },
"100%": { opacity: "1", transform: "translateY(0px)" },
"100%": { opacity: "1", transform: "translateY(0)" },
},
"fade-in-up": {
"0%": { opacity: "0", transform: "translateY(20px)" },
"100%": { opacity: "1", transform: "translateY(0)" },
},
pulse: {
"0%, 100%": { opacity: "1" },
"50%": { opacity: "0.5" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"fade-in": "fade-in 0.6s ease-out forwards",
"fade-in-up": "fade-in-up 0.6s ease-out forwards",
pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
},
},
},
},
plugins: [],
plugins: [require("tailwindcss-animate")],
} satisfies Config;