Skip to content

Commit a5eef41

Browse files
ReKyleeReKylee
committed
Added the @tailwindcss\catpuccin plugin
1 parent 1400a12 commit a5eef41

15 files changed

Lines changed: 109 additions & 126 deletions

‎package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
1313
},
1414
"devDependencies": {
15+
"@catppuccin/tailwindcss": "^0.1.6",
1516
"@sveltejs/adapter-static": "^3.0.8",
1617
"@sveltejs/kit": "^2.16.0",
1718
"@sveltejs/vite-plugin-svelte": "^5.0.0",

‎src/app.css‎

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,6 @@
44

55
@import "tailwindcss";
66

7-
@theme {
8-
--color-ctp-rosewater: #f5e0dc;
9-
--color-ctp-flamingo: #f2cdcd;
10-
--color-ctp-pink: #f5c2e7;
11-
--color-ctp-mauve: #cba6f7;
12-
--color-ctp-red: #f38ba8;
13-
--color-ctp-maroon: #eba0ac;
14-
--color-ctp-peach: #fab387;
15-
--color-ctp-yellow: #f9e2af;
16-
--color-ctp-green: #a6e3a1;
17-
--color-ctp-teal: #94e2d5;
18-
--color-ctp-sky: #89dceb;
19-
--color-ctp-sapphire: #74c7ec;
20-
--color-ctp-blue: #89b4fa;
21-
--color-ctp-lavender: #b4befe;
22-
--color-ctp-text: #cdd6f4;
23-
--color-ctp-subtext1: #bac2de;
24-
--color-ctp-subtext0: #a6adc8;
25-
--color-ctp-overlay2: #9399b2;
26-
--color-ctp-overlay1: #7f849c;
27-
--color-ctp-overlay0: #6c7086;
28-
--color-ctp-surface2: #585b70;
29-
--color-ctp-surface1: #45475a;
30-
--color-ctp-surface0: #313244;
31-
--color-ctp-base: #1e1e2e;
32-
--color-ctp-mantle: #181825;
33-
--color-ctp-crust: #11111b;
34-
}
35-
367
body {
378
font-family: "Inter", "Heebo", sans-serif;
38-
@apply bg-slate-50 text-slate-700 transition-colors duration-300;
39-
}
40-
41-
.dark body {
42-
@apply bg-ctp-base text-ctp-text;
439
}

‎src/lib/components/About.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44

55
<section id="about" class="py-12 md:py-24">
66
<div class="text-center mb-12 md:mb-16">
7-
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-ctp-text">{$t('about.title')}</h2>
8-
<p class="text-lg text-slate-500 dark:text-ctp-subtext0 mt-2">{$t('about.subtitle')}</p>
7+
<h2 class="text-3xl md:text-4xl font-bold text-ctp-text">{$t('about.title')}</h2>
8+
<p class="text-lg text-ctp-subtext0 mt-2">{$t('about.subtitle')}</p>
99
</div>
10-
<div class="max-w-4xl mx-auto bg-white dark:bg-ctp-mantle p-8 md:p-12 rounded-xl shadow-lg">
10+
<div class="max-w-4xl mx-auto bg-ctp-base dark:bg-ctp-mantle p-8 md:p-12 rounded-xl shadow-lg">
1111
<article class="prose dark:prose-invert lg:prose-xl max-w-none">
1212
<p>{$t('about.text')}</p>
1313
</article>

‎src/lib/components/Education.svelte‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@
55
<section id="education" class="py-12 md:py-24">
66
<div class="container mx-auto px-4">
77
<div class="text-center mb-12 md:mb-16">
8-
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-ctp-text">{$t('education.title')}</h2>
9-
<p class="text-lg text-slate-500 dark:text-ctp-subtext0 mt-2">{$t('education.subtitle')}</p>
8+
<h2 class="text-3xl md:text-4xl font-bold text-ctp-text">{$t('education.title')}</h2>
9+
<p class="text-lg text-ctp-subtext0 mt-2">{$t('education.subtitle')}</p>
1010
</div>
1111
<div class="max-w-3xl mx-auto space-y-8">
12-
<div class="bg-white dark:bg-ctp-mantle p-8 rounded-xl shadow-lg">
13-
<p class="text-sm font-medium text-slate-500 dark:text-ctp-subtext0">{$t('education.edu1.date')}</p>
14-
<h3 class="text-xl font-bold text-slate-900 dark:text-ctp-text mt-1">{$t('education.edu1.title')}</h3>
15-
<p class="text-slate-600 dark:text-ctp-subtext1 font-medium">{$t('education.edu1.school')}</p>
16-
<p class="text-slate-500 dark:text-ctp-subtext1 mt-2">{$t('education.edu1.desc')}</p>
12+
<div class="bg-ctp-base dark:bg-ctp-mantle p-8 rounded-xl shadow-lg">
13+
<p class="text-sm font-medium text-ctp-subtext0">{$t('education.edu1.date')}</p>
14+
<h3 class="text-xl font-bold text-ctp-text mt-1">{$t('education.edu1.title')}</h3>
15+
<p class="text-ctp-subtext1 font-medium">{$t('education.edu1.school')}</p>
16+
<p class="text-ctp-subtext1 mt-2">{$t('education.edu1.desc')}</p>
1717
</div>
18-
<div class="bg-white dark:bg-ctp-mantle p-8 rounded-xl shadow-lg">
19-
<p class="text-sm font-medium text-slate-500 dark:text-ctp-subtext0">{$t('education.edu2.date')}</p>
20-
<h3 class="text-xl font-bold text-slate-900 dark:text-ctp-text mt-1">{$t('education.edu2.title')}</h3>
21-
<p class="text-slate-600 dark:text-ctp-subtext1 font-medium">{$t('education.edu2.school')}</p>
22-
<p class="text-slate-500 dark:text-ctp-subtext1 mt-2">{$t('education.edu2.desc')}</p>
18+
<div class="bg-ctp-base dark:bg-ctp-mantle p-8 rounded-xl shadow-lg">
19+
<p class="text-sm font-medium text-ctp-subtext0">{$t('education.edu2.date')}</p>
20+
<h3 class="text-xl font-bold text-ctp-text mt-1">{$t('education.edu2.title')}</h3>
21+
<p class="text-ctp-subtext1 font-medium">{$t('education.edu2.school')}</p>
22+
<p class="text-ctp-subtext1 mt-2">{$t('education.edu2.desc')}</p>
2323
</div>
2424
</div>
2525
</div>

‎src/lib/components/Experience.svelte‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,24 @@
55
<section id="experience" class="py-12 md:py-24">
66
<div class="container mx-auto px-4">
77
<div class="text-center mb-12 md:mb-16">
8-
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-ctp-text">{$t('experience.title')}</h2>
9-
<p class="text-lg text-slate-500 dark:text-ctp-subtext0 mt-2">{$t('experience.subtitle')}</p>
8+
<h2 class="text-3xl md:text-4xl font-bold text-ctp-text">{$t('experience.title')}</h2>
9+
<p class="text-lg text-ctp-subtext0 mt-2">{$t('experience.subtitle')}</p>
1010
</div>
1111
<div class="max-w-3xl mx-auto">
12-
<div class="relative border-l-2 border-slate-200 dark:border-ctp-surface1 ltr:pl-10 rtl:pr-10">
12+
<div class="relative border-l-2 border-ctp-surface1 ltr:pl-10 rtl:pr-10">
1313
<!-- Timeline Item 1 -->
1414
<div class="mb-12 relative">
15-
<div class="absolute w-6 h-6 bg-emerald-500 dark:bg-ctp-green rounded-full border-4 border-white dark:border-ctp-mantle top-1 ltr:-left-3.5 rtl:-right-3.5"></div>
16-
<p class="text-sm font-medium text-emerald-600 dark:text-ctp-green">{$t('experience.exp1.date')}</p>
17-
<h3 class="text-xl font-bold text-slate-900 dark:text-ctp-text mt-1">{$t('experience.exp1.title')}</h3>
18-
<p class="text-slate-500 dark:text-ctp-subtext1 mt-2 leading-relaxed">{$t('experience.exp1.desc')}</p>
15+
<div class="absolute w-6 h-6 bg-ctp-green rounded-full border-4 border-ctp-base dark:border-ctp-mantle top-1 ltr:-left-3.5 rtl:-right-3.5"></div>
16+
<p class="text-sm font-medium text-ctp-green">{$t('experience.exp1.date')}</p>
17+
<h3 class="text-xl font-bold text-ctp-text mt-1">{$t('experience.exp1.title')}</h3>
18+
<p class="text-ctp-subtext1 mt-2 leading-relaxed">{$t('experience.exp1.desc')}</p>
1919
</div>
2020
<!-- Timeline Item 2 -->
2121
<div class="mb-12 relative">
22-
<div class="absolute w-6 h-6 bg-emerald-500 dark:bg-ctp-green rounded-full border-4 border-white dark:border-ctp-mantle top-1 ltr:-left-3.5 rtl:-right-3.5"></div>
23-
<p class="text-sm font-medium text-emerald-600 dark:text-ctp-green">{$t('experience.exp2.date')}</p>
24-
<h3 class="text-xl font-bold text-slate-900 dark:text-ctp-text mt-1">{$t('experience.exp2.title')}</h3>
25-
<p class="text-slate-500 dark:text-ctp-subtext1 mt-2 leading-relaxed">{$t('experience.exp2.desc')}</p>
22+
<div class="absolute w-6 h-6 bg-ctp-green rounded-full border-4 border-ctp-base dark:border-ctp-mantle top-1 ltr:-left-3.5 rtl:-right-3.5"></div>
23+
<p class="text-sm font-medium text-ctp-green">{$t('experience.exp2.date')}</p>
24+
<h3 class="text-xl font-bold text-ctp-text mt-1">{$t('experience.exp2.title')}</h3>
25+
<p class="text-ctp-subtext1 mt-2 leading-relaxed">{$t('experience.exp2.desc')}</p>
2626
</div>
2727
</div>
2828
</div>

‎src/lib/components/Footer.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
import { t } from '$lib/stores/language.js';
33
</script>
44

5-
<footer class="bg-slate-900 dark:bg-ctp-crust text-slate-400 dark:text-ctp-subtext0 py-12">
5+
<footer class="bg-ctp-crust text-ctp-subtext0 py-12">
66
<div class="container mx-auto px-4 text-center">
7-
<h3 class="text-2xl font-bold text-white dark:text-ctp-text mb-4">{$t('footer.title')}</h3>
7+
<h3 class="text-2xl font-bold text-ctp-text mb-4">{$t('footer.title')}</h3>
88
<p class="mb-2">{$t('footer.subtitle')}</p>
9-
<a href="mailto:ID05490@GMAIL.COM" class="text-lg font-semibold text-emerald-400 dark:text-ctp-green hover:text-emerald-300 dark:hover:text-ctp-yellow transition-colors">ID05490@GMAIL.COM</a>
10-
<p class="text-xs mt-8 text-slate-500">{@html $t('footer.copy')}</p>
9+
<a href="mailto:ID05490@GMAIL.COM" class="text-lg font-semibold text-ctp-green hover:text-ctp-yellow transition-colors">ID05490@GMAIL.COM</a>
10+
<p class="text-xs mt-8 text-ctp-subtext0">{@html $t('footer.copy')}</p>
1111
</div>
1212
</footer>

‎src/lib/components/Header.svelte‎

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

15-
<header class="bg-slate-50/80 dark:bg-ctp-base/80 backdrop-blur-lg sticky top-0 z-50 transition-all duration-300">
15+
<header class="bg-ctp-base/80 backdrop-blur-lg sticky top-0 z-50 transition-all duration-300">
1616
<div class="container mx-auto px-4">
17-
<nav class="flex justify-between items-center py-4 border-b border-slate-200 dark:border-ctp-surface1">
18-
<a href="#hero" class="text-xl font-bold text-slate-900 dark:text-ctp-text">{$t('name')}</a>
17+
<nav class="flex justify-between items-center py-4 border-b border-ctp-surface1">
18+
<a href="#hero" class="text-xl font-bold text-ctp-text">{$t('name')}</a>
1919
<div class="flex items-center gap-4">
2020
<ul class="hidden md:flex items-center space-x-8 text-sm font-medium">
21-
<li><a href="#about" class="text-slate-700 dark:text-ctp-subtext1 hover:text-emerald-500 dark:hover:text-ctp-green transition-colors">{$t('nav.about')}</a></li>
22-
<li><a href="#skills" class="text-slate-700 dark:text-ctp-subtext1 hover:text-emerald-500 dark:hover:text-ctp-green transition-colors">{$t('nav.skills')}</a></li>
23-
<li><a href="#experience" class="text-slate-700 dark:text-ctp-subtext1 hover:text-emerald-500 dark:hover:text-ctp-green transition-colors">{$t('nav.experience')}</a></li>
24-
<li><a href="#projects" class="text-slate-700 dark:text-ctp-subtext1 hover:text-emerald-500 dark:hover:text-ctp-green transition-colors">{$t('nav.projects')}</a></li>
25-
<li><a href="#education" class="text-slate-700 dark:text-ctp-subtext1 hover:text-emerald-500 dark:hover:text-ctp-green transition-colors">{$t('nav.education')}</a></li>
21+
<li><a href="#about" class="text-ctp-subtext0 hover:text-ctp-green transition-colors">{$t('nav.about')}</a></li>
22+
<li><a href="#skills" class="text-ctp-subtext0 hover:text-ctp-green transition-colors">{$t('nav.skills')}</a></li>
23+
<li><a href="#experience" class="text-ctp-subtext0 hover:text-ctp-green transition-colors">{$t('nav.experience')}</a></li>
24+
<li><a href="#projects" class="text-ctp-subtext0 hover:text-ctp-green transition-colors">{$t('nav.projects')}</a></li>
25+
<li><a href="#education" class="text-ctp-subtext0 hover:text-ctp-green transition-colors">{$t('nav.education')}</a></li>
2626
</ul>
2727

28-
<div class="flex items-center gap-4 border-l border-slate-200 dark:border-ctp-surface1 pl-4">
29-
<button on:click={toggleLanguage} class="text-sm font-bold text-slate-600 dark:text-ctp-subtext0">
28+
<div class="flex items-center gap-4 border-l border-ctp-surface1 pl-4">
29+
<button on:click={toggleLanguage} class="text-sm font-bold text-ctp-subtext0">
3030
{$language === 'en' ? 'HE' : 'EN'}
3131
</button>
32-
<button on:click={toggleTheme} class="text-slate-600 dark:text-ctp-subtext0 text-xl">
32+
<button on:click={toggleTheme} class="text-ctp-subtext0 text-xl">
3333
{#if $theme === 'light'}
3434
<span>&#9790;</span> <!-- Moon -->
3535
{:else}

‎src/lib/components/Hero.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
</script>
44

55
<section id="hero" class="text-center py-20 md:py-32">
6-
<h1 class="text-4xl md:text-6xl font-black text-slate-900 dark:text-ctp-text leading-tight mb-4">{@html $t('hero.title')}</h1>
7-
<p class="max-w-3xl mx-auto text-lg md:text-xl text-slate-600 dark:text-ctp-subtext1 mb-8">{$t('hero.subtitle')}</p>
6+
<h1 class="text-4xl md:text-6xl font-black text-ctp-text leading-tight mb-4">{@html $t('hero.title')}</h1>
7+
<p class="max-w-3xl mx-auto text-lg md:text-xl text-ctp-subtext1 mb-8">{$t('hero.subtitle')}</p>
88
<div class="flex justify-center gap-4">
9-
<a href="#projects" class="bg-slate-900 dark:bg-ctp-green text-white dark:text-ctp-base px-8 py-3 rounded-lg font-semibold hover:bg-slate-800 dark:hover:bg-ctp-yellow transition-transform hover:scale-105">{$t('hero.view_work')}</a>
10-
<a href="#skills" class="bg-white dark:bg-ctp-surface0 text-slate-900 dark:text-ctp-text px-8 py-3 rounded-lg font-semibold border border-slate-200 dark:border-ctp-surface1 hover:bg-slate-100 dark:hover:bg-ctp-surface1 transition-transform hover:scale-105">{$t('hero.see_skills')}</a>
9+
<a href="#projects" class="bg-ctp-blue text-ctp-base px-8 py-3 rounded-lg font-semibold hover:bg-ctp-mauve transition-transform hover:scale-105">{$t('hero.view_work')}</a>
10+
<a href="#skills" class="bg-ctp-base text-ctp-text px-8 py-3 rounded-lg font-semibold border border-ctp-surface1 hover:bg-ctp-surface0 transition-transform hover:scale-105">{$t('hero.see_skills')}</a>
1111
</div>
1212
</section>

0 commit comments

Comments
 (0)