Proffesional freelance ui
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user