Backwards-Remote/backwards.dev
1
0
Fork 0
forked from Backwards/backwards.dev
Code Pull Requests 1 Activity

Moved Tracker to its own component and Fixed its coloring in light mode

Browse Source
This commit is contained in:
Backwards 2025-01-16 00:55:38 +00:00
parent 03f476f7a0
commit d78756f367
4 changed files with 166 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/lib/components/Common/Tracker.svelte Normal file
View File

@ -0,0 +1,81 @@
<script>
import { sectionStore } from "$lib/stores/currentSection";
import { onMount } from "svelte";
import { fly, slide } from "svelte/transition";
export let page,
slides,
includeFirst = true;
console.log(page, slides, includeFirst);
let newSlides = includeFirst ? slides : slides.slice(1);
let pageSection = sectionStore[page];
let currentSection = $pageSection;
onMount(() => {
pageSection.subscribe((cs) => {
console.log(cs);
currentSection = cs;
});
});
// let currentSection = 0
</script>
<h1 class="h1">{currentSection}</h1>
{#if includeFirst ? currentSection >= 0 : currentSection > 0}
<div
in:fly={{ x: 50, duration: 300 }}
out:fly={{ x: 50, duration: 300 }}
class="tracker"
>
{#each slides as _, i}
<div
class="tracker-dot {(includeFirst ? i : i + 1) ===
currentSection
? 'active'
: ''}"
></div>
{/each}
</div>
{/if}
<style>
/* Tracker Styles */
.tracker {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
}
.tracker-dot {
width: 10px;
height: 10px;
@apply bg-surface-600;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.tracker-dot.active {
@apply bg-primary-600;
}
@media (prefers-color-scheme: light) {
.tracker-dot {
@apply bg-surface-300;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.tracker-dot.active {
@apply bg-primary-600;
}
}
</style>

6
src/lib/stores/currentSection.js Normal file
View File

@ -0,0 +1,6 @@
import { writable } from "svelte/store";
export let sectionStore = {
about: writable(),
main: writable()
};

139
src/routes/+page.svelte
View File

@ -1,92 +1,85 @@
<script>
import { onMount } from "svelte";
import Header from "$lib/components/Main/Header.svelte";
import Downloads from "$lib/components/Main/Downloads.svelte";
import { fly } from "svelte/transition";
import Media from "$lib/components/Main/Media.svelte";
import Contact from "$lib/components/Main/Contact.svelte";
import TechStack from "$lib/components/Main/TechStack.svelte";
import { onMount } from "svelte";
import Header from "$lib/components/Main/Header.svelte";
import Downloads from "$lib/components/Main/Downloads.svelte";
import { fly, slide } from "svelte/transition";
import Media from "$lib/components/Main/Media.svelte";
import Contact from "$lib/components/Main/Contact.svelte";
import TechStack from "$lib/components/Main/TechStack.svelte";
import Tracker from "$lib/components/Common/Tracker.svelte";
import { sectionStore } from "$lib/stores/currentSection";
/* IMPORTANT */
// Anything added into the page directly will likely break the page's scrolling behaviour
// To properly add something to the main page, make it into a component and add it to the array.
// This array is in order of how they are to be displayed, modifying their positions will modify them in page.
/* IMPORTANT */
// Anything added into the page directly will likely break the page's scrolling behaviour
// To properly add something to the main page, make it into a component and add it to the array.
// This array is in order of how they are to be displayed, modifying their positions will modify them in page.
let slides = [
Header,
Downloads,
Media,
TechStack,
Contact
];
let slides = [Header, Downloads, Media, TechStack, Contact];
let { main } = sectionStore;
let currentSection = 0;
if (!$main) main.set(0);
// Update the current section based on scroll position
const handleScroll = () => {
const sections = document.querySelectorAll(".section");
const scrollTop = document.querySelector(".scroll-container").scrollTop;
sections.forEach((section, index) => {
if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
currentSection = index;
}
});
};
let currentSection = $main;
// Update the current section based on scroll position
const handleScroll = () => {
const sections = document.querySelectorAll(".section");
const scrollTop = document.querySelector(".scroll-container").scrollTop;
sections.forEach((section, index) => {
if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
main.set(index);
}
});
};
</script>
<div id="main" class="scroll-container" on:scroll={handleScroll}>
{#each slides as content}
<section class="section">
<svelte:component this={content} />
</section>
{/each}
{#each slides as content}
<section class="section">
<svelte:component this={content} />
</section>
{/each}
</div>
<!-- Tracker -->
{#if currentSection > 0}
<div in:fly={{ x: 50, duration: 300 }} out:fly={{ x: 50, duration: 300 }} class="tracker">
{#each slides.slice(1) as _, i}
<div class="tracker-dot {i + 1 === currentSection ? 'active' : ''}"></div>
{/each}
</div>
{/if}
<Tracker page="main" {slides} includeFirst={false} />
<style>
.scroll-container {
scroll-snap-type: y mandatory;
overflow-y: auto;
height: 100vh;
width: 100vw;
scroll-behavior: smooth;
}
.scroll-container {
scroll-snap-type: y mandatory;
overflow-y: auto;
height: 100vh;
width: 100vw;
scroll-behavior: smooth;
}
.section {
scroll-snap-align: start;
min-height: 100vh; /* Full viewport height */
width: 100vw;
}
.section {
scroll-snap-align: start;
min-height: 100vh; /* Full viewport height */
width: 100vw;
}
/* Tracker Styles */
.tracker {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
}
/* Tracker Styles */
.tracker {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
}
.tracker-dot {
width: 10px;
height: 10px;
@apply bg-surface-600;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.tracker-dot {
width: 10px;
height: 10px;
@apply bg-surface-600;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.tracker-dot.active {
@apply bg-primary-600;
}
.tracker-dot.active {
@apply bg-primary-600;
}
</style>

47
src/routes/about/+page.svelte
View File

@ -1,17 +1,25 @@
<script>
import Me from '$lib/components/About/Me.svelte';
import Media from '$lib/components/About/Media.svelte';
import Tracker from '$lib/components/Common/Tracker.svelte';
import { sectionStore } from '$lib/stores/currentSection';
import { onMount } from 'svelte';
import { fly } from 'svelte/transition';
/* IMPORTANT */
// Anything added into the page directly will likely break the page's scrolling behaviour
// To properly add something to the main page, make it into a component and add it to the array.
// This array is in order of how they are to be displayed, modifying their positions will modify them in page.
let slides = [Me, Media];
let slides = [
Me,
Media
];
let currentSection = 0;
let { about } = sectionStore
if (!$about) about.set(0);
let currentSection = $about;
// Update the current section based on scroll position
const handleScroll = () => {
@ -19,7 +27,7 @@
const scrollTop = document.querySelector('.scroll-container').scrollTop;
sections.forEach((section, index) => {
if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
currentSection = index;
about.set(index);
}
});
};
@ -34,13 +42,7 @@
</div>
<!-- Tracker -->
{#if currentSection >= 0}
<div in:fly={{ x: 50, duration: 300 }} out:fly={{ x: 50, duration: 300 }} class="tracker">
{#each slides as _, i}
<div class="tracker-dot {i === currentSection ? 'active' : ''}"></div>
{/each}
</div>
{/if}
<Tracker page="about" slides={slides} />
<style>
.scroll-container {
@ -56,27 +58,4 @@
min-height: 100vh; /* Full viewport height */
width: 100vw;
}
/* Tracker Styles */
.tracker {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
}
.tracker-dot {
width: 10px;
height: 10px;
@apply bg-surface-600;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.tracker-dot.active {
@apply bg-primary-600;
}
</style>