Skip to content

Commit a4f6f95

Browse files
weizwzweizwz
committed
feat: 优化关于我的模块
1 parent 5d9c9ff commit a4f6f95

File tree

2 files changed

+57
-85
lines changed

2 files changed

+57
-85
lines changed

‎app/components/About.tsx‎

Lines changed: 56 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,82 @@
11
import {
2-
HeartOutlined,
3-
BulbOutlined,
42
GithubOutlined,
53
MailOutlined,
6-
EditOutlined,
4+
MessageOutlined,
75
} from "@ant-design/icons";
8-
import { Button } from "antd";
96

107
import { config } from "../config";
118

129
interface AboutProps {
1310
title?: string;
1411
}
1512

16-
export function About({ title = "关于我" }: AboutProps) {
13+
export function About({ title = "你好，我是 weizwz" }: AboutProps) {
14+
const techStack = [
15+
{ name: "JavaScript", color: "bg-blue-100 text-blue-600" },
16+
{ name: "Vue.js", color: "bg-emerald-100 text-emerald-600" },
17+
{ name: "React", color: "bg-sky-100 text-sky-600" },
18+
{ name: "Node.js", color: "bg-yellow-100 text-yellow-700" },
19+
{ name: "Next.js", color: "bg-purple-100 text-purple-600" },
20+
{ name: "uni-app", color: "bg-rose-100 text-rose-600" },
21+
];
22+
1723
return (
1824
<section id="about" className="py-20 bg-gray-50">
1925
<div className="max-w-6xl mx-auto px-4">
20-
<h2 className="text-4xl font-bold text-center mb-12">{title}</h2>
21-
22-
<div className="grid md:grid-cols-3 gap-10 mb-12 md:px-3">
23-
<div className="card-hover border-1 border-slate-200 shadow-md shadow-slate-200 rounded-3xl overflow-hidden">
24-
<div className="text-center p-6">
25-
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
26-
<img className="w-full h-full rounded-full" src="https://p.weizwz.com/chenxuyuan-alone_0a7cc2c87b232b1f.webp" alt="head" />
27-
</div>
28-
<h3 className="text-2xl font-bold mb-4 text-gray-800">求知者</h3>
29-
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
30-
专注于现代Web开发，热爱探索新技术
31-
<br />
32-
始终保持学习的心态，拥抱科技与未来
33-
</p>
34-
</div>
35-
</div>
36-
<div className="card-hover border-1 border-slate-200 shadow-md shadow-slate-200 rounded-3xl overflow-hidden">
37-
<div className="text-center p-6">
38-
<div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
39-
<BulbOutlined
40-
className="text-3xl"
41-
style={{ color: "#DBFCE6" }}
42-
/>
43-
</div>
44-
<h3 className="text-2xl font-bold mb-4 text-gray-800">细节控</h3>
45-
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
46-
追求代码简洁和高效，严控项目的细节
47-
<br />
48-
打造用户的完美体验，提高产品的质量
49-
</p>
50-
</div>
51-
</div>
52-
<div className="card-hover border-1 border-slate-200 shadow-md shadow-slate-200 rounded-3xl overflow-hidden">
53-
<div className="text-center p-6">
54-
<div className="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
55-
<HeartOutlined
56-
className="text-3xl"
57-
style={{ color: "#FFE2E2" }}
58-
/>
59-
</div>
60-
<h3 className="text-2xl font-bold mb-4 text-gray-800">
61-
开源精神
62-
</h3>
63-
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
64-
热爱分享知识和生活，相信开源的力量
65-
<br />
66-
通过代码连接全世界，用技术创造价值
67-
</p>
68-
</div>
26+
27+
{/* Intro Card */}
28+
<div className="bg-white rounded-3xl shadow-sm p-12 text-center max-w-5xl mx-auto mb-16">
29+
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-8">{title}</h2>
30+
<p className="text-gray-500 text-lg leading-relaxed max-w-3xl mx-auto mb-10">
31+
一名充满热情的前端开发工程师，专注于构建高质量的 Web 应用和用户体验。拥有丰富的前端开发经验，熟练掌握现代 Web 技术栈，致力于通过技术创新解决实际问题，为用户创造价值。
32+
</p>
33+
34+
<div className="flex flex-wrap justify-center gap-3">
35+
{techStack.map((tech) => (
36+
<span
37+
key={tech.name}
38+
className={`px-4 py-2 rounded-full text-sm font-semibold ${tech.color}`}
39+
>
40+
{tech.name}
41+
</span>
42+
))}
6943
</div>
7044
</div>
7145

72-
<div className="max-w-6xl mx-auto px-4 text-center">
73-
<p className="md:text-xl text-slate-400 mb-8 max-w-2xl mx-auto leading-relaxed">
74-
有想法？让我们一起创造些什么吧！<br />
75-
欢迎与我交流技术、分享想法或探讨合作机会
46+
{/* Contact Section */}
47+
<div className="text-center max-w-5xl mx-auto">
48+
<p className="text-gray-500 text-lg mb-8">
49+
如果您有有趣的项目想法或合作机会，欢迎与我联系
7650
</p>
7751

78-
<div className="flex justify-center flex-wrap gap-6">
79-
<Button
80-
type="primary"
81-
size="large"
82-
shape="round"
83-
icon={<GithubOutlined />}
84-
href="https://github.com/weizwz/weiz-home"
85-
target="_blank"
86-
>
87-
GitHub
88-
</Button>
89-
<Button
90-
type="primary"
91-
size="large"
92-
shape="round"
93-
icon={<MailOutlined />}
52+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
53+
{/* Email Card */}
54+
<a
9455
href={config.social.email}
56+
className="bg-white rounded-full p-4 flex items-center justify-center gap-3 shadow-sm hover:shadow-md transition-all cursor-pointer group"
9557
>
96-
邮箱
97-
</Button>
98-
<Button
99-
type="primary"
100-
size="large"
101-
shape="round"
102-
icon={<EditOutlined />}
103-
href={config.blog.linksUrl}
58+
<MailOutlined className="text-md text-blue-500! group-hover:scale-110 transition-transform" />
59+
<span className="text-gray-600 font-medium">Mail: weizwz@foxmail.com</span>
60+
</a>
61+
62+
{/* GitHub Card */}
63+
<a
64+
href={config.social.github}
10465
target="_blank"
66+
className="bg-white rounded-full p-4 flex items-center justify-center gap-3 shadow-sm hover:shadow-md transition-all cursor-pointer group"
10567
>
106-
留言
107-
</Button>
68+
<GithubOutlined className="text-md text-blue-500! group-hover:scale-110 transition-transform" />
69+
<span className="text-gray-600 font-medium">Social: github.com/weizwz</span>
70+
</a>
71+
72+
{/* WeChat Card */}
73+
<a
74+
href="https://note.weizwz.com/pages/links"
75+
target="_blank"
76+
className="bg-white rounded-full p-4 flex items-center justify-center gap-3 shadow-sm hover:shadow-md transition-all cursor-pointer group">
77+
<MessageOutlined className="text-md text-blue-500! group-hover:scale-110 transition-transform" />
78+
<span className="text-gray-600 font-medium">Links: weizwz.com/links</span>
79+
</a>
10880
</div>
10981
</div>
11082

‎app/components/BlogArticles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export function BlogArticles({ title = '最新文章', subtitle = '分享最新
153153
className={`w-full md:w-1/3 flex-shrink-0 md:px-4`}
154154
onMouseEnter={() => setIsPaused(true)}
155155
onMouseLeave={() => setIsPaused(false)}>
156-
<div className='bg-white rounded-[2rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 h-full p-8 flex flex-col group relative overflow-hidden text-left'>
156+
<div className='bg-white rounded-3xl border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 h-full p-8 flex flex-col group relative overflow-hidden text-left'>
157157

158158
{/* Header: Category and Icon */}
159159
<div className='flex justify-between items-center mb-6'>

0 commit comments

Comments
 (0)