Remove garbage

This reverts commit 7f2411b2f6.

docs/minecraft/en.md

@@ -14,16 +14,16 @@ You can destroy wood logs and ore blocks at once by destroying with sneaking.\
 ## Block protection
 You can protect your chests, doors, furnaces, etc. by pasting sign like the image below.\
 You can also create a shared block by writing the player ID across multiple lines. \
-![Chest Protection](/static/images/minecraft/lockette/chest.png)
+![Chest Protection](/images/minecraft/lockette/chest.png)
 ## Skills
 You can use skills powered by mcMMO.
 
 # Facility introduction
 ## Shrine (by shirachan_1204)
-![Shrine](/static/images/minecraft/shrine.png)
+![Shrine](/images/minecraft/shrine.png)
 ## Iron Golem Trap (by yude & kuwazi_)
-![Iron Golem Trap](/static/images/minecraft/golem_trap.png)
+![Iron Golem Trap](/images/minecraft/golem_trap.png)
 ## Huge field (by yude & kuwazi_)
-![Huge field](/static/images/minecraft/large_field.png)
+![Huge field](/images/minecraft/large_field.png)
 ## Giant sugar cane field  (by yude)
-![Giant sugar cane field ](/static/images/minecraft/sugarcane.png)
+![Giant sugar cane field ](/images/minecraft/sugarcane.png)

docs/minecraft/ja.md

@@ -13,16 +13,16 @@
 ## ブロックの保護
 看板を画像のように貼り付けることで、チェストやドア、かまどなどを保護できます。\
 複数行に渡ってプレイヤー ID を書くことで、共有ブロックを作ることもできます。\
-![Chest Protection](/static/images/minecraft/lockette/chest.png)
+![Chest Protection](/images/minecraft/lockette/chest.png)
 ## スキル
 mcMMO を導入しているので、プラグインによるスキルを利用できます。  
 
 # 施設紹介
 ## 神社 (by shirachan_1204)
-![神社](/static/images/minecraft/shrine.png)
+![神社](/images/minecraft/shrine.png)
 ## アイアンゴーレムトラップ (by yude & kuwazi_)
-![アイアンゴーレムトラップ](/static/images/minecraft/golem_trap.png)
+![アイアンゴーレムトラップ](/images/minecraft/golem_trap.png)
 ## 巨大畑 (by yude & kuwazi_)
-![巨大畑](/static/images/minecraft/large_field.png)
+![巨大畑](/images/minecraft/large_field.png)
 ## 巨大サトウキビ畑 (by yude)
-![巨大サトウキビ畑](/static/images/minecraft/sugarcane.png)
+![巨大サトウキビ畑](/images/minecraft/sugarcane.png)

docs/mutual/en.md

@@ -3,12 +3,12 @@ Publishing the website whose links to yude.jp.
 
 ## Link listing
 ### カービィ★KIRBYの家 `https://exout.net/~kirby3ds/`
-[![kirby3ds](/static/images/mutual/kirby3ds.png)](https://exout.net/~kirby3ds/)
+[![kirby3ds](/images/mutual/kirby3ds.png)](https://exout.net/~kirby3ds/)
 
 ### こーげんやさい `https://nona-takahara.github.io/`
-[![こーげんやさい](/static/images/mutual/nona-takahara.png)](https://nona-takahara.github.io/)
+[![こーげんやさい](/images/mutual/nona-takahara.png)](https://nona-takahara.github.io/)
 
 
 ## To those who want to link yude.jp
 Thank you! You can use the banner below to link this website.
-[![yude.jp](/static/images/banner_new.png)](https://yude.jp)
+[![yude.jp](/images/banner_new.png)](https://yude.jp)

docs/mutual/ja.md

@@ -3,12 +3,12 @@
 
 ## リンク一覧
 ### カービィ★KIRBYの家 `https://exout.net/~kirby3ds/`
-[![kirby3ds](/static/images/mutual/kirby3ds.png)](https://exout.net/~kirby3ds/)
+[![kirby3ds](/images/mutual/kirby3ds.png)](https://exout.net/~kirby3ds/)
 
 ### こーげんやさい `https://nona-takahara.github.io/`
-[![こーげんやさい](/static/images/mutual/nona-takahara.png)](https://nona-takahara.github.io/)
+[![こーげんやさい](/images/mutual/nona-takahara.png)](https://nona-takahara.github.io/)
 
 
 ## このサイトをリンクしてくださる方へ
 ありがとうございます！以下のバナーを使用して、この Web サイトをリンクすることができます。
-[![yude.jp](/static/images/banner_new.png)](https://yude.jp)
+[![yude.jp](/images/banner_new.png)](https://yude.jp)

pages/components/Footer/BlueRibbon.js

@@ -0,0 +1,19 @@
+// Next.js
+import Link from 'next/link'
+import Image from 'next/image'
+
+const happybusy = (props) => {
+  return (
+    <Link href="https://www.eff.org/pages/blue-ribbon-campaign">
+      <a>
+        <Image
+          src="/images/brstrip.gif"
+          width={150}
+          height={41}
+        />
+      </a>
+    </Link>
+  )
+}
+
+export default happybusy

pages/components/Footer/HappyBusy.js

@@ -0,0 +1,19 @@
+// Next.js
+import Link from 'next/link'
+import Image from 'next/image'
+
+const HappyBusy = (props) => {
+  return (
+    <Link href="https://sites.google.com/site/happybusy/">
+        <a>
+          <Image
+            src="/images/busy_banner.png"
+            width={200}
+            height={42}
+          />
+        </a>
+    </Link>
+  )
+}
+
+export default HappyBusy

pages/components/Layout.js

@@ -3,7 +3,7 @@ import "tailwindcss/tailwind.css";
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
-import Footer from "./Footer"
+import Footer from "./Footer/Footer"
 import Navbar from "./Navbar"
 
 const Layout = (props) => {
@@ -20,7 +20,7 @@ const Layout = (props) => {
     <div className="page">
       <Head>
         <title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
-        <link rel="icon" href="/static/images/favicon.ico" />
+        <link rel="icon" href="/images/favicon.ico" />
       </Head>
       <main>
       <Navbar />

pages/components/Menu/FontAwesomeMenu.js

@@ -0,0 +1,21 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const FontAwesomeMenu = (props) => {
+  const { icon, dest } = props
+
+  return (
+    <div>
+        <Link href={`${dest}`}>
+            <a>
+                <FontAwesomeIcon icon={icon} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" />
+            </a>
+        </Link>
+    </div>
+  )
+}
+
+export default FontAwesomeMenu

pages/components/Menu/MinecraftMenu.js

@@ -0,0 +1,18 @@
+// Next.js
+import Link from 'next/link'
+
+const MinecraftMenu = () => {
+  return (
+    <div>
+        <Link href="/minecraft">
+            <a>
+                <svg className="fill-current text-black dark:text-white w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.8 304.8">
+                    <path d="M 39.10262 126.138 L 39.16748 12.39574 L 152.7982 12.33506 L 266.4289 12.27438 L 266.4289 126.0773 L 266.4289 239.8803 L 152.7333 239.8803 L 39.03775 239.8803 L 39.10262 126.138 Z M 260.4857 126.0776 L 260.4857 18.55703 L 152.8628 18.55703 L 45.23985 18.55703 L 45.23985 126.0776 L 45.23985 233.5982 L 152.8628 233.5982 L 260.4857 233.5982 L 260.4857 126.0776 Z M 103.8963 162.9245 L 103.8963 126.0776 L 116.1702 126.0776 L 128.4441 126.0776 L 128.4441 113.8758 L 128.4441 101.674 L 152.8628 101.674 L 177.2814 101.674 L 177.2814 113.8758 L 177.2814 126.0776 L 189.3835 126.0776 L 201.4856 126.0776 L 201.6573 150.5415 C 201.7517 163.9967 201.829 180.5779 201.8291 187.3885 L 201.8293 199.7715 L 189.6869 199.7715 L 177.5446 199.7715 L 177.4776 187.5093 L 177.4106 175.2471 L 152.7982 175.1855 L 128.1857 175.1239 L 128.1857 187.4477 L 128.1857 199.7715 L 116.041 199.7715 L 103.8963 199.7715 L 103.8963 162.9245 Z M 79.34843 77.02888 L 79.34843 52.62534 L 103.7671 52.62534 L 128.1857 52.62534 L 128.1857 77.02888 L 128.1857 101.4324 L 103.7671 101.4324 L 79.34843 101.4324 L 79.34843 77.02888 Z M 177.5398 77.02888 L 177.5398 52.62534 L 201.9585 52.62534 L 226.3771 52.62534 L 226.3771 77.02888 L 226.3771 101.4324 L 201.9585 101.4324 L 177.5398 101.4324 L 177.5398 77.02888 Z"/>
+                </svg>
+            </a>
+        </Link>
+    </div>
+  )
+}
+
+export default MinecraftMenu

pages/components/Profile/Button.js

@@ -0,0 +1,23 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const Button = (props) => {
+    const { icon, dest, caption } = props
+    return (
+        <Link href={`${dest}`}>
+            <a>
+                <button
+                className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
+                type="button"
+                >
+                <FontAwesomeIcon icon={icon} className="w-5 h-5 inline"/> {caption}
+                </button>
+            </a>
+        </Link>
+    )
+}
+
+export default Button

pages/components/Profile/Contact.js

@@ -0,0 +1,21 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const Contact = (props) => {
+    const { icon, dest, caption } = props
+    return (
+        <div className="hover:underline">
+            <Link href={`${dest}`}>
+                <a>
+                    <FontAwesomeIcon icon={icon} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
+                    <p className="font-mono text-xl">{caption}</p>
+                </a>
+            </Link>
+        </div>
+    )
+}
+
+export default Contact

pages/components/Profile/NintendoSW.js

@@ -0,0 +1,35 @@
+// Next.js
+import Link from 'next/link'
+
+const NintendoSW = () => {
+    return (
+        <div className="hover:underline">
+            <Link href="#">
+                <a>
+                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" className="w-12 h-12 inline lg:w-12 lg:h-12 md:w-12 md:h-12 fill-current text-black dark:text-white" viewBox="0 0 700 700">
+                        <g transform="translate(-100.000000,900.000000) scale(0.100000,-0.100000)" fill="#FFFFF">
+                        <path d="M2965 8314 c-481 -86 -868 -442 -990 -910 -44 -169 -47 -268 -42
+                        -1579 3 -1204 4 -1232 24 -1325 111 -501 467 -858 973 -976 66 -15 150 -18
+                        691 -21 560 -4 618 -3 633 12 15 15 16 208 16 2396 0 1622 -3 2386 -10 2400
+                        -10 18 -27 19 -613 18 -476 -1 -619 -4 -682 -15z m905 -2400 l0 -2026 -407 5
+                        c-375 4 -415 6 -490 25 -322 83 -561 331 -628 654 -22 101 -22 2589 -1 2688
+                        60 281 255 514 518 619 132 53 193 59 621 60 l387 1 0 -2026z"/>
+                        <path d="M3051 7329 c-63 -12 -159 -60 -210 -105 -105 -91 -157 -220 -149
+                        -372 4 -79 9 -100 41 -164 47 -97 118 -168 215 -216 67 -33 84 -37 171 -40 79
+                        -3 107 0 160 18 217 73 348 284 311 500 -43 257 -287 429 -539 379z"/>
+                        <path d="M4757 8323 c-4 -3 -7 -1087 -7 -2409 0 -2181 1 -2402 16 -2408 27
+                        -10 803 -6 899 4 406 46 764 293 959 660 25 47 58 126 75 175 63 188 61 138
+                        61 1575 0 1147 -2 1318 -16 1391 -99 521 -496 914 -1018 1004 -70 12 -178 15
+                        -526 15 -240 0 -440 -3 -443 -7z m1068 -2178 c156 -41 284 -160 336 -312 33
+                        -94 32 -232 -1 -318 -61 -158 -181 -269 -335 -310 -250 -65 -516 86 -589 334
+                        -22 76 -21 204 4 282 75 245 335 389 585 324z"/>
+                        </g>
+                    </svg>
+                    <p className="font-mono text-xl">SW-5543-5143-8814</p>
+                </a>
+            </Link>
+        </div>
+    )
+}
+
+export default NintendoSW

pages/components/Profile/PublicKeys.js

@@ -40,7 +40,7 @@ export default function Modal() {
           <ul className="list-disc my-2">
           <li>
             <span className="font-bold">PGP&nbsp;</span>
-            <Link href="/static/yudejp.gpg">
+            <Link href="/yudejp.gpg">
               <a className="hover:underline">
                 <FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
                 {download}

pages/index.js

@@ -1,11 +1,27 @@
+// Load base layout
 import Layout from "./components/Layout"
+
+// Menu
+import FAMenu from "./components/Menu/FontAwesomeMenu"
+
+// Banner
+import BlueRibbon from "./components/Footer/BlueRibbon"
+import HappyBusy from "./components/Footer/HappyBusy"
+
+// Next.js
 import Link from 'next/link'
-import { faDiscord, faGit, faMastodon, faGithub } from '@fortawesome/free-brands-svg-icons'
-import { faBlog, faBook, faUser, faServer, faHouseUser, faHeart } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Image from 'next/image'
+
+// i18n
 import useTranslation from 'next-translate/useTranslation'
+
+// React Router
 import { useRouter } from 'next/router'
+import MinecraftMenu from "./components/Menu/MinecraftMenu"
+
+// Font Awesome
+import { faDiscord, faGit, faMastodon, faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faBlog, faBook, faUser, faServer, faHouseUser, faHeart, faHome } from '@fortawesome/free-solid-svg-icons'
 
 export default function Index(props) {
   const router = useRouter()
@@ -17,58 +33,34 @@ export default function Index(props) {
       <div className="my-9 text-center">
         <div className="m-10">
         <Image
-            src         = "/static/images/avatar.png"
+            src         = "/images/avatar.png"
             alt         = "yude's avatar"
             width       = {200}
             height      = {200}
             unoptimized = {true}
         />
         </div>
+        
+        {/* Index menu */}
         <div className="grid grid-cols-4 gap-10">
-        <div><Link href="/profile"><a><FontAwesomeIcon icon={faUser} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="/server"><a><FontAwesomeIcon icon={faServer} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="/house"><a><FontAwesomeIcon icon={faHouseUser} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="https://scrapbox.io/yude"><a><FontAwesomeIcon icon={faBook} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="https://discord.gg/X6srY7X"><a><FontAwesomeIcon icon={faDiscord} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="https://matrix.to/#/!oriLSKSTauvVrpdzZX:matrix.org?via=matrix.org"><a>
-        <svg version="1.1" viewBox="0 0 27.9 32" className="fill-current text-black dark:text-white w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110">
-         <g transform="translate(-.095 .005)">
-          <path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
-          <path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
-          <path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
-         </g>
-        </svg>
-        </a></Link></div>
-        <div><Link href="https://github.com/yudejp"><a><FontAwesomeIcon icon={faGithub} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="https://git.yude.jp"><a><FontAwesomeIcon icon={faGit} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="https://mstdn.yude.jp"><a><FontAwesomeIcon icon={faMastodon} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="/minecraft"><a>
-        <svg className="fill-current text-black dark:text-white w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.8 304.8">
-          <path d="M 39.10262 126.138 L 39.16748 12.39574 L 152.7982 12.33506 L 266.4289 12.27438 L 266.4289 126.0773 L 266.4289 239.8803 L 152.7333 239.8803 L 39.03775 239.8803 L 39.10262 126.138 Z M 260.4857 126.0776 L 260.4857 18.55703 L 152.8628 18.55703 L 45.23985 18.55703 L 45.23985 126.0776 L 45.23985 233.5982 L 152.8628 233.5982 L 260.4857 233.5982 L 260.4857 126.0776 Z M 103.8963 162.9245 L 103.8963 126.0776 L 116.1702 126.0776 L 128.4441 126.0776 L 128.4441 113.8758 L 128.4441 101.674 L 152.8628 101.674 L 177.2814 101.674 L 177.2814 113.8758 L 177.2814 126.0776 L 189.3835 126.0776 L 201.4856 126.0776 L 201.6573 150.5415 C 201.7517 163.9967 201.829 180.5779 201.8291 187.3885 L 201.8293 199.7715 L 189.6869 199.7715 L 177.5446 199.7715 L 177.4776 187.5093 L 177.4106 175.2471 L 152.7982 175.1855 L 128.1857 175.1239 L 128.1857 187.4477 L 128.1857 199.7715 L 116.041 199.7715 L 103.8963 199.7715 L 103.8963 162.9245 Z M 79.34843 77.02888 L 79.34843 52.62534 L 103.7671 52.62534 L 128.1857 52.62534 L 128.1857 77.02888 L 128.1857 101.4324 L 103.7671 101.4324 L 79.34843 101.4324 L 79.34843 77.02888 Z M 177.5398 77.02888 L 177.5398 52.62534 L 201.9585 52.62534 L 226.3771 52.62534 L 226.3771 77.02888 L 226.3771 101.4324 L 201.9585 101.4324 L 177.5398 101.4324 L 177.5398 77.02888 Z"/>
-        </svg>
-        </a></Link></div>
-        <div><Link href="/mutual"><a><FontAwesomeIcon icon={faHeart} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
+          <FAMenu dest="/profile" icon={faUser} />
+          <FAMenu dest="/server" icon={faServer} />
+          <FAMenu dest="/house" icon={faHouseUser} />
+          <FAMenu dest="https://scrapbox.io/yude" icon={faBook} />
+          <FAMenu dest="https://discord.gg/X6srY7X" icon={faDiscord} />          
+          <FAMenu dest="https://github.com/yudejp" icon={faGithub} />
+          <FAMenu dest="https://git.yude.jp" icon={faGit} />
+          <FAMenu dest="https://mstdn.yude.jp" icon={faMastodon} />
+          <MinecraftMenu />
+          <FAMenu dest="/mutual" icon={faHeart} />
         </div>
+        
+        {/* Banner */}
         <div className="mx-auto mt-10">
-          <Link href="https://www.eff.org/pages/blue-ribbon-campaign">
-            <a>
-              <Image
-                src="/static/images/brstrip.gif"
-                width={150}
-                height={41}
-              />
-            </a>
-          </Link>
-          <Link href="https://sites.google.com/site/happybusy/">
-            <a>
-              <Image
-                src="/static/images/busy_banner.png"
-                width={200}
-                height={42}
-              />
-            </a>
-          </Link>
+          <BlueRibbon />
+          <HappyBusy />
         </div>
+        
       </div>
     </Layout>
   )

pages/minecraft.js

@@ -26,7 +26,7 @@ export default function About(props) {
                 <p className="my-2 text-3xl text-center">{t('title')}</p>
                 <div className="w-full">
                 <Image
-                    src         = "/static/images/dynmap.png"
+                    src         = "/images/dynmap.png"
                     alt         = "Dynmap Header"
                     unoptimized = {true}
                     width       = {1354}

pages/profile.js

@@ -1,18 +1,32 @@
+// Base layout
 import Layout from "./components/Layout"
+
+// i18n
 import useTranslation from 'next-translate/useTranslation'
+
+// Font Awesome
 import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } from '@fortawesome/free-brands-svg-icons'
 import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faLink, faMobile } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+// Next.js, React
 import Link from 'next/link'
 import Image from 'next/image'
-import DiscordStatus from './components/DiscordStatus'
 import { useRouter } from 'next/router'
-import DiscordPlaying from './components/DiscordPlaying'
-import Spotify from './components/Spotify'
-import WakaTime from './components/WakaTime'
-import PublicKeys from './components/PublicKeys'
 
-export default function About(props) {
+// Discord
+import DiscordStatus from './components/Discord/DiscordStatus'
+import DiscordPlaying from './components/Discord/DiscordPlaying'
+
+// Custom component
+import Spotify from './components/Profile/Spotify'
+import WakaTime from './components/Profile/WakaTime'
+import PublicKeys from './components/Profile/PublicKeys'
+import Button from './components/Profile/Button'
+import Contact from './components/Profile/Contact'
+import NintendoSW from "./components/Profile/NintendoSW"
+
+export default function Profile(props) {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("profile")
@@ -29,7 +43,7 @@ export default function About(props) {
           <div className="flex mb-10 justify-center">
           <Image
             className   = "rounded-full hover:animate-rumble z-0 p-15"
-            src         = "/static/images/avatar.png"
+            src         = "/images/avatar.png"
             alt         = "yude's avatar"
             width       = {200}
             height      = {200}
@@ -77,94 +91,15 @@ export default function About(props) {
             <p className="text-2xl"><FontAwesomeIcon icon={faPhone} className="w-5 h-5 inline"/> {t('contact')}</p>
         </div>
         <div className="my-2 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2 justify-items-center gap-y-6">
-          <div className="hover:underline">
-            <Link href="https://twitter.com/yude_jp">
-            <a>
-            <FontAwesomeIcon icon={faTwitter} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">@yude_jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <a>
-            <FontAwesomeIcon icon={faDiscord} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude#3205</p>
-            </a>
-          </div>
-          <div className="hover:underline">
-            <Link href="mailto:i@yude.jp">
-            <a>
-            <FontAwesomeIcon icon={faEnvelope} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">i@yude.jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://github.com/yude">
-            <a>
-            <FontAwesomeIcon icon={faGithub} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://mstdn.yude.jp/@yude">
-            <a>
-            <FontAwesomeIcon icon={faMastodon} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">@yude@mstdn.yude.jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://keybase.io/yude">
-            <a>
-            <FontAwesomeIcon icon={faKeybase} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://instagram.com/yude.jp">
-            <a>
-            <FontAwesomeIcon icon={faInstagram} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude.jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://steamcommunity.com/id/yudejp">
-            <a>
-            <FontAwesomeIcon icon={faSteam} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">id/yudejp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="#">
-            <a>
-            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" className="w-12 h-12 inline lg:w-12 lg:h-12 md:w-12 md:h-12 fill-current text-black dark:text-white" viewBox="0 0 700 700">
-            <g transform="translate(-100.000000,900.000000) scale(0.100000,-0.100000)" fill="#FFFFF">
-            <path d="M2965 8314 c-481 -86 -868 -442 -990 -910 -44 -169 -47 -268 -42
-            -1579 3 -1204 4 -1232 24 -1325 111 -501 467 -858 973 -976 66 -15 150 -18
-            691 -21 560 -4 618 -3 633 12 15 15 16 208 16 2396 0 1622 -3 2386 -10 2400
-            -10 18 -27 19 -613 18 -476 -1 -619 -4 -682 -15z m905 -2400 l0 -2026 -407 5
-            c-375 4 -415 6 -490 25 -322 83 -561 331 -628 654 -22 101 -22 2589 -1 2688
-            60 281 255 514 518 619 132 53 193 59 621 60 l387 1 0 -2026z"/>
-            <path d="M3051 7329 c-63 -12 -159 -60 -210 -105 -105 -91 -157 -220 -149
-            -372 4 -79 9 -100 41 -164 47 -97 118 -168 215 -216 67 -33 84 -37 171 -40 79
-            -3 107 0 160 18 217 73 348 284 311 500 -43 257 -287 429 -539 379z"/>
-            <path d="M4757 8323 c-4 -3 -7 -1087 -7 -2409 0 -2181 1 -2402 16 -2408 27
-            -10 803 -6 899 4 406 46 764 293 959 660 25 47 58 126 75 175 63 188 61 138
-            61 1575 0 1147 -2 1318 -16 1391 -99 521 -496 914 -1018 1004 -70 12 -178 15
-            -526 15 -240 0 -440 -3 -443 -7z m1068 -2178 c156 -41 284 -160 336 -312 33
-            -94 32 -232 -1 -318 -61 -158 -181 -269 -335 -310 -250 -65 -516 86 -589 334
-            -22 76 -21 204 4 282 75 245 335 389 585 324z"/>
-            </g>
-            </svg>
-            <p className="font-mono text-xl">SW-5543-5143-8814</p>
-            </a>
-            </Link>
-          </div>
+          <Contact dest="https://twitter.com/yude_jp" icon={faTwitter} caption="@yude_jp" />
+          <Contact dest="#" icon={faDiscord} caption="yude#3205" />
+          <Contact dest="mailto:i@yude.jp" icon={faEnvelope} caption="i@yude.jp" />
+          <Contact dest="https://github.com/yude" icon={faGithub} caption="yude" />
+          <Contact dest="https://mstdn.yude.jp/@yude" icon={faMastodon} caption="@yude@mstdn.yude.jp" />
+          <Contact dest="https://keybase.io/yude" icon={faKeybase} caption="yude" />
+          <Contact dest="https://instagram.com/yude.jp" icon={faInstagram} caption="yude.jp" />
+          <Contact dest="https://steamcommunity.com/id/yudejp" icon={faSteam} caption="id/yudejp" />
+          <NintendoSW />
         </div>
         
         {
@@ -173,35 +108,14 @@ export default function About(props) {
         <div className="text-center my-6 space-x-5">
         <WakaTime />
         <PublicKeys />
-        
-        <Link href="https://scrapbox.io/yude/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88">
-                <a>
-                <button
-                className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
-                type="button"
-              >
-                <FontAwesomeIcon icon={faLink} className="w-5 h-5 inline"/> {t('account')}
-              </button>
-              </a>
-        </Link>
-        
-        <Link href="https://scrapbox.io/yude/%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9">
-                <a>
-                <button
-                className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
-                type="button"
-              >
-                <FontAwesomeIcon icon={faMobile} className="w-5 h-5 inline"/> {t('device')}
-              </button>
-              </a>
-        </Link>
-        
-        </div>
-        <div>
+        <Button dest="https://scrapbox.io/yude/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88" icon={faLink} caption={t('account')}/>
+        <Button dest="https://scrapbox.io/yude/%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9" icon={faMobile} caption={t('device')}/>        
         </div>
+        
       </div>
         <p className="mt-3 text-sm font-bold text-gray-900 dark:text-gray-400">{t('icon_1')}<Link href="https://twitter.com/xmnts"><a className="hover:underline">Minkasy {t('icon_2')}</a></Link></p>
       </div>
+      
     </Layout>
   )
 }