Changes
Co-authored-by: Damaj301damaj-lol <90093996+Damaj301damaj-lol@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
parent
547cf0b81a
commit
a936348813
1 changed files with 188 additions and 0 deletions
188
src/pages/WhoAmI.tsx
Normal file
188
src/pages/WhoAmI.tsx
Normal file
|
|
@ -0,0 +1,188 @@
|
||||||
|
import { useRef, useState, useCallback } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { GlassCard } from '@/components/GlassCard';
|
||||||
|
import avatar from '@/assets/avatar.png';
|
||||||
|
import { ArrowLeft, MessageSquare, Mail, KeyRound, Code2, Heart, Server } from 'lucide-react';
|
||||||
|
|
||||||
|
const WhoAmI = () => {
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
||||||
|
|
||||||
|
const handleMouseMove = useCallback((e: React.MouseEvent) => {
|
||||||
|
setMousePos({ x: e.clientX, y: e.clientY });
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
onMouseMove={handleMouseMove}
|
||||||
|
className="min-h-screen bg-background relative overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Global mouse glow */}
|
||||||
|
<div
|
||||||
|
className="fixed pointer-events-none z-0"
|
||||||
|
style={{
|
||||||
|
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-3xl mx-auto px-4 py-10 md:py-16">
|
||||||
|
{/* Back link */}
|
||||||
|
<Link
|
||||||
|
to="/"
|
||||||
|
className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors mb-8 font-mono"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
back to hub
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<GlassCard className="p-6 md:p-8 mb-5">
|
||||||
|
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-5">
|
||||||
|
<img
|
||||||
|
src={avatar}
|
||||||
|
alt="Mohamad"
|
||||||
|
className="w-24 h-24 md:w-28 md:h-28 rounded-full ring-2 ring-primary/30 shrink-0"
|
||||||
|
/>
|
||||||
|
<div className="text-center sm:text-left">
|
||||||
|
<p className="text-xs font-mono uppercase tracking-widest text-primary mb-1">
|
||||||
|
$ whoami
|
||||||
|
</p>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-heading font-bold text-foreground">
|
||||||
|
Who Am I?
|
||||||
|
</h1>
|
||||||
|
<p className="text-muted-foreground mt-2 leading-relaxed">
|
||||||
|
My name is <span className="text-gradient font-semibold">Mohamad</span>, from the beautiful country of{' '}
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Lebanon" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
|
||||||
|
Lebanon 🇱🇧
|
||||||
|
</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
|
||||||
|
{/* About cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
|
||||||
|
<GlassCard className="p-5">
|
||||||
|
<Code2 className="w-5 h-5 text-primary mb-3" />
|
||||||
|
<h3 className="font-heading font-semibold text-foreground mb-1">Aspiring Engineer</h3>
|
||||||
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||||
|
I spend my free time improving my skills in computing and dream of being a Computer Engineer 🖥️.
|
||||||
|
</p>
|
||||||
|
</GlassCard>
|
||||||
|
|
||||||
|
<GlassCard className="p-5">
|
||||||
|
<Heart className="w-5 h-5 text-primary mb-3" />
|
||||||
|
<h3 className="font-heading font-semibold text-foreground mb-1">Open Source Lover</h3>
|
||||||
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||||
|
I love reading source code and using open source software such as{' '}
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Linux" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
|
||||||
|
Linux 🐧
|
||||||
|
</a>.
|
||||||
|
</p>
|
||||||
|
</GlassCard>
|
||||||
|
|
||||||
|
<GlassCard className="p-5 md:col-span-2">
|
||||||
|
<Server className="w-5 h-5 text-primary mb-3" />
|
||||||
|
<h3 className="font-heading font-semibold text-foreground mb-1">Sole Sysadmin</h3>
|
||||||
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||||
|
I am currently the only sysadmin of this server. This website is very lightweight and was written 100% by hand using{' '}
|
||||||
|
<span className="font-mono text-primary">vim</span> ;)
|
||||||
|
</p>
|
||||||
|
</GlassCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact section */}
|
||||||
|
<h2 className="text-xs font-mono uppercase tracking-widest text-muted-foreground mb-3 px-1">
|
||||||
|
Ways to get in touch
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4">
|
||||||
|
<a
|
||||||
|
href="https://matrix.to/#/@mohamad:damaj.tech"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="block"
|
||||||
|
>
|
||||||
|
<GlassCard className="p-5 link-arrow-parent cursor-pointer">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="p-2.5 rounded-lg bg-primary/10 ring-1 ring-primary/20">
|
||||||
|
<MessageSquare className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<h3 className="font-heading font-semibold text-foreground">Matrix</h3>
|
||||||
|
<span className="text-[10px] font-mono uppercase tracking-wider px-2 py-0.5 rounded-full bg-primary/10 text-primary">
|
||||||
|
Fastest
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">
|
||||||
|
Secure, encrypted instant messaging.
|
||||||
|
</p>
|
||||||
|
<p className="text-sm font-mono text-primary/90 mt-1 truncate">
|
||||||
|
@mohamad:damaj.tech
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="mailto:mohamad@damaj.tech"
|
||||||
|
className="block"
|
||||||
|
>
|
||||||
|
<GlassCard className="p-5 link-arrow-parent cursor-pointer">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="p-2.5 rounded-lg bg-primary/10 ring-1 ring-primary/20">
|
||||||
|
<Mail className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h3 className="font-heading font-semibold text-foreground">Email</h3>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">
|
||||||
|
Common and widely available. Business mail denied if you fail SPF, DKIM or DMARC.
|
||||||
|
</p>
|
||||||
|
<p className="text-sm font-mono text-primary/90 mt-1 truncate">
|
||||||
|
mohamad@damaj.tech
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://git.damaj.tech/Damaj301damaj.gpg"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="block"
|
||||||
|
>
|
||||||
|
<GlassCard className="p-5 link-arrow-parent cursor-pointer">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="p-2.5 rounded-lg bg-primary/10 ring-1 ring-primary/20">
|
||||||
|
<KeyRound className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h3 className="font-heading font-semibold text-foreground">GPG Key</h3>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">
|
||||||
|
Use my public key to encrypt messages or verify signed content.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<p className="text-center text-xs text-muted-foreground font-mono mt-10">
|
||||||
|
damaj.tech / whoami
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhoAmI;
|
||||||
Loading…
Add table
Add a link
Reference in a new issue