(POC) Changed Snap Scroll system to button navigation system
This commit is contained in:
Harding
parent
e46137d2df
commit
55baf1b3e3
25
src/app.css
25
src/app.css
@ -3,32 +3,11 @@
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
* {
|
||||
overflow-x: hidden;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
*:not(a),
|
||||
*:not(button),
|
||||
*:not(input) {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* @font-face {
|
||||
font-family: 'Nunita';
|
||||
src: url('$lib/assets/fonts/Nunito-VariableFont_wght.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('$lib/assets/fonts/Roboto-VariableFont_wdth,wght.ttf');
|
||||
}
|
||||
|
||||
:root {
|
||||
--theme-font-family-base: 'Roboto', serif;
|
||||
--theme-font-family-heading: 'Roboto', serif;
|
||||
}
|
||||
|
||||
:root body[data-theme='modern'],
|
||||
:root body[data-theme='gold-nouveau'] {
|
||||
--theme-font-family-base: 'Nunita', serif;
|
||||
--theme-font-family-heading: 'Nunita', serif;
|
||||
} */
|
||||
}
|
||||
@ -1,9 +1,13 @@
|
||||
<script>
|
||||
import MaterialSymbolsPerson from '~icons/material-symbols/person';
|
||||
import MaterialSymbolsMail from '~icons/material-symbols/mail';
|
||||
import Right from './navigation-items/Right.svelte';
|
||||
|
||||
export let scrollInDirection;
|
||||
</script>
|
||||
|
||||
<div class="w-screen h-screen flex justify-center items-center">
|
||||
<div id="contact" class="w-screen h-screen flex justify-between items-center">
|
||||
<div class="spacer"></div>
|
||||
<form action="?/contact" class="w-full min-h-full dark:bg-surface-900 bg-surface-200 lg:w-1/2 lg:min-h-max p-8 rounded-md pr-12 lg:pr-8">
|
||||
<h1 class="h1 font-bold ps-4 pb-4">Contact Us</h1>
|
||||
<hr class="opacity-25" />
|
||||
@ -34,4 +38,7 @@
|
||||
<button type="submit" class="btn variant-filled-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<Right {scrollInDirection} />
|
||||
</div>
|
||||
</div>
|
||||
@ -1,9 +1,14 @@
|
||||
<script>
|
||||
import Hero from "$lib/components/Hero.svelte";
|
||||
import ArrowDown from "~icons/material-symbols/keyboard-double-arrow-down-rounded";
|
||||
import { crossfade, fade, fly } from "svelte/transition";
|
||||
import { onMount } from "svelte";
|
||||
import Up from "$lib/components/navigation-items/Up.svelte";
|
||||
import Left from "$lib/components/navigation-items/Left.svelte";
|
||||
import Right from "$lib/components/navigation-items/Right.svelte";
|
||||
import Down from "$lib/components/navigation-items/Down.svelte";
|
||||
|
||||
export let scrollInDirection;
|
||||
|
||||
let isAtTop = true;
|
||||
|
||||
onMount(() => {
|
||||
@ -15,30 +20,26 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Add these classes to your root container (likely in app.html or layout.svelte) -->
|
||||
<header id="header" class="h-screen grid p-4 hero">
|
||||
<div class="spacer"></div>
|
||||
<Up {scrollInDirection} />
|
||||
<div class="spacer"></div>
|
||||
<Left {scrollInDirection} />
|
||||
<Hero></Hero>
|
||||
<Right {scrollInDirection} />
|
||||
<div class="spacer"></div>
|
||||
<Down {scrollInDirection} />
|
||||
</header>
|
||||
|
||||
<style>
|
||||
:global(html) {
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Add scroll-snap-align to your sections -->
|
||||
<header class="fancy-background align-center flex h-screen flex-col justify-between p-4 hero scroll-snap-start">
|
||||
<div class=""></div>
|
||||
<Hero></Hero>
|
||||
<div
|
||||
class="transition-all duration-300 text-xl self-center ease-in-out relative slide h-6"
|
||||
class:opacity-0={!isAtTop}
|
||||
>
|
||||
{#if isAtTop}
|
||||
<div
|
||||
class="animate-bounce"
|
||||
in:fly={{ x: 200, duration: 300 }}
|
||||
out:fly={{ x: -200, duration: 300 }}
|
||||
>
|
||||
<ArrowDown></ArrowDown>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
#header {
|
||||
grid-template-areas: '. . .'
|
||||
'. . .'
|
||||
'. . .';
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +1,32 @@
|
||||
<script>
|
||||
import MaterialSymbolsArrowForwardRounded from "~icons/material-symbols/arrow-forward-rounded";
|
||||
import MaterialSymbolsLabProfileOutline from '~icons/material-symbols/lab-profile-outline';
|
||||
import Down from "./navigation-items/Down.svelte";
|
||||
|
||||
export let scrollInDirection;
|
||||
let mediaPageOnline = false;
|
||||
|
||||
</script>
|
||||
|
||||
<div class="w-screen h-screen flex flex-col justify-center items-center">
|
||||
<h2 class="h2 font-bold">Backwards Media</h2>
|
||||
<h3 class="h3">Upload and Share Media with your Friends</h3>
|
||||
<div class="flex flex-row controls pt-4 gap-12">
|
||||
<a href={mediaPageOnline ? "https://media.backwards.dev/" : ""} class="btn variant-filled-primary cool-hover opacity-50 cursor-not-allowed">
|
||||
<span>Try it out</span>
|
||||
<span class="effect duration-500 ease-in-out rounded-xl"><MaterialSymbolsArrowForwardRounded /></span>
|
||||
</a>
|
||||
<a href="/about#media" class="btn variant-ghost-surface cool-hover">
|
||||
<span>Learn more</span>
|
||||
<span class="effect duration-500 ease-in-out rounded-xl"><MaterialSymbolsLabProfileOutline /></span>
|
||||
</a>
|
||||
<div id="media" class="w-screen h-screen flex flex-col justify-between items-center">
|
||||
<div class="spacer"></div>
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<h2 class="h2 font-bold">Backwards Media</h2>
|
||||
<h3 class="h3">Upload and Share Media with your Friends</h3>
|
||||
<div class="flex flex-row controls pt-4 gap-12">
|
||||
<a href={mediaPageOnline ? "https://media.backwards.dev/" : ""} class="btn variant-filled-primary cool-hover opacity-50 cursor-not-allowed">
|
||||
<span>Try it out</span>
|
||||
<span class="effect duration-500 ease-in-out rounded-xl"><MaterialSymbolsArrowForwardRounded /></span>
|
||||
</a>
|
||||
<a href="/about#media" class="btn variant-ghost-surface cool-hover">
|
||||
<span>Learn more</span>
|
||||
<span class="effect duration-500 ease-in-out rounded-xl"><MaterialSymbolsLabProfileOutline /></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<Down {scrollInDirection} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* dumb ass name :(, cool ass animation :) */
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
import { Avatar } from "@skeletonlabs/skeleton";
|
||||
import projects from "$lib/data/projects.json";
|
||||
import { onMount } from "svelte";
|
||||
import Up from "./navigation-items/Up.svelte";
|
||||
|
||||
export let scrollInDirection;
|
||||
const fallbackThumbnail = "/Image_not_available.png"; // Set a valid default image path
|
||||
|
||||
function handleImageError(event, type) {
|
||||
@ -13,38 +15,41 @@
|
||||
</script>
|
||||
|
||||
|
||||
<div class="min-h-screen">
|
||||
<h2 class="h2 text-center w-screen pt-4 overflow-hidden">Projects</h2>
|
||||
<div class="flex flex-wrap gap-4 p-4 w-max max-w-full m-auto">
|
||||
{#each projects as project}
|
||||
<a href={project.url} class="card w-min variant-glass-surface card-hover overflow-hidden flex flex-col">
|
||||
<header>
|
||||
<img
|
||||
src={project.thumbnail || fallbackThumbnail}
|
||||
class="bg-black/50 aspect=[21/9] object-cover flex justify-center items-center"
|
||||
alt={project.name}
|
||||
loading="lazy"
|
||||
on:error={handleImageError}>
|
||||
</header>
|
||||
<div class="p-4 space-y-4 flex-auto">
|
||||
<h3 class="h3" data-toc-ignore>{project.name}</h3>
|
||||
<article>
|
||||
<p>
|
||||
{project.description}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<hr class="opacity-50" />
|
||||
<footer class="p-4 flex text-nowrap justify-start items-center space-x-4">
|
||||
<Avatar src={project.author.icon || fallbackAvatar} width="w-8" />
|
||||
<div class="flex-auto gap-6 flex justify-between items-center">
|
||||
<h6 class="font-bold" data-toc-ignore>
|
||||
By {project.author.username}
|
||||
</h6>
|
||||
<small>Updated {project.date}</small>
|
||||
<div id="projects" class="min-h-screen">
|
||||
<div class="wrapper">
|
||||
<Up {scrollInDirection} />
|
||||
<h2 class="h2 text-center w-screen pt-4 overflow-hidden">Projects</h2>
|
||||
<div class="flex flex-wrap gap-4 p-4 w-max max-w-full m-auto">
|
||||
{#each projects as project}
|
||||
<a href={project.url} class="card w-min variant-glass-surface card-hover overflow-hidden flex flex-col">
|
||||
<header>
|
||||
<img
|
||||
src={project.thumbnail || fallbackThumbnail}
|
||||
class="bg-black/50 aspect=[21/9] object-cover flex justify-center items-center"
|
||||
alt={project.name}
|
||||
loading="lazy"
|
||||
on:error={handleImageError}>
|
||||
</header>
|
||||
<div class="p-4 space-y-4 flex-auto">
|
||||
<h3 class="h3" data-toc-ignore>{project.name}</h3>
|
||||
<article>
|
||||
<p>
|
||||
{project.description}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</footer>
|
||||
</a>
|
||||
{/each}
|
||||
<hr class="opacity-50" />
|
||||
<footer class="p-4 flex text-nowrap justify-start items-center space-x-4">
|
||||
<Avatar src={project.author.icon || fallbackAvatar} width="w-8" />
|
||||
<div class="flex-auto gap-6 flex justify-between items-center">
|
||||
<h6 class="font-bold" data-toc-ignore>
|
||||
By {project.author.username}
|
||||
</h6>
|
||||
<small>Updated {project.date}</small>
|
||||
</div>
|
||||
</footer>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<script>
|
||||
import Techs from '$lib/data/techstack.json';
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
import Left from './navigation-items/Left.svelte';
|
||||
|
||||
export let scrollInDirection;
|
||||
</script>
|
||||
|
||||
<!-- <div class="w-screen h-screen text-center pb-32 flex justify-center items-center px-8">
|
||||
@ -19,18 +22,30 @@
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="w-screen h-max min-h-screen flex flex-col justify-center items-center py-32">
|
||||
<div class="header-wrapper text-center overflow-visible">
|
||||
<h2 class="flex-shrink-0 flex-grow-1 h2 font-bold pb-0 w-full overflow-hidden">My Current Tech Stack</h2>
|
||||
<span class="text-sm pt-0 text-surface-700 dark:text-surface-200">Subject to Change</span>
|
||||
<div class="w-screen h-max min-h-screen flex flex-row justify-between items-center">
|
||||
<div>
|
||||
<Left {scrollInDirection} />
|
||||
</div>
|
||||
<div class="pt-4 w-max max-w-full h-max flex flex-wrap gap-4 justify-center overflow-visible">
|
||||
{#each Techs as tech}
|
||||
<a href="{tech.url}" class="min-w-72 flex flex-row justify-between items-center card card-hover p-4 dark:hover:bg-surface-700 hover:bg-surface-200 rounded-lg">
|
||||
<Avatar class="p-2" src={tech.logo} alt={`Logo of ${tech.name}`} />
|
||||
<span class="text-xl">{tech.name}</span>
|
||||
<div class="spacer"></div>
|
||||
</a>
|
||||
{/each}
|
||||
<div id="techstack" class="max-w-2/3 flex flex-col justify-center items-center">
|
||||
<div class="header-wrapper text-center overflow-visible">
|
||||
<h2 class="flex-shrink-0 flex-grow-1 h2 font-bold pb-0 w-full overflow-hidden">My Current Tech Stack</h2>
|
||||
<span class="text-sm pt-0 text-surface-700 dark:text-surface-200">Subject to Change</span>
|
||||
</div>
|
||||
<div class="pt-4 w-max max-w-full h-max flex flex-wrap gap-4 justify-center overflow-visible">
|
||||
{#each Techs as tech}
|
||||
<a href="{tech.url}" class="min-w-72 flex flex-row justify-between items-center card card-hover p-4 dark:hover:bg-surface-700 hover:bg-surface-200 rounded-lg">
|
||||
<Avatar class="p-2" src={tech.logo} alt={`Logo of ${tech.name}`} />
|
||||
<span class="text-xl">{tech.name}</span>
|
||||
<div class="spacer"></div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.max-w-2\/3 {
|
||||
max-width: 66.6%;
|
||||
}
|
||||
</style>
|
||||
10
src/lib/components/navigation-items/Down.svelte
Normal file
10
src/lib/components/navigation-items/Down.svelte
Normal file
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import ArrowDown from "~icons/material-symbols/keyboard-double-arrow-down-rounded";
|
||||
export let scrollInDirection;
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full flex justify-center items-end text-3xl">
|
||||
<button on:click={() => { scrollInDirection([1, 0]) }}>
|
||||
<ArrowDown />
|
||||
</button>
|
||||
</div>
|
||||
10
src/lib/components/navigation-items/Left.svelte
Normal file
10
src/lib/components/navigation-items/Left.svelte
Normal file
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import ArrowLeft from "~icons/material-symbols/keyboard-double-arrow-left-rounded";
|
||||
export let scrollInDirection;
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full flex justify-start items-center text-3xl">
|
||||
<button on:click={() => { scrollInDirection([0, -1]) }}>
|
||||
<ArrowLeft />
|
||||
</button>
|
||||
</div>
|
||||
10
src/lib/components/navigation-items/Right.svelte
Normal file
10
src/lib/components/navigation-items/Right.svelte
Normal file
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import ArrowRight from "~icons/material-symbols/keyboard-double-arrow-right-rounded";
|
||||
export let scrollInDirection;
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full flex justify-end items-center text-3xl">
|
||||
<button on:click={() => { scrollInDirection([0, 1]) }}>
|
||||
<ArrowRight />
|
||||
</button>
|
||||
</div>
|
||||
10
src/lib/components/navigation-items/Up.svelte
Normal file
10
src/lib/components/navigation-items/Up.svelte
Normal file
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import ArrowUp from "~icons/material-symbols/keyboard-double-arrow-up-rounded";
|
||||
export let scrollInDirection;
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full flex justify-center items-start text-3xl">
|
||||
<button on:click={() => { scrollInDirection([-1, 0]) }}>
|
||||
<ArrowUp />
|
||||
</button>
|
||||
</div>
|
||||
@ -6,93 +6,91 @@
|
||||
import Contact from "$lib/components/Contact.svelte";
|
||||
import TechStack from "$lib/components/TechStack.svelte";
|
||||
import Projects from "$lib/components/Projects.svelte";
|
||||
import { tableMapperValues } from "@skeletonlabs/skeleton";
|
||||
|
||||
/* 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.
|
||||
function scrollToSection(section, smooth) {
|
||||
section.scrollIntoView({
|
||||
behavior: smooth ? "smooth" : "instant",
|
||||
block: "center",
|
||||
});
|
||||
}
|
||||
|
||||
let slides = [
|
||||
Header,
|
||||
Projects,
|
||||
TechStack,
|
||||
Contact,
|
||||
// Media,
|
||||
// by ID
|
||||
let layout = [
|
||||
[null, "media", null],
|
||||
["contact", "header", "techstack"],
|
||||
[null, "projects", null],
|
||||
];
|
||||
|
||||
let selectedId = "header";
|
||||
|
||||
let currentSection = 0;
|
||||
function getIndexPathOfSelected() {
|
||||
for (let rowIndex = 0; rowIndex < layout.length; rowIndex++) {
|
||||
const colIndex = layout[rowIndex].indexOf(selectedId);
|
||||
|
||||
// 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;
|
||||
if (colIndex !== -1) {
|
||||
return [rowIndex, colIndex];
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function evaluateArrays(input, equationArr) {
|
||||
let output = [];
|
||||
if (input.length !== equationArr.length)
|
||||
return null;
|
||||
for (let index = 0; index < input.length; index++) {
|
||||
output.push(input[index] + equationArr[index]);
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
function scrollInDirection(direction) {
|
||||
const currentCoords = getIndexPathOfSelected();
|
||||
const newCoords = evaluateArrays(currentCoords, direction);
|
||||
console.log(currentCoords)
|
||||
console.log(newCoords)
|
||||
const sectionId = layout[newCoords[0]][newCoords[1]];
|
||||
console.log(sectionId);
|
||||
selectedId = sectionId;
|
||||
scrollToSection(document.getElementById(sectionId), true);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
scrollToSection(document.getElementById("header"));
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="main" class="scroll-container" on:scroll={handleScroll}>
|
||||
{#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}
|
||||
<main class="grid">
|
||||
<div class="page-card spacer"></div>
|
||||
<Media {scrollInDirection}></Media>
|
||||
<div class="page-card spacer"></div>
|
||||
<Contact {scrollInDirection}></Contact>
|
||||
<Header {scrollInDirection}></Header>
|
||||
<TechStack {scrollInDirection}></TechStack>
|
||||
<div class="page-card spacer"></div>
|
||||
<Projects {scrollInDirection}></Projects>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.scroll-container {
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: auto;
|
||||
.page-card {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
scroll-behavior: smooth;
|
||||
/* scroll-snap-align: center; */
|
||||
}
|
||||
|
||||
.section {
|
||||
min-height: 100vh; /* Full viewport height */
|
||||
width: 100vw;
|
||||
main {
|
||||
grid-template-areas:
|
||||
". 1 ."
|
||||
"2 3 4"
|
||||
". 5 .";
|
||||
height: 100vh;
|
||||
/* overflow-y: scroll;
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-behavior: smooth; */
|
||||
}
|
||||
|
||||
/* Scroll Snapping works well with a mouse, but without it feels forced, weird and wrong. */
|
||||
@media (width >= 64rem) {
|
||||
.section {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
main > * {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user