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

Add heartbeat animation

Browse Source
This commit is contained in:
yude 2021-02-08 16:05:58 +09:00
parent 2b4448de81
commit 74f3b9e992
5 changed files with 54 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -21,6 +21,10 @@
},
"homepage": "https://github.com/yudemoe/yude.jp#readme",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@zeit/next-css": "^1.0.1",
"autoprefixer": "^10.2.4",
"next": "^10.0.6",

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 font-mono'>
<span className='text-xl text-white font-bold tracking-wide dark:text-white font-mono animate-heartbeat'>
yude.jp
</span>
</a>

12
pages/index.js
View File

@ -1,6 +1,10 @@
import Layout from "./components/Layout"
import Navbar from "./components/Navbar"
import Link from 'next/link'
import { ReactElement } from 'react'
import { faCoffee } from '@fortawesome/free-brands-svg-icons'
import { faBlog, faBook } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Image from 'next/image'
import useTranslation from 'next-translate/useTranslation'
import { useRouter } from 'next/router'
@ -19,7 +23,7 @@ export default function Index(props) {
<Navbar />
<div className="my-9">
<div class="m-10">
<Image className="animate-blur"
<Image
src = "/static/images/avatar.png"
alt = "yude's avatar"
width = {200}
@ -27,8 +31,10 @@ export default function Index(props) {
unoptimized = {true}
/>
</div>
<p>🔨 {welcome} 🔨</p>
<p>{instead_1}<Link href="https://yude.moe"><a>yude.moe</a></Link>{instead_2}</p>
<span><Link href="https://blog.yude.jp"><a><FontAwesomeIcon icon={faBlog} className="w-10 h-10 inline"/></a></Link></span>
<span className="ml-4"><Link href="https://wiki.yude.jp"><a><FontAwesomeIcon icon={faBook} className="w-10 h-10 inline"/></a></Link></span>
<p></p>
</div>
</Layout>

7
tailwind.config.js
View File

@ -18,12 +18,17 @@ module.exports = {
extend: {
animation:{
blur: 'blur 2.5s linear infinite',
heartbeat: 'heartbeat 3s linear infinite'
},
keyframes:{
blur: {
'0%, 100%': {filter: 'blur(8px)'},
'50%': {filter: 'blur(0px)'}
}
},
heartbeat: {
'0%, 100%': {filter: 'drop-shadow(0px 0px 1px rgb(255, 255, 255))'},
'50%': {filter: 'drop-shadow(0px 0px 8px rgb(255, 255, 255))'}
},
}
}
},

35
yarn.lock
View File

@ -90,6 +90,39 @@
lodash "^4.17.13"
to-fast-properties "^2.0.0"
"@fortawesome/fontawesome-common-types@^0.2.34":
version "0.2.34"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz#0a8c348bb23b7b760030f5b1d912e582be4ec915"
integrity sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA==
"@fortawesome/fontawesome-svg-core@^1.2.34":
version "1.2.34"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz#1d1a7c92537cbc2b8a83eef6b6d824b4b5b46b26"
integrity sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.34"
"@fortawesome/free-brands-svg-icons@^5.15.2":
version "5.15.2"
resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.2.tgz#d74e2540b5552b915d6bef719f17e361b70a8d65"
integrity sha512-YPlVjE1cEO+OJ9I9ay3TQ3I88+XkxMTYwnnddqAboxLhPNGncsHV0DjWOVLCyuAY66yPfyndWwVn4v7vuqsO1g==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.34"
"@fortawesome/free-solid-svg-icons@^5.15.2":
version "5.15.2"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz#25bb035de57cf85aee8072965732368ccc8e8943"
integrity sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.34"
"@fortawesome/react-fontawesome@^0.1.14":
version "0.1.14"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca"
integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==
dependencies:
prop-types "^15.7.2"
"@fullhuman/postcss-purgecss@^3.0.0":
version "3.1.3"
resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339"
@ -2247,7 +2280,7 @@ process@0.11.10, process@^0.11.10:
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
prop-types@15.7.2:
prop-types@15.7.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==