From 5a8f357ab5041e1acff0fb1911e69e5fba1db017 Mon Sep 17 00:00:00 2001 From: YUAN-TSUNG Date: Mon, 18 Dec 2023 00:29:14 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=A0=20framer=20motion=20used?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- src/app/blog/page.tsx | 6 +- src/app/blog/tags/[tag]/page.tsx | 4 +- src/app/portfolio/page.tsx | 14 ++++ src/app/the-gallery/page.tsx | 18 ------ src/components/common/navBarCommon/index.tsx | 4 +- .../pages/blog/postCard/index.module.scss | 64 ++++++++++--------- src/components/pages/blog/postCard/index.tsx | 38 +++++++---- .../pages/home/navBarHome/index.tsx | 4 +- yarn.lock | 12 ++-- 10 files changed, 91 insertions(+), 77 deletions(-) create mode 100644 src/app/portfolio/page.tsx delete mode 100644 src/app/the-gallery/page.tsx diff --git a/package.json b/package.json index 74cf1e3..ce88245 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "classnames": "^2.3.2", - "framer-motion": "^10.16.4", + "framer-motion": "^10.16.16", "highlight.js": "^11.9.0", "i18next": "^23.7.3", "next": "^14.0.2", @@ -79,4 +79,4 @@ "typescript": "5.2.2", "unified": "^11.0.4" } -} \ No newline at end of file +} diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx index eac8747..d8e9e85 100644 --- a/src/app/blog/page.tsx +++ b/src/app/blog/page.tsx @@ -18,8 +18,8 @@ const BlogPage = () => { Blog
- {allPosts.map((post: Post) => ( - + {allPosts.map((post, index) => ( + ))}
@@ -32,7 +32,7 @@ const getPosts = () => { const allPosts = getAllPosts(['slug', 'title', 'date', 'tags', 'language']); return { - allPosts: JSON.parse(JSON.stringify(allPosts)), + allPosts: JSON.parse(JSON.stringify(allPosts)) as Post[], }; }; diff --git a/src/app/blog/tags/[tag]/page.tsx b/src/app/blog/tags/[tag]/page.tsx index 94a049c..4ae75ca 100644 --- a/src/app/blog/tags/[tag]/page.tsx +++ b/src/app/blog/tags/[tag]/page.tsx @@ -18,8 +18,8 @@ const TagPage = ({ params }: Props) => { {realTag.tag}
- {posts.map((post) => { - return ; + {posts.map((post, index) => { + return ; })}
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx new file mode 100644 index 0000000..e189d57 --- /dev/null +++ b/src/app/portfolio/page.tsx @@ -0,0 +1,14 @@ +import type { NextPage } from 'next'; + +/** + * Portfolio page + */ +const PortfolioPage: NextPage = () => { + return ( +
+

this is portfolio page!

+
+ ); +}; + +export default PortfolioPage; diff --git a/src/app/the-gallery/page.tsx b/src/app/the-gallery/page.tsx deleted file mode 100644 index ba432eb..0000000 --- a/src/app/the-gallery/page.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { NextPage } from 'next'; - -/** - * Gallery page - * 作品集画面 - * - * /component/pages/the-gallery　配下にページコンポーネントを作成 - * - */ -const GalleryPage: NextPage = () => { - return ( -
-

this is gallery page!

-
- ); -}; - -export default GalleryPage; diff --git a/src/components/common/navBarCommon/index.tsx b/src/components/common/navBarCommon/index.tsx index 17d116d..d9c2e2f 100644 --- a/src/components/common/navBarCommon/index.tsx +++ b/src/components/common/navBarCommon/index.tsx @@ -15,7 +15,9 @@ export const NavBarCommon = () => {
  • BLOG
    • -
  • PORTFOLIO
    • +
  • + PORTFOLIO +
  • diff --git a/src/components/pages/blog/postCard/index.module.scss b/src/components/pages/blog/postCard/index.module.scss index db1811c..2381646 100644 --- a/src/components/pages/blog/postCard/index.module.scss +++ b/src/components/pages/blog/postCard/index.module.scss @@ -1,20 +1,35 @@ @use '~/styles/utils.scss'; @use '~/styles/mixins' as *; -.post-card { +.card-wrapper { position: relative; z-index: 0; - display: flex; flex-basis: 50%; - flex-direction: column; - gap: 10px; - align-items: flex-start; - justify-content: space-between; width: calc(50% - 1rem); - padding: 1rem; - background-color: utils.$color-navy; contain: paint; + &.-new::after { + position: absolute; + right: -24px; + bottom: -44px; + z-index: 1; + font-size: 8rem; + content: '🍟'; + opacity: 0.5; + transition: opacity 0.3s ease-in-out; + transform: rotate(-45deg); + } + + &.-new:hover::after { + opacity: 1; + } + + @include sp() { + flex-basis: 100%; + width: 100%; + border-top: 1px solid #fff; + } + @include pc() { border: 1px solid utils.$color-bg; box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); @@ -27,11 +42,18 @@ box-shadow: -10px 10px 0 0 utils.$color-pink; transform: translate(10px, -10px); } - - &.new:hover::after { - opacity: 1; - } } +} + +.post-card { + position: relative; + display: flex; + flex-direction: column; + gap: 10px; + align-items: flex-start; + justify-content: space-between; + padding: 1rem; + background-color: utils.$color-navy; .title-area { display: flex; @@ -55,25 +77,7 @@ } } - @include sp() { - flex-basis: 100%; - width: 100%; - border-top: 1px solid #fff; - } - .date { font-size: 1.4rem; } - - &.new::after { - position: absolute; - right: -24px; - bottom: -44px; - z-index: 1; - font-size: 8rem; - content: '🍟'; - opacity: 0.5; - transition: opacity 0.3s ease-in-out; - transform: rotate(-45deg); - } } diff --git a/src/components/pages/blog/postCard/index.tsx b/src/components/pages/blog/postCard/index.tsx index 33e407e..9eae128 100644 --- a/src/components/pages/blog/postCard/index.tsx +++ b/src/components/pages/blog/postCard/index.tsx @@ -1,4 +1,6 @@ +'use client'; import classNames from 'classnames'; +import { motion } from 'framer-motion'; import Link from 'next/link'; import { Post } from '~/types/Posts'; import { getDateString } from '~/utils/dates'; @@ -8,9 +10,10 @@ type Language = '中文' | 'English' | '日本語'; type Props = { post: Post; + index?: number; }; -export const PostCard = ({ post }: Props) => { +export const PostCard = ({ post, index }: Props) => { const getLocale = (languageTag: string) => { switch (languageTag as Language) { case '中文': @@ -31,20 +34,27 @@ export const PostCard = ({ post }: Props) => { }; return ( - -
    -

    {post.title}

    - {post.language !== 'English' && ( - {post.language} - )} -
    -

    {getDateString(post.date)}

    - + +
    +

    {post.title}

    + {post.language !== 'English' && ( + {post.language} + )} +
    +

    {getDateString(post.date)}

    + + ); }; diff --git a/src/components/pages/home/navBarHome/index.tsx b/src/components/pages/home/navBarHome/index.tsx index 3e9369c..4dc3845 100644 --- a/src/components/pages/home/navBarHome/index.tsx +++ b/src/components/pages/home/navBarHome/index.tsx @@ -9,7 +9,9 @@ export const NavBarHome = () => {
  • ABOUT ME
    • -
  • PORTFOLIO
    • +
  • + PORTFOLIO +
  • BLOG
    • diff --git a/yarn.lock b/yarn.lock index 57ccdae..1098ec2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1220,14 +1220,14 @@ "@emotion/is-prop-valid@^0.8.2": version "0.8.8" - resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== dependencies: "@emotion/memoize" "0.7.4" "@emotion/memoize@0.7.4": version "0.7.4" - resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0": @@ -3583,10 +3583,10 @@ foreground-child@^3.1.0: cross-spawn "^7.0.0" signal-exit "^4.0.1" -framer-motion@^10.16.4: - version "10.16.4" - resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz" - integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA== +framer-motion@^10.16.16: + version "10.16.16" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.16.tgz#a10a03e1190a717109163cfff212a84c8ad11b0c" + integrity sha512-je6j91rd7NmUX7L1XHouwJ4v3R+SO4umso2LUcgOct3rHZ0PajZ80ETYZTajzEXEl9DlKyzjyt4AvGQ+lrebOw== dependencies: tslib "^2.4.0" optionalDependencies: