// Contact section + Lanyard Discord widget (WebSocket) const LANYARD_USER_ID = "832751255248044093"; const LANYARD_WS = "wss://api.lanyard.rest/socket"; const OPC = { EVENT: 0, HELLO: 1, INITIALIZE: 2, HEARTBEAT: 3 }; function useLanyard(userId) { const [data, setData] = React.useState(null); const [wsStatus, setWsStatus] = React.useState("connecting"); const wsRef = React.useRef(null); const hbRef = React.useRef(null); const retryRef = React.useRef(null); React.useEffect(() => { let alive = true; const connect = () => { if (!alive) return; setWsStatus("connecting"); const ws = new WebSocket(LANYARD_WS); wsRef.current = ws; ws.onmessage = (e) => { const { op, d, t } = JSON.parse(e.data); if (op === OPC.HELLO) { hbRef.current = setInterval(() => { if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ op: OPC.HEARTBEAT })); }, d.heartbeat_interval); ws.send(JSON.stringify({ op: OPC.INITIALIZE, d: { subscribe_to_id: userId } })); } if (op === OPC.EVENT && (t === "INIT_STATE" || t === "PRESENCE_UPDATE")) { if (alive) { setData(d); setWsStatus("connected"); } } }; ws.onerror = () => { if (alive) setWsStatus("error"); }; ws.onclose = () => { clearInterval(hbRef.current); if (alive) { setWsStatus("disconnected"); retryRef.current = setTimeout(connect, 5000); } }; }; connect(); return () => { alive = false; clearInterval(hbRef.current); clearTimeout(retryRef.current); if (wsRef.current) wsRef.current.close(); }; }, [userId]); return { data, wsStatus }; } function getAvatar(userId, hash, size = 128) { if (!hash) { const idx = Number(BigInt(userId) >> 22n) % 6; return `https://cdn.discordapp.com/embed/avatars/${idx}.png`; } const ext = hash.startsWith('a_') ? 'gif' : 'webp'; return `https://cdn.discordapp.com/avatars/${userId}/${hash}.${ext}?size=${size}`; } function getActivityAssetUrl(activity) { if (!activity?.assets?.large_image) return null; const img = activity.assets.large_image; if (img.startsWith('mp:external/')) return 'https://media.discordapp.net/external/' + img.slice('mp:external/'.length); if (img.startsWith('mp:')) return 'https://media.discordapp.net/' + img.slice('mp:'.length); return `https://cdn.discordapp.com/app-assets/${activity.application_id}/${img}.png`; } function LiveClock() { const [time, setTime] = React.useState(''); React.useEffect(() => { const update = () => setTime(new Date().toLocaleTimeString('fr-BE', { timeZone: 'Europe/Brussels', hour: '2-digit', minute: '2-digit', hour12: false })); update(); const id = setInterval(update, 1000); return () => clearInterval(id); }, []); return {time}; } function LanyardWidget() { const { data, wsStatus } = useLanyard(LANYARD_USER_ID); const status = data?.discord_status || 'offline'; const user = data?.discord_user; const spotify = data?.spotify; const activity = data?.activities?.find(a => a.type !== 2 && a.type !== 4); const customStatus = data?.activities?.find(a => a.type === 4); const avatarUrl = user ? getAvatar(user.id, user.avatar, 128) : null; const statusDot = { online: '#23a55a', idle: '#f0b232', dnd: '#f23f43', offline: '#80848e' }; const statusText = { online: 'Online', idle: 'Idle', dnd: 'Do not disturb', offline: 'Offline' }; const cardStyle = { border: '1px solid #1a1a1a', background: '#0a0a0a', width: 'clamp(260px, 28vw, 340px)', fontFamily: "'DM Sans', sans-serif", overflow: 'hidden' }; const monoSm = { fontFamily: "'DM Mono', monospace", fontSize: 8.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#2e2e2e' }; const sectionStyle = { padding: '14px 18px', borderBottom: '1px solid #111' }; return (
{/* Header */}
{avatarUrl ? :
}

{user?.global_name || user?.username || 'muuqi'}

{wsStatus === 'connected' ? statusText[status] : 'Connecting…'}

{customStatus?.state && (

{customStatus.emoji?.name ? customStatus.emoji.name + ' ' : ''}{customStatus.state}

)}
{/* Location + clock */}
Liège, BE ·
{/* Spotify */}
{spotify && (
{[1,2,3,4].map(i => (
))}
)} {spotify ? 'Now playing' : 'Music'}
{spotify ? (
{spotify.album_art_url && }

{spotify.song}

{spotify.artist}

) : (

—

)}
{/* Activity */}
Activity {activity ? (
{(() => { const icon = getActivityAssetUrl(activity); return icon ? :
🎮
; })()}

{activity.name}

{activity.details &&

{activity.details}

} {activity.state &&

{activity.state}

}
) : (

—

)}
{/* Add me CTA */}
Add me

@{user?.username || 'muuqi'}

↗
); } function DiscordPopup({ onClose }) { return (
e.stopPropagation()} >
); } function ContactSectionEditorial({ c, t }) { const [emailHovered, setEmailHovered] = React.useState(false); const [showPopup, setShowPopup] = React.useState(false); const { data } = useLanyard(LANYARD_USER_ID); const status = data?.discord_status || 'offline'; const statusDotColor = { online: '#23a55a', idle: '#f0b232', dnd: '#f23f43', offline: '#80848e' }; const socials = [ { label: "GitHub", href: "#" }, { label: "LinkedIn", href: "#" }, { label: "Read.cv", href: "#" }, ]; return ( <> {showPopup && setShowPopup(false)} />} {c.label}
{c.title.split("\n")[0]} {c.title.split("\n")[1]}

{c.subtitle}

 setEmailHovered(true)} onMouseLeave={() => setEmailHovered(false)} style={{ display: "inline-block", fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: "clamp(28px, 4vw, 60px)", letterSpacing: "-0.01em", color: emailHovered ? "#ededeb" : "#666", textDecoration: "none", transition: "color 0.4s cubic-bezier(0.16,1,0.3,1)", borderBottom: `1px solid ${emailHovered ? "#3a3a3a" : "#1e1e1e"}`, paddingBottom: "0.05em" }}> {c.email}
{socials.map(s => ( e.preventDefault()}>{s.label} ))}
); } function useScramble(original, active) { const [display, setDisplay] = React.useState(original); const chars = '!<>-_\/[]{}—=+*^?#@0123456789abcdefghijklmnopqrstuvwxyz'; React.useEffect(() => { if (!active) { setDisplay(original); return; } let iter = 0; const total = original.length; const interval = setInterval(() => { setDisplay( original.split('').map((ch, i) => { if (ch === '@' || ch === '.') return ch; if (i < iter) return original[i]; return chars[Math.floor(Math.random() * chars.length)]; }).join('') ); if (iter >= total) clearInterval(interval); iter += 0.5; }, 28); return () => clearInterval(interval); }, [active, original]); return display; } function AmbientGrain({ visible }) { const canvasRef = React.useRef(null); const rafRef = React.useRef(null); React.useEffect(() => { if (!visible) return; const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); let W, H; const resize = () => { W = canvas.width = canvas.clientWidth; H = canvas.height = canvas.clientHeight; }; resize(); window.addEventListener('resize', resize); let frame = 0; const render = () => { frame++; if (frame % 2 === 0) { const imageData = ctx.createImageData(W, H); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { const v = Math.random() * 255; data[i] = data[i+1] = data[i+2] = v; data[i+3] = Math.random() * 18; } ctx.putImageData(imageData, 0, 0); const vg = ctx.createRadialGradient(W/2, H/2, H*0.15, W/2, H/2, H*0.75); vg.addColorStop(0, 'rgba(6,6,8,0)'); vg.addColorStop(1, 'rgba(6,6,8,0.55)'); ctx.fillStyle = vg; ctx.fillRect(0, 0, W, H); } rafRef.current = requestAnimationFrame(render); }; rafRef.current = requestAnimationFrame(render); return () => { cancelAnimationFrame(rafRef.current); window.removeEventListener('resize', resize); }; }, [visible]); if (!visible) return null; return ; } function AmbientEcho({ visible, email }) { const canvasRef = React.useRef(null); const rafRef = React.useRef(null); React.useEffect(() => { if (!visible) return; const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); let W, H; const resize = () => { W = canvas.width = canvas.clientWidth; H = canvas.height = canvas.clientHeight; }; resize(); window.addEventListener('resize', resize); const t0 = performance.now(); const layers = [ { size: 0.085, alpha: 0.032, y: 0.5, x: 0.5, drift: 0.0008, rot: 0 }, { size: 0.052, alpha: 0.022, y: 0.72, x: 0.44, drift: -0.0005, rot: -0.015 }, { size: 0.038, alpha: 0.018, y: 0.3, x: 0.56, drift: 0.0006, rot: 0.02 }, ]; const render = () => { const t = (performance.now() - t0) / 1000; ctx.clearRect(0, 0, W, H); layers.forEach((l, i) => { const fontSize = W * l.size; ctx.save(); ctx.translate(W * l.x + Math.sin(t * 0.12 + i) * 8, H * l.y + Math.cos(t * 0.09 + i * 1.3) * 5); ctx.rotate(l.rot + Math.sin(t * 0.05 + i) * 0.005); ctx.font = `300 ${fontSize}px 'Cormorant Garamond', serif`; ctx.fillStyle = `rgba(237,237,235,${l.alpha})`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(email, 0, 0); ctx.restore(); }); rafRef.current = requestAnimationFrame(render); }; rafRef.current = requestAnimationFrame(render); return () => { cancelAnimationFrame(rafRef.current); window.removeEventListener('resize', resize); }; }, [visible, email]); if (!visible) return null; return ; } function AmbientLines({ visible }) { const canvasRef = React.useRef(null); const rafRef = React.useRef(null); React.useEffect(() => { if (!visible) return; const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); let W, H; const resize = () => { W = canvas.width = canvas.clientWidth; H = canvas.height = canvas.clientHeight; }; resize(); window.addEventListener('resize', resize); const t0 = performance.now(); const lines = [ { x: 0.18, speed: 0.006, angle: 0, alpha: 0.07, width: 0.5 }, { x: 0.42, speed: -0.004, angle: 0, alpha: 0.045, width: 0.5 }, { x: 0.67, speed: 0.003, angle: 0.04, alpha: 0.06, width: 0.5 }, { x: 0.83, speed: -0.007, angle: -0.03, alpha: 0.04, width: 0.5 }, { x: 0.55, speed: 0.005, angle: 0, alpha: 0.03, width: 1 }, ]; const render = () => { const t = (performance.now() - t0) / 1000; ctx.clearRect(0, 0, W, H); lines.forEach((l, i) => { const x = ((l.x + t * l.speed * 0.05) % 1) * W; const pulse = 0.5 + Math.sin(t * 0.4 + i * 1.2) * 0.5; ctx.save(); ctx.translate(x, H / 2); ctx.rotate(l.angle); const grad = ctx.createLinearGradient(0, -H * 0.6, 0, H * 0.6); grad.addColorStop(0, `rgba(237,237,235,0)`); grad.addColorStop(0.3, `rgba(237,237,235,${l.alpha * pulse})`); grad.addColorStop(0.7, `rgba(237,237,235,${l.alpha * pulse})`); grad.addColorStop(1, `rgba(237,237,235,0)`); ctx.strokeStyle = grad; ctx.lineWidth = l.width; ctx.beginPath(); ctx.moveTo(0, -H * 0.6); ctx.lineTo(0, H * 0.6); ctx.stroke(); ctx.restore(); }); rafRef.current = requestAnimationFrame(render); }; rafRef.current = requestAnimationFrame(render); return () => { cancelAnimationFrame(rafRef.current); window.removeEventListener('resize', resize); }; }, [visible]); if (!visible) return null; return ; } function ContactSectionCentered({ c, t, scramble = true, ambientRing = 'grain' }) { const [showPopup, setShowPopup] = React.useState(false); const [emailHovered, setEmailHovered] = React.useState(false); const [copied, setCopied] = React.useState(false); const [cvOpen, setCvOpen] = React.useState(false); const cvWrapRef = React.useRef(null); const scrambledEmail = useScramble(c.email, scramble && emailHovered && !copied); const { data } = useLanyard(LANYARD_USER_ID); const status = data?.discord_status || 'offline'; const statusDotColor = { online: '#23a55a', idle: '#f0b232', dnd: '#f23f43', offline: '#80848e' }; React.useEffect(() => { if (!cvOpen) return; const onClickOutside = (e) => { if (cvWrapRef.current && !cvWrapRef.current.contains(e.target)) setCvOpen(false); }; document.addEventListener('mousedown', onClickOutside); return () => document.removeEventListener('mousedown', onClickOutside); }, [cvOpen]); const socials = [ { label: "GitHub", iconKey: "github", href: "https://github.com/muuqi111" }, { label: "LinkedIn", iconKey: "linkedin", href: "https://www.linkedin.com/in/mustafa-ok-dev/" }, ]; return ( <> {showPopup && setShowPopup(false)} />} {ambientRing === 'grain' && } {ambientRing === 'echo' && } {ambientRing === 'lines' && }
{c.label}

{c.subtitle}
{socials.map(s => ( e.currentTarget.style.color='#888'} onMouseLeave={e => e.currentTarget.style.color='#333'} >
{ICONS[s.iconKey]}
{s.label} ))}
); } function ContactSection({ layout = 'centered', scramble = true, ambientRing = 'grain' }) { const { t } = useI18n(); const c = t.contact; return (
{layout === 'editorial' ? : }
muuqi · {new Date().getFullYear()} Designed & built by muuqi
); } Object.assign(window, { ContactSection });