tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 优化首页语义化

Browse Source
This commit is contained in:
tone
2025-12-20 22:39:48 +08:00
parent ddc9e613e2
commit 60d8ad8e8a
2 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/frontend/app/(with-header-footer)/page.tsx
View File

@@ -2,22 +2,36 @@ import Image from 'next/image';
export default function Home() { export default function Home() {
return ( return (
<div className="w-full flex-1 flex flex-col items-center justify-center"> <section className="w-full flex-1 flex flex-col items-center justify-center">
<figure className="flex flex-col items-center">
<Image <Image
src="/avatar.png" src="/avatar.png"
alt="TONE's avatar" alt="TONE 的个人头像"
width={180} width={180}
height={180} height={180}
className="rounded-full duration-400 size-35 md:size-45 select-none" className="rounded-full duration-400 size-35 md:size-45 select-none"
priority priority
quality={100} quality={100}
/> />
</figure>
<h1 className='text-4xl md:text-5xl font-bold mt-5 md:mt-8 gradient-title duration-400 select-none'>特恩(TONE)</h1> <h1 className='text-4xl md:text-5xl font-bold mt-5 md:mt-8 gradient-title duration-400 select-none'>特恩(TONE)</h1>
<h2 className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 duration-400 select-none'>一名在各个领域反复横跳的程序员</h2> <p className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 duration-400 select-none'>一名在各个领域反复横跳的程序员</p>
<div className='flex sm:flex-row flex-col gap-2 sm:gap-10 mt-5 md:mt-8 duration-400'> <nav className='flex sm:flex-row flex-col gap-2 sm:gap-10 mt-5 md:mt-8 duration-400' aria-label="社交媒体链接">
<a href='https://space.bilibili.com/474156211' target='_black' className='bg-[#488fe9] hover:bg-[#3972ba] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'>哔哩哔哩</a> <a href='https://space.bilibili.com/474156211'
<a href='https://github.com/tonecn' className='bg-[#da843f] hover:bg-[#c87d3e] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'>GitHub</a> target='_black'
</div> rel="noopener noreferrer"
</div> className='bg-[#488fe9] hover:bg-[#3972ba] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'
>
哔哩哔哩
</a>
<a href='https://github.com/tonecn'
target='_black'
rel="noopener noreferrer"
className='bg-[#da843f] hover:bg-[#c87d3e] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'
>
GitHub
</a>
</nav>
</section>
); );
} }

4
apps/frontend/app/layout.tsx
View File

@@ -26,7 +26,7 @@ export default async function RootLayout({
const user = await UserAPI.me().catch(() => null); const user = await UserAPI.me().catch(() => null);
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="zh-CN" suppressHydrationWarning>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`} className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}
@@ -39,10 +39,8 @@ export default async function RootLayout({
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
> >
<main className="flex-1 flex flex-col bg-zinc-50">
{children} {children}
<Toaster /> <Toaster />
</main>
</ThemeProvider> </ThemeProvider>
</ClientProvider> </ClientProvider>
</body> </body>