Add animation

pages/components/Navbar.js

@@ -9,7 +9,7 @@ const Navbar = () => {
         <nav className='flex items-center flex-wrap p-3'>
         <Link href='/'>
           <a className='inline-flex items-center p-2 mr-4'>
-            <span className='text-xl text-black font-bold tracking-wide dark:text-white'>
+            <span className='text-xl text-black font-bold tracking-wide dark:text-white font-mono'>
               yude.jp
             </span>
           </a>

pages/index.js

@@ -4,7 +4,6 @@ import Link from 'next/link'
 import Image from 'next/image'
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
-
 export default function Index(props) {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
@@ -13,18 +12,21 @@ export default function Index(props) {
   const welcome = t('welcome')
   const instead_1 = t('instead_1')
   const instead_2 = t('instead_2')
+
   return (
 
     <Layout title="ホーム">
       <Navbar />
       <div className="my-9">
-        <Image className="rounded-full"
+        <div class="m-10">
+        <Image className="animate-blur"
             src         = "/static/images/avatar.png"
             alt         = "yude's avatar"
             width       = {200}
             height      = {200}
             unoptimized = {true}
         />
+        </div>
         <p>🔨 {welcome} 🔨</p>
         <p>{instead_1}<Link href="https://yude.moe"><a>yude.moe</a></Link>{instead_2}</p>
       </div>