Updated about
This commit is contained in:
@@ -4,9 +4,11 @@
|
||||
* Asymmetric layout: text left, abstract visual right
|
||||
*/
|
||||
|
||||
import { EarthIcon, LayersIcon, TargetIcon, ZapIcon } from "lucide-react";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
const ABOUT_VISUAL = "https://d2xsxph8kpxj0f.cloudfront.net/310519663439135967/RkRL4wd7YzNoLyaN7suWbR/about-visual-Y4xCyLgcmnZTRAJCDCgU7o.webp";
|
||||
const ABOUT_VISUAL =
|
||||
"https://d2xsxph8kpxj0f.cloudfront.net/310519663439135967/RkRL4wd7YzNoLyaN7suWbR/about-visual-Y4xCyLgcmnZTRAJCDCgU7o.webp";
|
||||
|
||||
function useReveal() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
@@ -20,7 +22,7 @@ function useReveal() {
|
||||
observer.disconnect();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.15 }
|
||||
{ threshold: 0.15 },
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
@@ -29,10 +31,10 @@ function useReveal() {
|
||||
}
|
||||
|
||||
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" },
|
||||
{ Icon: ZapIcon, label: "Currently", value: "Grinding on SaaS products" },
|
||||
{ Icon: LayersIcon, label: "Fav Stack", value: "Rust · TypeScript · Linux" },
|
||||
{ Icon: TargetIcon, label: "Focus", value: "Low-level systems & UI/UX" },
|
||||
{ Icon: EarthIcon, label: "Based in", value: "Albania" },
|
||||
];
|
||||
|
||||
export default function AboutSection() {
|
||||
@@ -40,7 +42,11 @@ export default function AboutSection() {
|
||||
const ref2 = useReveal();
|
||||
|
||||
return (
|
||||
<section id="about" className="py-32 relative" style={{ background: "#080808" }}>
|
||||
<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" />
|
||||
|
||||
@@ -51,9 +57,7 @@ export default function AboutSection() {
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
@@ -64,32 +68,43 @@ export default function AboutSection() {
|
||||
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
|
||||
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{" "}
|
||||
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.
|
||||
<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.
|
||||
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 key={h.label} className="glass rounded-xl p-4 card-hover">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-lg">{<h.Icon />}</div>
|
||||
<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" }}
|
||||
@@ -97,15 +112,29 @@ export default function AboutSection() {
|
||||
{h.value}
|
||||
</div>
|
||||
</div>
|
||||
</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: "◈" },
|
||||
{
|
||||
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}
|
||||
@@ -127,7 +156,10 @@ export default function AboutSection() {
|
||||
{/* 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%)" }}
|
||||
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
|
||||
@@ -139,7 +171,10 @@ export default function AboutSection() {
|
||||
{/* 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%)" }}
|
||||
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>{" "}
|
||||
|
||||
Reference in New Issue
Block a user