🌠 framer motion used

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"
   }
-}
+}

src/app/blog/page.tsx

@@ -18,8 +18,8 @@ const BlogPage = () => {
       <PageHeader>Blog</PageHeader>
       <main className={styles['content-wrapper']}>
         <div className={styles['posts']}>
-          {allPosts.map((post: Post) => (
-            <PostCard key={post.slug} post={post} />
+          {allPosts.map((post, index) => (
+            <PostCard key={post.slug} post={post} index={index} />
           ))}
         </div>
       </main>
@@ -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[],
   };
 };
 

src/app/blog/tags/[tag]/page.tsx

@@ -18,8 +18,8 @@ const TagPage = ({ params }: Props) => {
       <PageHeader>{realTag.tag}</PageHeader>
       <main className={styles['content-wrapper']}>
         <div className={styles['posts']}>
-          {posts.map((post) => {
-            return <PostCard key={post.slug} post={post} />;
+          {posts.map((post, index) => {
+            return <PostCard key={post.slug} post={post} index={index} />;
           })}
         </div>
       </main>

src/app/portfolio/page.tsx

@@ -0,0 +1,14 @@
+import type { NextPage } from 'next';
+
+/**
+ * Portfolio page
+ */
+const PortfolioPage: NextPage = () => {
+  return (
+    <main>
+      <p>this is portfolio page!</p>
+    </main>
+  );
+};
+
+export default PortfolioPage;

src/components/common/navBarCommon/index.tsx

@@ -15,7 +15,9 @@ export const NavBarCommon = () => {
         <li>
           <Link href="/blog">BLOG</Link>
         </li>
-        <li>PORTFOLIO</li>
+        <li>
+          <Link href="/portfolio">PORTFOLIO</Link>
+        </li>
         <li className={styles['c-mark-nav']}>
           <Link href="/">
             <CMarkNav />

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);
-  }
 }

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 (
-    <Link
-      className={classNames(styles['post-card'], {
-        [styles['new']]: shouldShowNewTag(post.date),
+    <motion.div
+      className={classNames(styles['card-wrapper'], {
+        [styles['-new']]: shouldShowNewTag(post.date),
       })}
-      href={`/blog/${post.slug}`}
-      locale={getLocale(post.language)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5, delay: 0.02 * (index ?? 0) }}
     >
-      <div className={styles['title-area']}>
-        <h2 className={styles['title']}>{post.title}</h2>
-        {post.language !== 'English' && (
-          <span className={styles['language-tag']}>{post.language}</span>
-        )}
-      </div>
-      <p className={styles['date']}>{getDateString(post.date)}</p>
-    </Link>
+      <Link
+        className={styles['post-card']}
+        href={`/blog/${post.slug}`}
+        locale={getLocale(post.language)}
+      >
+        <div className={styles['title-area']}>
+          <h2 className={styles['title']}>{post.title}</h2>
+          {post.language !== 'English' && (
+            <span className={styles['language-tag']}>{post.language}</span>
+          )}
+        </div>
+        <p className={styles['date']}>{getDateString(post.date)}</p>
+      </Link>
+    </motion.div>
   );
 };

src/components/pages/home/navBarHome/index.tsx

@@ -9,7 +9,9 @@ export const NavBarHome = () => {
         <li>
           <Link href="/about-me">ABOUT ME</Link>
         </li>
-        <li>PORTFOLIO</li>
+        <li>
+          <Link href="/portfolio">PORTFOLIO</Link>
+        </li>
         <li>
           <Link href="/blog">BLOG</Link>
         </li>

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/[email protected]":
   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: