Backwards/backwards.dev
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Multiple Changes

Browse Source
This commit is contained in:
Alexander Harding 2025-02-27 20:56:35 -05:00
parent 55baf1b3e3
commit 2b9bf20eb2
9 changed files with 81 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -22,7 +22,7 @@
"@skeletonlabs/skeleton": "^2.10.4",
"@skeletonlabs/tw-plugin": "^0.4.0",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-node": "^5.2.11",
"@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^4.0.4",
"@tailwindcss/forms": "^0.5.10",
@ -1374,9 +1374,9 @@
}
},
"node_modules/@sveltejs/adapter-node": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.11.tgz",
"integrity": "sha512-lR7/dfUaKFf3aI408KRDy/BVDYoqUws7zNOJz2Hl4JoshlTnMgdha3brXBRFXB+cWtYvJjjPhvmq3xqpbioi4w==",
"version": "5.2.12",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.12.tgz",
"integrity": "sha512-0bp4Yb3jKIEcZWVcJC/L1xXp9zzJS4hDwfb4VITAkfT4OVdkspSHsx7YhqJDbb2hgLl6R9Vs7VQR+fqIVOxPUQ==",
"dev": true,
"license": "MIT",
"dependencies": {

2
package.json
View File

@ -21,7 +21,7 @@
"@skeletonlabs/skeleton": "^2.10.4",
"@skeletonlabs/tw-plugin": "^0.4.0",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-node": "^5.2.11",
"@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^4.0.4",
"@tailwindcss/forms": "^0.5.10",

10
src/lib/components/Hero.svelte
View File

@ -6,12 +6,18 @@
import MdiDiscord from '~icons/mdi/discord';
import MdiLinkedin from '~icons/mdi/linkedin';
import CibGitea from '~icons/cib/gitea';
let personal = true;
</script>
<div class="text-center h-max self-center" id="hero">
<h1 class="h1 overflow-hidden">Backwards Development</h1>
<h4 class="h4">A Software Development and Distribution Company</h4>
{#if personal}
<h1 class="h1 overflow-hidden">Alexander Harding</h1>
<h3 class="h3">Software and Application Developer</h3>
{:else}
<h1 class="h1 overflow-hidden">Backwards Development</h1>
<h4 class="h4">A Software Development and Distribution Company</h4>
{/if}
<div class="flex justify-evenly pt-4">
<a href="https://github.com/BackwardsUser/" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
<span class="block spinner duration-500"><MdiGithub /></span>

20
src/lib/components/TechStack.svelte
View File

@ -6,27 +6,11 @@
export let scrollInDirection;
</script>
<!-- <div class="w-screen h-screen text-center pb-32 flex justify-center items-center px-8">
<div class="wrapper h-max overflow-visible">
<h2 class="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="pt-4 m-auto w-max max-w-full h-max flex flex-wrap gap-4 justify-center">
{#each Techs as tech}
<a href="{tech.url}" class="min-w-72 flex flex-row justify-between items-center card card-hover p-4 hover:bg-surface-700 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="w-screen h-max min-h-screen flex flex-row justify-between items-center">
<div id="techstack" class="w-screen h-max min-h-screen flex flex-row justify-between items-center">
<div>
<Left {scrollInDirection} />
</div>
<div id="techstack" class="max-w-2/3 flex flex-col justify-center items-center">
<div 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>

5
src/lib/components/navigation-items/Down.svelte
View File

@ -4,7 +4,10 @@
</script>
<div class="w-full h-full flex justify-center items-end text-3xl">
<button on:click={() => { scrollInDirection([1, 0]) }}>
<button class="relative" on:click={() => { scrollInDirection([1, 0]) }}>
<ArrowDown />
<div class="absolute -z-10 -top-0.5 left-0 text-surface-400">
<ArrowDown />
</div>
</button>
</div>

6
src/lib/components/navigation-items/Left.svelte
View File

@ -1,10 +1,14 @@
<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]) }}>
<button class="relative" on:click={() => { scrollInDirection([0, -1]) }}>
<ArrowLeft />
<div class="absolute -z-10 top-0 left-0.5 text-surface-400">
<ArrowLeft />
</div>
</button>
</div>

5
src/lib/components/navigation-items/Right.svelte
View File

@ -4,7 +4,10 @@
</script>
<div class="w-full h-full flex justify-end items-center text-3xl">
<button on:click={() => { scrollInDirection([0, 1]) }}>
<button class="relative" on:click={() => { scrollInDirection([0, 1]) }}>
<ArrowRight />
<div class="absolute -z-10 top-0 -left-0.5 text-surface-400">
<ArrowRight />
</div>
</button>
</div>

5
src/lib/components/navigation-items/Up.svelte
View File

@ -4,7 +4,10 @@
</script>
<div class="w-full h-full flex justify-center items-start text-3xl">
<button on:click={() => { scrollInDirection([-1, 0]) }}>
<button class="relative" on:click={() => { scrollInDirection([-1, 0]) }}>
<ArrowUp />
<div class="absolute -z-10 top-0.5 left-0 text-surface-400">
<ArrowUp />
</div>
</button>
</div>

52
src/routes/+page.svelte
View File

@ -48,16 +48,62 @@
function scrollInDirection(direction) {
const currentCoords = getIndexPathOfSelected();
const newCoords = evaluateArrays(currentCoords, direction);
console.log(currentCoords)
console.log(newCoords)
const itemAtCoords = layout[newCoords[0]][newCoords[1]];
if (itemAtCoords == null)
return;
const sectionId = layout[newCoords[0]][newCoords[1]];
console.log(sectionId);
selectedId = sectionId;
scrollToSection(document.getElementById(sectionId), true);
}
let keys = {
"up": [
"ArrowUp",
"w"
],
"down": [
"ArrowDown",
"s"
],
"left": [
"ArrowLeft",
"a"
],
"right": [
"ArrowRight",
"d"
]
};
onMount(() => {
scrollToSection(document.getElementById("header"));
window.addEventListener("resize", e => {
e.preventDefault();
});
document.addEventListener("keydown", e => {
const directionArr = Object.entries(keys).filter(([_, values]) => values.some(v => v == e.key));
if (!directionArr || directionArr.length == 0)
return;
const direction = directionArr[0][0];
switch (direction) {
case "up":
scrollInDirection([-1, 0]);
break;
case "down":
scrollInDirection([1, 0]);
break;
case "left":
scrollInDirection([0, -1]);
break;
case "right":
scrollInDirection([0, 1]);
break;
}
});
});
</script>