Changes
This commit is contained in:
gpt-engineer-app[bot]
parent
03591b0d41
commit
5898dc9a18
1 changed files with 164 additions and 78 deletions
|
|
@ -1,101 +1,188 @@
|
|||
import { useRef } from 'react';
|
||||
import { useRef, useState, useEffect, useCallback } from 'react';
|
||||
import { GlassCard } from '@/components/GlassCard';
|
||||
import { useMousePosition } from '@/hooks/useMousePosition';
|
||||
import avatar from '@/assets/avatar.png';
|
||||
import { Home, MessageCircle, Rss, GitBranch, Search, ExternalLink } from 'lucide-react';
|
||||
|
||||
const links = [
|
||||
const items = [
|
||||
{ icon: Home, label: 'Home', href: 'https://damaj.tech/', desc: 'Main page' },
|
||||
{ icon: MessageCircle, label: 'Who Am I?', href: 'https://damaj.tech/site/whoami', desc: 'About me' },
|
||||
{ icon: Rss, label: 'Blog', href: 'https://damaj.tech/site/blog', desc: 'My writings' },
|
||||
];
|
||||
|
||||
const services = [
|
||||
{ icon: GitBranch, label: 'Git Server', href: 'https://git.damaj.tech/', desc: 'Self-hosted Forgejo' },
|
||||
{ icon: Search, label: 'SearXNG', href: 'https://searxng.damaj.tech/', desc: 'Private search engine' },
|
||||
{ icon: Search, label: 'SearXNG', href: 'https://searxng.damaj.tech/', desc: 'Private search' },
|
||||
];
|
||||
|
||||
const Index = () => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const mouse = useMousePosition(containerRef);
|
||||
const avatarRef = useRef<HTMLDivElement>(null);
|
||||
const cardRefs = useRef<(HTMLAnchorElement | null)[]>([]);
|
||||
const [lines, setLines] = useState<{ x1: number; y1: number; x2: number; y2: number }[]>([]);
|
||||
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
const updateLines = useCallback(() => {
|
||||
if (!containerRef.current || !avatarRef.current) return;
|
||||
const containerRect = containerRef.current.getBoundingClientRect();
|
||||
const avatarRect = avatarRef.current.getBoundingClientRect();
|
||||
const cx = avatarRect.left + avatarRect.width / 2 - containerRect.left;
|
||||
const cy = avatarRect.top + avatarRect.height / 2 - containerRect.top;
|
||||
|
||||
const newLines = cardRefs.current.map((card) => {
|
||||
if (!card) return { x1: cx, y1: cy, x2: cx, y2: cy };
|
||||
const cardRect = card.getBoundingClientRect();
|
||||
const cardCx = cardRect.left + cardRect.width / 2 - containerRect.left;
|
||||
const cardCy = cardRect.top + cardRect.height / 2 - containerRect.top;
|
||||
return { x1: cx, y1: cy, x2: cardCx, y2: cardCy };
|
||||
});
|
||||
setLines(newLines);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
updateLines();
|
||||
const timer = setTimeout(() => setMounted(true), 100);
|
||||
window.addEventListener('resize', updateLines);
|
||||
return () => {
|
||||
window.removeEventListener('resize', updateLines);
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [updateLines]);
|
||||
|
||||
useEffect(() => {
|
||||
// Re-calc after fonts/images load
|
||||
const timer = setTimeout(updateLines, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [updateLines]);
|
||||
|
||||
const handleMouseMove = useCallback((e: React.MouseEvent) => {
|
||||
if (!containerRef.current) return;
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="min-h-screen bg-background relative overflow-hidden"
|
||||
onMouseMove={handleMouseMove}
|
||||
className="min-h-screen bg-background relative overflow-hidden flex flex-col items-center justify-start py-10 md:py-16 px-4"
|
||||
>
|
||||
{/* Global mouse glow */}
|
||||
<div
|
||||
className="fixed pointer-events-none z-0"
|
||||
style={{
|
||||
left: mouse.x,
|
||||
top: mouse.y,
|
||||
width: 600,
|
||||
height: 600,
|
||||
left: mousePos.x,
|
||||
top: mousePos.y,
|
||||
width: 500,
|
||||
height: 500,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
background: 'radial-gradient(circle, hsl(25 95% 55% / 0.06) 0%, transparent 70%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 max-w-2xl mx-auto px-4 py-12 md:py-20 flex flex-col gap-5">
|
||||
{/* Avatar + Intro */}
|
||||
<GlassCard className="p-6 md:p-8">
|
||||
<div className="flex items-center gap-5">
|
||||
{/* SVG Lines */}
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full pointer-events-none z-[1]"
|
||||
style={{ opacity: mounted ? 1 : 0, transition: 'opacity 0.8s ease' }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="hsl(25 95% 55% / 0.5)" />
|
||||
<stop offset="100%" stopColor="hsl(25 95% 55% / 0.15)" />
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="2" result="blur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="blur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
{lines.map((line, i) => (
|
||||
<g key={i}>
|
||||
{/* Glow line */}
|
||||
<line
|
||||
x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2}
|
||||
stroke="hsl(25 95% 55% / 0.1)"
|
||||
strokeWidth="4"
|
||||
filter="url(#glow)"
|
||||
/>
|
||||
{/* Main line */}
|
||||
<line
|
||||
x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2}
|
||||
stroke="url(#lineGrad)"
|
||||
strokeWidth="1.5"
|
||||
strokeDasharray="6 4"
|
||||
/>
|
||||
{/* End dot on card */}
|
||||
<circle cx={line.x2} cy={line.y2} r="3" fill="hsl(25 95% 55% / 0.4)" />
|
||||
</g>
|
||||
))}
|
||||
{/* Center dot */}
|
||||
{lines.length > 0 && (
|
||||
<circle cx={lines[0]?.x1} cy={lines[0]?.y1} r="5" fill="hsl(25 95% 55% / 0.6)" />
|
||||
)}
|
||||
</svg>
|
||||
|
||||
{/* Center Avatar Hub */}
|
||||
<div ref={avatarRef} className="relative z-10 mb-8 md:mb-12 flex flex-col items-center">
|
||||
<div className="glass-card rounded-full p-1.5 ring-2 ring-primary/20">
|
||||
<img
|
||||
src={avatar}
|
||||
alt="Mohamad's avatar"
|
||||
className="w-20 h-20 md:w-24 md:h-24 rounded-full ring-2 ring-primary/30"
|
||||
alt="Mohamad"
|
||||
className="w-28 h-28 md:w-36 md:h-36 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
</div>
|
||||
<div className="mt-4 text-center">
|
||||
<h1 className="text-2xl md:text-3xl font-heading font-bold text-foreground">
|
||||
👋 Hey There!
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1 font-body">
|
||||
My name is <span className="text-gradient font-semibold">Mohamad</span>
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Welcome to my space. Feel free to look around.
|
||||
<p className="text-muted-foreground text-sm mt-1">
|
||||
I'm <span className="text-gradient font-semibold">Mohamad</span> — welcome to my space.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{/* Website Content */}
|
||||
<div>
|
||||
<h2 className="text-xs font-mono uppercase tracking-widest text-muted-foreground mb-3 px-1">
|
||||
Website Content
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
{links.map((link) => (
|
||||
<a key={link.label} href={link.href} target="_blank" rel="noopener noreferrer">
|
||||
<GlassCard className="p-5 h-full link-arrow-parent cursor-pointer">
|
||||
{/* Cards arranged around */}
|
||||
<div className="relative z-10 w-full max-w-3xl">
|
||||
{/* Top row - 3 cards */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3 md:gap-4 mb-3 md:mb-4">
|
||||
{items.slice(0, 3).map((item, i) => (
|
||||
<a
|
||||
key={item.label}
|
||||
ref={(el) => { cardRefs.current[i] = el; }}
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block"
|
||||
>
|
||||
<GlassCard className="p-4 md:p-5 h-full link-arrow-parent cursor-pointer">
|
||||
<div className="flex items-start justify-between">
|
||||
<link.icon className="w-5 h-5 text-primary mb-3" />
|
||||
<item.icon className="w-5 h-5 text-primary mb-2" />
|
||||
<ExternalLink className="w-3.5 h-3.5 text-muted-foreground link-arrow" />
|
||||
</div>
|
||||
<p className="font-heading font-semibold text-foreground">{link.label}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">{link.desc}</p>
|
||||
<p className="font-heading font-semibold text-foreground text-sm md:text-base">{item.label}</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{item.desc}</p>
|
||||
</GlassCard>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Self-hosted Services */}
|
||||
<div>
|
||||
<h2 className="text-xs font-mono uppercase tracking-widest text-muted-foreground mb-3 px-1">
|
||||
Self-hosted Services
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{services.map((svc) => (
|
||||
<a key={svc.label} href={svc.href} target="_blank" rel="noopener noreferrer">
|
||||
<GlassCard className="p-5 h-full link-arrow-parent cursor-pointer">
|
||||
{/* Bottom row - 2 cards centered */}
|
||||
<div className="grid grid-cols-2 gap-3 md:gap-4 max-w-md mx-auto">
|
||||
{items.slice(3).map((item, i) => (
|
||||
<a
|
||||
key={item.label}
|
||||
ref={(el) => { cardRefs.current[i + 3] = el; }}
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block"
|
||||
>
|
||||
<GlassCard className="p-4 md:p-5 h-full link-arrow-parent cursor-pointer">
|
||||
<div className="flex items-start justify-between">
|
||||
<svc.icon className="w-5 h-5 text-primary mb-3" />
|
||||
<item.icon className="w-5 h-5 text-primary mb-2" />
|
||||
<ExternalLink className="w-3.5 h-3.5 text-muted-foreground link-arrow" />
|
||||
</div>
|
||||
<p className="font-heading font-semibold text-foreground">{svc.label}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">{svc.desc}</p>
|
||||
<p className="font-heading font-semibold text-foreground text-sm md:text-base">{item.label}</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{item.desc}</p>
|
||||
</GlassCard>
|
||||
</a>
|
||||
))}
|
||||
|
|
@ -103,11 +190,10 @@ const Index = () => {
|
|||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="text-center text-xs text-muted-foreground font-mono mt-4">
|
||||
<p className="relative z-10 text-center text-xs text-muted-foreground font-mono mt-10">
|
||||
damaj.tech
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue