From ecd40ee3bba85fc16609ac26fd3ca787d39518df Mon Sep 17 00:00:00 2001
From: yude <yu@yude.moe>
Date: Sat, 6 Jun 2020 16:54:32 +0900
Subject: [PATCH] Updated its design & added Discord widget

---
 public/index.html | 125 +++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 106 insertions(+), 19 deletions(-)
diff --git a/public/index.html b/public/index.html
index 34c6e9d..00783a9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,38 +5,125 @@
     <meta charset="utf-8">
     <link rel="shortcut icon" href="assets/images/favicon.ico">
     <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
+        integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
     <title>yude.moe</title>
     <style>
         body {
             background-color: black;
-            color: white
+            color: white;
+            text-align: center;
+            font-family: 'Roboto Mono', monospace;
+        }
+
+        .flex {
+            padding: 2.5% 0;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+            );
+        }
+
+        .flex>* {
+            width: 8%;
+            font-size: 64px;
+            text-align: center;
         }
 
         a {
             color: white
         }
+
+        .load {
+            -webkit-animation: spin 4s linear infinite;
+            -moz-animation: spin 4s linear infinite;
+            -ms-animation: spin 4s linear infinite;
+            -o-animation: spin 4s linear infinite;
+            animation: spin 4s linear infinite;
+        }
+
+        @-webkit-keyframes spin {
+            0% {
+                -webkit-transform: rotate(0deg);
+            }
+
+            100% {
+                -webkit-transform: rotate(360deg);
+            }
+        }
+
+        @-moz-keyframes spin {
+            0% {
+                -moz-transform: rotate(0deg);
+            }
+
+            100% {
+                -moz-transform: rotate(360deg);
+            }
+        }
+
+        @-ms-keyframes spin {
+            0% {
+                -ms-transform: rotate(0deg);
+            }
+
+            100% {
+                -ms-transform: rotate(360deg);
+            }
+        }
+
+        @-o-keyframes spin {
+            0% {
+                -o-transform: rotate(0deg);
+            }
+
+            100% {
+                -o-transform: rotate(360deg);
+            }
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
     </style>
 </head>
 
 <body>
-
-    <img src="banner.png"><br>
-    For further information, please take a look at my <a href="https://scrapbox.io/yude">Scrapbox</a>.
-    <ul>
-        <li>Blog: <a href="https://blog.yude.moe">yude's blog</a></li>
-        <li>Twitter: <a href="https://twitter.com/yudete">@yudete</a><br></li>
-        <li>Discord: yude#3205<br></li>
-        <li>Scrapbox: <a href="https://scrapbox.io/yude">yude</a></li>
-        <li>GitHub: <a href="https://github.com/yudete">yudete</a></li>
-    </ul>
-    <a href="https://koronyan888.github.io/"><img width=234px src="../assets/images/koronyan888.png"
-            alt="ころにゃんのホームページ"></a>
-    <a href="https://taka-impact.github.io/"><img width=234px src="../assets/images/takakun_impact.png"
-            alt="こーげんやさい"></a>
-    <a href="https://exout.net/~kirby3ds/" target="_blank"><img width=234px
-            src="https://exout.net/~kirby3ds/link/bnr/bnr_234x60.png" alt="カービィ★KIRBYの家"></a>
-    <a href="https://pc7342.net/"><img src="https://pc7342.net/banner.png" width=200px height=40px
-            alt="pc7342's Site"></a>
+    <img src="assets/images/avatar.jpg" style="width:50%; border-radius: 50%" class="load">
+    <h1>yude.moe</h1>
+    <h3>こんにちは～～</h3>
+    <div style="margin-top: 20px" class="flex">
+        <div>
+            <a class="link" href="https://blog.yude.moe" data-tippy-content="https://blog.yude.moe"><i
+                    class="fas fa-blog"></i></a>
+        </div>
+        <div>
+            <a class="link" href="https://twitter.com/yudete" data-tippy-content="@yudete"><i
+                    class="fab fa-twitter"></i></a></div>
+        <div>
+            <a class="link" href="https://github.com/yudete" data-tippy-content="yudete"><i
+                    class="fab fa-github"></i></a></div>
+        <div>
+            <a class="link" href="https://keybase.io/yude" data-tippy-content="yude"><i class="fab fa-keybase"></i></a>
+        </div>
+    </div>
+    <p><span style="white-space:nowrap">For further information, </span>please take a
+        look at <span style="white-space:nowrap">my <a class="link" data-tippy-content="https://scrapbox.io/yude"
+                href="https://scrapbox.io/yude">Scrapbox</a>.</span></p>
+    <iframe src="https://discordapp.com/widget?id=550309736214691840&theme=dark" width="350" height="500"
+        allowtransparency="true" frameborder="0"></iframe>
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://unpkg.com/tippy.js@6"></script>
+    <script>
+        tippy('.link');
+    </script>
 </body>
 
 </html>
\ No newline at end of file
