Skip to content

Commit 31da992

Browse files
Chocolate1999Chocolate1999
committed
feat: add new nav
1 parent 3b94040 commit 31da992

File tree

13 files changed

+162
-212
lines changed

13 files changed

+162
-212
lines changed

‎src/components/layout/Footer.tsx‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,29 @@
11
export default function Footer() {
22
return (
3-
<footer className='relative bottom-2 flex w-full justify-center text-gray-700 dark:text-gray-200'>
4-
© {new Date().getFullYear()} By{' '}
5-
<a
6-
href='https://github.com/Chocolate1999'
7-
target='_blank'
8-
className='pl-1'
9-
rel='noreferrer'
10-
>
11-
Chocolate
12-
</a>
3+
<footer className='mt-16 text-right text-[#b3b3b3] dark:text-gray-200'>
4+
<section className='flex flex-col'>
5+
<div>
6+
<a
7+
href='https://creativecommons.org/licenses/by-nc-sa/4.0/'
8+
rel='noreferrer'
9+
target='_blank'
10+
>
11+
CC BY-NC-SA 4.0
12+
</a>{' '}
13+
{new Date().getFullYear()}
14+
<a
15+
href='https://github.com/Chocolate1999'
16+
target='_blank'
17+
className='pl-1'
18+
rel='noreferrer'
19+
>
20+
© Chocolate
21+
</a>
22+
</div>
23+
<a href='https://beian.miit.gov.cn/' rel='noreferrer' target='_blank'>
24+
湘ICP备20002952号
25+
</a>
26+
</section>
1327
</footer>
1428
);
1529
}

‎src/components/layout/Header.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { useMemo } from 'react';
33

44
import clsxm from '@/lib/clsxm';
55

6-
import HeaderNav from '@/components/layout/hader-nav';
7-
import HeaderButton from '@/components/layout/header-button';
6+
import HeaderNav from '@/components/layout/HeaderNav';
7+
import Icon from '@/components/layout/Icon';
88

99
export default function Header() {
1010
const docScroll = useScroll();
@@ -16,16 +16,18 @@ export default function Header() {
1616
return (
1717
<header
1818
className={clsxm(
19-
'fixed top-0 z-50 w-full bg-transparent',
19+
'sticky top-0 z-50 w-full bg-transparent',
2020
isDocHover &&
2121
'solid border-b border-black border-opacity-[0.12] bg-white bg-opacity-[98] backdrop-blur-[40px]',
2222
'dark:border-b dark:border-black dark:bg-[#060807]'
2323
)}
2424
>
25-
<div className='layout flex h-[60px] items-center justify-between leading-[60px]'>
26-
<HeaderNav />
27-
<HeaderButton />
28-
</div>
25+
<section className='layout'>
26+
<div className='mx-8 flex h-[60px] items-center justify-between leading-[60px]'>
27+
<HeaderNav />
28+
<Icon />
29+
</div>
30+
</section>
2931
</header>
3032
);
3133
}

‎src/components/layout/hader-nav/index.tsx‎ renamed to ‎src/components/layout/HeaderNav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ const HeaderNav = () => {
88
const navVal = useRecoilValue(navAtom);
99

1010
return (
11-
<div className='flex h-full w-auto flex-row items-center justify-center'>
11+
<div className='flex h-full w-auto flex-row items-center justify-center gap-[24px]'>
1212
{navVal.map((item) => {
1313
return (
14-
<div className='pr-[32px]' key={item.name}>
14+
<div key={item.name}>
1515
<UnstyledLink href={item.link}>
1616
<span className='hover:text-[#0066ff] dark:text-gray-100'>
1717
{item.name}

‎src/components/layout/Icon.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { BsGithub } from 'react-icons/bs';
2+
import { FiSun } from 'react-icons/fi';
3+
import { SiBilibili } from 'react-icons/si';
4+
5+
const Logo = () => {
6+
return (
7+
<div className='flex cursor-pointer gap-[24px] text-[22px]'>
8+
<a
9+
href='https://github.com/Chocolate1999'
10+
rel='noreferrer'
11+
target='_blank'
12+
>
13+
<BsGithub />
14+
</a>
15+
<a
16+
href='https://space.bilibili.com/351534170'
17+
rel='noreferrer'
18+
target='_blank'
19+
>
20+
<SiBilibili />
21+
</a>
22+
<FiSun />
23+
</div>
24+
);
25+
};
26+
27+
export default Logo;

‎src/components/layout/Layout.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ import Footer from '@/components/layout/Footer';
44
import Header from '@/components/layout/Header';
55

66
export default function Layout({ children }: { children: React.ReactNode }) {
7-
// Put Header or Footer Here
87
return (
9-
<div className='next-container'>
8+
<>
109
<Header />
11-
{children}
12-
<Footer />
13-
</div>
10+
<div className='layout'>
11+
<div className='mx-8'>
12+
{children}
13+
<Footer />
14+
</div>
15+
</div>
16+
</>
1417
);
1518
}

‎src/components/layout/hader-nav/style.module.scss‎

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

‎src/components/layout/header-button/index.tsx‎

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

‎src/components/layout/header-button/style.module.scss‎

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

‎src/components/layout/style.module.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@keyframes fade-up-header {
2+
0% {
3+
opacity: 0;
4+
transform: translateY(10%);
5+
}
6+
7+
100% {
8+
opacity: 1;
9+
transform: translateY(0);
10+
}
11+
}
12+
13+
.logo_name {
14+
}

‎src/pages/index.tsx‎

Lines changed: 76 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -18,82 +18,84 @@ export default function HomePage() {
1818
<Layout>
1919
<Seo />
2020
<main>
21-
<section className={clsxm('min-h-screen', isLoaded && 'fade-in-start')}>
22-
<div className='flex min-h-screen flex-col justify-center text-center'>
23-
<article className=' layout flex flex-col items-start'>
24-
<h2 className='text-2x dark:text-gray-100' data-fade='1'>
25-
Hi!
26-
</h2>
27-
<h1 className=' mt-1 text-3xl dark:text-gray-100' data-fade='2'>
28-
You can call me Chocolate
29-
</h1>
30-
<p
31-
className={clsxm(
32-
' mt-6 max-w-2xl text-gray-700 dark:text-gray-300',
33-
'2xl:text-xl text-left text-lg'
34-
)}
35-
data-fade='3'
36-
>
37-
JS, TS, LeetCode, Vue, React, algorithm lovers.The 21st
38-
front-end development, currently moving bricks in a large
39-
factory.
40-
</p>
41-
<p
42-
className={clsxm(
43-
' mt-2 max-w-2xl text-gray-700 dark:text-gray-300',
44-
'2xl:text-xl text-left text-lg'
45-
)}
46-
data-fade='4'
47-
>
48-
Motto: Learning is like sailing against the current, if you
49-
don't advance, you will retreat!
50-
</p>
51-
<div data-fade='5' className='mt-4 flex'>
52-
<CustomLink href='/blog'>To Blog</CustomLink>
53-
<CustomLink href='/about' className='ml-6'>
54-
Learn more about me
55-
</CustomLink>
56-
</div>
57-
<div className='flex'>
58-
<Tooltip content={<p>Chocolate1999</p>}>
59-
<div
60-
data-fade='6'
61-
className='mt-8 flex flex-wrap gap-4 gap-y-2'
62-
>
63-
<UnstyledLink
64-
href='https://github.com/Chocolate1999'
65-
className={clsxm(
66-
'inline-flex items-center gap-1 text-base font-medium',
67-
'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
68-
'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
69-
'transition-colors'
70-
)}
71-
onClick={() => {
72-
trackEvent('Social Link: Github', 'link');
73-
}}
21+
<section className={clsxm(isLoaded && 'fade-in-start')}>
22+
<div className='mt-[120px] text-center'>
23+
<article className='layout '>
24+
<div className='flex flex-col items-start'>
25+
<h2 className='text-2x dark:text-gray-100' data-fade='1'>
26+
Hi!
27+
</h2>
28+
<h1 className=' mt-1 text-3xl dark:text-gray-100' data-fade='2'>
29+
You can call me Chocolate
30+
</h1>
31+
<p
32+
className={clsxm(
33+
' mt-6 max-w-2xl text-gray-700 dark:text-gray-300',
34+
'2xl:text-xl text-left text-lg'
35+
)}
36+
data-fade='3'
37+
>
38+
JS, TS, LeetCode, Vue, React, algorithm lovers.The 21st
39+
front-end development, currently moving bricks in a large
40+
factory.
41+
</p>
42+
<p
43+
className={clsxm(
44+
' mt-2 max-w-2xl text-gray-700 dark:text-gray-300',
45+
'2xl:text-xl text-left text-lg'
46+
)}
47+
data-fade='4'
48+
>
49+
Motto: Learning is like sailing against the current, if you
50+
don't advance, you will retreat!
51+
</p>
52+
<div data-fade='5' className='mt-4 flex'>
53+
<CustomLink href='/blog'>To Blog</CustomLink>
54+
<CustomLink href='/about' className='ml-6'>
55+
Learn more about me
56+
</CustomLink>
57+
</div>
58+
<div className='flex'>
59+
<Tooltip content={<p>Chocolate1999</p>}>
60+
<div
61+
data-fade='6'
62+
className='mt-8 flex flex-wrap gap-4 gap-y-2'
7463
>
75-
<SiGithub className='shrink-0' />
76-
</UnstyledLink>
77-
</div>
78-
</Tooltip>
79-
<Tooltip content={<p>小狮子前端</p>}>
80-
<div
81-
data-fade='6'
82-
className='mt-8 ml-4 flex flex-wrap gap-4 gap-y-2'
83-
>
84-
<UnstyledLink
85-
href='https://github.com/Chocolate1999'
86-
className={clsxm(
87-
'inline-flex items-center gap-1 text-base font-medium',
88-
'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
89-
'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
90-
'transition-colors'
91-
)}
64+
<UnstyledLink
65+
href='https://github.com/Chocolate1999'
66+
className={clsxm(
67+
'inline-flex items-center gap-1 text-base font-medium',
68+
'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
69+
'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
70+
'transition-colors'
71+
)}
72+
onClick={() => {
73+
trackEvent('Social Link: Github', 'link');
74+
}}
75+
>
76+
<SiGithub className='shrink-0' />
77+
</UnstyledLink>
78+
</div>
79+
</Tooltip>
80+
<Tooltip content={<p>小狮子前端</p>}>
81+
<div
82+
data-fade='6'
83+
className='mt-8 ml-4 flex flex-wrap gap-4 gap-y-2'
9284
>
93-
<SiWechat className='shrink-0' />
94-
</UnstyledLink>
95-
</div>
96-
</Tooltip>
85+
<UnstyledLink
86+
href='https://github.com/Chocolate1999'
87+
className={clsxm(
88+
'inline-flex items-center gap-1 text-base font-medium',
89+
'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
90+
'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
91+
'transition-colors'
92+
)}
93+
>
94+
<SiWechat className='shrink-0' />
95+
</UnstyledLink>
96+
</div>
97+
</Tooltip>
98+
</div>
9799
</div>
98100
</article>
99101
</div>

0 commit comments

Comments
 (0)