biss/profile
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

change

Browse Source
This commit is contained in:
biss
2026-02-18 20:08:07 +08:00
parent 645fb84634
commit c7b816a284
7 changed files with 49 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/pages/index.astro
View File

@@ -6,62 +6,51 @@ import Writings from "../components/home/writings.astro";
import Layout from "../layouts/main.astro";
---
<Layout title="Kai">
<Layout title="个人主页">
<div
class="relative z-20 w-full max-w-4xl mx-auto mt-16 px-7 md:mt-24 lg:mt-32 xl:px-0"
/* 1. 确保 max-w-7xl 与导航栏一致，并在大屏增加 px 保证呼吸感 */
class="relative z-20 w-full max-w-7xl mx-auto mt-16 px-7 md:mt-24 lg:mt-32 xl:px-10"
>
<div class="flex flex-col items-center md:flex-row">
<div class="relative w-full md:w-1/2">
<h1
class="mb-5 text-4xl font-bold leading-tight md:text-4xl lg:text-6xl dark:text-white"
/* 2. 这里的字体大小可以再大胆一点，配合加宽后的布局 */
class="mb-5 text-4xl font-bold leading-tight md:text-5xl lg:text-7xl dark:text-white"
>
Hello, I'm Kai.
Hello, I'm Bi.
</h1>
<p class="mb-6 text-base text-neutral-600 dark:text-neutral-400">
I'm a front-end programmer living in Nanjing. <br
class="hidden lg:block"
/>I focus on Web development.
</p>
<p class="mb-2 font-semibold text-neutral-800 dark:text-neutral-200">
I can help you out with:
</p>
<ul
class="py-2 space-y-[3px] text-sm list-disc list-inside text-neutral-500 dark:text-neutral-400"
>
<li>Vue.js Development</li>
<li>React.js Development</li>
<li>Node.js Development</li>
<li>Website Design</li>
<li>and more...</li>
</ul>
<Button text="Follow me on 𝕏" link="https://x.com/0xKaiBi" />
<Button text="Follow me on Github" link="https://github.com/bishshi" />
</div>
<div
class="relative justify-end hidden w-full mt-10 md:flex md:pl-10 md:w-1/2 md:mt-0 md:translate-y-4 xl:translate-y-0"
>
<div class="relative z-50 w-full">
<div
class="absolute bottom-0 z-40 w-16 h-16 -translate-x-6 -translate-y-1/2 lg:top-auto top-0 lg:-translate-y-[330px] rounded-full"
class="absolute bottom-0 z-40 w-16 h-16 -translate-x-6 -translate-y-1/2 lg:top-auto top-0 lg:-translate-y-[350px] rounded-full"
>
<span
class="relative z-20 flex items-center justify-center w-full h-full text-2xl border-8 border-white rounded-full dark:border-neutral-950 bg-neutral-100 dark:bg-neutral-900"
>
<span
class="flex items-center justify-center w-full h-full bg-white border border-dashed rounded-full dark:bg-neutral-950 border-neutral-300 dark:border-neutral-700"
>👋</span
>
<span class="flex items-center justify-center w-full h-full bg-white border border-dashed rounded-full dark:bg-neutral-950 border-neutral-300 dark:border-neutral-700">
👋
</span>
</span>
</div>
<div class="relative z-30 px-10">
<img
src="/assets/images/photo.png"
loading="eager"
decoding="auto"
class="relative z-30 w-full aspect-[790/1189] md:max-w-md mx-auto dark:-translate-y-0.5"
/* 3. 关键修改：将 md:max-w-md 改为 md:max-w-lg 或直接取消限制，让图片随容器变大 */
class="relative z-30 w-full aspect-[790/1189] md:max-w-lg ml-auto dark:-translate-y-0.5"
/>
</div>
<div
class="absolute bottom-0 right-0 z-20 w-full h-full lg:h-[420px] translate-x-0 -translate-y-px border border-dashed rounded-2xl bg-gradient-to-r dark:from-neutral-950 dark:via-black dark:to-neutral-950 from-white via-neutral-50 to-white border-neutral-300 dark:border-neutral-700"
class="absolute bottom-0 right-0 z-20 w-full h-full lg:h-[450px] translate-x-0 -translate-y-px border border-dashed rounded-2xl bg-gradient-to-r dark:from-neutral-950 dark:via-black dark:to-neutral-950 from-white via-neutral-50 to-white border-neutral-300 dark:border-neutral-700"
>
</div>
</div>
@@ -69,8 +58,8 @@ import Layout from "../layouts/main.astro";
</div>
</div>
<Separator text="Check out my projects" />
<Separator text="我的项目" />
<Projects />
<Separator text="Some of my writing" />
<Separator text="我的博客" />
<Writings />
</Layout>
</Layout>