diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 996ef04..03a2dab 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -21,18 +21,19 @@ import { 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 = [ { @@ -72,65 +73,80 @@ const timeline = [ }, ]; +const socialLinks: [ + string, + React.ComponentType>, +][] = [ + ["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>; + 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: () => ( + + + + + ), + color: "text-red-500", + }, + { name: "Docker", icon: SiDocker, color: "text-blue-400" }, + { name: "Linux", icon: SiLinux, color: "text-yellow-400" }, +]; + +const achievements = [ + { + icon: Trophy, + title: "Top GitHub Contributor in Albania", + description: + "Ranked #2 nationally based on commits, contributions, and repository activity.", + }, + { + icon: Github, + title: "Contributor to 80+ Public Repositories", + description: "Actively contributed code to multiple open-source projects.", + }, + { + icon: Box, + title: "Built & Deployed 3 Full-Stack Applications", + description: + "Completed end-to-end development projects using Next.js, React, and Rust.", + }, + { + icon: FileText, + title: "Published Technical Guides & Documentation", + description: + "Authored clear technical documentation and tutorials in public repositories.", + }, +]; + export default function About() { - const techStack = [ - { name: "Rust", icon: , color: "text-orange-500" }, - { name: "TypeScript", icon: , color: "text-blue-500" }, - { name: "React", icon: , color: "text-cyan-500" }, - { name: "Go", icon: , color: "text-cyan-400" }, - { name: "Python", icon: , color: "text-yellow-500" }, - { - name: "Java", - icon: ( - - - - - ), - color: "text-red-500", - }, - { name: "Docker", icon: , color: "text-blue-400" }, - { name: "Linux", icon: , color: "text-yellow-400" }, - ]; - - const achievements = [ - { - icon: , - title: "Top GitHub Contributor in Albania", - description: - "Ranked #2 nationally based on commits, contributions, and repository activity.", - }, - { - icon: , - title: "Contributor to 80+ Public Repositories", - description: - "Actively contributed code, bug fixes, and features to multiple open-source projects.", - }, - { - icon: , - title: "Built & Deployed 3 Full-Stack Applications", - description: - "Completed end-to-end development projects using Next.js, React, and TypeScript.", - }, - { - icon: , - title: "Published Technical Guides & Documentation", - description: - "Authored clear technical documentation and tutorials in public repositories.", - }, - ]; - return ( <> {/* Hero */} @@ -159,14 +175,14 @@ export default function About() { {/* Floating badges */} - Available - + */} @@ -187,8 +203,8 @@ export default function About() { 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 things that matter, - from low-level systems to beautiful user interfaces. + experience. I'm passionate about building low-level systems and + beautiful user interfaces. - {[Github, Linkedin, Youtube, Instagram, ExternalLink].map( - (Icon, i) => ( - - - - ), - )} + {socialLinks.map(([link, Icon], i) => ( + + + + ))} @@ -273,7 +289,7 @@ export default function About() { className="glass-card rounded-2xl p-6 text-center hover-lift group" >
- {tech.icon} +

{tech.name} @@ -312,7 +328,9 @@ export default function About() { variants={cardReveal} className="glass-card rounded-2xl p-6 text-center hover-lift" > -
{achievement.icon}
+
+ +

{achievement.title}

diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx index 9417343..b65ac63 100644 --- a/src/app/pricing/page.tsx +++ b/src/app/pricing/page.tsx @@ -14,7 +14,7 @@ const plans = [ { name: "Starter", description: "Small, clearly defined tasks and improvements", - price: "$500", + price: "$499", period: "project", icon: Zap, features: [ @@ -25,27 +25,27 @@ const plans = [ "1 revision round", "Async communication", "Source code included", + "CLI or TUI applications", ], - cta: "Get Started", + cta: "Contact Me", popular: false, }, { name: "Professional", description: "Product features, MVPs, and system components", - price: "$2,000+", + price: "$1,999", period: "project", icon: Crown, features: [ "Multi-feature application or system module", "Backend services or APIs (Rust, Node, etc.)", - "CLI or TUI applications", "Frontend integration where needed", "Architecture and technical decisions", - "2–3 revision rounds", + "2-3 revision rounds", "Documentation for delivered components", "Performance and reliability considerations", ], - cta: "Start Project", + cta: "Contact Me", popular: true, }, { @@ -127,12 +127,15 @@ export default function Pricing() { Pricing

- Transparent Pricing for{" "} + Fair Pricing for{" "} Premium Quality

- Choose a plan that fits your needs. Every project receives the - same attention to detail and commitment to excellence. + Choose a plan that fits your needs. +

+ +

+ Payments are accepted in crypto.

@@ -280,7 +283,7 @@ export default function Pricing() { variants={fadeInUp} className="glass-card rounded-2xl p-6 hover-lift group" > -

+

{service.title}

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx index 61daf88..555c578 100644 --- a/src/components/home/HeroSection.tsx +++ b/src/components/home/HeroSection.tsx @@ -1,6 +1,6 @@ "use client"; -import { ArrowRight, Github, Linkedin, Youtube } from "lucide-react"; +import { ArrowRight, Github, Instagram, Linkedin } from "lucide-react"; import Link from "next/link"; import { motion } from "motion/react"; import { staggerContainer, fadeInUp, slowFloat } from "@/lib/animations"; @@ -30,26 +30,15 @@ export function HeroSection() { className="max-w-4xl mx-auto text-center" variants={staggerContainer} > - {/* Status Badge */} - - - - Available for new projects - - - {/* Main Heading */} Building{" "} - exceptional + powerful
- digital experiences + digital products {/* Subheading */} @@ -62,7 +51,7 @@ export function HeroSection() { Klesti Selimaj, 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. + tools. {/* CTA Buttons */} @@ -79,13 +68,11 @@ export function HeroSection() { - - View GitHub + About Me @@ -104,7 +91,7 @@ export function HeroSection() { - + diff --git a/src/components/home/ProjectsSection.tsx b/src/components/home/ProjectsSection.tsx index 94209cf..e577a1f 100644 --- a/src/components/home/ProjectsSection.tsx +++ b/src/components/home/ProjectsSection.tsx @@ -111,7 +111,7 @@ export function ProjectsSection() { {/* Content */} -

+

{project.name}

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index a0dbbd4..7d154c0 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -20,8 +20,6 @@ export function Footer() {

Building digital experiences with precision and passion. - Specializing in low-level systems, modern web applications, and - everything in between.

@@ -118,10 +116,10 @@ export function Footer() {

© {currentYear} Klesti Selimaj. All rights reserved.

-
+ {/*
Available for work -
+
*/}