feat: new projects page

src/components/content/projects/ProjectItem.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import UnstyledLink from '@/components/links/UnstyledLink';
+
+import { ProjectsType } from '@/types/frontmatters';
+
+type ProjectCardProps = {
+  project: ProjectsType;
+} & React.ComponentPropsWithoutRef<'li'>;
+
+export default function ProjectCard({ project }: ProjectCardProps) {
+  return (
+    <ul className='mt-6 grid grid-cols-2		 gap-4'>
+      {project.child.map((projectItem) => (
+        <UnstyledLink
+          href={projectItem.link}
+          className='group h-full p-4 hover:bg-[#88888808]'
+          key={projectItem.title}
+        >
+          <section className=' flex items-center gap-[24px]'>
+            <div className='text-[38px] opacity-50 group-hover:opacity-70 dark:group-hover:opacity-80'>
+              {projectItem.icon}
+            </div>
+            <div>
+              <h4 className='text-[#555] group-hover:text-gray-800 dark:text-gray-400 dark:group-hover:text-gray-100'>
+                {projectItem.title}
+              </h4>
+              <p className='mb-auto text-sm text-gray-700 opacity-50 dark:text-gray-300 dark:group-hover:text-gray-50'>
+                {projectItem.description}
+              </p>
+            </div>
+          </section>
+        </UnstyledLink>
+      ))}
+    </ul>
+  );
+}

src/components/layout/Footer.tsx

@@ -2,7 +2,7 @@ import CustomLink from '@/components/links/CustomLink';
 
 export default function Footer() {
   return (
-    <footer className='mt-16 text-right text-[#b3b3b3] '>
+    <footer className='my-16 text-right text-[#b3b3b3] '>
       <section className='flex flex-col items-end'>
         <div>
           <a

src/pages/blog.tsx

@@ -30,7 +30,7 @@ export default function IndexPage({
       <main>
         <section className={clsx(isLoaded && 'fade-in-start')}>
           <div className='layout'>
-            <ul className='mx-8 mt-12 grid gap-4' data-fade='2'>
+            <ul className='mx-8 mt-12 grid gap-4' data-fade='1'>
               {posts.length > 0 ? (
                 posts.map((post, index) => (
                   <>

src/pages/collection.tsx

@@ -7,7 +7,7 @@ import CollectionCard from '@/components/content/collections/CollectionCard';
 import Layout from '@/components/layout/Layout';
 import Seo from '@/components/Seo';
 
-import { collectionsAtom } from '@/store/collections';
+import { collectionsAtom } from '@/store/collections/collections';
 
 export default function ProjectsPage() {
   const isLoaded = useLoaded();

src/pages/projects.tsx

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 
 import useLoaded from '@/hooks/useLoaded';
 
-import ProjectCard from '@/components/content/projects/ProjectCard';
+import ProjectCard from '@/components/content/projects/ProjectItem';
 import Layout from '@/components/layout/Layout';
 import Seo from '@/components/Seo';
 
@@ -19,28 +19,27 @@ export default function ProjectsPage() {
         templateTitle='Projects'
         description="Showcase of my projects on front-end development that I'm proud of."
       />
-
       <main>
-        <section className={clsx(isLoaded && 'fade-in-start min-h-screen')}>
-          <div className='layout mt-[60px] min-h-screen py-12'>
-            <h1 className='text-5xl dark:text-gray-100' data-fade='0'>
-              Projects
-            </h1>
-            <p data-fade='1' className='mt-2 text-gray-600 dark:text-gray-300'>
-              Showcase of my works on frontend development.
-            </p>
-
-            {projects.map((project, index) => (
-              <div key={project.category}>
-                <h1
-                  className='my-6 text-xl dark:text-gray-100'
-                  data-fade={index + 1}
-                >
-                  {project.category}
-                </h1>
-                <ProjectCard project={project} />
-              </div>
-            ))}
+        <section className={clsx(isLoaded && 'fade-in-start')}>
+          <div className='layout'>
+            <div className='mx-8 mt-12 grid max-w-[820px] gap-4' data-fade='1'>
+              <p className='text-[32px]'>Projects</p>
+              <p className='mb-[32px] italic opacity-50'>
+                Showcase of my projects on front-end development that I'm proud
+                of.
+              </p>
+              {projects?.map((project, index) => (
+                <div key={project.category}>
+                  <h1
+                    className='text-[18px] text-[#555] dark:text-[#aaa]'
+                    data-fade={index + 1}
+                  >
+                    {project.category}
+                  </h1>
+                  <ProjectCard project={project} />
+                </div>
+              ))}
+            </div>
           </div>
         </section>
       </main>

src/store/projects.tsx

@@ -0,0 +1,56 @@
+import { BsGithub } from 'react-icons/bs';
+import { SiBilibili, SiNextdotjs, SiVite } from 'react-icons/si';
+import { atom } from 'recoil';
+
+export const projectsAtom = atom({
+  key: 'PROJECTS_ATOM',
+  default: [
+    {
+      category: 'Next Ecosystem',
+      child: [
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <BsGithub />,
+        },
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <SiBilibili />,
+        },
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <SiVite />,
+        },
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <SiNextdotjs />,
+        },
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <SiNextdotjs />,
+        },
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <SiNextdotjs />,
+        },
+      ],
+    },
+  ],
+});

src/styles/globals.css

@@ -112,7 +112,7 @@
 }
 
 [data-fade] {
-  @apply translate-y-10 opacity-0 transition duration-[400ms] ease-out motion-reduce:translate-y-0 motion-reduce:opacity-100;
+  @apply translate-y-0 opacity-0 transition duration-[400ms] ease-out motion-reduce:translate-y-0 motion-reduce:opacity-100;
 }
 .fade-in-start [data-fade] {
   @apply translate-y-0 opacity-100;

src/types/frontmatters.ts

@@ -59,7 +59,8 @@ export type projectItemType = {
   title: string;
   description: string;
   link: string;
-  techs: string;
+  // eslint-disable-next-line
+  icon: React.ReactComponentElement<any>;
 };
 
 export type ProjectsType = {