Vite init
This commit is contained in:
@@ -1,165 +0,0 @@
|
||||
/*
|
||||
* ABOUT SECTION — selimaj.dev
|
||||
* Design: Glassmorphic Terminal
|
||||
* Asymmetric layout: text left, abstract visual right
|
||||
*/
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
const ABOUT_VISUAL = "https://d2xsxph8kpxj0f.cloudfront.net/310519663439135967/RkRL4wd7YzNoLyaN7suWbR/about-visual-Y4xCyLgcmnZTRAJCDCgU7o.webp";
|
||||
|
||||
function useReveal() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.classList.add("visible");
|
||||
observer.disconnect();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.15 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
return ref;
|
||||
}
|
||||
|
||||
const highlights = [
|
||||
{ icon: "⚡", label: "Currently", value: "Grinding on SaaS products" },
|
||||
{ icon: "🦀", label: "Fav Stack", value: "Rust · TypeScript · Linux" },
|
||||
{ icon: "🎯", label: "Focus", value: "Low-level systems & UI/UX" },
|
||||
{ icon: "🌍", label: "Based in", value: "Albania" },
|
||||
];
|
||||
|
||||
export default function AboutSection() {
|
||||
const ref1 = useReveal();
|
||||
const ref2 = useReveal();
|
||||
|
||||
return (
|
||||
<section id="about" className="py-32 relative" style={{ background: "#080808" }}>
|
||||
{/* Subtle top border */}
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
{/* Section label */}
|
||||
<div className="terminal-label mb-4">> about.me</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
{/* Left: Text */}
|
||||
<div ref={ref1} className="reveal">
|
||||
<h2
|
||||
className="section-heading text-4xl sm:text-5xl text-white mb-8 leading-tight"
|
||||
>
|
||||
Building the future,
|
||||
<br />
|
||||
<span className="text-white/40">one commit at a time.</span>
|
||||
</h2>
|
||||
|
||||
<div
|
||||
className="space-y-4 text-white/60 leading-relaxed"
|
||||
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
||||
>
|
||||
<p>
|
||||
I'm <strong className="text-white font-semibold">Klesti Selimaj</strong> — a 16-year-old software developer
|
||||
and entrepreneur from Albania with 6 years of hands-on experience. I started coding at 10 and
|
||||
never stopped.
|
||||
</p>
|
||||
<p>
|
||||
My passion lies in <strong className="text-white/80">low-level systems programming</strong>, building
|
||||
developer tools, and crafting polished user experiences. I work primarily in{" "}
|
||||
<strong className="text-white/80">Rust</strong> and{" "}
|
||||
<strong className="text-white/80">TypeScript</strong>, and I'm deeply interested in
|
||||
hacking, Linux internals, and TUI applications.
|
||||
</p>
|
||||
<p>
|
||||
Beyond code, I'm building towards a successful SaaS product — combining my technical depth
|
||||
with an entrepreneurial mindset to create tools that developers actually want to use.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Highlights grid */}
|
||||
<div className="mt-10 grid grid-cols-2 gap-3">
|
||||
{highlights.map((h) => (
|
||||
<div
|
||||
key={h.label}
|
||||
className="glass rounded-xl p-4 card-hover"
|
||||
>
|
||||
<div className="text-lg mb-1">{h.icon}</div>
|
||||
<div className="terminal-label text-xs mb-0.5">{h.label}</div>
|
||||
<div
|
||||
className="text-sm text-white/80 font-medium"
|
||||
style={{ fontFamily: "'DM Sans', sans-serif" }}
|
||||
>
|
||||
{h.value}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Social links */}
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
{[
|
||||
{ label: "GitHub", href: "https://github.com/selimaj-dev", icon: "⌥" },
|
||||
{ label: "YouTube", href: "https://youtube.com/@SelimajDev", icon: "▶" },
|
||||
{ label: "Instagram", href: "https://instagram.com/selimaj.dev", icon: "◈" },
|
||||
].map((s) => (
|
||||
<a
|
||||
key={s.label}
|
||||
href={s.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="skill-chip hover:no-underline"
|
||||
>
|
||||
<span className="text-white/40">{s.icon}</span>
|
||||
{s.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Visual */}
|
||||
<div ref={ref2} className="reveal flex justify-center lg:justify-end">
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Glow behind image */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-2xl blur-3xl opacity-20"
|
||||
style={{ background: "radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%)" }}
|
||||
/>
|
||||
<div className="relative glass rounded-2xl overflow-hidden float-anim">
|
||||
<img
|
||||
src={ABOUT_VISUAL}
|
||||
alt="Abstract tech visualization"
|
||||
className="w-full h-auto object-cover"
|
||||
style={{ aspectRatio: "1/1" }}
|
||||
/>
|
||||
{/* Overlay with terminal text */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 p-5"
|
||||
style={{ background: "linear-gradient(to top, rgba(8,8,8,0.9) 0%, transparent 100%)" }}
|
||||
>
|
||||
<div className="terminal-label text-xs">
|
||||
<span className="text-white/30">$</span>{" "}
|
||||
<span className="text-white/60">whoami</span>
|
||||
</div>
|
||||
<div
|
||||
className="text-white/80 text-sm mt-1"
|
||||
style={{ fontFamily: "'JetBrains Mono', monospace" }}
|
||||
>
|
||||
Klesti Selimaj
|
||||
</div>
|
||||
<div className="terminal-label text-xs mt-0.5">
|
||||
uid=1000(klesti) groups=dev,entrepreneur
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user