Fixed the ui for mobile and fixed some visual ui bugs for the modals

src/App.css

@@ -9,11 +9,12 @@ body {
 
 .about-container {
   text-align: center;
+  margin-top: 5vh;
 }
 
 .typewriter-text {
   font-family: 'Courier New', monospace;
-  font-size: 3rem;
+  font-size: clamp(2rem, 5vw, 3rem);
   background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
   -webkit-background-clip: text;
   background-clip: text;
@@ -71,23 +72,30 @@ body {
 .social-cards {
   margin-top: 3rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
-  gap: 2rem;
+  gap: 1rem;
   padding: 0 2rem;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
+  justify-content: center;
 }
 
 .social-card {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 16px;
-  padding: 2rem;
+  justify-content: center;
   text-decoration: none;
   color: white !important;
   transition: all 0.3s ease;
   border: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
+  width: 200px;
+  height: 200px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .social-card:hover {
@@ -110,7 +118,7 @@ body {
   flex-direction: column;
   align-items: center;
   text-align: center;
-  gap: 1rem;
+  gap: 0rem;
 }
 
 .social-card-icon {
@@ -122,18 +130,18 @@ body {
 
 .social-card h3 {
   margin: 0;
-  font-size: 1.5rem;
+  font-size: clamp(1.2rem, 3vw, 1.5rem);
   font-weight: 600;
 }
 
 .social-card p {
   margin: 0;
   color: rgba(255, 255, 255, 0.7);
-  font-size: 1rem;
+  font-size: clamp(0.9rem, 2.5vw, 1rem);
 }
 
 .animated-paragraph {
-  font-size: 1.15rem;
+  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
   color: #e0e0e0;
   margin: 24px 0 32px 0;
   text-align: center;
@@ -142,6 +150,7 @@ body {
   margin-right: auto;
   letter-spacing: 0.01em;
   line-height: 1.6;
+  padding: 0 1rem;
 }
 
 .animated-paragraph .cursor {
@@ -167,13 +176,11 @@ body {
 .modal-content {
   background: rgba(35, 39, 47, 0.85);
   border-radius: 16px;
-  padding: 32px 24px 24px 24px;
   box-shadow: 0 8px 32px rgba(0,0,0,0.45);
   position: relative;
-  min-width: 340px;
+  width: 90%;
   max-width: 380px;
-  width: 100%;
+  padding: 2.5rem 1.5rem 1.5rem 1.5rem;
-  max-height: 90vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -182,39 +189,35 @@ body {
   -webkit-backdrop-filter: blur(16px);
 }
 
-.modal-image {
-  max-width: 320px;
-  width: 100%;
-  height: auto;
-  border-radius: 12px;
-  margin-bottom: 16px;
-  background: #fff;
-}
-
-.modal-caption {
-  color: #e0e0e0;
-  font-size: 1.1rem;
-  margin-top: 8px;
-  text-align: center;
-}
-
 .modal-close {
   position: absolute;
-  top: 12px;
+  top: 8px;
-  right: 16px;
+  right: 8px;
   background: none;
   border: none;
-  font-size: 2rem;
+  font-size: 1.5rem;
   color: #aaa;
   cursor: pointer;
   transition: color 0.2s;
+  padding: 8px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .modal-close:hover {
   color: #EA4335;
 }
 
-.discord-tag-row {
+.modal-caption {
+  color: #e0e0e0;
+  font-size: 1.1rem;
+  margin-top: 0.5rem;
+  text-align: center;
+}
+
+.modal-tag-row {
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -222,7 +225,7 @@ body {
   margin-top: 8px;
 }
 
-.discord-tag {
+.modal-tag {
   font-size: 1.3rem;
   font-family: 'Courier New', monospace;
   color: #e0e0e0;
@@ -233,7 +236,7 @@ body {
   letter-spacing: 0.03em;
 }
 
-.copy-btn {
+.modal-copy-btn {
   background: #5865F2;
   color: #fff;
   border: none;
@@ -245,7 +248,32 @@ body {
   font-family: inherit;
 }
 
-.copy-btn:hover, .copy-btn:focus {
+.modal-copy-btn:hover, .modal-copy-btn:focus {
   background: #4752c4;
   color: #fff;
 }
+
+.modal-qr {
+  width: 100%;
+  max-width: 280px;
+  height: auto;
+  border-radius: 12px;
+  margin: 0.5rem 0 1rem 0;
+}
+
+@media (max-width: 1000px) {
+  .social-cards {
+    grid-template-columns: 200px;
+    padding: 0rem 0;
+    margin-bottom: 5vh;
+  }
+  
+  .modal-content {
+    width: 85%;
+    padding: 2rem 1rem 1rem 1rem;
+  }
+
+  .modal-qr {
+    max-width: 240px;
+  }
+}

src/App.tsx

@@ -69,14 +69,24 @@ function SocialCard({ title, icon, description, href, onClick }: {
   )
 }
 
-function SignalPopup({ show, onClose }: { show: boolean, onClose: () => void }) {
+function SignalPopup({ show, onClose, username }: { show: boolean, onClose: () => void, username: string }) {
+  const [copied, setCopied] = useState(false)
   if (!show) return null
+  const handleCopy = () => {
+    navigator.clipboard.writeText(username)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1200)
+  }
   return (
     <div className="modal-backdrop" onClick={onClose}>
       <div className="modal-content" onClick={e => e.stopPropagation()}>
         <button className="modal-close" onClick={onClose}>&times;</button>
-        <img src="/shikoro-signal.png" alt="Signal QR" className="modal-image" />
+        <img src="/shikoro-signal.png" alt="Signal QR" className="modal-qr" />
-        <div className="modal-caption">Scan to chat with me on Signal!</div>
+        <div className="modal-tag-row">
+          <span className="modal-tag">{username}</span>
+          <button className="modal-copy-btn" onClick={handleCopy}>{copied ? 'Copied!' : 'Copy'}</button>
+        </div>
+        <div className="modal-caption">Scan or use Username!</div>
       </div>
     </div>
   )
@@ -94,11 +104,10 @@ function DiscordPopup({ show, onClose, tag }: { show: boolean, onClose: () => vo
     <div className="modal-backdrop" onClick={onClose}>
       <div className="modal-content" onClick={e => e.stopPropagation()}>
         <button className="modal-close" onClick={onClose}>&times;</button>
-        <img src="/discord-logo.png" alt="Discord Logo" className="modal-image" style={{background:'#5865F2',padding:'16px'}} />
+        <div className="modal-caption" style={{marginBottom:'12px'}}>My Discord Tag:</div>
-        <div className="modal-caption" style={{marginBottom:'12px'}}>Add me on Discord:</div>
+        <div className="modal-tag-row">
-        <div className="discord-tag-row">
+          <span className="modal-tag">{tag}</span>
-          <span className="discord-tag">{tag}</span>
+          <button className="modal-copy-btn" onClick={handleCopy}>{copied ? 'Copied!' : 'Copy'}</button>
-          <button className="copy-btn" onClick={handleCopy}>{copied ? 'Copied!' : 'Copy'}</button>
         </div>
       </div>
     </div>
@@ -142,10 +151,10 @@ function App() {
           href="#"
         />
       </div>
-      <SignalPopup show={showSignalPopup} onClose={() => setShowSignalPopup(false)} />
+      <SignalPopup show={showSignalPopup} onClose={() => setShowSignalPopup(false)} username="shikoro.31" />
       <DiscordPopup show={showDiscordPopup} onClose={() => setShowDiscordPopup(false)} tag="shikoro.1" />
     </div>
   )
 }
 
-export default App
+export default App