forked from Backwards/backwards.dev
Compare commits
No commits in common. "d78756f367e6da3046b6d4de4c847144a4c79495" and "476203d81b568e26947b6930ba7806a9973bf438" have entirely different histories.
d78756f367
...
476203d81b
@ -1,9 +0,0 @@
|
|||||||
<script>
|
|
||||||
import Header from "$lib/components/Common/Content/Heading.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="w-max h-1/2 m-auto flex flex-col">
|
|
||||||
<Header content="Backwards Development"/>
|
|
||||||
<p class="max-w-screen-lg">I'm Alexander Harding, I am the Founder of Backwards Development. I created Backwards Development as an umbrella for all of my professional works, this website was designed to allow for distribution for my software, tools and applications!</p>
|
|
||||||
<p class="max-w-screen-lg">Backwards Development is a group I founded to work on whatever enter's my plate, If you need anything done, feel free to <a href="/#contact" class="text-primary-500 underline">Contact Us</a> at any time!</p>
|
|
||||||
</div>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<script>
|
|
||||||
import Heading from "$lib/components/Common/Content/Heading.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Heading content="Backwards Media"/>
|
|
||||||
</div>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<script>
|
|
||||||
export let content;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h1 class="h1 text-center pt-4">{content}</h1>
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Hero from "$lib/components/Main/Hero.svelte";
|
import Hero from "$lib/components/Hero.svelte";
|
||||||
import ArrowDown from "~icons/material-symbols/keyboard-double-arrow-down-rounded";
|
import ArrowDown from "~icons/material-symbols/keyboard-double-arrow-down-rounded";
|
||||||
import { crossfade, fade, fly } from "svelte/transition";
|
import { crossfade, fade, fly } from "svelte/transition";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import { writable } from "svelte/store";
|
|
||||||
|
|
||||||
export let sectionStore = {
|
|
||||||
about: writable(),
|
|
||||||
main: writable()
|
|
||||||
};
|
|
||||||
@ -1,85 +1,92 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import Header from "$lib/components/Main/Header.svelte";
|
import Header from "$lib/components/Header.svelte";
|
||||||
import Downloads from "$lib/components/Main/Downloads.svelte";
|
import Downloads from "$lib/components/Downloads.svelte";
|
||||||
import { fly, slide } from "svelte/transition";
|
import { fly } from "svelte/transition";
|
||||||
import Media from "$lib/components/Main/Media.svelte";
|
import Media from "$lib/components/Media.svelte";
|
||||||
import Contact from "$lib/components/Main/Contact.svelte";
|
import Contact from "$lib/components/Contact.svelte";
|
||||||
import TechStack from "$lib/components/Main/TechStack.svelte";
|
import TechStack from "$lib/components/TechStack.svelte";
|
||||||
import Tracker from "$lib/components/Common/Tracker.svelte";
|
|
||||||
import { sectionStore } from "$lib/stores/currentSection";
|
|
||||||
|
|
||||||
/* IMPORTANT */
|
/* IMPORTANT */
|
||||||
// Anything added into the page directly will likely break the page's scrolling behaviour
|
// 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.
|
// 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.
|
// 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;
|
|
||||||
|
|
||||||
if (!$main) main.set(0);
|
let currentSection = 0;
|
||||||
|
|
||||||
let currentSection = $main;
|
// Update the current section based on scroll position
|
||||||
|
const handleScroll = () => {
|
||||||
// Update the current section based on scroll position
|
const sections = document.querySelectorAll(".section");
|
||||||
const handleScroll = () => {
|
const scrollTop = document.querySelector(".scroll-container").scrollTop;
|
||||||
const sections = document.querySelectorAll(".section");
|
sections.forEach((section, index) => {
|
||||||
const scrollTop = document.querySelector(".scroll-container").scrollTop;
|
if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
|
||||||
sections.forEach((section, index) => {
|
currentSection = index;
|
||||||
if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
|
}
|
||||||
main.set(index);
|
});
|
||||||
}
|
};
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="main" class="scroll-container" on:scroll={handleScroll}>
|
<div id="main" class="scroll-container" on:scroll={handleScroll}>
|
||||||
{#each slides as content}
|
{#each slides as content}
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<svelte:component this={content} />
|
<svelte:component this={content} />
|
||||||
</section>
|
</section>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tracker -->
|
<!-- Tracker -->
|
||||||
<Tracker page="main" {slides} includeFirst={false} />
|
{#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}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.scroll-container {
|
.scroll-container {
|
||||||
scroll-snap-type: y mandatory;
|
scroll-snap-type: y mandatory;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
min-height: 100vh; /* Full viewport height */
|
min-height: 100vh; /* Full viewport height */
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tracker Styles */
|
/* Tracker Styles */
|
||||||
.tracker {
|
.tracker {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tracker-dot {
|
.tracker-dot {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
@apply bg-surface-600;
|
@apply bg-surface-600;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tracker-dot.active {
|
.tracker-dot.active {
|
||||||
@apply bg-primary-600;
|
@apply bg-primary-600;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,61 +0,0 @@
|
|||||||
<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';
|
|
||||||
|
|
||||||
/* 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 { about } = sectionStore
|
|
||||||
|
|
||||||
if (!$about) about.set(0);
|
|
||||||
|
|
||||||
let currentSection = $about;
|
|
||||||
|
|
||||||
// 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) {
|
|
||||||
about.set(index);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="main" class="scroll-container" on:scroll={handleScroll}>
|
|
||||||
{#each slides as content}
|
|
||||||
<section class="section flex flex-row">
|
|
||||||
<svelte:component this={content} />
|
|
||||||
</section>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tracker -->
|
|
||||||
<Tracker page="about" slides={slides} />
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user