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

Fixed Links, Changed Theme, Fixed Lightmode

Browse Source
This commit is contained in:
BackwardsUser 2025-02-22 22:15:44 -05:00
parent 45d47e6151
commit fd2e34c351
17 changed files with 211 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -130,4 +130,6 @@ dist
.yarn/install-state.gz .yarn/install-state.gz
.pnp.* .pnp.*
.svelte-kit .svelte-kit
build

40
package-lock.json generated
View File

@ -13,6 +13,11 @@
}, },
"devDependencies": { "devDependencies": {
"@eslint/compat": "^1.2.3", "@eslint/compat": "^1.2.3",
"@fontsource/abril-fatface": "^5.1.1",
"@fontsource/inter": "^5.1.1",
"@fontsource/playfair-display": "^5.1.1",
"@fontsource/quicksand": "^5.1.1",
"@fontsource/space-grotesk": "^5.1.1",
"@iconify/json": "^2.2.293", "@iconify/json": "^2.2.293",
"@skeletonlabs/skeleton": "^2.10.4", "@skeletonlabs/skeleton": "^2.10.4",
"@skeletonlabs/tw-plugin": "^0.4.0", "@skeletonlabs/tw-plugin": "^0.4.0",
@ -635,6 +640,41 @@
"node": "^18.18.0 || ^20.9.0 || >=21.1.0" "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
} }
}, },
"node_modules/@fontsource/abril-fatface": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@fontsource/abril-fatface/-/abril-fatface-5.1.1.tgz",
"integrity": "sha512-5K7YdlFTk7zAdCkr7XbzqMDxxTQ3J/FE91w0dn89b7p8RuXmTDK5bQ9k7XXMFMHN4r90SvWnWboaKzbXQMLyjQ==",
"dev": true,
"license": "OFL-1.1"
},
"node_modules/@fontsource/inter": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.1.1.tgz",
"integrity": "sha512-weN3E+rq0Xb3Z93VHJ+Rc7WOQX9ETJPTAJ+gDcaMHtjft67L58sfS65rAjC5tZUXQ2FdZ/V1/sSzCwZ6v05kJw==",
"dev": true,
"license": "OFL-1.1"
},
"node_modules/@fontsource/playfair-display": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@fontsource/playfair-display/-/playfair-display-5.1.1.tgz",
"integrity": "sha512-BCIovoAYzgs6UIve00tjutzEDJ+iP+nMOHQP6joSmheE3WGM7m8JU/btq/iUOjV9HK5E4F8NgzdRIPfi1kWzjA==",
"dev": true,
"license": "OFL-1.1"
},
"node_modules/@fontsource/quicksand": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@fontsource/quicksand/-/quicksand-5.1.1.tgz",
"integrity": "sha512-NnIL4yqpkn50GEpye7yztBmkkkQ5vjlVvMnjlkLQr/H8PXveUdaCdGIScd5yHvsc1qcTBwOaAtpz/YkDojwA1A==",
"dev": true,
"license": "OFL-1.1"
},
"node_modules/@fontsource/space-grotesk": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@fontsource/space-grotesk/-/space-grotesk-5.1.1.tgz",
"integrity": "sha512-6uOS8WhMEl6lbykGvkSjxRLs/1lDvfSKyXAau7ONVPzUYBmB1E+JQ3C0du7NDp75xUZ+330xPc9/ep8uFgIXBg==",
"dev": true,
"license": "OFL-1.1"
},
"node_modules/@humanfs/core": { "node_modules/@humanfs/core": {
"version": "0.19.1", "version": "0.19.1",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",

5
package.json
View File

@ -12,6 +12,11 @@
}, },
"devDependencies": { "devDependencies": {
"@eslint/compat": "^1.2.3", "@eslint/compat": "^1.2.3",
"@fontsource/abril-fatface": "^5.1.1",
"@fontsource/inter": "^5.1.1",
"@fontsource/playfair-display": "^5.1.1",
"@fontsource/quicksand": "^5.1.1",
"@fontsource/space-grotesk": "^5.1.1",
"@iconify/json": "^2.2.293", "@iconify/json": "^2.2.293",
"@skeletonlabs/skeleton": "^2.10.4", "@skeletonlabs/skeleton": "^2.10.4",
"@skeletonlabs/tw-plugin": "^0.4.0", "@skeletonlabs/tw-plugin": "^0.4.0",

4
src/app.css
View File

@ -2,7 +2,7 @@
@import 'tailwindcss/components'; @import 'tailwindcss/components';
@import 'tailwindcss/utilities'; @import 'tailwindcss/utilities';
@font-face { /* @font-face {
font-family: 'Nunita'; font-family: 'Nunita';
src: url('$lib/assets/fonts/Nunito-VariableFont_wght.ttf'); src: url('$lib/assets/fonts/Nunito-VariableFont_wght.ttf');
} }
@ -21,4 +21,4 @@
:root body[data-theme='gold-nouveau'] { :root body[data-theme='gold-nouveau'] {
--theme-font-family-base: 'Nunita', serif; --theme-font-family-base: 'Nunita', serif;
--theme-font-family-heading: 'Nunita', serif; --theme-font-family-heading: 'Nunita', serif;
} } */

2
src/app.html
View File

@ -14,7 +14,7 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" data-theme="gold-nouveau"> <body data-sveltekit-preload-data="hover" data-theme="vintage">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

2
src/lib/components/Contact.svelte
View File

@ -4,7 +4,7 @@
</script> </script>
<div class="w-screen h-screen flex justify-center items-center"> <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"> <form action="?/contact" class="dark:bg-surface-900 bg-surface-200 w-1/2 min-h-max p-8 rounded-md">
<h1 class="h1 font-bold ps-4 pb-4">Contact Us</h1> <h1 class="h1 font-bold ps-4 pb-4">Contact Us</h1>
<hr class="opacity-25" /> <hr class="opacity-25" />
<p class="pt-4">Fullname</p> <p class="pt-4">Fullname</p>

104
src/lib/components/Downloads.svelte
View File

@ -1,104 +0,0 @@
<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>

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

@ -1,8 +1,38 @@
<script> <script>
import BackwardsLogo from "$lib/assets/Backwards.png"; import BackwardsLogo from "$lib/assets/Backwards.png";
import MdiGithub from '~icons/mdi/github';
import MdiYoutube from '~icons/mdi/youtube';
import MdiDiscord from '~icons/mdi/discord';
import MdiLinkedin from '~icons/mdi/linkedin';
import CibGitea from '~icons/cib/gitea';
</script> </script>
<div class="text-center h-max self-center" id="hero"> <div class="text-center h-max self-center" id="hero">
<h1 class="h1">Backwards Development</h1> <h1 class="h1">Backwards Development</h1>
<h4 class="h4">A Software Development and Distribution Company</h4> <h4 class="h4">A Software Development and Distribution Company</h4>
<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>
</a>
<a href="https://git.backwards.dev/" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
<span class="block spinner duration-500"><CibGitea /></span>
</a>
<a href="https://www.linkedin.com/in/alexander-harding-71b661265/" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
<span class="block spinner duration-500"><MdiLinkedin /></span>
</a>
<a href="https://www.youtube.com/@BackwardsDevelopment" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
<span class="block spinner duration-500"><MdiYoutube /></span>
</a>
<a href="https://discord.gg/Zhq9yjhHKr" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
<span class="block spinner duration-500"><MdiDiscord /></span>
</a>
</div>
</div> </div>
<style>
.spin:hover>.spinner {
transform: rotateZ(360deg);
}
</style>

5
src/lib/components/Media.svelte
View File

@ -1,13 +1,16 @@
<script> <script>
import MaterialSymbolsArrowForwardRounded from "~icons/material-symbols/arrow-forward-rounded"; import MaterialSymbolsArrowForwardRounded from "~icons/material-symbols/arrow-forward-rounded";
import MaterialSymbolsLabProfileOutline from '~icons/material-symbols/lab-profile-outline'; import MaterialSymbolsLabProfileOutline from '~icons/material-symbols/lab-profile-outline';
let mediaPageOnline = false;
</script> </script>
<div class="w-screen h-screen flex flex-col justify-center items-center"> <div class="w-screen h-screen flex flex-col justify-center items-center">
<h2 class="h2 font-bold">Backwards Media</h2> <h2 class="h2 font-bold">Backwards Media</h2>
<h3 class="h3">Upload and Share Media with your Friends</h3> <h3 class="h3">Upload and Share Media with your Friends</h3>
<div class="flex flex-row controls pt-4 gap-12"> <div class="flex flex-row controls pt-4 gap-12">
<a href="https://media.backwards.dev/" class="btn variant-filled-primary cool-hover"> <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>Try it out</span>
<span class="effect duration-500 ease-in-out rounded-xl"><MaterialSymbolsArrowForwardRounded /></span> <span class="effect duration-500 ease-in-out rounded-xl"><MaterialSymbolsArrowForwardRounded /></span>
</a> </a>

50
src/lib/components/Projects.svelte Normal file
View File

@ -0,0 +1,50 @@
<script>
import { Avatar } from "@skeletonlabs/skeleton";
import projects from "$lib/data/projects.json";
import { onMount } from "svelte";
const fallbackThumbnail = "/Image_not_available.png"; // Set a valid default image path
function handleImageError(event, type) {
if (type === "thumbnail") {
event.target.src = fallbackThumbnail;
}
}
</script>
<div class="min-h-screen">
<h2 class="h2 text-center w-screen pt-4">Projects</h2>
<div class="flex gap-4 p-4 w-max 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>
</footer>
</a>
{/each}
</div>
</div>

35
src/lib/data/projects.json Normal file
View File

@ -0,0 +1,35 @@
[
{
"name": "PlugsyCord",
"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": "22/02/2025",
"url": "https://github.com/BackwardsUser/PlugsyCord",
"thumbnail": "https://api.backwardsdevelopment.ca/images/PlugsyCord-exbanner.png"
},
{
"name": "HTTP Proxy",
"description": "A HTTP Proxy tool that allows for incoming traffic to be routed to a given url.",
"author": {
"username": "BackwardsUser",
"icon": "https://cdn.discordapp.com/avatars/471172695862542337/306522a721ee716ba6348babfd9bbdff.webp?size=32"
},
"date": "00/00/0000",
"url": "https://github.com/BackwardsUser/http-proxy",
"thumbnail": null
},
{
"name": "My API",
"description": "A dynamic content hub for hosting scripts, media, files, and themes, powered by a custom file explorer.",
"author": {
"username": "BackwardsUser",
"icon":"https://cdn.discordapp.com/avatars/471172695862542337/306522a721ee716ba6348babfd9bbdff.webp?size=32"
},
"date": "02/10/2024",
"url": "https://api.backwards.dev/patchnotes_latest.txt",
"thumbnail": null
}
]

2
src/lib/data/techstack.json
View File

@ -6,7 +6,7 @@
}, },
{ {
"name": "Tailwindcss", "name": "Tailwindcss",
"logo": "https://tailwindcss.com/_next/static/media/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg", "logo": "https://tailwindcss.com/_next/static/media/tailwindcss-mark.d52e9897.svg",
"url": "https://tailwindcss.com/" "url": "https://tailwindcss.com/"
}, },
{ {

6
src/routes/+layout.svelte
View File

@ -2,6 +2,12 @@
import '../app.css'; import '../app.css';
import { autoModeWatcher } from '@skeletonlabs/skeleton'; import { autoModeWatcher } from '@skeletonlabs/skeleton';
import "@fontsource/abril-fatface";
import "@fontsource/inter";
import "@fontsource/playfair-display";
import "@fontsource/quicksand";
import "@fontsource/space-grotesk";
let { children } = $props(); let { children } = $props();
</script> </script>

8
src/routes/+page.svelte
View File

@ -1,11 +1,11 @@
<script> <script>
import { onMount } from "svelte"; import { onMount } from "svelte";
import Header from "$lib/components/Header.svelte"; import Header from "$lib/components/Header.svelte";
import Downloads from "$lib/components/Downloads.svelte";
import { fly } from "svelte/transition"; import { fly } from "svelte/transition";
import Media from "$lib/components/Media.svelte"; import Media from "$lib/components/Media.svelte";
import Contact from "$lib/components/Contact.svelte"; import Contact from "$lib/components/Contact.svelte";
import TechStack from "$lib/components/TechStack.svelte"; import TechStack from "$lib/components/TechStack.svelte";
import Projects from "$lib/components/Projects.svelte";
/* 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
@ -14,10 +14,10 @@
let slides = [ let slides = [
Header, Header,
Downloads, Projects,
Media,
TechStack, TechStack,
Contact Contact,
// Media,
]; ];

0
src/lib/assets/Image_not_available.png → static/Image_not_available.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

13
tailwind.config.js
View File

@ -18,7 +18,18 @@ export default {
plugins: [ plugins: [
forms, forms,
skeleton({ skeleton({
themes: { preset: [ "skeleton", "wintry", "modern", "rocket", "seafoam", "vintage", "sahara", "hamlindigo", "gold-nouveau", "crimson" ]} themes: { preset: [
{ name: "skeleton", enhancements: true },
{ name: "wintry", enhancements: true },
{ name: "modern", enhancements: true },
{ name: "rocket", enhancements: true },
{ name: "seafoam", enhancements: true },
{ name: "vintage", enhancements: true },
{ name: "sahara", enhancements: true },
{ name: "hamlindigo", enhancements: true },
{ name: "gold-nouveau", enhancements: true },
{ name: "crimson", enhancements: true }
]}
}) })
] ]
} }

17
vite.config.js.timestamp-1736809606973-d8b6b2320eae1.mjs Normal file
View File

@ -0,0 +1,17 @@
// vite.config.js
import { sveltekit } from "file:///C:/Users/alexa/Documents/Coding/NodeJS/Webpages/backwards.dev/node_modules/@sveltejs/kit/src/exports/vite/index.js";
import { defineConfig } from "file:///C:/Users/alexa/Documents/Coding/NodeJS/Webpages/backwards.dev/node_modules/vite/dist/node/index.js";
import Icons from "file:///C:/Users/alexa/Documents/Coding/NodeJS/Webpages/backwards.dev/node_modules/unplugin-icons/dist/vite.js";
var vite_config_default = defineConfig({
plugins: [
sveltekit(),
Icons({
compiler: "svelte",
autoInstall: true
})
]
});
export {
vite_config_default as default
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxhbGV4YVxcXFxEb2N1bWVudHNcXFxcQ29kaW5nXFxcXE5vZGVKU1xcXFxXZWJwYWdlc1xcXFxiYWNrd2FyZHMuZGV2XCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxhbGV4YVxcXFxEb2N1bWVudHNcXFxcQ29kaW5nXFxcXE5vZGVKU1xcXFxXZWJwYWdlc1xcXFxiYWNrd2FyZHMuZGV2XFxcXHZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9DOi9Vc2Vycy9hbGV4YS9Eb2N1bWVudHMvQ29kaW5nL05vZGVKUy9XZWJwYWdlcy9iYWNrd2FyZHMuZGV2L3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHsgc3ZlbHRla2l0IH0gZnJvbSAnQHN2ZWx0ZWpzL2tpdC92aXRlJztcclxuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSc7XHJcbmltcG9ydCBJY29ucyBmcm9tICd1bnBsdWdpbi1pY29ucy92aXRlJ1xyXG5cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuXHRwbHVnaW5zOiBbXHJcblx0XHRzdmVsdGVraXQoKSxcclxuXHRcdEljb25zKHtcclxuXHRcdFx0Y29tcGlsZXI6ICdzdmVsdGUnLFxyXG5cdFx0XHRhdXRvSW5zdGFsbDogdHJ1ZVxyXG5cdFx0fSlcclxuXHRdXHJcbn0pO1xyXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXlYLFNBQVMsaUJBQWlCO0FBQ25aLFNBQVMsb0JBQW9CO0FBQzdCLE9BQU8sV0FBVztBQUVsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMzQixTQUFTO0FBQUEsSUFDUixVQUFVO0FBQUEsSUFDVixNQUFNO0FBQUEsTUFDTCxVQUFVO0FBQUEsTUFDVixhQUFhO0FBQUEsSUFDZCxDQUFDO0FBQUEsRUFDRjtBQUNELENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==