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

Monochrome bby

Browse Source
This commit is contained in:
selimaj-dev
2025-10-21 21:49:24 +02:00
parent 2d0eec48e2
commit ae19a1767a
5 changed files with 73 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+4 -4
View File
@@ -16,11 +16,11 @@ export default function RootLayout({
return (
<html lang="en">
<body className="antialiased bg-black">
<Background>
<div className="relative h-screen overflow-y-scroll">
{/* <Background> */}
{/* <div className="relative h-screen overflow-y-scroll"> */}
{children}
</div>
</Background>
{/* </div> */}
{/* </Background> */}
</body>
</html>
);
src/app/page.tsx
+26 -11
View File
@@ -24,8 +24,8 @@ export default function App() {
<p className="font-semibold text-gray-300">
A 15 year old Software Engineer from Tirane, Albania, with 6 years
of experience, specializing in full-stack web development, desktop
applications, TUI apps, and hacking. I also have a deep interest in
low-level programming.
applications, TUI apps, and hacking. I also have a deep interest
in low-level programming.
</p>
{/* Socials and skill */}
@@ -36,7 +36,7 @@ export default function App() {
<FontAwesomeIcon
icon={faGithub}
width={36}
className="text-red"
className="text-slate-300"
/>
</a>
<a
@@ -46,14 +46,14 @@ export default function App() {
<FontAwesomeIcon
icon={faLinkedin}
width={36}
className="text-red"
className="text-slate-300"
/>
</a>
<a href="https://www.instagram.com/kleo.dev/" target="blank_">
<FontAwesomeIcon
icon={faInstagram}
width={36}
className="text-red"
className="text-slate-300"
/>
</a>
</div>
@@ -70,16 +70,31 @@ export default function App() {
</div>
</div>
</div>
<h1 className="text-red-400">Pinned Projects</h1>
<h1 className="text-slate-300">Pinned Projects</h1>
<section className="">
<PinnedRepos />
</section>
<section className="mt-8">
<GitHubCalendar username="kleo-dev" theme={{
light: ["#1a000f", "#5c001d", "#9f0030", "#d10045", "#f5304c"],
dark: ["#1a000f", "#5c001d", "#9f0030", "#d10045", "#f5304c"],
}} />
<GitHubCalendar
username="kleo-dev"
theme={{
light: [
"rgba(255, 255, 255, 0.1)",
"rgba(255, 255, 255, 0.3)",
"rgba(255, 255, 255, 0.5)",
"rgba(255, 255, 255, 0.7)",
"rgba(255, 255, 255, 1)",
],
dark: [
"rgba(255, 255, 255, 0.1)",
"rgba(255, 255, 255, 0.3)",
"rgba(255, 255, 255, 0.5)",
"rgba(255, 255, 255, 0.7)",
"rgba(255, 255, 255, 1)",
],
}}
/>
</section>
</div>
</div>
src/components/Navbar.tsx
+4 -4
View File
@@ -13,8 +13,8 @@ export default function Navbar() {
<Link
href="/"
className={
"hover:text-red transition-colors duration-300" +
(pathname === "/" ? " text-red" : "")
"hover:slate-200 transition-colors duration-300" +
(pathname === "/" ? " slate-200" : "")
}
>
Home
@@ -22,8 +22,8 @@ export default function Navbar() {
<Link
href="/pricing"
className={
"hover:text-red transition-colors duration-300" +
(pathname === "/pricing" ? " text-red" : "")
"hover:slate-200 transition-colors duration-300" +
(pathname === "/pricing" ? " slate-200" : "")
}
>
Pricing
src/components/PinnedRepos.tsx
+37 -35
View File
@@ -1,4 +1,4 @@
'use client';
"use client";
import { useEffect, useState } from "react";
@@ -31,7 +31,7 @@ export function Repo({
rounded-xl
h-full
border
border-red
border-slate-300
hover:shadow-md
transition-shadow
duration-300
@@ -41,7 +41,7 @@ export function Repo({
<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-red-400">
<h3 className="tracking-tight text-base sm:text-lg font-semibold text-slate-300">
<a
href={href}
target="_blank"
@@ -106,28 +106,28 @@ export function Repo({
</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-red-600/10 border-red-600"
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"
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"
>
<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>
<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>
@@ -142,15 +142,19 @@ export default function PinnedRepos() {
const [pinned, setPinned] = useState<PinnedRepo[]>([]);
useEffect(() => {
fetch("https://pinned.berrysauce.dev/get/kleo-dev").then(r => {
r.json().then(p => {
setPinned(p);
}).catch(e => {
console.error(e)
fetch("https://pinned.berrysauce.dev/get/kleo-dev")
.then((r) => {
r.json()
.then((p) => {
setPinned(p);
})
.catch((e) => {
console.error(e);
});
})
}).catch(e => {
console.error(e)
})
.catch((e) => {
console.error(e);
});
});
return (
@@ -170,8 +174,6 @@ export default function PinnedRepos() {
</div>
);
} catch (e: any) {
return (
<p>{e.toString()}</p>
);
return <p>{e.toString()}</p>;
}
}
src/components/Skill.tsx
+2 -2
View File
@@ -17,13 +17,13 @@ export default function Skill({
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}
Skilled in {skill}
</span>
<FontAwesomeIcon
icon={icon}
width={40}
className={`text-red ${classInsert} cursor-pointer`}
className={`text-slate-300 ${classInsert} cursor-pointer`}
/>
</div>
);