From e86f1e4bc2105f2486f3cb07dcbb531b8a04c421 Mon Sep 17 00:00:00 2001
From: yudete <yudesleepy@gmail.com>
Date: Thu, 16 Apr 2020 10:55:18 +0900
Subject: [PATCH] Added particles.js

---
 public/assets/javascript/app.js | 126 ++++++++++++++++++++++++++++
 public/index.html               | 141 +++++++++++++++++++-------------
 public/misc.html                |  29 +++++--
 3 files changed, 233 insertions(+), 63 deletions(-)
 create mode 100644 public/assets/javascript/app.js

diff --git a/public/assets/javascript/app.js b/public/assets/javascript/app.js
new file mode 100644
index 0000000..bb2527b
--- /dev/null
+++ b/public/assets/javascript/app.js
@@ -0,0 +1,126 @@
+/* -----------------------------------------------
+/* How to use? : Check the GitHub README
+/* ----------------------------------------------- */
+
+/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
+/*
+particlesJS.load('particles-js', 'particles.json', function() {
+  console.log('particles.js loaded - callback');
+});
+*/
+
+/* Otherwise just put the config content (json): */
+
+particlesJS('particles-js',
+
+  {
+    "particles": {
+      "number": {
+        "value": 80,
+        "density": {
+          "enable": true,
+          "value_area": 800
+        }
+      },
+      "color": {
+        "value": "#ffffff"
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 0,
+          "color": "#000000"
+        },
+        "polygon": {
+          "nb_sides": 5
+        },
+        "image": {
+          "src": "img/github.svg",
+          "width": 100,
+          "height": 100
+        }
+      },
+      "opacity": {
+        "value": 0.5,
+        "random": false,
+        "anim": {
+          "enable": false,
+          "speed": 1,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 3,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 40,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 150,
+        "color": "#ffffff",
+        "opacity": 0.4,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 6,
+        "direction": "none",
+        "random": false,
+        "straight": false,
+        "out_mode": "out",
+        "bounce": false,
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 1200
+        }
+      }
+    },
+    "interactivity": {
+      "detect_on": "canvas",
+      "events": {
+        "onhover": {
+          "enable": false,
+          "mode": "repulse"
+        },
+        "onclick": {
+          "enable": false,
+          "mode": "push"
+        },
+        "resize": true
+      },
+      "modes": {
+        "grab": {
+          "distance": 400,
+          "line_linked": {
+            "opacity": 1
+          }
+        },
+        "bubble": {
+          "distance": 400,
+          "size": 40,
+          "duration": 2,
+          "opacity": 8,
+          "speed": 3
+        },
+        "repulse": {
+          "distance": 200,
+          "duration": 0.4
+        },
+        "push": {
+          "particles_nb": 4
+        },
+        "remove": {
+          "particles_nb": 2
+        }
+      }
+    },
+    "retina_detect": true
+  }
+);
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 9046ea3..fd54208 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,7 +15,8 @@
         body {
             font-family: "Noto Sans JP";
             margin-top: 100px;
-            text-align: center
+            text-align: center;
+            background-color: black
         }
 
         a {
@@ -23,6 +24,26 @@
             color: black
         }
 
+        #particles-js canvas {
+            display: block;
+            vertical-align: bottom;
+            -webkit-transform: scale(1);
+            -ms-transform: scale(1);
+            transform: scale(1);
+            opacity: 1;
+            -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
+            transition: opacity .8s ease, transform 1.4s ease
+        }
+
+        #particles-js {
+            width: 100%;
+            height: 100%;
+            position: fixed;
+            z-index: -10;
+            top: 0;
+            left: 0
+        }
+
         @keyframes r1 {
             0% {
                 transform: rotate(0deg);
@@ -36,65 +57,73 @@
 </head>
 
 <body>
-
-    <div class="contents">
-        <img src="assets/images/avatar.jpg"
-            style="animation: r1 5s linear infinite;;min-width:64px;max-width:128px;border-radius: 50%">
-        <p style="font-size: 1.5em">yude</p>
-        <p><i class="fas fa-map-marker-alt"></i>&ensp;Hiroshima, Japan</p>
-        <p style="margin-top: -1em"><i class="fas fa-birthday-cake"></i>&ensp;November 19th, 2001 <span
-                style="display: inline-block">(18 y/o)</span></p>
-        <p style="margin-top: -1em"><i class="fas fa-school"></i>&ensp;Hiroshima City Univ.</p>
-        <div style="margin-top: 1em">
-            <div class="pure-g">
-                <div class="pure-u-1-5"></div>
-                <div class="pure-g pure-u-3-5">
-                    <div class="pure-u-4-24" style="min-width: 90px">
-                        <p><i class="fab fa-discord" style="font-size:1.5em"></i></p>
-                        <p style="margin-top: -1em; text-align:center">yude#3205</p>
-                    </div>
-                    <div class="pure-u-4-24" style="min-width: 90px">
-                        <p><i class="fab fa-twitter" style="font-size:1.5em"></i></p>
-                        <p style="margin-top: -1em"><a href="https://twitter.com/yudete">@yudete</a></p>
-                    </div>
-                    <div class="pure-u-4-24" style="min-width: 90px">
-                        <p><i class="fab fa-github" style="font-size:1.5em"></i></p>
-                        <p style="margin-top: -1em"><a href="https://github.com/yudete">yudete</a></p>
-                    </div>
-                    <div class="pure-u-4-24" style="min-width: 90px">
-                        <p><i class="fab fa-steam" style="font-size:1.5em"></i></p>
-                        <p style="margin-top: -1em"><a href="https://steamcommunity.com/id/yudete">yudete</a></p>
-                    </div>
-                    <div class="pure-u-4-24" style="min-width: 90px">
-                        <p><i class="fas fa-envelope" style="font-size:1.5em"></i></p>
-                        <p style="margin-top: -1em"><a href="mailto:yu@yude.moe">yu@yude.moe</a></p>
-                    </div>
-                    <div class="pure-u-4-24" style="min-width: 90px">
-                        <p><i class="fab fa-keybase" style="font-size:1.5em"></i></p>
-                        <p style="margin-top: -1em"><a href="https://keybase.io/yude">yude</a></p>
-                    </div>
-                    <div class="pure-u-4-24" style="min-width: 90px">
-                        <p><i class="fab fa-instagram" style="font-size:1.5em"></i></p>
-                        <p style="margin-top: -1em"><a href="https://instagram.com/yude.moe">yude.moe</a></p>
-                    </div>
-                    <div class="pure-u-4-24" style="min-width: 90px">
-                        <p><i class="fas fa-book" style="font-size:1.5em"></i></p>
-                        <p style="margin-top: -1em"><a href="https://blog.yude.moe">yude's blog</a></p>
-                    </div>
-                    <div class="pure-u-4-24" style="min-width: 90px">
-                        <p><i class="fab fa-twitch" style="font-size:1.5em"></i></p>
-                        <p style="margin-top: -1em"><a href="https://twitch.tv/yude1119">yude1119</a></p>
-                    </div>
-                    <div class="pure-u-4-24" style="min-width: 90px">
-                        <p><i class="fab fa-youtube" style="font-size:1.5em"></i></p>
-                        <p style="margin-top: -1em"><a href="https://youtube.com/c/yudete">yudete</a></p>
+    <div id="particles-js"></div>
+    <div class="pure-g">
+        <div class="pure-u-2-24"></div>
+        <div class="pure-g pure-u-20-24"
+            style="box-shadow:0px 0px 6px 3px #b0b0b0;border-radius:6px;background-color:white">
+            <div style="height: 10px"></div>
+            <img src="assets/images/avatar.jpg"
+                style="animation: r1 5s linear infinite;;min-width:64px;max-width:128px;border-radius: 50%;pointer-events: none;">
+            <p style="font-size: 1.5em">yude</p>
+            <p><i class="fas fa-map-marker-alt"></i>&ensp;Hiroshima, Japan</p>
+            <p style="margin-top: -1em"><i class="fas fa-birthday-cake"></i>&ensp;November 19th, 2001 <span
+                    style="display: inline-block">(18 y/o)</span></p>
+            <p style="margin-top: -1em"><i class="fas fa-school"></i>&ensp;Hiroshima City Univ.</p>
+            <div style="margin-top: 1em">
+                <div class="pure-g">
+                    <div class="pure-u-4-24"></div>
+                    <div class="pure-g pure-u-16-24">
+                        <div class="pure-u-4-24" style="min-width: 90px">
+                            <p><i class="fab fa-discord" style="font-size:1.5em"></i></p>
+                            <p style="margin-top: -1em; text-align:center">yude#3205</p>
+                        </div>
+                        <div class="pure-u-4-24" style="min-width: 90px">
+                            <p><i class="fab fa-twitter" style="font-size:1.5em"></i></p>
+                            <p style="margin-top: -1em"><a href="https://twitter.com/yudete">@yudete</a></p>
+                        </div>
+                        <div class="pure-u-4-24" style="min-width: 90px">
+                            <p><i class="fab fa-github" style="font-size:1.5em"></i></p>
+                            <p style="margin-top: -1em"><a href="https://github.com/yudete">yudete</a></p>
+                        </div>
+                        <div class="pure-u-4-24" style="min-width: 90px">
+                            <p><i class="fab fa-steam" style="font-size:1.5em"></i></p>
+                            <p style="margin-top: -1em"><a href="https://steamcommunity.com/id/yudete">yudete</a></p>
+                        </div>
+                        <div class="pure-u-4-24" style="min-width: 90px">
+                            <p><i class="fas fa-envelope" style="font-size:1.5em"></i></p>
+                            <p style="margin-top: -1em"><a href="mailto:yu@yude.moe">yu@yude.moe</a></p>
+                        </div>
+                        <div class="pure-u-4-24" style="min-width: 90px">
+                            <p><i class="fab fa-keybase" style="font-size:1.5em"></i></p>
+                            <p style="margin-top: -1em"><a href="https://keybase.io/yude">yude</a></p>
+                        </div>
+                        <div class="pure-u-4-24" style="min-width: 90px">
+                            <p><i class="fab fa-instagram" style="font-size:1.5em"></i></p>
+                            <p style="margin-top: -1em"><a href="https://instagram.com/yude.moe">yude.moe</a></p>
+                        </div>
+                        <div class="pure-u-4-24" style="min-width: 90px">
+                            <p><i class="fas fa-book" style="font-size:1.5em"></i></p>
+                            <p style="margin-top: -1em"><a href="https://blog.yude.moe">yude's blog</a></p>
+                        </div>
+                        <div class="pure-u-4-24" style="min-width: 90px">
+                            <p><i class="fab fa-twitch" style="font-size:1.5em"></i></p>
+                            <p style="margin-top: -1em"><a href="https://twitch.tv/yude1119">yude1119</a></p>
+                        </div>
+                        <div class="pure-u-4-24" style="min-width: 90px">
+                            <p><i class="fab fa-youtube" style="font-size:1.5em"></i></p>
+                            <p style="margin-top: -1em"><a href="https://youtube.com/c/yudete">yudete</a></p>
+                        </div>
                     </div>
+                    <div class="pure-u-4-24"></div>
                 </div>
-                <div class="pure-u-1-5"></div>
+                <p><a href="misc.html">Misc</a></p>
             </div>
-            <p><a href="misc">Misc</a></p>
+            <div class="pure-u-2-24"></div>
         </div>
-
+        <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.js"
+            integrity="sha256-icjghcPaibMf1jv4gQIGi5MeWNHem2SispcorCiCfSg=" crossorigin="anonymous"></script>
+        <script src="assets/javascript/app.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/misc.html b/public/misc.html
index 09c9920..7d7e37c 100644
--- a/public/misc.html
+++ b/public/misc.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>yude</title>
+    <title>Misc ・ yude</title>
     <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
     <link rel="shortcut icon" href="assets/images/favicon.ico">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
@@ -23,6 +23,14 @@
             color: black
         }
 
+        li {
+            margin-top: 6px
+        }
+
+        code {
+            background-color: #F4A7B9;
+            color: #D0104C
+        }
 
         @keyframes r1 {
             0% {
@@ -40,7 +48,7 @@
 
     <div class="contents">
         <p><a href="../">Return to the previous page</a></p>
-        <p>Links</p>
+        <p style="margin-bottom: -10px"><u>Links</u></p>
         <ul>
             <li>Twitter <a href="https://twitter.com/lucknetter"><code>@lucknetter</code></a></li>
             <li>Twitter <a href="https://twitter.com/yudekey"><code>@yudekey</code></a></li>
@@ -128,13 +136,13 @@
             <li>Cent <a href="https://beta.cent.co/@yude"><code>@yude</code></a></li>
             <li>Minds <a href="https://www.minds.com/yude"><code>yude</code></a></li>
         </ul>
-        <p>Played games</p>
-        <p>Popular</p>
+        <p style="margin-bottom: -10px"><u>Played games</u></p>
+        <p style="margin-bottom: -10px">Popular</p>
         <ul>
             <li><a href="https://minecraft.net">Minecraft (Mojang)</a></li>
             <li><a href="https://osu.ppy.sh">osu! (peppy / Dean Herbert)</a></li>
         </ul>
-        <p>Steam</p>
+        <p style="margin-bottom: -10px">Steam</p>
         <ul>
             <li><a href="http://www.7daystodie.com/">7 Days to Die (The Fun Pimps)</a></li>
             <li><a href="https://store.steampowered.com/app/346110/ARK_Survival_Evolved/?l=japanese">ARK: Survival
@@ -169,7 +177,7 @@
             <li><a href="https://store.steampowered.com/app/493340/Planet_Coaster/?l=japanese">Planet Coaster (Frontier
                     Developments)</a></li>
         </ul>
-        <p>Visual Novels</p>
+        <p style="margin-bottom: -10px">Visual Novels</p>
         <ul>
             <li><a href="http://qualia.clearrave.co.jp/top.html">オトメ＊ドメイン (ぱれっとクオリア)</a></li>
             <li><a href="http://www.yuzu-soft.com/new/product/sothewitch/">サノバウィッチ (ゆずソフト)</a></li>
@@ -177,12 +185,19 @@
             <li><a href="http://palette.clearrave.co.jp/product/sakusaku/">恋がさくころ桜どき (ぱれっと)</a></li>
             <li><a href="http://palette.clearrave.co.jp/product/mashiro/">ましろ色シンフォニー-Love is pure white- (ぱれっと)</a></li>
         </ul>
-        <p>東方Project</p>
+        <p style="margin-bottom: -10px">東方Project</p>
         <ul>
             <li><a href="https://www16.big.or.jp/~zun/html/th07.html">東方妖々夢 〜 Perfect Cherry Blossom. (上海アリス幻樂団)</a>
             </li>
             <li><a href="https://www16.big.or.jp/~zun/html/th08top.html">東方永夜抄 〜 Imperishable Night. (上海アリス幻樂団)</a></li>
         </ul>
+        <p style="margin-bottom: -10px"><u>Credits</u></p>
+        <ul>
+            <li>Favicon / Avatar by <code><a href="https://twitter.com/xmnts">Minkasy</a></code>.</li>
+            <li>Background animation is provided by
+                <code><a href="https://vincentgarreau.com/particles.js/">particles.js</a></code>.
+            </li>
+        </ul>
     </div>
     </div>
 </body>