106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import './page.css';
|
|
import { DiscordStatus } from './components/discordstatus';
|
|
|
|
const TWITTER_LINK = "https://x.com/neruu444"
|
|
const DISCORD_USER = "neru444"
|
|
const DISCORD_ID = "1104474057916809226"
|
|
const STEAM_LINK = "https://steamcommunity.com/profiles/76561198440714757/"
|
|
|
|
function Content() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const toggleModal = () => setIsOpen(!isOpen);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape' && isOpen)
|
|
setIsOpen(false);
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [isOpen]);
|
|
|
|
const marqueeText = "✧ ꒰ა˵• ﻌ •˵ა꒱ ✧ ฅ^•ﻌ•^ฅ ✧ ᶻ 𝗓 𐰁 /ᐠ. ｡ .ᐟ\\ ✧ ฅ/ᐠ. ̫ .ᐟ\\ฅ ✧ ꒰ა≽^•⩊•^≼໒꒱ ✧ ₍˄·͈༝·͈˄₎ ✧ /ᐠ. ⩊ .ᐟ\\ﾉ ✧ 𓏲ּ ֶָ ࣪ /ᐠ .ᆺ. ᐟ\\ﾉ ✧";
|
|
|
|
return (
|
|
<>
|
|
<div className="main-frame">
|
|
<a href="/niko" className="decorative-sparkle" title="✧" style={{ left: '10px' }}>✧</a>
|
|
<a href="/fear" className="decorative-sparkle" title="✧" style={{ right: '10px' }}>✧</a>
|
|
|
|
<header>
|
|
<h1>neru</h1>
|
|
<p className="motto">˚₊‧꒰ა 𓂋 ໒꒱ ‧₊˚</p>
|
|
</header>
|
|
|
|
<nav className="social-links">
|
|
<a href={TWITTER_LINK} target="_blank" rel="noopener noreferrer">twitter</a> •
|
|
<button onClick={toggleModal}>discord</button> •
|
|
<a href={STEAM_LINK} target="_blank" rel="noopener noreferrer">steam</a>
|
|
</nav>
|
|
|
|
<section className="content-box">
|
|
<h2 className="title">✧ discord ✧</h2>
|
|
<DiscordStatus userId={DISCORD_ID} />
|
|
</section>
|
|
|
|
<section className="content-box">
|
|
<h2 className="title">✧ projects im currently working on ✧</h2>
|
|
<ul className="directory">
|
|
<li><a href="https://git.neru.rip/neru/seallib" target="_blank" rel="noopener noreferrer">seallib</a></li>
|
|
<li><a href="https://git.neru.rip/neru/tinymitm" target="_blank" rel="noopener noreferrer">tinymitm</a></li>
|
|
<li><a href="https://git.neru.rip/neru/luma" target="_blank" rel="noopener noreferrer">luma</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section className="content-box">
|
|
<h2 className="title">✧ sites ✧</h2>
|
|
<ul className="directory">
|
|
<li><a href="https://git.neru.rip" target="_blank" rel="noopener noreferrer">gitea</a></li>
|
|
<li><a href="https://zl.neru.rip" target="_blank" rel="noopener noreferrer">zipline</a></li>
|
|
<li><a href="https://files.neru.rip" target="_blank" rel="noopener noreferrer">files</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section className="content-box">
|
|
<h2 className="title">✧ dumb stuff ✧</h2>
|
|
<ul className="directory">
|
|
<li><a href="discord://-/apps">break discord</a></li>
|
|
<li><a href="discord://-/channels/@me/">fix discord</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<footer>
|
|
<div className="marquee">
|
|
<div className="marquee-track">
|
|
<span>{marqueeText}</span>
|
|
<span>{marqueeText}</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
{isOpen && (
|
|
<div className="modal-overlay" onClick={toggleModal}>
|
|
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
|
<div className="modal-header">✧ discord info ✧</div>
|
|
<div className="modal-body">
|
|
<p><strong>User:</strong> {DISCORD_USER}</p>
|
|
<p><strong>ID:</strong> {DISCORD_ID}</p>
|
|
</div>
|
|
<button className="modal-close-btn" onClick={toggleModal}>[ close ]</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function Home() {
|
|
return (
|
|
<Content />
|
|
)
|
|
} |