diff --git a/src/App.tsx b/src/App.tsx index 18daf2e..ab6e1ed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import { TooltipProvider } from "@/components/ui/tooltip"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Index from "./pages/Index"; +import WhoAmI from "./pages/WhoAmI"; import NotFound from "./pages/NotFound"; const queryClient = new QueryClient(); @@ -16,6 +17,7 @@ const App = () => ( } /> + } /> {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} } /> diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index c0c2e8e..07cb5fc 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -1,10 +1,11 @@ import { useRef, useState, useEffect, useCallback } from 'react'; +import { Link } from 'react-router-dom'; import { GlassCard } from '@/components/GlassCard'; 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 = [ - { 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: 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' }, @@ -151,28 +152,36 @@ const Index = () => { const cardW = isMobile ? 110 : 130; const cardH = isMobile ? 80 : 90; - return ( - { cardRefs.current[i] = el; }} - href={item.href} - target="_blank" - rel="noopener noreferrer" - className="absolute" - style={{ - left: `calc(50% + ${x}px - ${cardW / 2}px)`, - top: `calc(50% + ${y}px - ${cardH / 2}px)`, - width: cardW, - }} - > - -
- - -
-

{item.label}

-

{item.desc}

- + const cardContent = ( + +
+ + {item.internal + ? + : } +
+

{item.label}

+

{item.desc}

+ + ); + + const commonProps = { + ref: (el: HTMLAnchorElement | null) => { cardRefs.current[i] = el; }, + className: 'absolute', + style: { + left: `calc(50% + ${x}px - ${cardW / 2}px)`, + top: `calc(50% + ${y}px - ${cardH / 2}px)`, + width: cardW, + }, + }; + + return item.internal ? ( + + {cardContent} + + ) : ( + + {cardContent} ); })} diff --git a/src/pages/WhoAmI.tsx b/src/pages/WhoAmI.tsx new file mode 100644 index 0000000..e72ec79 --- /dev/null +++ b/src/pages/WhoAmI.tsx @@ -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(null); + const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); + + const handleMouseMove = useCallback((e: React.MouseEvent) => { + setMousePos({ x: e.clientX, y: e.clientY }); + }, []); + + return ( +
+ {/* Global mouse glow */} +
+ +
+ {/* Back link */} + + + back to hub + + + {/* Header */} + +
+ Mohamad +
+

+ $ whoami +

+

+ Who Am I? +

+

+ My name is Mohamad, from the beautiful country of{' '} + + Lebanon 🇱🇧 + . +

+
+
+ + + {/* About cards */} +
+ + +

Aspiring Engineer

+

+ I spend my free time improving my skills in computing and dream of being a Computer Engineer 🖥️. +

+ + + + +

Open Source Lover

+

+ I love reading source code and using open source software such as{' '} + + Linux 🐧 + . +

+ + + + +

Sole Sysadmin

+

+ I am currently the only sysadmin of this server. This website is very lightweight and was written 100% by hand using{' '} + vim ;) +

+ +
+ + {/* Contact section */} +

+ Ways to get in touch +

+ + + + {/* Footer */} +

+ damaj.tech / whoami +

+
+
+ ); +}; + +export default WhoAmI;