Update styling, text format

locales/en-US/profile.json

@@ -1,11 +1,20 @@
 {
     "about": "About yude",
     "desc": "Description",
-    "school": "Faculty of Information Science, Hiroshima City University. (1st grade)",
-    "location": "Hiroshima, Japan",
+    "school": "Faculty of Information Science, Hiroshima City University.",
+    "hiroshima": "Hiroshima, Japan",
+    "location": "Location",
     "link": "Links",
     "link_all": "To see all of yude's account, please visit ",
     "link_all_late": ".",
     "here": "here",
-    "mail": "E-mail"
+    "mail": "E-mail",
+    "birth": "Birthday",
+    "date": "November the 19th, 2001",
+    "contact": "Get in touch",
+    "belongs": "Organization",
+    "more": "More...",
+    "grade": "(1st grade)",
+    "icon_1": "Icon: ",
+    "icon_2": ""
 }

locales/ja-JP/profile.json

@@ -1,11 +1,20 @@
 {
     "about": "yude について",
     "desc": "概要",
-    "school": "広島市立大学 情報科学部 1年",
-    "location": "日本, 広島県",
+    "school": "広島市立大学 情報科学部",
+    "hiroshima": "日本, 広島県",
+    "location": "所在地",
     "link": "リンク",
     "link_all": "yude が所持しているすべてのアカウントの一覧は、",
     "link_all_late": "にあります。",
     "here": "こちら",
-    "mail": "メール"
+    "mail": "メール",
+    "birth": "生年月日",
+    "date": "2001年11月19日",
+    "contact": "連絡先 / SNS",
+    "belongs": "所属",
+    "more": "さらに見る...",
+    "grade": "1年",
+    "icon_1": "アイコン: ",
+    "icon_2": "さん"
 }

pages/profile.js

@@ -2,7 +2,7 @@ import Layout from "./components/Layout"
 import Navbar from "./components/Navbar"
 import useTranslation from 'next-translate/useTranslation'
 import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faBirthdayCake, faMapPin, faSchool } from '@fortawesome/free-solid-svg-icons'
+import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import Image from 'next/image'
@@ -16,55 +16,126 @@ export default function About(props) {
   const about = t('about')
   const desc = t('desc')
   const school = t('school')
-  const link = t('link')
+  const contact = t('contact')
   const link_all = t('link_all')
   const link_all_late = t('link_all_late')
   const location = t('location')
   const here = t('here')
   const mail = t('mail')
-
+  const belongs = t('belongs')
+  const hiroshima = t('hiroshima')
+  const birth = t('birth')
+  const date = t('date')
+  const more = t('more')
+  const grade = t('grade')
+  const icon_1 = t('icon_1')
+  const icon_2 = t('icon_2')
+  
   return (
 
     <Layout title={about}>
       <Navbar />
       <div className="my-9 mx-8">
+
         {
          // Heading
         }
-        <div className="mb-5">
-          <p className="text-left text-4xl">{about}</p>
+        <div className="mb-5 flex justify-center">
+          <div>
+          <Image
+            className   = "object-contain rounded-full animate-pulse hover:animate-rumble"
+            src         = "/static/images/avatar.png"
+            alt         = "yude's avatar"
+            width       = {200}
+            height      = {200}
+            unoptimized = {true}
+        />
+          <p className="text-center text-4xl subpixel-antialiased">yude</p>
+          </div>
         </div>
         
         {
          // Description 
         }
-        <div className="divide-y-2 divide-dashed">
-        <div><p className="text-left text-2xl">{desc}</p></div>
+        {/* <div className="2xl:mx-96 xl:mx-40 lg:mx-32 md:mx-8 sm:mx-8"> */}
+        <div className="container mx-auto max-w-3xl">
         <div className="text-left">
-        <p><FontAwesomeIcon icon={faSchool} className="w-5 h-5 inline"/> {school}</p>
-        <p><FontAwesomeIcon icon={faMapPin} className="w-5 h-5 inline"/> {location}</p>
+            <p className="text-2xl"><FontAwesomeIcon icon={faInfo} className="w-5 h-5 inline"/> {desc}</p>
         </div>
+        <div className="my-2 text-left grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 break-words">
+          <div>
+            <FontAwesomeIcon icon={faSchool} className="w-5 h-5 inline"/>
+            <p className="inline ml-4">{belongs}</p>
+            <p className="ml-9">{school}</p>
+            <p className="ml-9">{grade}</p>
+          </div>
+          <div>
+            <FontAwesomeIcon icon={faBirthdayCake} className="w-5 h-5 inline"/>
+            <p className="inline ml-4">{birth}</p>
+            <p className="ml-9">{date}</p>
+          </div>
+          <div>
+            <FontAwesomeIcon icon={faMapPin} className="w-5 h-5 inline"/>
+            <p className="inline ml-4">{location}</p>
+            <p className="ml-9">{hiroshima}</p>
+          </div>
         </div>
 
         {
-         // Links 
+         // Contact 
         }
-        <div className="divide-y-2 divide-dashed">
-        <div><p className="text-left text-2xl">{link}</p></div>
-        <div className="text-left">
-        <p><FontAwesomeIcon icon={faTwitter} className="w-5 h-5 inline"/> Twitter: <Link href="https://twitter.com/yudejp"><a className="hover:underline">@yudejp</a></Link></p>
-        <p><FontAwesomeIcon icon={faDiscord} className="w-5 h-5 inline"/> Discord: <a className="hover:underline">yude#3205</a></p>
-        <p><FontAwesomeIcon icon={faEnvelope} className="w-5 h-5 inline"/> {mail}: <Link href="mailto:i@yude.jp"><a className="hover:underline">i@yude.jp</a></Link></p>
-        <p><FontAwesomeIcon icon={faGithub} className="w-5 h-5 inline"/> GitHub: <Link href="https://github.com/yudejp"><a className="hover:underline">yudejp</a></Link></p>
-        <p><FontAwesomeIcon icon={faKeybase} className="w-5 h-5 inline"/> Keybase: <Link href="https://keybase.io/yude"><a className="hover:underline">yude</a></Link></p>
-        <p><FontAwesomeIcon icon={faInstagram} className="w-5 h-5 inline"/> Instagram: <Link href="https://instagram.com/yude.jp"><a className="hover:underline">yude.jp</a></Link></p>
-        
-        <p>{link_all}<Link href="https://wiki.yude.jp/links"><a className="hover:underline">{here}</a></Link>{link_all_late}</p>
+        <div className="text-left my-6">
+            <p className="text-2xl"><FontAwesomeIcon icon={faPhone} className="w-5 h-5 inline"/> {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">
+            <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/yudejp">
+            <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">yudejp</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>
+        <div>
         </div>
-
       </div>
-      
+        <Link href="https://wiki.yude.jp/links">
+            <button className="border border-transparent rounded-md shadow-sm text-sm font-medium mt-3 text-white bg-indigo-800 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 p-3 w-60">{more}</button>
+        </Link>
+        <p className="mt-3 text-sm font-bold mb-2 text-gray-400">{icon_1}<Link href="https://twitter.com/xmnts"><a className="hover:underline">Minkasy {icon_2}</a></Link></p>
+      </div>
     </Layout>
   )
 }

tailwind.config.js

@@ -25,9 +25,19 @@ module.exports = {
     extend: {
       animation:{
         blur: 'blur 2.5s linear infinite',
-        heartbeat: 'heartbeat 3s linear infinite'
+        heartbeat: 'heartbeat 3s linear infinite',
+        rumble: 'rumble 0.1s linear infinite',
       },
       keyframes:{
+        rumble: {
+          '0%': { transform: 'translate(0, 0)', filter: 'rotate(0)' },
+          '16.66%': { transform: 'translate(4px, -2px)', filter: 'rotate(-5deg)' },
+          '33.32%': { transform: 'translate(4px, 2px)', filter: 'rotate(5deg)' },
+          '49.98%': { transform: 'translate(0, 0)', filter: 'rotate(0)' },
+          '66.64%': { transform: 'translate(-4px, -2px)', filter: 'rotate(5deg)' },
+          '83.30%': { transform:  'translate(-4px, 2px)', filter: 'rotate(-5deg)' },
+          '100%': { transform:  'translate(0, 0)', filter: 'rotate(0)' },
+      },
         blur: {
           '0%, 100%': {filter: 'blur(8px)'},
           '50%': {filter: 'blur(0px)'}
@@ -36,10 +46,11 @@ module.exports = {
           '0%, 100%': {filter: 'drop-shadow(0px 0px 1px  rgb(255, 255, 255))'},
           '50%': {filter: 'drop-shadow(0px 0px 8px  rgb(255, 255, 255))'}
         },
-    }
+    },
     }
   },
   variants: {
+    animation: ['hover', 'focus'], // allow animate-* to use hover: and focus:
     filter: ['responsive'], // defaults to ['responsive']
     backdropFilter: ['responsive'], // defaults to ['responsive']
     aspectRatio: ['responsive'],