Skip to content

Commit 443c164

Browse files
ReKyleeReKylee
committed
Banger layout
1 parent c6dd54c commit 443c164

14 files changed

Lines changed: 403 additions & 78 deletions

‎package-lock.json‎

Lines changed: 7 additions & 7 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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"devDependencies": {
1515
"@catppuccin/tailwindcss": "^1.0.0-beta.1",
1616
"@sveltejs/adapter-static": "^3.0.8",
17-
"@sveltejs/kit": "^2.16.0",
17+
"@sveltejs/kit": "^2.22.5",
1818
"@sveltejs/vite-plugin-svelte": "^5.0.0",
1919
"@tailwindcss/typography": "^0.5.16",
2020
"@tailwindcss/vite": "^4.0.0",

‎src/app.css‎

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap");
1+
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;700&display=swap");
23

34
* {
45
box-sizing: border-box;
56
}
67

78
@import "tailwindcss";
89
@plugin "@tailwindcss/typography";
9-
@import "@catppuccin/tailwindcss/config.css";
10+
@import "@catppuccin/tailwindcss/mocha.css";
1011
@import "tailwindcss-animated";
1112
@theme {
1213
--font-sans: "JetBrains Mono", sans-serif;
1314
--font-hebrew: "Noto Sans Hebrew", sans-serif;
14-
--default-font-family: "JetBrains Mono", var(--font-sans);
1515
}
1616

1717
html {
1818
scroll-behavior: smooth;
1919
}
2020

21-
/* Ensure main content area scrolls independently */
2221
main {
2322
overflow-y: auto;
2423
-webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
@@ -36,3 +35,63 @@ main {
3635
opacity: 1;
3736
transform: translateY(0);
3837
}
38+
39+
.glitch {
40+
animation: glitch 1.5s linear infinite;
41+
}
42+
43+
@keyframes glitch {
44+
2%,
45+
64% {
46+
transform: translate(2px, 0) skew(0deg);
47+
}
48+
4%,
49+
60% {
50+
transform: translate(-2px, 0) skew(0deg);
51+
}
52+
62% {
53+
transform: translate(0, 0) skew(5deg);
54+
}
55+
}
56+
57+
.glitch:before,
58+
.glitch:after {
59+
content: attr(data-text);
60+
position: absolute;
61+
top: 0;
62+
left: 0;
63+
width: 100%;
64+
height: 100%;
65+
}
66+
67+
.glitch:before {
68+
left: 2px;
69+
text-shadow: -2px 0 #ff00c1;
70+
clip: rect(44px, 450px, 56px, 0);
71+
animation: glitch-anim 5s infinite linear alternate-reverse;
72+
}
73+
74+
.glitch:after {
75+
left: -2px;
76+
text-shadow:
77+
-2px 0 #00fff9,
78+
2px 2px #ff00c1;
79+
clip: rect(85px, 450px, 90px, 0);
80+
animation: glitch-anim2 5s infinite linear alternate-reverse;
81+
}
82+
83+
@keyframes glitch-anim {
84+
0% {
85+
clip: rect(42px, 9999px, 44px, 0);
86+
transform: skew(0.3deg);
87+
}
88+
/* ... (keep the rest of the keyframes from the original) */
89+
}
90+
91+
@keyframes glitch-anim2 {
92+
0% {
93+
clip: rect(42px, 9999px, 44px, 0);
94+
transform: skew(0.3deg);
95+
}
96+
/* ... (keep the rest of the keyframes from the original) */
97+
}

‎src/lib/components/Footer.svelte‎

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

5-
<footer class="bg-ctp-crust text-ctp-subtext0 py-12">
6-
<div class="container mx-auto px-4 text-center">
7-
<h3 class="text-2xl font-bold text-ctp-text mb-4">{$t('footer.title')}</h3>
8-
<p class="mb-2">{$t('footer.subtitle')}</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>
5+
<footer class="mt-16 border-t-2 border-ctp-surface1 pt-8 text-center">
6+
<h3 class="text-2xl font-bold text-ctp-sky">{$t("footer.title")}</h3>
7+
<p class="mb-4 text-ctp-subtext0">{$t("footer.subtitle")}</p>
8+
<div class="mb-8 flex justify-center space-x-6">
9+
<a
10+
href="https://github.com/rekylee"
11+
target="_blank"
12+
class="text-ctp-text transition-colors hover:text-ctp-green"
13+
aria-label="GitHub"
14+
>
15+
<svg
16+
xmlns="http://www.w3.org/2000/svg"
17+
width="24"
18+
height="24"
19+
viewBox="0 0 24 24"
20+
fill="none"
21+
stroke="currentColor"
22+
stroke-width="2"
23+
stroke-linecap="round"
24+
stroke-linejoin="round"
25+
><path
26+
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
27+
></path></svg
28+
>
29+
</a>
30+
<a
31+
href="https://www.linkedin.com/in/kylee-benisty/"
32+
target="_blank"
33+
class="text-ctp-text transition-colors hover:text-ctp-green"
34+
aria-label="LinkedIn"
35+
>
36+
<svg
37+
xmlns="http://www.w3.org/2000/svg"
38+
width="24"
39+
height="24"
40+
viewBox="0 0 24 24"
41+
fill="none"
42+
stroke="currentColor"
43+
stroke-width="2"
44+
stroke-linecap="round"
45+
stroke-linejoin="round"
46+
><path
47+
d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
48+
></path><rect x="2" y="9" width="4" height="12"></rect><circle
49+
cx="4"
50+
cy="4"
51+
r="2"
52+
></circle></svg
53+
>
54+
</a>
55+
<a
56+
href="mailto:kylee.benisty@gmail.com"
57+
class="text-ctp-text transition-colors hover:text-ctp-green"
58+
aria-label="Email"
59+
>
60+
<svg
61+
xmlns="http://www.w3.org/2000/svg"
62+
width="24"
63+
height="24"
64+
viewBox="0 0 24 24"
65+
fill="none"
66+
stroke="currentColor"
67+
stroke-width="2"
68+
stroke-linecap="round"
69+
stroke-linejoin="round"
70+
><path
71+
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
72+
></path><polyline points="22,6 12,13 2,6"></polyline></svg
73+
>
74+
</a>
1175
</div>
76+
<p class="text-sm text-ctp-subtext1">{@html $t("footer.copy")}</p>
1277
</footer>

‎src/lib/components/Header.svelte‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
<script>
2-
import ThemeSwitch from "./ThemeSwitch.svelte";
3-
import LangToggle from "./LangToggle.svelte";
2+
import Nav from "$lib/components/Nav.svelte";
3+
import ThemeSwitch from "$lib/components/ThemeSwitch.svelte";
4+
import { t, language } from "$lib/stores/language";
45
</script>
56

6-
<header class="fixed top-0 left-0 right-0 z-50 bg-ctp-base p-4 flex justify-between items-center shadow-lg" dir="ltr">
7-
<a href="/" aria-label="Homepage">
8-
<img src="/favicon.svg" alt="Logo" class="h-8 w-8">
9-
</a>
10-
<div class="flex items-center gap-4">
7+
<header
8+
class="mb-8 flex flex-col items-center justify-between border-b-2 border-ctp-surface1 pb-4 md:flex-row"
9+
>
10+
<div class="relative mb-4 text-2xl font-bold md:mb-0">
11+
<span class="glitch text-ctp-pink" data-text={$t("name")}>
12+
{$t("name")}
13+
</span>
14+
</div>
15+
<Nav />
16+
<div class="flex items-center space-x-4">
1117
<ThemeSwitch />
12-
<LangToggle />
18+
<button
19+
on:click={() => language.setLang($language === "en" ? "he" : "en")}
20+
class="font-bold text-ctp-sky transition-colors hover:text-ctp-mauve"
21+
>
22+
{$language === "en" ? "HE" : "EN"}
23+
</button>
1324
</div>
1425
</header>

‎src/lib/components/Nav.svelte‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script>
2+
import { t } from "$lib/stores/language";
3+
</script>
4+
5+
<nav class="flex flex-wrap justify-center gap-4 text-lg">
6+
<a href="#about" class="transition-colors hover:text-ctp-mauve"
7+
>{$t("nav.about")}</a
8+
>
9+
<a href="#skills" class="transition-colors hover:text-ctp-mauve"
10+
>{$t("nav.skills")}</a
11+
>
12+
<a href="#experience" class="transition-colors hover:text-ctp-mauve"
13+
>{$t("nav.experience")}</a
14+
>
15+
<a href="#projects" class="transition-colors hover:text-ctp-mauve"
16+
>{$t("nav.projects")}</a
17+
>
18+
<a href="#education" class="transition-colors hover:text-ctp-mauve"
19+
>{$t("nav.education")}</a
20+
>
21+
</nav>

‎src/lib/components/ProjectCard.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script>
2+
export let title;
3+
export let desc;
4+
</script>
5+
6+
<div
7+
class="rounded-lg border-2 border-ctp-surface1 bg-ctp-mantle p-6 transition-all hover:scale-105 hover:border-ctp-mauve"
8+
>
9+
<h3 class="mb-2 text-xl font-bold text-ctp-teal">{title}</h3>
10+
<p class="text-ctp-subtext1">{desc}</p>
11+
</div>

‎src/lib/components/Section.svelte‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script>
2+
import { animateOnScroll } from "$lib/actions/animateOnScroll.js";
3+
export let id;
4+
export let title;
5+
</script>
6+
7+
<section {id} use:animateOnScroll class="section-animate">
8+
<h2
9+
class="mb-8 text-3xl font-bold after:block after:h-1 after:w-16 after:bg-ctp-green after:content-['']"
10+
>
11+
{title}
12+
</h2>
13+
<slot />
14+
</section>

‎src/lib/components/SkillBar.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts">
2+
import type { SkillLevel } from "$lib/types";
3+
4+
export let skill: string;
5+
export let level: SkillLevel;
6+
7+
const levelMap: Record<SkillLevel, string> = {
8+
proficient: "w-1/2 bg-ctp-sapphire",
9+
advanced: "w-3/4 bg-ctp-mauve",
10+
expert: "w-full bg-ctp-red",
11+
};
12+
</script>
13+
14+
<div class="mb-2">
15+
<p class="text-ctp-text">{skill}</p>
16+
<div class="h-4 w-full rounded-full bg-ctp-surface0">
17+
<div class="h-full rounded-full {levelMap[level]}"></div>
18+
</div>
19+
</div>

‎src/lib/components/Timeline.svelte‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script>
2+
export let events;
3+
</script>
4+
5+
<div class="relative border-l-2 border-ctp-overlay2 pl-8">
6+
{#each events as event, i}
7+
<div class="mb-8">
8+
<div
9+
class="absolute -left-3 mt-1.5 h-5 w-5 rounded-full bg-ctp-yellow"
10+
></div>
11+
<p class="text-sm text-ctp-subtext0">{event.date}</p>
12+
<h3 class="text-xl font-semibold text-ctp-lavender">
13+
{event.title}
14+
</h3>
15+
{#if event.school}
16+
<p class="text-md text-ctp-peach">{event.school}</p>
17+
{/if}
18+
<p class="mt-1 text-ctp-text">{event.desc}</p>
19+
</div>
20+
{/each}
21+
</div>

0 commit comments

Comments
 (0)