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

Improved portfolio

Browse Source
This commit is contained in:
selimaj-dev
2025-11-22 11:34:41 +01:00
parent 34ea0ffb8e
commit e8451b8253
4 changed files with 85 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/api/contribs/route.ts
+2 -2
View File
@@ -27,8 +27,8 @@ export async function GET(req: NextRequest) {
const data = await response.json();
const total =
data.data.user.contributionsCollection.contributionCalendar
.totalContributions;
data?.data?.user?.contributionsCollection?.contributionCalendar
?.totalContributions;
return NextResponse.json({ total }, { status: 200 });
}
src/app/layout.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export default function RootLayout({
<html lang="en">
<body className="antialiased bg-black">
<Background>
<div className="relative h-screen overflow-y-scroll">{children}</div>
<div className="relative h-screen">{children}</div>
</Background>
</body>
</html>
src/app/page.tsx
+80 -87
View File
@@ -31,98 +31,91 @@ export default function App() {
}, []);
return (
<div>
<div className="content-center w-full lg:mx-auto pt-5 relative z-20 pb-5 animate-fadeIn">
<div className="w-full max-w-screen-lg mx-auto">
<div className="px-8 md:px-10 lg:px-15 xl:px-24">
<h1 className="py-2 text-gray-300">Hey, I'm Klesti! 👋🏻</h1>
<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.
</p>
<div className="w-full max-w-screen-lg mx-auto">
<div className="px-8 md:px-10 lg:px-15 xl:px-24">
<h1 className="py-2 text-gray-300">Hey, I'm Klesti! 👋🏻</h1>
<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.
</p>
{/* Socials and skill */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
{/* socials */}
<div className="pt-5 flex flex-row gap-5 w-max">
<a href="https://github.com/kleo-dev/" target="blank_">
<FontAwesomeIcon
icon={faGithub}
className="text-slate-300 size-[2.3rem]"
/>
</a>
<a
href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
target="blank_"
>
<FontAwesomeIcon
icon={faLinkedin}
className="text-slate-300 size-[2.3rem]"
/>
</a>
<a
href="https://www.instagram.com/selimaj.dev/"
target="blank_"
>
<FontAwesomeIcon
icon={faInstagram}
className="text-slate-300 size-[2.3rem]"
/>
</a>
</div>
<div>
<div className="p-3 bg-transparent-ish rounded-xl">
<div className="mx-auto w-max flex flex-row gap-5">
<Skill skill="Rust" icon={faRust} />
<Skill skill="Go" icon={faGolang} />
<Skill skill="JavaScript" icon={faJs} />
<Skill skill="Java" icon={faJava} classInsert="p-1" />
<Skill skill="Python" icon={faPython} />
<Skill skill="React" icon={faReact} />
</div>
</div>
{/* Socials and skill */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
{/* socials */}
<div className="pt-5 flex flex-row gap-5 w-max">
<a href="https://github.com/kleo-dev/" target="blank_">
<FontAwesomeIcon
icon={faGithub}
className="text-slate-300 size-[2.3rem]"
/>
</a>
<a
href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
target="blank_"
>
<FontAwesomeIcon
icon={faLinkedin}
className="text-slate-300 size-[2.3rem]"
/>
</a>
<a href="https://www.instagram.com/selimaj.dev/" target="blank_">
<FontAwesomeIcon
icon={faInstagram}
className="text-slate-300 size-[2.3rem]"
/>
</a>
</div>
<div>
<div className="p-3 bg-transparent-ish rounded-xl">
<div className="mx-auto w-max flex flex-row gap-5">
<Skill skill="Rust" icon={faRust} />
<Skill skill="Go" icon={faGolang} />
<Skill skill="JavaScript" icon={faJs} />
<Skill skill="Java" icon={faJava} classInsert="p-1" />
<Skill skill="Python" icon={faPython} />
<Skill skill="React" icon={faReact} />
</div>
</div>
<h1 className="text-slate-300">Pinned Projects</h1>
<section className="">
<PinnedRepos />
</section>
<h2 className="text-slate-300 mt-7">
{contribs || "Loading.."} contributions in the last year
</h2>
<section className="mt-4">
<GitHubCalendar
hideTotalCount
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>
<footer className="mt-8 border-t pt-3">
If you see this i ❤️ you
<p className="text-slate-300 mx-auto w-max mt-2">
© 2025 Klesti. All rights reserved.
</p>
</footer>
</div>
</div>
<h1 className="text-slate-300">Pinned Projects</h1>
<section className="">
<PinnedRepos />
</section>
<h2 className="text-slate-300 mt-7">
{contribs || "Loading.."} contributions in the last year
</h2>
<section className="mt-4">
<GitHubCalendar
hideTotalCount
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>
<footer className="mt-8 border-t pt-3 pb-8">
If you see this i ❤️ you
<p className="text-slate-300 mx-auto w-max mt-2">
© 2025 Klesti. All rights reserved.
</p>
</footer>
</div>
</div>
);
src/components/Background.tsx
+2 -2
View File
@@ -72,9 +72,9 @@ export default function Background({
}}
src="/logo.png"
alt="Logo"
className="size-24 rounded-full border-slate-500 border"
className="size-24 rounded-full border-slate-500 border z-10 absolute"
/>
<div className="relative z-10">{children}</div>
<div className="relative z-50 overflow-y-scroll">{children}</div>
</div>
);
}