Co-authored-by: Damaj301damaj-lol <90093996+Damaj301damaj-lol@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot] 2026-05-19 15:12:50 +00:00
parent bd762556c7
commit 7a6ba998fc

View file

@ -1,10 +1,11 @@
import { useRef, useState, useEffect, useCallback } from 'react'; import { useRef, useState, useEffect, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { GlassCard } from '@/components/GlassCard'; import { GlassCard } from '@/components/GlassCard';
import avatar from '@/assets/avatar.png'; import avatar from '@/assets/avatar.png';
import { Home, MessageCircle, Rss, GitBranch, Search, ExternalLink } from 'lucide-react'; import { MessageCircle, Rss, GitBranch, Search, ExternalLink, ArrowUpRight } from 'lucide-react';
const items = [ const items = [
{ icon: MessageCircle, label: 'Who Am I?', href: 'https://damaj.tech/site/whoami', desc: 'About me' }, { icon: MessageCircle, label: 'Who Am I?', href: '/whoami', desc: 'About me', internal: true },
{ icon: Rss, label: 'Blog', href: 'https://damaj.tech/site/blog', desc: 'My writings' }, { icon: Rss, label: 'Blog', href: 'https://damaj.tech/site/blog', desc: 'My writings' },
{ icon: GitBranch, label: 'Git Server', href: 'https://git.damaj.tech/', desc: 'Self-hosted Forgejo' }, { 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' }, { icon: Search, label: 'SearXNG', href: 'https://searxng.damaj.tech/', desc: 'Private search' },
@ -151,28 +152,36 @@ const Index = () => {
const cardW = isMobile ? 110 : 130; const cardW = isMobile ? 110 : 130;
const cardH = isMobile ? 80 : 90; const cardH = isMobile ? 80 : 90;
return ( const cardContent = (
<a <GlassCard className="p-3 md:p-4 link-arrow-parent cursor-pointer">
key={item.label} <div className="flex items-start justify-between">
ref={(el) => { cardRefs.current[i] = el; }} <item.icon className="w-4 h-4 text-primary mb-1.5" />
href={item.href} {item.internal
target="_blank" ? <ArrowUpRight className="w-3 h-3 text-muted-foreground link-arrow" />
rel="noopener noreferrer" : <ExternalLink className="w-3 h-3 text-muted-foreground link-arrow" />}
className="absolute" </div>
style={{ <p className="font-heading font-semibold text-foreground text-xs md:text-sm leading-tight">{item.label}</p>
left: `calc(50% + ${x}px - ${cardW / 2}px)`, <p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">{item.desc}</p>
top: `calc(50% + ${y}px - ${cardH / 2}px)`, </GlassCard>
width: cardW, );
}}
> const commonProps = {
<GlassCard className="p-3 md:p-4 link-arrow-parent cursor-pointer"> ref: (el: HTMLAnchorElement | null) => { cardRefs.current[i] = el; },
<div className="flex items-start justify-between"> className: 'absolute',
<item.icon className="w-4 h-4 text-primary mb-1.5" /> style: {
<ExternalLink className="w-3 h-3 text-muted-foreground link-arrow" /> left: `calc(50% + ${x}px - ${cardW / 2}px)`,
</div> top: `calc(50% + ${y}px - ${cardH / 2}px)`,
<p className="font-heading font-semibold text-foreground text-xs md:text-sm leading-tight">{item.label}</p> width: cardW,
<p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">{item.desc}</p> },
</GlassCard> };
return item.internal ? (
<Link key={item.label} to={item.href} {...commonProps}>
{cardContent}
</Link>
) : (
<a key={item.label} href={item.href} target="_blank" rel="noopener noreferrer" {...commonProps}>
{cardContent}
</a> </a>
); );
})} })}