Skip to content

Commit 365cf36

Browse files
ReKyleeReKylee
committed
Refactoring
1 parent 6415be5 commit 365cf36

3 files changed

Lines changed: 54 additions & 55 deletions

File tree

‎src/lib/components/Header.svelte‎

Lines changed: 11 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,37 @@
11
<script>
2-
import { t, language } from "$lib/stores/language.js";
3-
import { theme } from "$lib/stores/theme.js";
4-
5-
function toggleTheme() {
6-
theme.setTheme($theme === "light" ? "dark" : "light");
7-
}
8-
9-
function toggleLanguage() {
10-
language.setLang($language === "en" ? "he" : "en");
11-
}
2+
import { t } from "$lib/stores/language.js";
3+
import ToggleButtons from "./ToggleButtons.svelte";
4+
import NavLinkCard from "./NavLinkCard.svelte";
125
</script>
136

147
<header class="bg-ctp-base/80 sticky top-0 z-50 transition-colors duration-300 relative pt-0 h-fit overflow-hidden">
158
<div class="container mx-auto px-4">
169
<nav
1710
class="flex justify-between items-baseline transform -translate-y-8"
1811
>
19-
<a href="#hero" class="text-xl font-bold text-ctp-text"
12+
<a href="#hero" class="text-xl md:text-2xl font-bold text-ctp-text inline-block"
2013
>{$t("name")}</a
2114
>
2215
<ul
23-
class="hidden md:flex items-center space-x-8 text-sm font-medium px-4"
16+
class="hidden md:flex items-center space-x-8 text-sm font-medium px-4 py-0 mt-[-24]"
2417
>
2518
<li>
26-
<a
27-
href="#about"
28-
class="inline-flex flex-col items-center justify-end w-24 h-36 p-2 bg-ctp-surface0 rounded-lg shadow-md text-ctp-text hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-110 active:-translate-y-1 active:rotate-1 active:shadow-lg rotate-1"
29-
>{$t("nav.about")}</a
30-
>
19+
<NavLinkCard href="#about" text={$t("nav.about")} rotation={1} />
3120
</li>
3221
<li>
33-
<a
34-
href="#skills"
35-
class="inline-flex flex-col items-center justify-end w-24 h-36 p-2 bg-ctp-surface0 rounded-lg shadow-md text-ctp-text hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-110 active:-translate-y-1 active:rotate-1 active:shadow-lg rotate-[-1]"
36-
>{$t("nav.skills")}</a
37-
>
22+
<NavLinkCard href="#skills" text={$t("nav.skills")} rotation={-1} />
3823
</li>
3924
<li>
40-
<a
41-
href="#experience"
42-
class="inline-flex flex-col items-center justify-end w-24 h-36 p-2 bg-ctp-surface0 rounded-lg shadow-md text-ctp-text hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-110 active:-translate-y-1 active:rotate-1 active:shadow-lg rotate-2"
43-
>{$t("nav.experience")}</a
44-
>
25+
<NavLinkCard href="#experience" text={$t("nav.experience")} rotation={2} />
4526
</li>
4627
<li>
47-
<a
48-
href="#projects"
49-
class="inline-flex flex-col items-center justify-end w-24 h-36 p-2 bg-ctp-surface0 rounded-lg shadow-md text-ctp-text hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-110 active:-translate-y-1 active:rotate-1 active:shadow-lg rotate-[-2]"
50-
>{$t("nav.projects")}</a
51-
>
28+
<NavLinkCard href="#projects" text={$t("nav.projects")} rotation={-2} />
5229
</li>
5330
<li>
54-
<a
55-
href="#education"
56-
class="inline-flex flex-col items-center justify-end w-24 h-36 p-2 bg-ctp-surface0 rounded-lg shadow-md text-ctp-text hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-110 active:-translate-y-1 active:rotate-1 active:shadow-lg rotate-1"
57-
>{$t("nav.education")}</a
58-
>
31+
<NavLinkCard href="#education" text={$t("nav.education")} rotation={1} />
5932
</li>
6033
</ul>
6134
</nav>
6235
</div>
63-
<div class="absolute top-[-16] right-4 flex items-center gap-4" dir="ltr">
64-
<button
65-
on:click={toggleLanguage}
66-
class="text-sm font-bold text-ctp-subtext0 transform transition-transform duration-200 hover:scale-110 active:scale-95"
67-
>
68-
{$language === "en" ? "HE" : "EN"}
69-
</button>
70-
<button
71-
on:click={toggleTheme}
72-
class="text-ctp-subtext0 text-xl transform transition-transform duration-200 hover:scale-110 active:scale-95"
73-
>
74-
{#if $theme === "light"}
75-
<span>&#9790;</span> <!-- Moon -->
76-
{:else}
77-
<span>&#9728;</span> <!-- Sun -->
78-
{/if}
79-
</button>
80-
</div>
36+
<ToggleButtons />
8137
</header>

‎src/lib/components/NavLinkCard.svelte‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script>
2+
export let href;
3+
export let text;
4+
export let rotation;
5+
</script>
6+
7+
<a
8+
href={href}
9+
class="inline-flex flex-col items-center justify-end w-24 h-36 p-2 bg-ctp-surface0 rounded-lg shadow-md text-ctp-text hover:text-ctp-green transition-colors transform transition-all duration-200 ease-in-out hover:scale-105 active:scale-110 active:-translate-y-1 active:rotate-1 active:shadow-lg {`rotate-${rotation}`}"
10+
>
11+
{text}
12+
</a>

‎src/lib/components/ToggleButtons.svelte‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script>
2+
import { language, t } from "$lib/stores/language.js";
3+
import { theme } from "$lib/stores/theme.js";
4+
5+
function toggleTheme() {
6+
theme.setTheme($theme === "light" ? "dark" : "light");
7+
}
8+
9+
function toggleLanguage() {
10+
language.setLang($language === "en" ? "he" : "en");
11+
}
12+
</script>
13+
14+
<div class="absolute top-4 right-4 flex items-center gap-4" dir="ltr">
15+
<button
16+
on:click={toggleLanguage}
17+
class="text-sm font-bold text-ctp-subtext0 transform transition-transform duration-200 hover:scale-110 active:scale-95"
18+
>
19+
{$language === "en" ? "HE" : "EN"}
20+
</button>
21+
<button
22+
on:click={toggleTheme}
23+
class="text-ctp-subtext0 text-xl transform transition-transform duration-200 hover:scale-110 active:scale-95"
24+
>
25+
{#if $theme === "light"}
26+
<span>&#9790;</span> <!-- Moon -->
27+
{:else}
28+
<span>&#9728;</span> <!-- Sun -->
29+
{/if}
30+
</button>
31+
</div>

0 commit comments

Comments
 (0)