431 lines
16 KiB
TypeScript
431 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Github,
|
|
Linkedin,
|
|
Youtube,
|
|
Instagram,
|
|
ExternalLink,
|
|
MapPin,
|
|
Crown,
|
|
Code,
|
|
Trophy,
|
|
Box,
|
|
FileText,
|
|
Twitter,
|
|
} from "lucide-react";
|
|
import {
|
|
SiRust,
|
|
SiTypescript,
|
|
SiReact,
|
|
SiGo,
|
|
SiPython,
|
|
SiDocker,
|
|
SiLinux,
|
|
SiX,
|
|
} from "@icons-pack/react-simple-icons";
|
|
import { motion } from "motion/react";
|
|
import {
|
|
staggerContainer,
|
|
fadeInUp,
|
|
fadeIn,
|
|
cardReveal,
|
|
timelineItemLeft,
|
|
timelineItemRight,
|
|
slowFloat,
|
|
} from "@/lib/animations";
|
|
import { cn } from "@/lib/utils";
|
|
import { ComponentType, SVGProps } from "react";
|
|
|
|
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.",
|
|
},
|
|
];
|
|
|
|
const socialLinks: [
|
|
string,
|
|
React.ComponentType<React.SVGProps<SVGSVGElement>>,
|
|
][] = [
|
|
["https://github.com/selimaj-dev", Github],
|
|
["https://instagram.com/selimaj.dev", Instagram],
|
|
["https://x.com/selimajdev", SiX],
|
|
["https://www.linkedin.com/in/klesti-selimaj", Linkedin],
|
|
["https://youtube.com/@0xkleo", Youtube],
|
|
["https://dev.to/selimaj", ExternalLink],
|
|
];
|
|
|
|
const techStack: {
|
|
name: string;
|
|
icon: ComponentType<SVGProps<SVGSVGElement>>;
|
|
color: string;
|
|
}[] = [
|
|
{ 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" },
|
|
];
|
|
|
|
export default function About() {
|
|
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 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 Rust.",
|
|
},
|
|
{
|
|
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 (
|
|
<>
|
|
{/* Hero */}
|
|
<motion.section
|
|
className="pt-24 pb-16 bg-background relative overflow-hidden"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
<motion.div
|
|
className="absolute top-1/4 right-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl"
|
|
variants={slowFloat}
|
|
/>
|
|
<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 */}
|
|
<motion.div variants={fadeInUp}>
|
|
<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 */}
|
|
<motion.div
|
|
className="absolute -bottom-4 -right-4 glass-card rounded-xl px-4 py-2 flex items-center gap-2"
|
|
variants={fadeInUp}
|
|
transition={{ delay: 0.6, type: "spring" }}
|
|
>
|
|
<span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
|
|
<span className="text-sm text-foreground">Available</span>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Content */}
|
|
<motion.div variants={staggerContainer}>
|
|
<span className="text-accent text-sm font-medium uppercase tracking-wider">
|
|
About Me
|
|
</span>
|
|
<motion.h1
|
|
variants={fadeInUp}
|
|
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>
|
|
</motion.h1>
|
|
<motion.p
|
|
variants={fadeInUp}
|
|
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 low-level systems and
|
|
beautiful user interfaces.
|
|
</motion.p>
|
|
<motion.p
|
|
variants={fadeInUp}
|
|
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.
|
|
</motion.p>
|
|
|
|
{/* Quick Info */}
|
|
<motion.div
|
|
variants={fadeInUp}
|
|
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>
|
|
</motion.div>
|
|
|
|
{/* Social Links */}
|
|
<motion.div
|
|
variants={fadeInUp}
|
|
className="flex items-center gap-4"
|
|
>
|
|
{socialLinks.map(([link, Icon], i) => (
|
|
<motion.a
|
|
key={i}
|
|
whileHover={{ y: -4, scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-all"
|
|
href={link}
|
|
target="_blank"
|
|
>
|
|
<Icon className="w-5 h-5 text-foreground" />
|
|
</motion.a>
|
|
))}
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</motion.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>
|
|
|
|
<motion.div
|
|
className="grid grid-cols-2 md:grid-cols-4 gap-4"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
>
|
|
{techStack.map((tech, index) => (
|
|
<motion.div
|
|
key={tech.name}
|
|
variants={cardReveal}
|
|
className="glass-card rounded-2xl p-6 text-center hover-lift group"
|
|
>
|
|
<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>
|
|
</motion.div>
|
|
))}
|
|
</motion.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>
|
|
|
|
<motion.div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
>
|
|
{achievements.map((achievement, index) => (
|
|
<motion.div
|
|
key={achievement.title}
|
|
variants={cardReveal}
|
|
className="glass-card rounded-2xl p-6 text-center hover-lift"
|
|
>
|
|
<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>
|
|
</motion.div>
|
|
))}
|
|
</motion.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) => (
|
|
<motion.div
|
|
key={item.year}
|
|
variants={
|
|
index % 2 === 0 ? timelineItemLeft : timelineItemRight
|
|
}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
className="relative flex gap-6 pb-12 last:pb-0"
|
|
>
|
|
{/* 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>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Philosophy */}
|
|
<section className="py-24 bg-background relative overflow-hidden">
|
|
<motion.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"
|
|
variants={slowFloat}
|
|
/>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|