Skip to content

Commit fa2c38a

Browse files
Chocolate1999Chocolate1999
authored
Merge pull request #12 from Chocolate1999:feat/new-projects-page
feat: new projects page
2 parents 7a8de48 + 21c255a commit fa2c38a

File tree

10 files changed

+120
-65
lines changed

10 files changed

+120
-65
lines changed

‎src/components/content/projects/ProjectItem.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as React from 'react';
2+
3+
import UnstyledLink from '@/components/links/UnstyledLink';
4+
5+
import { ProjectsType } from '@/types/frontmatters';
6+
7+
type ProjectCardProps = {
8+
project: ProjectsType;
9+
} & React.ComponentPropsWithoutRef<'li'>;
10+
11+
export default function ProjectCard({ project }: ProjectCardProps) {
12+
return (
13+
<ul className='mt-6 grid grid-cols-2 gap-4'>
14+
{project.child.map((projectItem) => (
15+
<UnstyledLink
16+
href={projectItem.link}
17+
className='group h-full p-4 hover:bg-[#88888808]'
18+
key={projectItem.title}
19+
>
20+
<section className=' flex items-center gap-[24px]'>
21+
<div className='text-[38px] opacity-50 group-hover:opacity-70 dark:group-hover:opacity-80'>
22+
{projectItem.icon}
23+
</div>
24+
<div>
25+
<h4 className='text-[#555] group-hover:text-gray-800 dark:text-gray-400 dark:group-hover:text-gray-100'>
26+
{projectItem.title}
27+
</h4>
28+
<p className='mb-auto text-sm text-gray-700 opacity-50 dark:text-gray-300 dark:group-hover:text-gray-50'>
29+
{projectItem.description}
30+
</p>
31+
</div>
32+
</section>
33+
</UnstyledLink>
34+
))}
35+
</ul>
36+
);
37+
}

‎src/components/layout/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import CustomLink from '@/components/links/CustomLink';
22

33
export default function Footer() {
44
return (
5-
<footer className='mt-16 text-right text-[#b3b3b3] '>
5+
<footer className='my-16 text-right text-[#b3b3b3] '>
66
<section className='flex flex-col items-end'>
77
<div>
88
<a

‎src/pages/blog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function IndexPage({
3030
<main>
3131
<section className={clsx(isLoaded && 'fade-in-start')}>
3232
<div className='layout'>
33-
<ul className='mx-8 mt-12 grid gap-4' data-fade='2'>
33+
<ul className='mx-8 mt-12 grid gap-4' data-fade='1'>
3434
{posts.length > 0 ? (
3535
posts.map((post, index) => (
3636
<>

‎src/pages/collection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import CollectionCard from '@/components/content/collections/CollectionCard';
77
import Layout from '@/components/layout/Layout';
88
import Seo from '@/components/Seo';
99

10-
import { collectionsAtom } from '@/store/collections';
10+
import { collectionsAtom } from '@/store/collections/collections';
1111

1212
export default function ProjectsPage() {
1313
const isLoaded = useLoaded();

‎src/pages/projects.tsx‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
33

44
import useLoaded from '@/hooks/useLoaded';
55

6-
import ProjectCard from '@/components/content/projects/ProjectCard';
6+
import ProjectCard from '@/components/content/projects/ProjectItem';
77
import Layout from '@/components/layout/Layout';
88
import Seo from '@/components/Seo';
99

@@ -19,28 +19,27 @@ export default function ProjectsPage() {
1919
templateTitle='Projects'
2020
description="Showcase of my projects on front-end development that I'm proud of."
2121
/>
22-
2322
<main>
24-
<section className={clsx(isLoaded && 'fade-in-start min-h-screen')}>
25-
<div className='layout mt-[60px] min-h-screen py-12'>
26-
<h1 className='text-5xl dark:text-gray-100' data-fade='0'>
27-
Projects
28-
</h1>
29-
<p data-fade='1' className='mt-2 text-gray-600 dark:text-gray-300'>
30-
Showcase of my works on frontend development.
31-
</p>
32-
33-
{projects.map((project, index) => (
34-
<div key={project.category}>
35-
<h1
36-
className='my-6 text-xl dark:text-gray-100'
37-
data-fade={index + 1}
38-
>
39-
{project.category}
40-
</h1>
41-
<ProjectCard project={project} />
42-
</div>
43-
))}
23+
<section className={clsx(isLoaded && 'fade-in-start')}>
24+
<div className='layout'>
25+
<div className='mx-8 mt-12 grid max-w-[820px] gap-4' data-fade='1'>
26+
<p className='text-[32px]'>Projects</p>
27+
<p className='mb-[32px] italic opacity-50'>
28+
Showcase of my projects on front-end development that I'm proud
29+
of.
30+
</p>
31+
{projects?.map((project, index) => (
32+
<div key={project.category}>
33+
<h1
34+
className='text-[18px] text-[#555] dark:text-[#aaa]'
35+
data-fade={index + 1}
36+
>
37+
{project.category}
38+
</h1>
39+
<ProjectCard project={project} />
40+
</div>
41+
))}
42+
</div>
4443
</div>
4544
</section>
4645
</main>

‎src/store/collections/index.tsx‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/store/projects.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { BsGithub } from 'react-icons/bs';
2+
import { SiBilibili, SiNextdotjs, SiVite } from 'react-icons/si';
3+
import { atom } from 'recoil';
4+
5+
export const projectsAtom = atom({
6+
key: 'PROJECTS_ATOM',
7+
default: [
8+
{
9+
category: 'Next Ecosystem',
10+
child: [
11+
{
12+
title: 'nextjs-tailwind-blog',
13+
description:
14+
'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
15+
link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
16+
icon: <BsGithub />,
17+
},
18+
{
19+
title: 'nextjs-tailwind-blog',
20+
description:
21+
'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
22+
link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
23+
icon: <SiBilibili />,
24+
},
25+
{
26+
title: 'nextjs-tailwind-blog',
27+
description:
28+
'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
29+
link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
30+
icon: <SiVite />,
31+
},
32+
{
33+
title: 'nextjs-tailwind-blog',
34+
description:
35+
'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
36+
link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
37+
icon: <SiNextdotjs />,
38+
},
39+
{
40+
title: 'nextjs-tailwind-blog',
41+
description:
42+
'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
43+
link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
44+
icon: <SiNextdotjs />,
45+
},
46+
{
47+
title: 'nextjs-tailwind-blog',
48+
description:
49+
'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
50+
link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
51+
icon: <SiNextdotjs />,
52+
},
53+
],
54+
},
55+
],
56+
});

‎src/store/projects/index.tsx‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/styles/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
}
113113

114114
[data-fade] {
115-
@apply translate-y-10 opacity-0 transition duration-[400ms] ease-out motion-reduce:translate-y-0 motion-reduce:opacity-100;
115+
@apply translate-y-0 opacity-0 transition duration-[400ms] ease-out motion-reduce:translate-y-0 motion-reduce:opacity-100;
116116
}
117117
.fade-in-start [data-fade] {
118118
@apply translate-y-0 opacity-100;

‎src/types/frontmatters.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@ export type projectItemType = {
5959
title: string;
6060
description: string;
6161
link: string;
62-
techs: string;
62+
// eslint-disable-next-line
63+
icon: React.ReactComponentElement<any>;
6364
};
6465

6566
export type ProjectsType = {

0 commit comments

Comments
 (0)