From 0cdb322227af5a7a1f9880442082cb04ea47c17f Mon Sep 17 00:00:00 2001
From: yude <i@yude.jp>
Date: Mon, 22 Jan 2024 18:43:54 +0900
Subject: [PATCH] Update responsive behaviour

---
 src/App.tsx             | 22 +++++++++++-----------
 src/components/Card.tsx | 14 ++++++++++++++
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5b7feb3..17cc2bf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import Card from "./components/Card"
 import Profile from "./components/Profile"
-import Works from "./components/Works"
+import Links from "./components/Links"
 
 import { useState, useEffect } from 'react';
 
@@ -43,21 +43,21 @@ export default function App() {
   }, []);
 
   return (
-    <>
-      <div className={`sticky top-0 -z-10 h-screen absolute`} style={{ opacity: cardOpacity }}>
-        <div id="card" className="fixed w-full z-10 bg-neutral-900 py-5" style={{ top: `${cardY}px` }}>
+    <div className="flex justify-center">
+      <div className={`sticky top-0 h-screen absolute`} style={{ opacity: cardOpacity }}>
+        <div id="card" className="fixed bg-neutral-900 py-5 -ml-40 -mt-20" style={{ top: `${cardY}px` }}>
           <Card />
         </div>
       </div>
         
-      <div id="content" className="absolute z-10 text-white m-auto left-0 right-0 max-w-6xl p-5" style={{ top: `${contentY}px`}}>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5 w-full">
-            <Profile />
-            <Works />
-          </div>
+      <div id="content" className="absolute text-white max-w-6xl" style={{ top: `${contentY}px`}}>
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-5 w-full">
+          <Profile />
+          <Links />
+        </div>
 
-          <div className="text-center text-gray-500">&copy; 2024 yude</div>
+        <div className="text-center text-gray-500">&copy; 2024 yude</div>
       </div>
-    </>
+    </div>
   )
 }
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 0241de5..fcc3147 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
 import { faPhone } from '@fortawesome/free-solid-svg-icons'
+import { faXTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
 
 export default function Card() {
     return (
@@ -20,6 +21,19 @@ export default function Card() {
                     <p className="font-mono left-0.5 relative">
                         <FontAwesomeIcon icon={faPhone} /> +81 70-8909-1949
                     </p>
+                    <p className="font-mono left-0.5 relative">
+                        <a href="https://x.com/yude_jp">
+                            <FontAwesomeIcon icon={faXTwitter} /> @yude_jp
+                        </a>
+                    </p>
+                    <p className="font-mono left-0.5 relative">
+                        <FontAwesomeIcon icon={faDiscord} /> <span className="-ml-1">yude</span>
+                    </p>
+                    <p className="font-mono left-0.5 relative">
+                        <a href="https://github.com/yude">
+                            <FontAwesomeIcon icon={faGithub} /> yude
+                        </a>
+                    </p>
                 </div>
             </div>
         </div>