Add animation

package.json

@@ -30,7 +30,8 @@
     "postcss": "^8.2.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "tailwindcss": "^2.0.2"
+    "tailwindcss": "^2.0.2",
+    "tailwindcss-filters": "^3.0.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.25",

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>

tailwind.config.js

@@ -5,10 +5,33 @@ module.exports = {
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: "class", // or 'media' or 'class'
   theme: {
-    extend: {},
+    filter: { // defaults to {}
+      'none': 'none',
+      'grayscale': 'grayscale(1)',
+      'invert': 'invert(1)',
+      'sepia': 'sepia(1)',
+    },
+    backdropFilter: { // defaults to {}
+      'none': 'none',
+      'blur': 'blur(20px)',
+    },
+    extend: {
+      animation:{
+        blur: 'blur 2.5s linear infinite',
+      },
+      keyframes:{
+        blur: {
+          '0%, 100%': {filter: 'blur(8px)'},
+          '50%': {filter: 'blur(0px)'}
+        }
+    }
+    }
   },
   variants: {
-    extend: {},
+    filter: ['responsive'], // defaults to ['responsive']
+    backdropFilter: ['responsive'], // defaults to ['responsive']
   },
-  plugins: [],
+  plugins: [
+    require('tailwindcss-filters'),
+  ],
 }

yarn.lock

@@ -1627,7 +1627,7 @@ lodash.toarray@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
   integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
 
-lodash@^4.17.13, lodash@^4.17.20:
+lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.20:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -2750,6 +2750,13 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+tailwindcss-filters@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-filters/-/tailwindcss-filters-3.0.0.tgz#d5d40ca018a54b1aa2bdc57aeb6677529c24c8d8"
+  integrity sha512-xhortqs8fSp9id17EnneYhmruA5DfU6K0zvN6/mgDlEXKaHthjXlR74Ta+4lrX5Lp7tp6YigB09WO0TOWn7VEQ==
+  dependencies:
+    lodash "^4.17.15"
+
 tailwindcss@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.0.2.tgz#28e1573d29dd4547b26782facb05bcfaa92be366"