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

BIN
public/assets/images/cover.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 255 KiB

4
src/components/header.astro
View File

@@ -4,10 +4,10 @@ import Logo from "../components/logo.astro";
---
<!-- This is an invisible div with relative position so that it takes up the height of the menu (because menu is absolute/fixed) -->
<div class="relative w-full h-20 opacity-0 pointer-events-none"></div>
<div class="relative w-full max-w-7xl h-20 mx-auto opacity-0 pointer-events-none"></div>
<header id="header" class="absolute top-0 z-50 w-full h-20">
<div
class="flex items-center justify-between h-full max-w-5xl pl-6 pr-4 mx-auto border-b border-l-0 border-r-0 border-transparent select-none lg:border-r lg:border-l lg:rounded-b-xl"
class="flex items-center justify-between h-full max-w-7xl pl-6 pr-4 mx-auto border-b border-l-0 border-r-0 border-transparent select-none lg:border-r lg:border-l lg:rounded-b-xl"
>
<Logo />
<div

63
src/components/project.astro
View File

@@ -5,61 +5,38 @@ const { name, description, url, image } = Astro.props;
<a
href={url}
target="_blank"
class="relative flex flex-col items-stretch duration-300 ease-out p-7 sm:p-3 group h-100 rounded-2xl"
class="relative flex flex-col items-stretch duration-300 ease-out p-5 sm:p-4 group h-full rounded-3xl w-full"
>
<span
class="absolute inset-0 z-20 block w-full h-full duration-300 ease-out bg-transparent border border-transparent border-dashed group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:border group-hover:border-neutral-300 dark:group-hover:border-neutral-600 group-hover:border-dashed rounded-2xl group-hover:bg-white dark:group-hover:bg-neutral-950"
class="absolute inset-0 z-20 block w-full h-full duration-300 ease-out bg-transparent border border-transparent border-dashed group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:border group-hover:border-neutral-300 dark:group-hover:border-neutral-600 group-hover:border-dashed rounded-3xl group-hover:bg-white dark:group-hover:bg-neutral-950"
></span>
<span
class="absolute inset-0 z-10 block w-full h-full duration-300 ease-out border border-dashed rounded-2xl border-neutral-300 dark:border-neutral-600 group-hover:translate-x-1 group-hover:translate-y-1"
class="absolute inset-0 z-10 block w-full h-full duration-300 ease-out border border-dashed rounded-3xl border-neutral-300 dark:border-neutral-600 group-hover:translate-x-1 group-hover:translate-y-1"
></span>
<span
class="relative z-30 block duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
>
<span class="block w-full">
<img src={image} class="w-full h-auto rounded-lg aspect-[16/9] object-cover" />
<span class="relative z-30 block duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1">
<span class="block w-full overflow-hidden rounded-xl"> <img
src={image}
class="w-full h-auto rounded-xl aspect-[16/9] object-cover transition-transform duration-500 group-hover:scale-105"
alt={name}
/>
</span>
<span class="block w-full px-1 mt-5 mb-1 sm:mt-3">
<span
class="flex items-center mb-0 text-base font-semibold tracking-tight text-neutral-900 dark:text-neutral-100"
>
<span>{name}</span>
<span class="block w-full px-1 mt-5 mb-1 sm:mt-4"> <span class="flex items-center mb-1 text-lg font-bold tracking-tight text-neutral-900 dark:text-neutral-100"> <span>{name}</span>
<svg
class="group-hover:translate-x-0 group-hover:translate-y-0 -rotate-45 translate-y-1 -translate-x-1 w-2.5 h-2.5 stroke-current ml-1 transition-all ease-in-out duration-200 transform"
class="group-hover:translate-x-0 group-hover:translate-y-0 -rotate-45 translate-y-1 -translate-x-1 w-3 h-3 stroke-current ml-2 transition-all ease-in-out duration-200 transform"
viewBox="0 0 13 15"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
><g
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
><g
id="svg"
transform="translate(0.666667, 2.333333)"
stroke="currentColor"
stroke-width="2.4"
><g
><polyline
class="transition-all duration-200 ease-out opacity-0 delay-0 group-hover:opacity-100"
points="5.33333333 0 10.8333333 5.5 5.33333333 11"
></polyline><line
class="transition-all duration-200 ease-out transform -translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 group-hover:ml-0"
x1="10.8333333"
y1="5.5"
x2="0.833333333"
y2="5.16666667"></line></g
></g
></g
></svg
>
<g stroke-linecap="round" stroke-linejoin="round">
<polyline class="transition-all duration-200 ease-out opacity-0 group-hover:opacity-100" points="5.33333333 0 10.8333333 5.5 5.33333333 11"></polyline>
<line class="transition-all duration-200 ease-out transform -translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100" x1="10.8333333" y1="5.5" x2="0.833333333" y2="5.16666667"></line>
</g>
</svg>
</span>
<span class="text-sm text-neutral-600 dark:text-neutral-400 block line-clamp-2 leading-relaxed">
{description}
</span>
<span class="text-sm text-neutral-600 dark:text-neutral-400 block truncate"
>{description}</span
>
</span>
</span>
</a>

2
src/pages/about.astro
View File

@@ -6,7 +6,7 @@ import Layout from "../layouts/main.astro";
---
<Layout title="About Me">
<section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
<section class="relative z-20 max-w-7xl mx-auto my-12 px-7 lg:px-0">
<PageHeading
title="About Me"
description="Hello 👋 I'm a frontend engineer from Nanjing, China. I'm passionate about building new products and learning new technology."

51
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>

2
src/pages/posts.astro
View File

@@ -5,7 +5,7 @@ import Layout from "../layouts/main.astro";
---
<Layout title="My Writing">
<section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
<section class="relative z-20 max-w-7xl mx-auto my-12 px-7 lg:px-0">
<PageHeading
title="My Writing"
description="Dive into my musings on life and tech in my latest posts; a blend of introspection and innovation. Keep an eye out for fresh insights and updates!"

2
src/pages/projects.astro
View File

@@ -6,7 +6,7 @@ import Layout from "../layouts/main.astro";
---
<Layout title="My Projects">
<section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
<section class="relative z-20 max-w-7xl mx-auto my-12 px-7 lg:px-0">
<PageHeading
title="My Projects"
description="Here are some of the current projects I've been working on. I really enjoy creating new projects and coming up with new ideas. I'm always working on something new, so check back often!"