Skip to content

Commit 8702d56

Browse files
ReKyleeReKylee
committed
navbar
1 parent aff5783 commit 8702d56

2 files changed

Lines changed: 248 additions & 61 deletions

File tree

‎src/lib/components/Header.svelte‎

Lines changed: 56 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -12,76 +12,71 @@
1212
}
1313
</script>
1414

15-
<header class="bg-ctp-base/80 sticky top-0 z-50 transition-colors duration-300">
15+
<header class="bg-ctp-base/80 sticky top-0 z-50 transition-colors duration-300 relative">
1616
<div class="container mx-auto px-4">
1717
<nav
1818
class="flex justify-between items-center py-4 border-b border-ctp-surface1"
1919
>
2020
<a href="#hero" class="text-xl font-bold text-ctp-text"
2121
>{$t("name")}</a
2222
>
23-
<div class="flex items-center gap-4">
24-
<ul
25-
class="hidden md:flex items-center space-x-8 text-sm font-medium"
26-
>
27-
<li>
28-
<a
29-
href="#about"
30-
class="text-ctp-subtext0 hover:text-ctp-green transition-colors"
31-
>{$t("nav.about")}</a
32-
>
33-
</li>
34-
<li>
35-
<a
36-
href="#skills"
37-
class="text-ctp-subtext0 hover:text-ctp-green transition-colors"
38-
>{$t("nav.skills")}</a
39-
>
40-
</li>
41-
<li>
42-
<a
43-
href="#experience"
44-
class="text-ctp-subtext0 hover:text-ctp-green transition-colors"
45-
>{$t("nav.experience")}</a
46-
>
47-
</li>
48-
<li>
49-
<a
50-
href="#projects"
51-
class="text-ctp-subtext0 hover:text-ctp-green transition-colors"
52-
>{$t("nav.projects")}</a
53-
>
54-
</li>
55-
<li>
56-
<a
57-
href="#education"
58-
class="text-ctp-subtext0 hover:text-ctp-green transition-colors"
59-
>{$t("nav.education")}</a
60-
>
61-
</li>
62-
</ul>
63-
64-
<div
65-
class="flex items-center gap-4 border-l border-ctp-surface1 pl-4"
66-
>
67-
<button
68-
on:click={toggleLanguage}
69-
class="text-sm font-bold text-ctp-subtext0"
23+
<ul
24+
class="hidden md:flex items-center space-x-8 text-sm font-medium"
25+
>
26+
<li>
27+
<a
28+
href="#about"
29+
class="inline-block text-ctp-subtext0 hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-95"
30+
>{$t("nav.about")}</a
31+
>
32+
</li>
33+
<li>
34+
<a
35+
href="#skills"
36+
class="inline-block text-ctp-subtext0 hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-95"
37+
>{$t("nav.skills")}</a
38+
>
39+
</li>
40+
<li>
41+
<a
42+
href="#experience"
43+
class="inline-block text-ctp-subtext0 hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-95"
44+
>{$t("nav.experience")}</a
7045
>
71-
{$language === "en" ? "HE" : "EN"}
72-
</button>
73-
<button
74-
on:click={toggleTheme}
75-
class="text-ctp-subtext0 text-xl"
46+
</li>
47+
<li>
48+
<a
49+
href="#projects"
50+
class="inline-block text-ctp-subtext0 hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-95"
51+
>{$t("nav.projects")}</a
7652
>
77-
{#if $theme === "light"}
78-
<span>&#9790;</span> <!-- Moon -->
79-
{:else}
80-
<span>&#9728;</span> <!-- Sun -->
81-
{/if}
82-
</button>
83-
</div>
84-
</div>
53+
</li>
54+
<li>
55+
<a
56+
href="#education"
57+
class="inline-block text-ctp-subtext0 hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-95"
58+
>{$t("nav.education")}</a
59+
>
60+
</li>
61+
</ul>
8562
</nav>
8663
</div>
64+
<div class="absolute top-4 right-4 flex items-center gap-4" dir="ltr">
65+
<button
66+
on:click={toggleLanguage}
67+
class="text-sm font-bold text-ctp-subtext0 transform transition-transform duration-200 hover:scale-110 active:scale-95"
68+
>
69+
{$language === "en" ? "HE" : "EN"}
70+
</button>
71+
<button
72+
on:click={toggleTheme}
73+
class="text-ctp-subtext0 text-xl transform transition-transform duration-200 hover:scale-110 active:scale-95"
74+
>
75+
{#if $theme === "light"}
76+
<span>&#9790;</span> <!-- Moon -->
77+
{:else}
78+
<span>&#9728;</span> <!-- Sun -->
79+
{/if}
80+
</button>
81+
</div>
8782
</header>

‎src/lib/components/Kirby.svelte‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<div class="kirby">
2+
<div class="body">
3+
<div class="face">
4+
<div class="left-eye">
5+
<div class="pupil">
6+
<div class="shine"></div>
7+
</div>
8+
</div>
9+
<div class="right-eye">
10+
<div class="pupil">
11+
<div class="shine"></div>
12+
</div>
13+
</div>
14+
<div class="mouth">
15+
<div class="mouth-top"></div>
16+
</div>
17+
<div class="left-cheek"></div>
18+
<div class="right-cheek"></div>
19+
</div>
20+
<div class="right-arm"></div>
21+
<div class="left-arm">
22+
<div class="left-arm-top"></div>
23+
</div>
24+
<div class="left-leg"></div>
25+
<div class="right-leg"></div>
26+
</div>
27+
</div>
28+
29+
<style>
30+
.kirby {
31+
margin: 2rem;
32+
}
33+
34+
.body,
35+
.mouth-top,
36+
.right-arm,
37+
.left-arm-top {
38+
background-color: pink;
39+
}
40+
41+
.body {
42+
width: 600px;
43+
height: 600px;
44+
border: 1em solid black;
45+
border-radius: 50%;
46+
position: relative;
47+
margin: auto;
48+
}
49+
50+
.face {
51+
width: 100%;
52+
height: 100%;
53+
position: absolute;
54+
left: 50%;
55+
top: -10%;
56+
transform: rotate(-15deg);
57+
}
58+
59+
.left-eye,
60+
.right-eye {
61+
position: absolute;
62+
width: 10%;
63+
height: 30%;
64+
border: 0.5em solid black;
65+
border-radius: 50%;
66+
background-color: cornflowerblue;
67+
}
68+
69+
.left-eye {
70+
left: 0%;
71+
top: 10%;
72+
}
73+
74+
.right-eye {
75+
left: 20%;
76+
top: 10%;
77+
}
78+
79+
.pupil {
80+
width: 100%;
81+
height: 80%;
82+
border-radius: 50%;
83+
position: absolute;
84+
background-color: black;
85+
}
86+
87+
.shine {
88+
width: 75%;
89+
height: 60%;
90+
border-radius: 50%;
91+
position: absolute;
92+
top: 2%;
93+
left: 10%;
94+
background-color: white;
95+
}
96+
97+
.mouth {
98+
width: 10%;
99+
height: 10%;
100+
border-radius: 50%;
101+
position: absolute;
102+
left: 11%;
103+
top: 40%;
104+
background-color: black;
105+
}
106+
107+
.mouth-top {
108+
width: 100%;
109+
height: 90%;
110+
border-radius: 50%;
111+
position: absolute;
112+
top: -10%;
113+
}
114+
115+
.left-cheek,
116+
.right-cheek {
117+
position: absolute;
118+
width: 15%;
119+
height: 8%;
120+
border-radius: 50%;
121+
background-color: salmon;
122+
}
123+
124+
.left-cheek {
125+
top: 40%;
126+
left: -15%;
127+
transform: rotate(5deg);
128+
}
129+
130+
.right-cheek {
131+
top: 40%;
132+
left: 30%;
133+
transform: rotate(-5deg);
134+
}
135+
136+
.right-arm {
137+
width: 40%;
138+
height: 30%;
139+
border: 1em solid black;
140+
border-radius: 50%;
141+
position: absolute;
142+
left: 65%;
143+
top: 10%;
144+
transform: rotate(-40deg);
145+
z-index: -1;
146+
}
147+
148+
.left-arm {
149+
width: 40%;
150+
height: 35%;
151+
border-radius: 50%;
152+
position: absolute;
153+
left: -15%;
154+
top: 35%;
155+
background-color: black;
156+
transform: rotate(-30deg);
157+
}
158+
159+
.left-arm-top {
160+
width: 100%;
161+
height: 90%;
162+
border-radius: 50%;
163+
position: absolute;
164+
left: 5%;
165+
top: 5%;
166+
}
167+
168+
.left-leg,
169+
.right-leg {
170+
background-color: palevioletred;
171+
border-radius: 50%;
172+
position: absolute;
173+
border: 1em solid black;
174+
}
175+
176+
.left-leg {
177+
width: 35%;
178+
height: 50%;
179+
left: 20%;
180+
top: 55%;
181+
transform: rotate(40deg);
182+
}
183+
184+
.right-leg {
185+
width: 35%;
186+
height: 50%;
187+
left: 40%;
188+
top: 70%;
189+
transform: rotate(30deg);
190+
z-index: -1;
191+
}
192+
</style>

0 commit comments

Comments
 (0)