Skip to content

Commit c9dac08

Browse files
baendlorelbaendlorel
committed
feat: 把原版转化为svelte
1 parent daa649c commit c9dac08

File tree

6 files changed

+1107
-76
lines changed

6 files changed

+1107
-76
lines changed

‎src/App.svelte‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<script lang="ts">
2+
import Header from './lib/Header.svelte'
3+
import PackageGrid from './lib/PackageGrid.svelte';
4+
import Footer from './lib/Footer.svelte';
5+
</script>
6+
7+
<div class="container">
8+
<Header />
9+
10+
<main class="main">
11+
<section class="intro">
12+
<h2>🚀 Welcome to My Package Collection</h2>
13+
<p>Here you'll find all my open-source NPM packages. Each one is crafted with care and designed to make your development experience better! (◕‿◕)</p>
14+
</section>
15+
16+
<PackageGrid />
17+
</main>
18+
19+
<Footer />
20+
</div>
21+
22+
<style>
23+
:global(:root) {
24+
--primary-color: #6366f1;
25+
--primary-dark: #4f46e5;
26+
--secondary-color: #ec4899;
27+
--accent-color: #06d6a0;
28+
--background: #0f172a;
29+
--surface: #1e293b;
30+
--surface-light: #334155;
31+
--text-primary: #f8fafc;
32+
--text-secondary: #cbd5e1;
33+
--text-muted: #94a3b8;
34+
--border: #475569;
35+
--shadow: rgba(0, 0, 0, 0.3);
36+
--gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
37+
}
38+
39+
:global(*) {
40+
margin: 0;
41+
padding: 0;
42+
box-sizing: border-box;
43+
}
44+
45+
:global(body) {
46+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
47+
background: var(--background);
48+
color: var(--text-primary);
49+
line-height: 1.6;
50+
overflow-x: hidden;
51+
}
52+
53+
.container {
54+
min-height: 100vh;
55+
display: flex;
56+
flex-direction: column;
57+
}
58+
59+
.main {
60+
flex: 1;
61+
padding: 0 1rem;
62+
max-width: 1200px;
63+
margin: 0 auto;
64+
width: 100%;
65+
}
66+
67+
.intro {
68+
text-align: center;
69+
padding: 3rem 0;
70+
max-width: 800px;
71+
margin: 0 auto;
72+
}
73+
74+
.intro h2 {
75+
font-size: 2.5rem;
76+
font-weight: 700;
77+
margin-bottom: 1rem;
78+
background: var(--gradient);
79+
-webkit-background-clip: text;
80+
-webkit-text-fill-color: transparent;
81+
background-clip: text;
82+
}
83+
84+
.intro p {
85+
font-size: 1.2rem;
86+
color: var(--text-secondary);
87+
line-height: 1.8;
88+
}
89+
90+
@media (max-width: 768px) {
91+
.intro h2 {
92+
font-size: 2rem;
93+
}
94+
95+
.intro p {
96+
font-size: 1.1rem;
97+
}
98+
}
99+
</style>

‎src/lib/Footer.svelte‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<footer class="footer">
2+
<div class="footer-content">
3+
<p>&copy; 2025 KasukabeTsumugi. Made with ❤️ and lots of ☕</p>
4+
<div class="social-links">
5+
<a href="https://github.com/baendlorel" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile">
6+
<i class="fab fa-github"></i>
7+
</a>
8+
<a href="https://npmjs.com/~kasukabetsumugi" target="_blank" rel="noopener noreferrer" aria-label="NPM Profile">
9+
<i class="fab fa-npm"></i>
10+
</a>
11+
</div>
12+
</div>
13+
</footer>
14+
15+
<style>
16+
.footer {
17+
background: var(--surface);
18+
border-top: 1px solid var(--border);
19+
padding: 2rem 0;
20+
margin-top: auto;
21+
}
22+
23+
.footer-content {
24+
max-width: 1200px;
25+
margin: 0 auto;
26+
padding: 0 1rem;
27+
display: flex;
28+
justify-content: space-between;
29+
align-items: center;
30+
text-align: center;
31+
}
32+
33+
.footer-content p {
34+
color: var(--text-secondary);
35+
margin: 0;
36+
}
37+
38+
.social-links {
39+
display: flex;
40+
gap: 1rem;
41+
}
42+
43+
.social-links a {
44+
width: 40px;
45+
height: 40px;
46+
border-radius: 50%;
47+
background: var(--surface-light);
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
color: var(--text-secondary);
52+
text-decoration: none;
53+
transition: all 0.3s ease;
54+
border: 1px solid var(--border);
55+
}
56+
57+
.social-links a:hover {
58+
background: var(--gradient);
59+
color: white;
60+
transform: translateY(-2px);
61+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
62+
}
63+
64+
@media (max-width: 768px) {
65+
.footer-content {
66+
flex-direction: column;
67+
gap: 1rem;
68+
}
69+
}
70+
</style>

‎src/lib/Header.svelte‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<script lang="ts">
2+
import { onMount } from 'svelte';
3+
4+
let totalRepos = '-';
5+
let npmPackages = '-';
6+
7+
onMount(() => {
8+
// 这些数值会在 PackageGrid 组件中更新
9+
// 可以通过事件或状态管理来同步
10+
});
11+
12+
export function updateStats(repos: number, packages: number) {
13+
totalRepos = repos.toString();
14+
npmPackages = packages.toString();
15+
}
16+
</script>
17+
18+
<header class="header">
19+
<div class="header-content">
20+
<div class="profile-section">
21+
<div class="avatar">
22+
<i class="fas fa-user-circle"></i>
23+
</div>
24+
<div class="profile-info">
25+
<h1 class="name">KasukabeTsumugi</h1>
26+
<p class="bio">✨ Creating awesome NPM packages ✨</p>
27+
<div class="contact-info">
28+
<a href="mailto:[email protected]" class="email">
29+
<i class="fas fa-envelope"></i>
30+
[email protected]
31+
</a>
32+
</div>
33+
</div>
34+
</div>
35+
<div class="stats">
36+
<div class="stat-item">
37+
<span class="stat-number">{totalRepos}</span>
38+
<span class="stat-label">Repositories</span>
39+
</div>
40+
<div class="stat-item">
41+
<span class="stat-number">{npmPackages}</span>
42+
<span class="stat-label">NPM Packages</span>
43+
</div>
44+
</div>
45+
</div>
46+
</header>
47+
48+
<style>
49+
.header {
50+
background: var(--surface);
51+
border-bottom: 1px solid var(--border);
52+
padding: 2rem 0;
53+
position: relative;
54+
overflow: hidden;
55+
}
56+
57+
.header::before {
58+
content: '';
59+
position: absolute;
60+
top: 0;
61+
left: 0;
62+
right: 0;
63+
bottom: 0;
64+
background: var(--gradient);
65+
opacity: 0.1;
66+
z-index: 0;
67+
}
68+
69+
.header-content {
70+
max-width: 1200px;
71+
margin: 0 auto;
72+
padding: 0 1rem;
73+
display: flex;
74+
justify-content: space-between;
75+
align-items: center;
76+
position: relative;
77+
z-index: 1;
78+
}
79+
80+
.profile-section {
81+
display: flex;
82+
align-items: center;
83+
gap: 1.5rem;
84+
}
85+
86+
.avatar {
87+
width: 80px;
88+
height: 80px;
89+
border-radius: 50%;
90+
background: var(--gradient);
91+
display: flex;
92+
align-items: center;
93+
justify-content: center;
94+
font-size: 3rem;
95+
color: white;
96+
box-shadow: 0 8px 32px var(--shadow);
97+
}
98+
99+
.profile-info {
100+
display: flex;
101+
flex-direction: column;
102+
gap: 0.5rem;
103+
}
104+
105+
.name {
106+
font-size: 2.5rem;
107+
font-weight: 700;
108+
background: var(--gradient);
109+
-webkit-background-clip: text;
110+
-webkit-text-fill-color: transparent;
111+
background-clip: text;
112+
}
113+
114+
.bio {
115+
font-size: 1.2rem;
116+
color: var(--text-secondary);
117+
margin: 0;
118+
}
119+
120+
.contact-info {
121+
margin-top: 0.5rem;
122+
}
123+
124+
.email {
125+
color: var(--text-muted);
126+
text-decoration: none;
127+
display: flex;
128+
align-items: center;
129+
gap: 0.5rem;
130+
font-size: 0.95rem;
131+
transition: color 0.3s ease;
132+
}
133+
134+
.email:hover {
135+
color: var(--primary-color);
136+
}
137+
138+
.stats {
139+
display: flex;
140+
gap: 2rem;
141+
}
142+
143+
.stat-item {
144+
text-align: center;
145+
padding: 1rem;
146+
background: var(--surface-light);
147+
border-radius: 12px;
148+
border: 1px solid var(--border);
149+
min-width: 120px;
150+
}
151+
152+
.stat-number {
153+
display: block;
154+
font-size: 2rem;
155+
font-weight: 700;
156+
color: var(--primary-color);
157+
margin-bottom: 0.25rem;
158+
}
159+
160+
.stat-label {
161+
font-size: 0.9rem;
162+
color: var(--text-muted);
163+
text-transform: uppercase;
164+
letter-spacing: 0.05em;
165+
}
166+
167+
@media (max-width: 768px) {
168+
.header-content {
169+
flex-direction: column;
170+
text-align: center;
171+
gap: 2rem;
172+
}
173+
174+
.profile-section {
175+
flex-direction: column;
176+
text-align: center;
177+
gap: 1rem;
178+
}
179+
180+
.name {
181+
font-size: 2rem;
182+
}
183+
184+
.stats {
185+
gap: 1rem;
186+
}
187+
188+
.stat-item {
189+
min-width: 100px;
190+
padding: 0.75rem;
191+
}
192+
}
193+
</style>

0 commit comments

Comments
 (0)