Skip to content

Commit 597e462

Browse files
weizwzweizwz
authored
Merge pull request #2 from weizwz/dev
Dev
2 parents 81a5699 + 16134fa commit 597e462

17 files changed

+1339
-1094
lines changed

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@
1818

1919
打包 `pnpm run build`
2020

21+
## 部署
22+
23+
部署到 cloudflare pages
24+
25+
登录 `npx wrangler login`
26+
27+
部署 `npx run deploy`
28+
2129
## 其他
2230

2331
带壳截图工具： https://mockuphone.com/

‎app/components/About.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import {
55
} from "@ant-design/icons";
66

77
import { config } from "../config";
8+
import { Section } from "./common/Section";
9+
import { Card } from "./common/Card";
810

911
interface AboutProps {
1012
title?: string;
@@ -21,11 +23,10 @@ export function About({ title = "你好，我是 weizwz" }: AboutProps) {
2123
];
2224

2325
return (
24-
<section id="about" className="py-20 bg-gray-50">
25-
<div className="max-w-6xl mx-auto px-4">
26+
<Section id="about" className="bg-gray-50" maxWidth="max-w-6xl">
2627

2728
{/* Intro Card */}
28-
<div className="bg-white rounded-3xl shadow-sm p-12 text-center max-w-5xl mx-auto mb-16">
29+
<Card className="p-12 text-center max-w-5xl mx-auto mb-16">
2930
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-8">{title}</h2>
3031
<p className="text-gray-500 text-lg leading-relaxed max-w-3xl mx-auto mb-10">
3132
一名充满热情的前端开发工程师，专注于构建高质量的 Web 应用和用户体验。拥有丰富的前端开发经验，熟练掌握现代 Web 技术栈，致力于通过技术创新解决实际问题，为用户创造价值。
@@ -41,7 +42,7 @@ export function About({ title = "你好，我是 weizwz" }: AboutProps) {
4142
</span>
4243
))}
4344
</div>
44-
</div>
45+
</Card>
4546

4647
{/* Contact Section */}
4748
<div className="text-center max-w-5xl mx-auto">
@@ -80,7 +81,6 @@ export function About({ title = "你好，我是 weizwz" }: AboutProps) {
8081
</div>
8182
</div>
8283

83-
</div>
84-
</section>
84+
</Section>
8585
);
8686
}

‎app/components/BlogArticles.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { Button } from 'antd'
22
import { LeftOutlined, RightOutlined, ArrowRightOutlined } from '@ant-design/icons'
33
import { useState, useEffect } from 'react'
44
import type { Article } from '../types/article'
5+
import { Section } from './common/Section'
6+
import { Card } from './common/Card'
57

68
interface BlogArticlesProps {
79
title?: string
@@ -106,8 +108,8 @@ export function BlogArticles({ title = '最新文章', subtitle = '分享最新
106108
}
107109

108110
return (
109-
<section id='article' className='pt-20 pb-20 bg-white relative overflow-hidden'>
110-
<div className='max-w-7xl mx-auto px-4 relative z-10'>
111+
<Section id='article' className='bg-white relative overflow-hidden' maxWidth='max-w-7xl'>
112+
<div className='relative z-10'>
111113

112114
{/* Header Section: Title/Subtitle Left, Buttons Right */}
113115
<div className='flex flex-col md:flex-row md:items-end justify-between mb-12 px-4'>
@@ -153,7 +155,7 @@ export function BlogArticles({ title = '最新文章', subtitle = '分享最新
153155
className={`w-full md:w-1/3 flex-shrink-0 md:px-4`}
154156
onMouseEnter={() => setIsPaused(true)}
155157
onMouseLeave={() => setIsPaused(false)}>
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'>
158+
<Card className='h-full p-8 flex flex-col group relative overflow-hidden text-left'>
157159

158160
{/* Header: Category and Icon */}
159161
<div className='flex justify-between items-center mb-6'>
@@ -188,7 +190,7 @@ export function BlogArticles({ title = '最新文章', subtitle = '分享最新
188190
</a>
189191
</div>
190192

191-
</div>
193+
</Card>
192194
</div>
193195
))}
194196
</div>
@@ -217,6 +219,6 @@ export function BlogArticles({ title = '最新文章', subtitle = '分享最新
217219
</div>
218220
)}
219221
</div>
220-
</section>
222+
</Section>
221223
)
222224
}

‎app/components/NoteShowcase.tsx‎

Lines changed: 63 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { Button } from 'antd'
22
import { config } from '../config'
3-
import { useRef, useState } from 'react'
3+
4+
import { Section } from './common/Section'
5+
import { BrowserFrame } from './common/BrowserFrame'
6+
import { TechStack } from './common/TechStack'
47

58
interface NoteShowcaseProps {
69
title?: string
@@ -27,93 +30,74 @@ export function NoteShowcase({
2730
const techStack = ['VitePress', 'Vue3', 'ElementPlus', 'Cloudflare'];
2831

2932
return (
30-
<section className='py-20 bg-gray-50'>
31-
<div className='max-w-7xl mx-auto px-4 md:px-8'>
32-
<div className='grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-center'>
33-
34-
{/* Left Column: Visual (Browser Frame) */}
35-
<div className='relative lg:col-span-7 order-last lg:order-first'>
36-
{/* Background Blob */}
37-
<div className='absolute -inset-4 bg-blue-200/50 rounded-3xl z-0 blur-2xl'></div>
38-
39-
{/* Browser Window */}
40-
<div className='bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-200/50 relative z-1'>
41-
{/* Browser Header */}
42-
<div className='bg-gray-50 px-4 pt-4 flex items-center gap-2'>
43-
<div className='w-3 h-3 rounded-full bg-red-400'></div>
44-
<div className='w-3 h-3 rounded-full bg-yellow-400'></div>
45-
<div className='w-3 h-3 rounded-full bg-green-400'></div>
46-
{/* Address Bar Mockup */}
47-
<div className='ml-2 pl-2 flex-1 bg-white h-6 rounded-xl border border-gray-200/50 text-gray-400 text-sm truncate'>
48-
{primaryButtonLink}
49-
</div>
50-
</div>
33+
<Section className='bg-gray-50' maxWidth='max-w-7xl'>
34+
<div className='grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-center'>
35+
36+
{/* Left Column: Visual (Browser Frame) */}
37+
<div className='relative lg:col-span-7 order-last lg:order-first'>
38+
{/* Background Blob */}
39+
<div className='absolute -inset-4 bg-blue-200/50 rounded-3xl z-0 blur-2xl'></div>
5140

52-
{/* Browser Content (Image) */}
53-
<div className='relative h-[400px] md:h-[500px] overflow-hidden bg-white group pt-1'>
54-
<img
55-
src="https://p.weizwz.com/siteshot_note.webp"
56-
alt="Blog Preview"
57-
className="w-full object-top transition-transform duration-800 group-hover:scale-[1.03]"
58-
/>
59-
{/* Inner Shadow */}
60-
<div className="absolute inset-0 pointer-events-none shadow-[inset_0_0_40px_rgba(0,0,0,0.05)]"></div>
61-
</div>
41+
{/* Browser Window */}
42+
<BrowserFrame url={primaryButtonLink}>
43+
{/* Browser Content (Image) */}
44+
<div className='relative h-auto overflow-hidden bg-white group pt-1'>
45+
<img
46+
src="https://p.weizwz.com/siteshot_note.webp"
47+
alt="Blog Preview"
48+
className="w-full object-top transition-transform duration-800 group-hover:scale-[1.03]"
49+
/>
50+
{/* Inner Shadow */}
51+
<div className="absolute inset-0 pointer-events-none shadow-[inset_0_0_40px_rgba(0,0,0,0.05)]"></div>
6252
</div>
63-
</div>
53+
</BrowserFrame>
54+
</div>
6455

65-
{/* Right Column: Content */}
66-
<div className='text-left space-y-8 lg:col-span-5'>
67-
{/* Tag */}
68-
<div className='inline-flex items-center px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-sm font-medium'>
69-
{subtitle}
70-
</div>
56+
{/* Right Column: Content */}
57+
<div className='text-left space-y-8 lg:col-span-5'>
58+
{/* Tag */}
59+
<div className='inline-flex items-center px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-sm font-medium'>
60+
{subtitle}
61+
</div>
7162

72-
{/* Title */}
73-
<h2 className='text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight leading-tight'>
74-
{title}
75-
</h2>
63+
{/* Title */}
64+
<h2 className='text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight leading-tight'>
65+
{title}
66+
</h2>
7667

77-
{/* Description */}
78-
<p className='text-lg text-gray-600 leading-relaxed max-w-xl'>
79-
{description}
80-
</p>
68+
{/* Description */}
69+
<p className='text-lg text-gray-600 leading-relaxed max-w-xl'>
70+
{description}
71+
</p>
8172

82-
{/* Tech Stack */}
83-
<div className='flex flex-wrap gap-3'>
84-
{techStack.map((tech) => (
85-
<span key={tech} className='px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-medium'>
86-
{tech}
87-
</span>
88-
))}
89-
</div>
73+
{/* Tech Stack */}
74+
<TechStack items={techStack} />
9075

91-
{/* Buttons */}
92-
<div className='flex flex-wrap gap-4 pt-4'>
93-
<Button
94-
type='primary'
95-
size='large'
96-
shape='round'
97-
href={primaryButtonLink}
98-
target='_blank'
99-
className="w-full sm:w-auto"
100-
>
101-
{primaryButtonText}
102-
</Button>
103-
<Button
104-
size='large'
105-
shape='round'
106-
href={secondaryButtonLink}
107-
target='_blank'
108-
className="w-full sm:w-auto"
109-
>
110-
{secondaryButtonText}
111-
</Button>
112-
</div>
76+
{/* Buttons */}
77+
<div className='flex flex-wrap gap-4 pt-4'>
78+
<Button
79+
type='primary'
80+
size='large'
81+
shape='round'
82+
href={primaryButtonLink}
83+
target='_blank'
84+
className="w-full sm:w-auto"
85+
>
86+
{primaryButtonText}
87+
</Button>
88+
<Button
89+
size='large'
90+
shape='round'
91+
href={secondaryButtonLink}
92+
target='_blank'
93+
className="w-full sm:w-auto"
94+
>
95+
{secondaryButtonText}
96+
</Button>
11397
</div>
114-
11598
</div>
99+
116100
</div>
117-
</section>
101+
</Section>
118102
)
119103
}

‎app/components/PersonalHomepage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@ export function PersonalHomepage({ articles = [] }: PersonalHomepageProps) {
263263
icon={<GithubOutlined />}
264264
className="border-gray-300 px-4 py-3 h-auto text-base rounded-full flex-1 sm:flex-none"
265265
shape="round"
266-
href={config.social.github}
266+
href={config.social.github + '/weiz-home'}
267267
target="_blank"
268268
aria-label="GitHub"
269269
/>

‎app/components/ProjectShowcase.tsx‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11

22
import { Button } from 'antd'
3-
import { ArrowRightOutlined, GithubOutlined } from '@ant-design/icons';
3+
44
import { useMemo } from 'react'
5+
import { Section } from './common/Section'
6+
import { BrowserFrame } from './common/BrowserFrame'
7+
import { TechStack } from './common/TechStack'
58

69
interface ProjectShowcaseProps {
710
title?: string
@@ -67,7 +70,7 @@ export function ProjectShowcase({
6770
const techStack = ['Next.js', 'TailwindCSS', 'Iconify API', 'Unsplash API'];
6871

6972
return (
70-
<section className='py-20 max-w-7xl mx-auto px-4 md:px-8'>
73+
<Section className='py-20' maxWidth='max-w-7xl'>
7174
<div className='grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-center'>
7275

7376
{/* Left Column: Content */}
@@ -88,13 +91,7 @@ export function ProjectShowcase({
8891
</p>
8992

9093
{/* Tech Stack */}
91-
<div className='flex flex-wrap gap-3'>
92-
{techStack.map((tech) => (
93-
<span key={tech} className='px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-medium'>
94-
{tech}
95-
</span>
96-
))}
97-
</div>
94+
<TechStack items={techStack} />
9895

9996
{/* Buttons */}
10097
<div className='flex flex-wrap gap-4 pt-4'>
@@ -126,16 +123,7 @@ export function ProjectShowcase({
126123
<div className='absolute -inset-4 bg-indigo-200/50 rounded-3xl z-0 blur-2xl'></div>
127124

128125
{/* Browser Window */}
129-
<div className='bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-200/50 relative z-1'>
130-
{/* Browser Header */}
131-
<div className='bg-gray-50 px-4 pt-4 flex items-center gap-2'>
132-
<div className='w-3 h-3 rounded-full bg-red-400'></div>
133-
<div className='w-3 h-3 rounded-full bg-yellow-400'></div>
134-
<div className='w-3 h-3 rounded-full bg-green-400'></div>
135-
{/* Address Bar Mockup */}
136-
<div className='ml-2 pl-2 flex-1 bg-white h-6 rounded-xl border border-gray-200/50 text-gray-400 text-sm'>{secondaryButtonLink}</div>
137-
</div>
138-
126+
<BrowserFrame url={secondaryButtonLink}>
139127
{/* Browser Content (Carousel) */}
140128
<div className='h-[400px] md:h-[500px] p-4 overflow-hidden bg-gray-50'>
141129
<div className='h-full relative overflow-hidden rounded-xl flex gap-4'>
@@ -163,10 +151,10 @@ export function ProjectShowcase({
163151
))}
164152
</div>
165153
</div>
166-
</div>
154+
</BrowserFrame>
167155
</div>
168156

169157
</div>
170-
</section>
158+
</Section>
171159
)
172160
}

0 commit comments

Comments
 (0)