Skip to content

Commit 5c0339b

Browse files
ReKyleeReKylee
committed
better layout
1 parent 0113194 commit 5c0339b

6 files changed

Lines changed: 80 additions & 94 deletions

File tree

‎GEMINI.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@ Do not make decisions that are not based on modern web design standards. Keep ty
33
Do not change the textual content of the site unless told otherwise.
44
Keep the UI elements pretty and nice to look at. Make sure navigation is fun and intuitive, and that it does not strain the viewer's eyes.
55
Do not make absolute statements about the user or their experience.
6+
7+
REMEMBER! Never add another <script> tag to a component, instead modify the existing script tag.

‎src/app.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,14 @@ main {
2828
overflow-y: auto;
2929
-webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
3030
}
31+
32+
.section-animate {
33+
opacity: 0;
34+
transform: translateY(50px);
35+
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
36+
}
37+
38+
.section-animate.is-visible {
39+
opacity: 1;
40+
transform: translateY(0);
41+
}

‎src/lib/actions/animateOnScroll.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export function animateOnScroll(node) {
2+
const observer = new IntersectionObserver(
3+
(entries) => {
4+
entries.forEach((entry) => {
5+
if (entry.isIntersecting) {
6+
node.classList.add('is-visible');
7+
observer.unobserve(node);
8+
}
9+
});
10+
},
11+
{
12+
threshold: 0.1
13+
}
14+
);
15+
16+
observer.observe(node);
17+
18+
return {
19+
destroy() {
20+
observer.unobserve(node);
21+
}
22+
};
23+
}

‎src/lib/components/Journal.svelte‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script>
22
import { t } from '$lib/stores/language.js';
33
import { onMount } from 'svelte';
4+
import { fly } from 'svelte/transition';
5+
import { elasticOut } from 'svelte/easing';
46
57
export let quests = [
68
{ href: '#about', text: 'nav.about', icon: 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z', style: '' },
@@ -15,8 +17,10 @@
1517
* @type {IntersectionObserver}
1618
*/
1719
let observer;
20+
let mounted = false;
1821
1922
onMount(() => {
23+
mounted = true;
2024
quests = quests.map(q => ({
2125
...q,
2226
style: `transform: rotate(${(Math.random() - 0.5) * 5}deg); margin-left: ${Math.random() * 20}px;`
@@ -72,8 +76,10 @@
7276
}
7377
</script>
7478

79+
{#if mounted}
7580
<aside
76-
class="bg-ctp-crust border-2 border-ctp-surface0 rounded-lg p-6 shadow-xl m-5 sticky top-24 h-[calc(100vh-12rem)] overflow-y-auto font-serif text-ctp-text"
81+
class="relative bg-ctp-crust border-2 border-ctp-surface0 rounded-lg p-6 shadow-xl m-5 sticky top-24 h-[calc(100vh-12rem)] overflow-y-auto font-serif text-ctp-text"
82+
in:fly={{ y: -20, duration: 800, easing: elasticOut }}
7783
>
7884
<div class="text-center mb-6">
7985
<h1 class="text-4xl font-bold text-ctp-text drop-shadow-md font-fantasy">{$t('name')}</h1>
@@ -88,12 +94,12 @@
8894
</div>
8995

9096
<ul class="list-none p-0 m-0 space-y-4">
91-
{#each quests as quest}
92-
<li style={quest.style}>
97+
{#each quests as quest, i}
98+
<li style={quest.style} in:fly={{ y: 20, duration: 600, delay: i * 150, easing: elasticOut }}>
9399
<a
94100
href={quest.href}
95101
use:smoothScroll
96-
class="flex items-center no-underline text-ctp-text text-lg p-3 rounded-lg transition-all duration-300"
102+
class="flex items-center no-underline text-ctp-text text-lg p-3 rounded-lg transition-all duration-300 border-b border-ctp-surface1"
97103
class:bg-ctp-surface0={selectedQuest === quest.href}
98104
class:text-ctp-mauve={selectedQuest === quest.href}
99105
class:hover:bg-ctp-surface1={selectedQuest !== quest.href}
@@ -112,10 +118,11 @@
112118
{/each}
113119
</ul>
114120

115-
<div class="relative py-4 mt-4">
121+
<div class="absolute bottom-0 left-0 right-0 py-4 mt-4">
116122
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-px bg-ctp-surface2"></div>
117123
<svg width="100%" height="20" class="absolute bottom-0 left-0 right-0">
118124
<path d="M0 10 Q 5 20, 10 10 T 20 10 T 30 10 T 40 10 T 50 10 T 60 10 T 70 10 T 80 10 T 90 10 T 100 10" stroke="var(--ctp-surface2)" stroke-width="2" fill="none" />
119125
</svg>
120126
</div>
121127
</aside>
128+
{/if}

‎src/lib/components/ThemeSwitch.svelte‎

Lines changed: 26 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -7,86 +7,32 @@
77
</script>
88

99
<div dir="ltr">
10-
<button on:click={toggleTheme} aria-label="Toggle theme"
11-
><div class="tdnn" class:day={$theme === "light"}>
12-
<div class="moon" class:sun={$theme === "light"}></div>
10+
<button on:click={toggleTheme} aria-label="Toggle theme">
11+
<div
12+
class="relative mx-auto h-[var(--toggleHeight)] w-[var(--toggleWidth)] rounded-[var(--toggleHeight)] transition-all duration-500 ease-in-out"
13+
class:bg-ctp-peach={$theme === "light"}
14+
class:bg-ctp-surface0={$theme !== "light"}
15+
style="--toggleHeight: 16em; --toggleWidth: 30em; --toggleBtnRadius: 10em; font-size: 15%;"
16+
>
17+
<div
18+
class="absolute block rounded-full transition-all duration-400 ease-in-out"
19+
class:top-[4.5em]={$theme === "light"}
20+
class:left-[18em]={$theme === "light"}
21+
class:rotate-0={$theme === "light"}
22+
class:w-[7em]={$theme === "light"}
23+
class:h-[7em]={$theme === "light"}
24+
class:bg-ctp-text={$theme === "light"}
25+
class:shadow-[3em_3em_0_5em_#fff_inset,0_-5em_0_-2.7em_#fff,3.5em_-3.5em_0_-3em_#fff,5em_0_0_-2.7em_#fff,3.5em_3.5em_0_-3em_#fff,0_5em_0_-2.7em_#fff,-3.5em_3.5em_0_-3em_#fff,-5em_0_0_-2.7em_#fff,-3.5em_-3.5em_0_-3em_#fff]={$theme ===
26+
"light"}
27+
class:top-[3em]={$theme !== "light"}
28+
class:left-[3em]={$theme !== "light"}
29+
class:-rotate-75={$theme !== "light"}
30+
class:w-[var(--toggleBtnRadius)]={$theme !== "light"}
31+
class:h-[var(--toggleBtnRadius)]={$theme !== "light"}
32+
class:bg-ctp-surface0={$theme !== "light"}
33+
class:shadow-[3em_2.5em_0_0em_#f9e2af_inset,rgba(249,226,175,0.1)_0em_-7em_0_-4.5em,rgba(249,226,175,0.1)_3em_7em_0_-4.5em,rgba(249,226,175,0.1)_2em_13em_0_-4em,rgba(249,226,175,0.1)_6em_2em_0_-4.1em,rgba(249,226,175,0.1)_8em_8em_0_-4.5em,rgba(249,226,175,0.1)_6em_13em_0_-4.5em,rgba(249,226,175,0.1)_-4em_7em_0_-4.5em,rgba(249,226,175,0.1)_-1em_10em_0_-4.5em]={$theme !==
34+
"light"}
35+
></div>
1336
</div>
1437
</button>
1538
</div>
16-
17-
<style>
18-
.tdnn {
19-
--darkbg: #251d29;
20-
--darkt: #ffd1f7;
21-
--lightbg: #fff;
22-
--lightt: #d43370;
23-
24-
--toggleHeight: 16em;
25-
--toggleWidth: 30em;
26-
--toggleBtnRadius: 10em;
27-
28-
--bgColor--night: #423966;
29-
--toggleBtn-bgColor--night: var(--bgColor--night);
30-
--mooncolor: #d9fbff;
31-
--bgColor--day: #fab387;
32-
--toggleBtn-bgColor--day: var(--bgColor--day);
33-
}
34-
35-
.tdnn {
36-
margin: 0 auto;
37-
/*change size of toggle with font-size*/
38-
font-size: 15%;
39-
position: relative;
40-
height: var(--toggleHeight);
41-
width: var(--toggleWidth);
42-
border-radius: var(--toggleHeight);
43-
transition: all 500ms ease-in-out;
44-
background: var(--bgColor--night);
45-
}
46-
47-
.moon {
48-
position: absolute;
49-
display: block;
50-
border-radius: 50%;
51-
transition: all 400ms ease-in-out;
52-
53-
top: 3em;
54-
left: 3em;
55-
transform: rotate(-75deg);
56-
width: var(--toggleBtnRadius);
57-
height: var(--toggleBtnRadius);
58-
background: var(--bgColor--night);
59-
box-shadow:
60-
3em 2.5em 0 0em var(--mooncolor) inset,
61-
rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
62-
rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
63-
rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
64-
rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
65-
rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
66-
rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
67-
rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
68-
rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
69-
}
70-
71-
.day {
72-
background: #ffbf71;
73-
}
74-
.sun {
75-
top: 4.5em;
76-
left: 18em;
77-
transform: rotate(0deg);
78-
width: 7em;
79-
height: 7em;
80-
background: #fff;
81-
box-shadow:
82-
3em 3em 0 5em #fff inset,
83-
0 -5em 0 -2.7em #fff,
84-
3.5em -3.5em 0 -3em #fff,
85-
5em 0 0 -2.7em #fff,
86-
3.5em 3.5em 0 -3em #fff,
87-
0 5em 0 -2.7em #fff,
88-
-3.5em 3.5em 0 -3em #fff,
89-
-5em 0 0 -2.7em #fff,
90-
-3.5em -3.5em 0 -3em #fff;
91-
}
92-
</style>

‎src/routes/+page.svelte‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,23 @@
55
import Experience from '$lib/components/Experience.svelte';
66
import Projects from '$lib/components/Projects.svelte';
77
import Education from '$lib/components/Education.svelte';
8+
import { animateOnScroll } from '$lib/actions/animateOnScroll.js';
89
</script>
910

1011
<Hero />
1112

12-
<section id="about" class="py-8">
13+
<section id="about" class="py-16 section-animate" use:animateOnScroll>
1314
<About />
1415
</section>
15-
<div class="my-8 border-t border-ctp-surface1"></div>
16-
<section id="skills" class="py-8">
16+
<section id="skills" class="py-16 section-animate" use:animateOnScroll>
1717
<Skills />
1818
</section>
19-
<div class="my-8 border-t border-ctp-surface1"></div>
20-
<section id="experience" class="py-8">
19+
<section id="experience" class="py-16 section-animate" use:animateOnScroll>
2120
<Experience />
2221
</section>
23-
<div class="my-8 border-t border-ctp-surface1"></div>
24-
<section id="projects" class="py-8">
22+
<section id="projects" class="py-16 section-animate" use:animateOnScroll>
2523
<Projects />
2624
</section>
27-
<div class="my-8 border-t border-ctp-surface1"></div>
28-
<section id="education" class="py-8">
25+
<section id="education" class="py-16 section-animate" use:animateOnScroll>
2926
<Education />
3027
</section>

0 commit comments

Comments
 (0)