Klesti Selimaj
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,34 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const username = "kleo-dev";
|
||||
const token = process.env.GITHUB_TOKEN;
|
||||
|
||||
const query = `
|
||||
query {
|
||||
user(login: "${username}") {
|
||||
contributionsCollection {
|
||||
contributionCalendar {
|
||||
totalContributions
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const response = await fetch("https://api.github.com/graphql", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ query }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
const total =
|
||||
data.data.user.contributionsCollection.contributionCalendar
|
||||
.totalContributions;
|
||||
|
||||
return NextResponse.json({ total }, { status: 200 });
|
||||
}
|
||||
+1
-3
@@ -17,9 +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 overflow-y-scroll">{children}</div>
|
||||
</Background>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+56
-16
@@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import PinnedRepos from "@/components/PinnedRepos";
|
||||
import Skill from "@/components/Skill";
|
||||
import {
|
||||
@@ -12,20 +14,33 @@ import {
|
||||
} from "@fortawesome/free-brands-svg-icons";
|
||||
import { faJava } from "@fortawesome/free-brands-svg-icons/faJava";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useEffect, useState } from "react";
|
||||
import GitHubCalendar from "react-github-calendar";
|
||||
|
||||
export default function App() {
|
||||
const [contribs, setContribs] = useState<number>();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchContributions = async () => {
|
||||
const res = await fetch("/api/contribs");
|
||||
const data = await res.json();
|
||||
console.log("Total contributions:", data.total);
|
||||
setContribs(data.total || undefined);
|
||||
};
|
||||
fetchContributions();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="content-center w-full lg:mx-auto pt-5 relative z-20 pb-10 animate-fadeIn">
|
||||
<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.
|
||||
applications, TUI apps, and hacking. I also have a deep interest
|
||||
in low-level programming.
|
||||
</p>
|
||||
|
||||
{/* Socials and skill */}
|
||||
@@ -35,8 +50,7 @@ export default function App() {
|
||||
<a href="https://github.com/kleo-dev/" target="blank_">
|
||||
<FontAwesomeIcon
|
||||
icon={faGithub}
|
||||
width={36}
|
||||
className="text-red"
|
||||
className="text-slate-300 size-[2.3rem]"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
@@ -45,15 +59,16 @@ export default function App() {
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faLinkedin}
|
||||
width={36}
|
||||
className="text-red"
|
||||
className="text-slate-300 size-[2.3rem]"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/kleo.dev/" target="blank_">
|
||||
<a
|
||||
href="https://www.instagram.com/selimaj.dev/"
|
||||
target="blank_"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faInstagram}
|
||||
width={36}
|
||||
className="text-red"
|
||||
className="text-slate-300 size-[2.3rem]"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
@@ -71,16 +86,41 @@ export default function App() {
|
||||
</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"],
|
||||
}} />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
+54
-163
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
|
||||
@@ -7,183 +7,74 @@ export default function Background({
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const animationRef = useRef<number>(0);
|
||||
const particlesRef = useRef<Particle[]>([]);
|
||||
const [dimensions, setDimensions] = useState<{ width: number; height: number }>({
|
||||
width: 0,
|
||||
height: 0,
|
||||
});
|
||||
const [pos, setPos] = useState({ x: 30, y: 100 });
|
||||
const [vel, setVel] = useState({ x: 1, y: 1 });
|
||||
|
||||
// Particle configuration
|
||||
const config = {
|
||||
particleCount: 400,
|
||||
maxDistance: 120,
|
||||
particleSpeed: 0.5,
|
||||
particleSize: 2,
|
||||
lineOpacity: 0.6,
|
||||
particleOpacity: 0.8,
|
||||
colors: {
|
||||
particles: "#f5304c", // blue-400
|
||||
connections: "#f5304c", // blue-500
|
||||
},
|
||||
useEffect(() => {
|
||||
let frame: number;
|
||||
let x = pos.x;
|
||||
let y = pos.y;
|
||||
let vx = vel.x;
|
||||
let vy = vel.y;
|
||||
|
||||
const speed = 0.5;
|
||||
const size = 100;
|
||||
|
||||
// helper for collision detection
|
||||
const detectCollision = (
|
||||
nextX: number,
|
||||
nextY: number,
|
||||
w: number,
|
||||
h: number
|
||||
) => {
|
||||
let collidedX = false;
|
||||
let collidedY = false;
|
||||
|
||||
// Left or Right wall
|
||||
if (nextX <= 0 || nextX + size >= w) collidedX = true;
|
||||
|
||||
// Top or Bottom wall
|
||||
if (nextY <= 0 || nextY + size >= h) collidedY = true;
|
||||
|
||||
return { collidedX, collidedY };
|
||||
};
|
||||
|
||||
// Particle class
|
||||
class Particle {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
size: number;
|
||||
|
||||
constructor(width: number, height: number) {
|
||||
this.x = Math.random() * width;
|
||||
this.y = Math.random() * height;
|
||||
this.vx = (Math.random() - 0.5) * config.particleSpeed;
|
||||
this.vy = (Math.random() - 0.5) * config.particleSpeed;
|
||||
this.size = config.particleSize + Math.random() * 2;
|
||||
}
|
||||
|
||||
update(width: number, height: number) {
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
|
||||
// Bounce off edges
|
||||
if (this.x < 0 || this.x > width) {
|
||||
this.vx = -this.vx;
|
||||
this.x = Math.max(0, Math.min(width, this.x));
|
||||
}
|
||||
if (this.y < 0 || this.y > height) {
|
||||
this.vy = -this.vy;
|
||||
this.y = Math.max(0, Math.min(height, this.y));
|
||||
}
|
||||
}
|
||||
|
||||
draw(ctx: CanvasRenderingContext2D) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `${config.colors.particles}${Math.round(
|
||||
config.particleOpacity * 255
|
||||
)
|
||||
.toString(16)
|
||||
.padStart(2, "0")}`;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize particles
|
||||
const initParticles = (width: number, height: number) => {
|
||||
particlesRef.current = [];
|
||||
for (let i = 0; i < config.particleCount; i++) {
|
||||
particlesRef.current.push(new Particle(width, height));
|
||||
}
|
||||
};
|
||||
|
||||
// Draw connections between nearby particles
|
||||
const drawConnections = (ctx: CanvasRenderingContext2D, particles: Particle[]) => {
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
for (let j = i + 1; j < particles.length; j++) {
|
||||
const dx = particles[i].x - particles[j].x;
|
||||
const dy = particles[i].y - particles[j].y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < config.maxDistance) {
|
||||
const opacity = 1 - distance / config.maxDistance;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(particles[i].x, particles[i].y);
|
||||
ctx.lineTo(particles[j].x, particles[j].y);
|
||||
ctx.strokeStyle = `${config.colors.connections}${Math.round(
|
||||
opacity * config.lineOpacity * 255
|
||||
)
|
||||
.toString(16)
|
||||
.padStart(2, "0")}`;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Animation loop
|
||||
const animate = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const w = window.innerWidth;
|
||||
const h = window.innerHeight;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
const nextX = x + vx * speed;
|
||||
const nextY = y + vy * speed;
|
||||
|
||||
const { width, height } = dimensions;
|
||||
const { collidedX, collidedY } = detectCollision(nextX, nextY, w, h);
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
if (collidedX) vx *= -1;
|
||||
if (collidedY) vy *= -1;
|
||||
|
||||
// Update and draw particles
|
||||
particlesRef.current.forEach((particle) => {
|
||||
particle.update(width, height);
|
||||
particle.draw(ctx);
|
||||
});
|
||||
x += vx * speed;
|
||||
y += vy * speed;
|
||||
|
||||
// Draw connections
|
||||
drawConnections(ctx, particlesRef.current);
|
||||
setPos({ x, y });
|
||||
setVel({ x: vx, y: vy });
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
frame = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
// Handle window resize
|
||||
const handleResize = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas || !canvas.parentElement) return;
|
||||
|
||||
const rect = canvas.parentElement.getBoundingClientRect();
|
||||
const width = rect.width;
|
||||
const height = rect.height;
|
||||
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = width * dpr;
|
||||
canvas.height = height * dpr;
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (ctx) {
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset scaling before re-scaling
|
||||
ctx.scale(dpr, dpr);
|
||||
}
|
||||
|
||||
setDimensions({ width, height });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
};
|
||||
frame = requestAnimationFrame(animate);
|
||||
return () => cancelAnimationFrame(frame);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (dimensions.width && dimensions.height) {
|
||||
initParticles(dimensions.width, dimensions.height);
|
||||
animate();
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
};
|
||||
}, [dimensions]);
|
||||
|
||||
return (
|
||||
<div className="relative w-full min-h-screen overflow-hidden bg-black">
|
||||
<canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />
|
||||
|
||||
{children}
|
||||
<img
|
||||
style={{
|
||||
transform: `translate(${pos.x}px, ${pos.y}px)`,
|
||||
}}
|
||||
src="/logo.png"
|
||||
alt="Logo"
|
||||
className="size-24 rounded-full border-slate-500 border"
|
||||
/>
|
||||
<div className="relative z-10">{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
@@ -73,7 +73,7 @@ export function Repo({
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="lucide lucide-star text-yellow-500 h-3 w-3 sm:h-4 sm:w-4"
|
||||
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>
|
||||
@@ -106,7 +106,7 @@ 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"
|
||||
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"
|
||||
>
|
||||
@@ -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 => {
|
||||
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);
|
||||
});
|
||||
})
|
||||
.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>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,13 +17,12 @@ 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-gray-300 ${classInsert} size-[2.3rem]`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user