Skip to content

Commit 81a5699

Browse files
weizwzweizwz
authored
Merge pull request #1 from weizwz/dev
Dev
2 parents 7ea32e7 + 9f175a3 commit 81a5699

File tree

9 files changed

+431
-470
lines changed

9 files changed

+431
-470
lines changed

‎app/app.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,4 +157,51 @@ body {
157157
@media (prefers-color-scheme: dark) {
158158
color-scheme: dark;
159159
}
160+
}
161+
/* Vertical Scroll Animation */
162+
@keyframes scroll-up {
163+
0% {
164+
transform: translateY(0);
165+
}
166+
167+
100% {
168+
transform: translateY(-100%);
169+
}
170+
}
171+
172+
@keyframes scroll-down {
173+
0% {
174+
transform: translateY(-100%);
175+
}
176+
177+
100% {
178+
transform: translateY(0);
179+
}
180+
}
181+
182+
.animate-scroll-up {
183+
animation: scroll-up 56s linear infinite;
184+
}
185+
186+
.animate-scroll-down {
187+
animation: scroll-down 64s linear infinite;
188+
}
189+
@keyframes scroll-up-half {
190+
0% {
191+
transform: translateY(0);
192+
}
193+
194+
100% {
195+
transform: translateY(-50%);
196+
}
197+
}
198+
199+
@keyframes scroll-down-half {
200+
0% {
201+
transform: translateY(-50%);
202+
}
203+
204+
100% {
205+
transform: translateY(0);
206+
}
160207
}

‎app/components/About.tsx‎

Lines changed: 56 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,82 @@
11
import {
2-
HeartOutlined,
3-
BulbOutlined,
4-
SearchOutlined,
52
GithubOutlined,
63
MailOutlined,
7-
EditOutlined,
4+
MessageOutlined,
85
} from "@ant-design/icons";
9-
import { Button } from "antd";
106

117
import { config } from "../config";
128

139
interface AboutProps {
1410
title?: string;
1511
}
1612

17-
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+
1823
return (
1924
<section id="about" className="py-20 bg-gray-50">
2025
<div className="max-w-6xl mx-auto px-4">
21-
<h2 className="text-4xl font-bold text-center mb-16">{title}</h2>
22-
23-
<div className="grid md:grid-cols-3 gap-10 mb-16 md:px-3">
24-
<div className="card-hover border-1 border-slate-200 shadow-md shadow-slate-200 rounded-3xl overflow-hidden">
25-
<div className="text-center p-6">
26-
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
27-
<img className="w-full h-full rounded-full" src="https://p.weizwz.com/chenxuyuan-alone_0a7cc2c87b232b1f.webp" alt="head" />
28-
</div>
29-
<h3 className="text-2xl font-bold mb-4 text-gray-800">求知者</h3>
30-
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
31-
专注于现代Web开发，热爱探索新技术
32-
<br />
33-
始终保持学习的心态，拥抱科技与未来
34-
</p>
35-
</div>
36-
</div>
37-
<div className="card-hover border-1 border-slate-200 shadow-md shadow-slate-200 rounded-3xl overflow-hidden">
38-
<div className="text-center p-6">
39-
<div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
40-
<BulbOutlined
41-
className="text-3xl"
42-
style={{ color: "#DBFCE6" }}
43-
/>
44-
</div>
45-
<h3 className="text-2xl font-bold mb-4 text-gray-800">细节控</h3>
46-
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
47-
追求代码简洁和高效，严控项目的细节
48-
<br />
49-
打造用户的完美体验，提高产品的质量
50-
</p>
51-
</div>
52-
</div>
53-
<div className="card-hover border-1 border-slate-200 shadow-md shadow-slate-200 rounded-3xl overflow-hidden">
54-
<div className="text-center p-6">
55-
<div className="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
56-
<HeartOutlined
57-
className="text-3xl"
58-
style={{ color: "#FFE2E2" }}
59-
/>
60-
</div>
61-
<h3 className="text-2xl font-bold mb-4 text-gray-800">
62-
开源精神
63-
</h3>
64-
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
65-
热爱分享知识和生活，相信开源的力量
66-
<br />
67-
通过代码连接全世界，用技术创造价值
68-
</p>
69-
</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+
))}
7043
</div>
7144
</div>
7245

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

79-
<div className="flex justify-center flex-wrap gap-6">
80-
<Button
81-
type="primary"
82-
size="large"
83-
shape="round"
84-
icon={<GithubOutlined />}
85-
href="https://github.com/weizwz/weiz-home"
86-
target="_blank"
87-
>
88-
GitHub
89-
</Button>
90-
<Button
91-
type="primary"
92-
size="large"
93-
shape="round"
94-
icon={<MailOutlined />}
52+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
53+
{/* Email Card */}
54+
<a
9555
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"
9657
>
97-
邮箱
98-
</Button>
99-
<Button
100-
type="primary"
101-
size="large"
102-
shape="round"
103-
icon={<EditOutlined />}
104-
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}
10565
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"
10667
>
107-
留言
108-
</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>
10980
</div>
11081
</div>
11182

0 commit comments

Comments
 (0)