yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2024-12-22 20:20:09 +09:00
Code Releases Activity

Add animation

Browse Source
This commit is contained in:
yude 2021-02-07 17:40:43 +09:00
parent c961e9e7aa
commit 8e1a1ae8de
5 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -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",

2
pages/components/Navbar.js
View File

@ -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>

6
pages/index.js
View File

@ -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>

29
tailwind.config.js
View File

@ -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'),
],
}

9
yarn.lock
View File

@ -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"