locales/en/common.json

@@ -3,6 +3,5 @@
     "source": "Source code",
     "tos": "yude.jp Terms of Service",
     "yes_playing": "Playing {{playing}}",
-    "listening": "Listening to {{listening}}",
+    "listening": "Listening to {{listening}}"
-    "close": "Close"
 }

locales/ja/common.json

@@ -3,6 +3,5 @@
     "source": "ソースコード",
     "tos": "yude.jp サービス利用規約",
     "yes_playing": "{{playing}} をプレイ中",
-    "listening": "{{listening}} を再生中",
+    "listening": "{{listening}} を再生中"
-    "close": "閉じる"
 }

pages/components/Footer.js

@@ -13,7 +13,7 @@ export default function Footer(props) {
         return (
           <>
             <div className="container mx-auto px-6">
-            <div className="flex flex-col items-center">
+            <div className="mt-16 flex flex-col items-center">
                 <div className="sm:w-full text-center py-6">
                     <p className="text-sm font-bold mb-2">
                         {footer} / <Link href="https://github.com/yudejp/yude.jp"><a className="hover:underline">{source}</a></Link>

pages/components/Layout.js

@@ -25,9 +25,7 @@ const Layout = (props) => {
       <main>
       <Navbar />
         <div className="max-w-2xl mx-auto">
-        <div className="mx-2">
           {children}
-          </div>
         </div>
       <Footer />
       </main>

pages/components/PublicKeys.js

@@ -1,91 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import useTranslation from 'next-translate/useTranslation'
-import { faKey, faEye, faDownload } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-
-export default function Modal() {
-  const [showModal, setShowModal] = React.useState(false);
-  const router = useRouter()
-  const { t, lang } = useTranslation("common")
-  const { locale, locales, defaultLocale, pathname } = router
-  const close = t('common:close')
-  const keys = t('profile:keys')
-  const view = t('profile:view')
-  const fingerprint = t('profile:fingerprint')
-  const download = t('profile:download')
-
-  return (
-    <>
-      <button
-        className="bg-pink-600 text-white active:bg-pink-600 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"
-        onClick={() => setShowModal(true)}
-      >
-        <FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}
-      </button>
-      {showModal ? (
-        <>
-          <div
-            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
-          >
-            <div className="relative mx-auto w-4/5 max-h-1/2 -mt-96 max-w-3xl">
-              {/* Modal content */}
-              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-                {/* Modal body */}
-                <div className="relative p-2 flex-auto text-black text-left">
-                
-                <p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}</p>
-          <ul className="list-disc my-2">
-          <li>
-            <span className="font-bold">PGP&nbsp;</span>
-            <Link href="/static/yudejp.gpg">
-              <a className="hover:underline">
-                <FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
-                {download}
-              </a>
-            </Link>
-            <p>{fingerprint}:</p>
-            <div className="overflow-x-auto">
-              <div className="whitespace-nowrap">
-                <code>3745 F270 DB4E 8975 6B07  62BE EB0F E5D9 25C4 A968</code>
-              </div>
-            </div>
-          </li>
-          <li>
-            <span className="font-bold">SSH&nbsp;</span>
-            <Link href="https://github.com/yude.keys">
-              <a className="hover:underline">
-                <FontAwesomeIcon icon={faEye} className="w-5 h-5 inline"/>&nbsp;
-                {view}
-              </a>
-            </Link>
-            <p>{fingerprint}:</p>
-            <div className="overflow-x-auto">
-              <div className="whitespace-nowrap">
-              <code>2048 SHA256:xwSL4DORWmroWdC6P0GU1m1yZl/cXqjo9rCCWqqO+Dc</code>
-              </div>
-            </div>
-          </li>
-            </ul>
-                
-                </div>
-                {/* Modal footer for close button */}
-                <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
-                  <button
-                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-                    type="button"
-                    onClick={() => setShowModal(false)}
-                  >
-                    {close}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </>
-      ) : null}
-    </>
-  );
-}

pages/components/WakaTime.js

@@ -1,51 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import useTranslation from 'next-translate/useTranslation'
-import { faUserClock } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useRouter } from 'next/router'
-
-export default function Modal() {
-  const [showModal, setShowModal] = React.useState(false);
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("common")
-  const close = t('common:close')
-  return (
-    <>
-      <button
-        className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-6 py-3 rounded hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-        type="button"
-        onClick={() => setShowModal(true)}
-      >
-        <FontAwesomeIcon icon={faUserClock} className="w-5 h-5 inline"/> WakaTime
-      </button>
-      {showModal ? (
-        <>
-          <div
-            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
-          >
-            <div className="relative mx-auto w-4/5 max-h-1/2 -mt-96 max-w-3xl">
-              {/* Modal content */}
-              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-                {/* Modal body */}
-                <div className="relative p-2 flex-auto">
-                <figure><embed src="https://wakatime.com/share/@yude/6f15075a-b9d5-464a-8b4f-545d31933dfb.svg"></embed></figure>
-                </div>
-                {/* Modal footer for close button */}
-                <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
-                  <button
-                    className="text-red-500 font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-                    type="button"
-                    onClick={() => setShowModal(false)}
-                  >
-                    {close}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </>
-      ) : null}
-    </>
-  );
-}

pages/profile.js

@@ -1,7 +1,7 @@
 import Layout from "./components/Layout"
 import useTranslation from 'next-translate/useTranslation'
 import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo } from '@fortawesome/free-solid-svg-icons'
+import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faKey, faDownload, faEye, faUserClock } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import Image from 'next/image'
@@ -9,8 +9,6 @@ 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) {
   const router = useRouter()
@@ -29,6 +27,10 @@ export default function About(props) {
   const grade = t('grade')
   const icon_1 = t('icon_1')
   const icon_2 = t('icon_2')
+  const keys = t('keys')
+  const download = t('download')
+  const fingerprint = t('fingerprint')
+  const view = t('view')
 
   return (
 
@@ -158,11 +160,51 @@ export default function About(props) {
         </div>
 
         {
-         // Buttons
+         // Keys
         }
-        <div className="text-center my-6 space-x-5">
+        <div className="text-left my-6">
-        <WakaTime />
+            <p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}</p>
-        <PublicKeys />
+          <ul className="list-disc my-2">
+          <li>
+            <span className="font-bold">GPG&nbsp;</span>
+            <Link href="/static/yudejp.gpg">
+              <a className="hover:underline">
+                <FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
+                {download}
+              </a>
+            </Link>
+            <p>{fingerprint}:</p>
+            <div className="overflow-x-auto">
+              <div className="whitespace-nowrap">
+                3745 F270 DB4E 8975 6B07  62BE EB0F E5D9 25C4 A968
+                </div>
+            </div>
+          </li>
+          <li>
+            <span className="font-bold">SSH&nbsp;</span>
+            <Link href="https://github.com/yude.keys">
+              <a className="hover:underline">
+                <FontAwesomeIcon icon={faEye} className="w-5 h-5 inline"/>&nbsp;
+                {view}
+              </a>
+            </Link>
+            <p>{fingerprint}:</p>
+            <div className="overflow-x-auto">
+              <div className="whitespace-nowrap">
+                2048 SHA256:xwSL4DORWmroWdC6P0GU1m1yZl/cXqjo9rCCWqqO+Dc
+              </div>
+            </div>
+          </li>
+            </ul>
+        </div>
+        
+        {
+         // WakaTime
+        }
+        <div className="text-left my-6">
+        <p className="text-2xl"><FontAwesomeIcon icon={faUserClock} className="w-5 h-5 inline"/> WakaTime</p>
+        <figure className="max-w-2xl"><embed src="https://wakatime.com/share/@yude/6f15075a-b9d5-464a-8b4f-545d31933dfb.svg"></embed></figure>
+        <figure className="max-w-2xl"><embed src="https://wakatime.com/share/@yude/a8c52934-488b-4bdd-aed1-4f3fc73eb78e.svg"></embed></figure>
         </div>
         <div>
         </div>

tailwind.config.js

@@ -8,14 +8,7 @@ module.exports = {
       "16/9": [16, 9],
       "4/3": [4, 3],
       "21/9": [21, 9]
-    },
+  },
-    maxHeight: {
-      '0': '0',
-      '1/4': '25%',
-      '1/2': '50%',
-      '3/4': '75%',
-      'full': '100%',
-    },
     filter: { // defaults to {}
       'none': 'none',
       'grayscale': 'grayscale(1)',