fix: wrong default state for modal

src/app/page.css

@@ -16,7 +16,7 @@
 	--pink-accent: #ffd6f5;
 
 	--sparkle: #ffffff;
-	--sparkle-glow: rgba(120, 150, 200, 0.555);
+	--sparkle-glow: rgba(0, 100, 255, 0.555);
 
 	--border-width: 2px;
 }
@@ -108,7 +108,7 @@ body {
 	text stuffs
 */
 h1 {
-	font-size: 2.5rem;
+	font-size: 1.5rem;
 	letter-spacing: -1px;
 	color: var(--text-header);
 	text-transform: lowercase;
@@ -218,4 +218,74 @@ h1 {
 	100% {
 		transform: translate(-100%, 0);
 	}
-}
+}
+
+/*
+	modal
+*/
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(2px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    animation: fadeIn 0.3s ease;
+}
+
+.modal-content {
+    background: var(--surface);
+    padding: 25px;
+    border: 1px ridge var(--pink-accent);
+    outline: 1px solid var(--accent);
+    box-shadow: 8px 8px 0px var(--pink-accent);
+    text-align: center;
+    min-width: 250px;
+}
+
+.modal-header {
+    color: var(--text-title);
+    font-size: 1.1rem;
+    margin-bottom: 15px;
+    border-bottom: 1px double var(--accent);
+    padding-bottom: 5px;
+}
+
+.modal-body p {
+    font-size: 0.9rem;
+    margin: 8px 0;
+    color: var(--text-main);
+}
+
+.modal-close-btn {
+    background: none;
+    border: none;
+    margin-top: 15px;
+    font-family: inherit;
+    font-size: 0.7rem;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+.modal-close-btn:hover {
+    color: var(--text-title-shadow);
+    letter-spacing: 2px;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes popIn {
+    from { transform: scale(0.8); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}

src/app/page.tsx

@@ -1,38 +1,43 @@
 'use client';
 
+import { useState } from 'react';
 import './page.css';
 
 const TWITTER_LINK = "https://x.com/neruu444"
-const DISCORD_INFO = "username: neru444 - id: 1104474057916809226"
+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);
+
 	return (
 		<>
 			<div className="main-frame">
 				<header>
-					<h1>neru.rip</h1>
+					<h1>neru</h1>
 					<p className="motto">˚₊‧꒰ა 𓂋 ໒꒱ ‧₊˚</p>
-					{/* <div style={{ color: 'var(--accent)' }}>† —————————————— †</div> */}
 				</header>
 
 				<nav className="social-links">
 					<a href={TWITTER_LINK}>twitter</a> •
-					<a onClick={() => alert(DISCORD_INFO)} style={{ cursor: 'pointer' }}>discord</a> •
+					<a onClick={toggleModal}>discord</a> •
 					<a href={STEAM_LINK} style={{ cursor: 'pointer' }}>steam</a> •
 					<a href="https://git.neru.rip/neru">projects</a>
 				</nav>
 
 				<section className="content-box">
 					<h2 className="title">✧ luma ✧</h2>
-					<p style={{ fontSize: '0.9rem' }}>a rly barebones TTS bot that sometimes works</p>
+					<p style={{ fontSize: '0.9rem' }}>a rly barebones TTS discord bot that sometimes works</p>
 					<a href="https://discord.com/api/oauth2/authorize?client_id=1459513087278186567&scope=applications.commands+bot&permissions=70643692457024" className="invite-btn">
-						[ click to invite ]
+						[ add to server ]
 					</a>
 				</section>
 
 				<section className="content-box">
-					<h2 className="title">✧ services ✧</h2>
+					<h2 className="title">✧ sites ✧</h2>
 					<ul className="directory">
 						<li><a href="https://git.neru.rip">gitea</a></li>
 						<li><a href="https://zl.neru.rip">zipline</a></li>
@@ -40,12 +45,34 @@ function Content() {
 					</ul>
 				</section>
 
+				<section className="content-box">
+					<h2 className="title">✧ dum 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">
 						<span>✧ ꒰ა˵• ﻌ •˵ა꒱ ✧ ฅ^•ﻌ•^ฅ ✧ ᶻ 𝗓 𐰁 /ᐠ. ｡ .ᐟ\ ✧ ฅ/ᐠ. ̫ .ᐟ\ฅ ✧ ꒰ა≽^•⩊•^≼໒꒱ ✧ ₍˄·͈༝·͈˄₎ ✧ /ᐠ. ⩊ .ᐟ\ﾉ ✧ 𓏲ּ ֶָ ࣪ /ᐠ .ᆺ. ᐟ\ﾉ ✧</span>
 					</div>
 					{/* <p style={{ fontSize: '0.65rem', opacity: 0.5 }}>✼　 ҉ 　✼　 ҉ 　✼　 ҉ 　✼</p> */}
 				</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>
 		</>
 	);