forked from Backwards/backwards.dev
Added more content to main page and Cleaned up themes
This commit is contained in:
BackwardsUser
parent
d9530a637a
commit
45d47e6151
24
package-lock.json
generated
24
package-lock.json
generated
@ -20,6 +20,7 @@
|
|||||||
"@sveltejs/adapter-node": "^5.2.11",
|
"@sveltejs/adapter-node": "^5.2.11",
|
||||||
"@sveltejs/kit": "^2.0.0",
|
"@sveltejs/kit": "^2.0.0",
|
||||||
"@sveltejs/vite-plugin-svelte": "^4.0.4",
|
"@sveltejs/vite-plugin-svelte": "^4.0.4",
|
||||||
|
"@tailwindcss/forms": "^0.5.10",
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
"eslint": "^9.7.0",
|
"eslint": "^9.7.0",
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
@ -1421,6 +1422,19 @@
|
|||||||
"vite": "^5.0.0"
|
"vite": "^5.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@tailwindcss/forms": {
|
||||||
|
"version": "0.5.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
|
||||||
|
"integrity": "sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"mini-svg-data-uri": "^1.2.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/cookie": {
|
"node_modules/@types/cookie": {
|
||||||
"version": "0.6.0",
|
"version": "0.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
|
||||||
@ -3493,6 +3507,16 @@
|
|||||||
"node": ">= 0.6"
|
"node": ">= 0.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/mini-svg-data-uri": {
|
||||||
|
"version": "1.4.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||||
|
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"mini-svg-data-uri": "cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/minimatch": {
|
"node_modules/minimatch": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||||
|
|||||||
@ -19,6 +19,7 @@
|
|||||||
"@sveltejs/adapter-node": "^5.2.11",
|
"@sveltejs/adapter-node": "^5.2.11",
|
||||||
"@sveltejs/kit": "^2.0.0",
|
"@sveltejs/kit": "^2.0.0",
|
||||||
"@sveltejs/vite-plugin-svelte": "^4.0.4",
|
"@sveltejs/vite-plugin-svelte": "^4.0.4",
|
||||||
|
"@tailwindcss/forms": "^0.5.10",
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
"eslint": "^9.7.0",
|
"eslint": "^9.7.0",
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
|
|||||||
21
src/app.css
21
src/app.css
@ -1,3 +1,24 @@
|
|||||||
@import 'tailwindcss/base';
|
@import 'tailwindcss/base';
|
||||||
@import 'tailwindcss/components';
|
@import 'tailwindcss/components';
|
||||||
@import 'tailwindcss/utilities';
|
@import 'tailwindcss/utilities';
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
59
src/app.html
59
src/app.html
@ -1,30 +1,41 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
%sveltekit.head%
|
|
||||||
</head>
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<body data-sveltekit-preload-data="hover" data-theme="crimson">
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<link
|
||||||
</body>
|
href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
%sveltekit.head%
|
||||||
|
</head>
|
||||||
|
<body data-sveltekit-preload-data="hover" data-theme="gold-nouveau">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
@apply h-full;
|
@apply h-full;
|
||||||
}
|
background-image: radial-gradient(
|
||||||
.hero {
|
at 0% 0%,
|
||||||
background-image: radial-gradient(
|
rgba(var(--color-secondary-500) / 0.33) 0px,
|
||||||
at 0% 0%,
|
transparent 50%
|
||||||
rgba(var(--color-secondary-500) / 0.33) 0px,
|
),
|
||||||
transparent 50%
|
radial-gradient(
|
||||||
),
|
at 98% 1%,
|
||||||
radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
|
rgba(var(--color-error-500) / 0.33) 0px,
|
||||||
background-position: center;
|
transparent 50%
|
||||||
background-repeat: no-repeat;
|
);
|
||||||
background-size: cover;
|
background-attachment: fixed;
|
||||||
}
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
src/lib/assets/Image_not_available.png
Normal file
BIN
src/lib/assets/Image_not_available.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/lib/assets/fonts/Nunito-VariableFont_wght.ttf
Normal file
BIN
src/lib/assets/fonts/Nunito-VariableFont_wght.ttf
Normal file
Binary file not shown.
BIN
src/lib/assets/fonts/Roboto-VariableFont_wdth,wght.ttf
Normal file
BIN
src/lib/assets/fonts/Roboto-VariableFont_wdth,wght.ttf
Normal file
Binary file not shown.
37
src/lib/components/Contact.svelte
Normal file
37
src/lib/components/Contact.svelte
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<script>
|
||||||
|
import MaterialSymbolsPerson from '~icons/material-symbols/person';
|
||||||
|
import MaterialSymbolsMail from '~icons/material-symbols/mail';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="w-screen h-screen flex justify-center items-center">
|
||||||
|
<form action="?/contact" class="bg-surface-900 w-1/2 h-1/2 p-8 rounded-md">
|
||||||
|
<h1 class="h1 font-bold ps-4 pb-4">Contact Us</h1>
|
||||||
|
<hr class="opacity-25" />
|
||||||
|
<p class="pt-4">Fullname</p>
|
||||||
|
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] mb-4">
|
||||||
|
<div class="input-group-shim"><MaterialSymbolsPerson /></div>
|
||||||
|
<input type="text" placeholder="John Doe" required />
|
||||||
|
</div>
|
||||||
|
<p>Email</p>
|
||||||
|
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] mb-4">
|
||||||
|
<div class="input-group-shim"><MaterialSymbolsMail /></div>
|
||||||
|
<input type="email" placeholder="john@example.com" required />
|
||||||
|
</div>
|
||||||
|
<p>Subject</p>
|
||||||
|
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] mb-4">
|
||||||
|
<div class="input-group-shim"><MaterialSymbolsMail /></div>
|
||||||
|
<select class="select" required>
|
||||||
|
<option value="other" disabled selected hidden>Choose Subject</option>
|
||||||
|
<option value="request">Work Request</option>
|
||||||
|
<option value="upload">Upload Request</option>
|
||||||
|
<option value="support">Support Request</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<p>Your Message</p>
|
||||||
|
<textarea class="textarea mb-4" rows="4" placeholder="What can we help you with?" required ></textarea>
|
||||||
|
<div class="w-full text-end">
|
||||||
|
<button type="submit" class="btn variant-filled-primary">Submit</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
104
src/lib/components/Downloads.svelte
Normal file
104
src/lib/components/Downloads.svelte
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<script>
|
||||||
|
import { Avatar } from "@skeletonlabs/skeleton";
|
||||||
|
import imageNotAvailable from '$lib/assets/Image_not_available.png';
|
||||||
|
|
||||||
|
// populate this with real data, using database?
|
||||||
|
let Downloads = [
|
||||||
|
{
|
||||||
|
name: "DOT Bot Manager",
|
||||||
|
description: "A Modular Discord bot to help you better manage your discord server the way *you* want.",
|
||||||
|
author: {
|
||||||
|
username: "BackwardsUser",
|
||||||
|
icon: "https://cdn.discordapp.com/avatars/471172695862542337/306522a721ee716ba6348babfd9bbdff.webp?size=32"
|
||||||
|
},
|
||||||
|
date: "2025-01-13",
|
||||||
|
thumbnail: "https://api.backwardsdevelopment.ca/images/treeline.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Mystic Helper Bot",
|
||||||
|
description: "A bot that helps organize events, polls, and reminders with a magical twist!",
|
||||||
|
author: {
|
||||||
|
username: "MysticMaster",
|
||||||
|
icon: "https://cdn.discordapp.com/avatars/123456789012345678/abc123def4567890abc123def4567890.webp?size=32"
|
||||||
|
},
|
||||||
|
date: "2025-01-12",
|
||||||
|
thumbnail: "https://api.backwardsdevelopment.ca/images/treeline.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Game Stats Tracker",
|
||||||
|
description: "Track your game stats and leaderboard rankings across various multiplayer games.",
|
||||||
|
author: {
|
||||||
|
username: "GameTrackerPro",
|
||||||
|
icon: "https://cdn.discordapp.com/avatars/987654321098765432/def789abc123456789abc1234567890.webp?size=32"
|
||||||
|
},
|
||||||
|
date: "2025-01-11",
|
||||||
|
thumbnail: "https://api.backwardsdevelopment.ca/images/treeline.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Quick Polls Bot",
|
||||||
|
description: "Create and manage quick polls for your community to vote on different topics.",
|
||||||
|
author: {
|
||||||
|
username: "PollCreator",
|
||||||
|
icon: "https://cdn.discordapp.com/avatars/112233445566778899/ghi345jkl9876543210ghi345jkl987654.webp?size=32"
|
||||||
|
},
|
||||||
|
date: "2025-01-10",
|
||||||
|
thumbnail: "https://api.backwardsdevelopment.ca/images/treeline.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Music Party Bot",
|
||||||
|
description: "Create your own music playlist and enjoy it with your friends in Discord voice channels.",
|
||||||
|
author: {
|
||||||
|
username: "DJPartyBot",
|
||||||
|
icon: "https://cdn.discordapp.com/avatars/223344556677889900/jkl123mno4567890jkl123mno4567890.webp?size=32"
|
||||||
|
},
|
||||||
|
date: "2025-01-09",
|
||||||
|
thumbnail: "https://example.com/images/music_party.jpg"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
function imageAlt(event) {
|
||||||
|
event.target.src = imageNotAvailable;
|
||||||
|
event.target.classList.add("object-contain"); // Add object-contain for the alt image
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="w-screen min-h-screen">
|
||||||
|
<h2 class="h2 text-center w-screen pt-4 font-nunito">Downloads</h2>
|
||||||
|
<div class="px-32 py-16 grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
|
{#each Downloads as download}
|
||||||
|
<a
|
||||||
|
class="card variant-glass-surface card-hover overflow-hidden"
|
||||||
|
href="/elements/cards"
|
||||||
|
>
|
||||||
|
<header>
|
||||||
|
<!-- Main image (rectangle) -->
|
||||||
|
<img
|
||||||
|
src={download.thumbnail}
|
||||||
|
class="bg-black/50 w-full aspect-[21/9] object-cover flex justify-center items-center"
|
||||||
|
alt="Post"
|
||||||
|
on:error={imageAlt}
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
|
<div class="p-4 space-y-4">
|
||||||
|
<h3 class="h3" data-toc-ignore>{download.name}</h3>
|
||||||
|
<article>
|
||||||
|
<p>
|
||||||
|
{download.description}
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<hr class="opacity-50" />
|
||||||
|
<footer class="p-4 flex justify-start items-center space-x-4">
|
||||||
|
<Avatar
|
||||||
|
src={download.author.icon}
|
||||||
|
width="w-8"
|
||||||
|
/>
|
||||||
|
<div class="flex-auto flex justify-between items-center">
|
||||||
|
<h6 class="font-bold" data-toc-ignore>By {download.author.username}</h6>
|
||||||
|
<small>On {download.date}</small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -24,7 +24,7 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- Add scroll-snap-align to your sections -->
|
<!-- Add scroll-snap-align to your sections -->
|
||||||
<header class="align-center flex h-screen flex-col justify-between p-4 hero scroll-snap-start">
|
<header class="fancy-background align-center flex h-screen flex-col justify-between p-4 hero scroll-snap-start">
|
||||||
<div class=""></div>
|
<div class=""></div>
|
||||||
<Hero></Hero>
|
<Hero></Hero>
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -1,4 +1,8 @@
|
|||||||
|
<script>
|
||||||
|
import BackwardsLogo from "$lib/assets/Backwards.png";
|
||||||
|
</script>
|
||||||
|
|
||||||
<div class="text-center h-max self-center" id="hero">
|
<div class="text-center h-max self-center" id="hero">
|
||||||
<h1 class="text-6xl">Backwards Development</h1>
|
<h1 class="h1">Backwards Development</h1>
|
||||||
<h4 class="text-2xl">A Software Development and Distribution Company</h4>
|
<h4 class="h4">A Software Development and Distribution Company</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
26
src/lib/components/Media.svelte
Normal file
26
src/lib/components/Media.svelte
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<script>
|
||||||
|
import MaterialSymbolsArrowForwardRounded from "~icons/material-symbols/arrow-forward-rounded";
|
||||||
|
import MaterialSymbolsLabProfileOutline from '~icons/material-symbols/lab-profile-outline';
|
||||||
|
</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="https://media.backwards.dev/" class="btn variant-filled-primary cool-hover">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* dumb ass name :(, cool ass animation :) */
|
||||||
|
.cool-hover:hover>.effect {
|
||||||
|
transform: rotateZ(360deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<script>
|
|
||||||
import Icon from "$lib/assets/Backwards.png";
|
|
||||||
import { Avatar } from "@skeletonlabs/skeleton";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav class="flex flex-row bg-surface-700 px-2 py-3">
|
|
||||||
<Avatar src={Icon} background="transparent" rounded="rounded-full"></Avatar>
|
|
||||||
<h1 class="text-3xl my-auto pl-4 source-code-pro">Backwards.dev</h1>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
|
|
||||||
.source-code-pro {
|
|
||||||
font-family: "Source Code Pro", serif;
|
|
||||||
font-weight: 700;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
18
src/lib/components/TechStack.svelte
Normal file
18
src/lib/components/TechStack.svelte
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
import Techs from '$lib/data/techstack.json';
|
||||||
|
import { Avatar } from '@skeletonlabs/skeleton';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="w-screen h-screen flex flex-col justify-center items-center">
|
||||||
|
<h2 class="h2 font-bold pb-0">Our Preferred Tech Stack</h2>
|
||||||
|
<span class="text-sm pt-0 pb-4 text-surface-200">Subject to change</span>
|
||||||
|
<div class="w-1/2 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>
|
||||||
42
src/lib/data/techstack.json
Normal file
42
src/lib/data/techstack.json
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "SvelteKit",
|
||||||
|
"logo": "https://raw.githubusercontent.com/sveltejs/branding/2af7bc72f1bf5152dab89bee1ee2093b1be0824d/svelte-logo.svg",
|
||||||
|
"url": "https://svelte.dev/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Tailwindcss",
|
||||||
|
"logo": "https://tailwindcss.com/_next/static/media/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg",
|
||||||
|
"url": "https://tailwindcss.com/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Skeleton.dev",
|
||||||
|
"logo": "https://api.backwards.dev/images/skeleton.dev.svg",
|
||||||
|
"url": "https://www.skeleton.dev/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Express.js",
|
||||||
|
"logo": "https://api.backwards.dev/images/expressjs.svg",
|
||||||
|
"url": "https://expressjs.com/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Typescript",
|
||||||
|
"logo": "https://api.backwards.dev/images/typescript.svg",
|
||||||
|
"url": "https://www.typescriptlang.org/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "MariaDB",
|
||||||
|
"logo": "https://api.backwards.dev/images/mariadb.png",
|
||||||
|
"url": "https://mariadb.org/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Cloudflare",
|
||||||
|
"logo": "https://api.backwards.dev/images/cloudflare.svg",
|
||||||
|
"url": "https://www.cloudflare.com/en-ca/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Discord",
|
||||||
|
"logo": "https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/653714c17467993e7b389c83_636e0a6918e57475a843f59f_icon_clyde_black_RGB.svg",
|
||||||
|
"url": "https://discord.com/"
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -1,6 +1,9 @@
|
|||||||
<script>
|
<script>
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
import { autoModeWatcher } from '@skeletonlabs/skeleton';
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>{@html '<script>(' + autoModeWatcher.toString() + ')();</script>'}</svelte:head>
|
||||||
{@render children()}
|
{@render children()}
|
||||||
@ -1,10 +1,92 @@
|
|||||||
<script>
|
<script>
|
||||||
import Header from "$lib/components/Header.svelte";
|
import { onMount } from "svelte";
|
||||||
import Navbar from "$lib/components/Navbar.svelte";
|
import Header from "$lib/components/Header.svelte";
|
||||||
import { LightSwitch } from "@skeletonlabs/skeleton";
|
import Downloads from "$lib/components/Downloads.svelte";
|
||||||
|
import { fly } from "svelte/transition";
|
||||||
|
import Media from "$lib/components/Media.svelte";
|
||||||
|
import Contact from "$lib/components/Contact.svelte";
|
||||||
|
import TechStack from "$lib/components/TechStack.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 = [
|
||||||
|
Header,
|
||||||
|
Downloads,
|
||||||
|
Media,
|
||||||
|
TechStack,
|
||||||
|
Contact
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
let currentSection = 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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Navbar></Navbar>
|
<div id="main" class="scroll-container" on:scroll={handleScroll}>
|
||||||
<Header></Header>
|
{#each slides as content}
|
||||||
<LightSwitch />
|
<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}
|
||||||
|
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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>
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
import { skeleton } from '@skeletonlabs/tw-plugin';
|
import { skeleton } from '@skeletonlabs/tw-plugin';
|
||||||
|
import forms from '@tailwindcss/forms';
|
||||||
import { join } from 'node:path';
|
import { join } from 'node:path';
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
darkMode: 'class',
|
darkMode: 'media',
|
||||||
content: [
|
content: [
|
||||||
'./src/**/*.{html,js,svelte}',
|
'./src/**/*.{html,js,svelte}',
|
||||||
join(require.resolve(
|
join(require.resolve(
|
||||||
@ -15,8 +16,9 @@ export default {
|
|||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
|
forms,
|
||||||
skeleton({
|
skeleton({
|
||||||
themes: { preset: [ "crimson" ]}
|
themes: { preset: [ "skeleton", "wintry", "modern", "rocket", "seafoam", "vintage", "sahara", "hamlindigo", "gold-nouveau", "crimson" ]}
|
||||||
})
|
})
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user