Project Refactoring and some Cleanup (#1)

Reviewed-on: https://gitpot.dev/sangelo/website/pulls/1
This commit is contained in:
Sangelo 2024-03-12 19:47:04 +00:00
parent 001978ce62
commit 11023ac3ea
18 changed files with 133 additions and 197 deletions

View file

@ -1,30 +1,5 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { smoothScrollTo, handleKeydown } from '$lib/index';
function smoothScrollTo(elementId: string) {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
}
function redirectToHome() {
// goto('/');
smoothScrollTo('home');
}
function handleKeydown(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
redirectToHome();
}
}
function openWebsite(url: string) {
goto(url);
}
</script> </script>
<div id="about" class="section"> <div id="about" class="section">
@ -38,7 +13,7 @@
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
tabindex="0" tabindex="0"
on:click={redirectToHome} on:click={() => smoothScrollTo('home')}
on:keydown={handleKeydown} on:keydown={handleKeydown}
> >
<mask <mask
@ -79,5 +54,5 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import '../styles/about.scss'; @import '$styles/about.scss';
</style> </style>

View file

@ -1,32 +1,6 @@
<script lang='ts'> <script lang='ts'>
import { goto } from '$app/navigation';
import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte'; import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
import { smoothScrollTo, handleKeydown } from '$lib/index';
function smoothScrollTo(elementId: string) {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
}
function redirectToHome() {
// goto('/');
smoothScrollTo('home');
}
function handleKeydown(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
redirectToHome();
}
}
function openWebsite(url: string) {
goto(url);
}
</script> </script>
<div id="home" class="section"> <div id="home" class="section">
@ -80,6 +54,6 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import '../styles/index.scss'; @import '$styles/index.scss';
@import '../styles/home.scss'; @import '$styles/home.scss';
</style> </style>

View file

@ -1,15 +1,17 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation';
import Modal from './Modal.svelte';
import DashinitModal from './modals/dashinit.svelte';
import SangeFaultModal from './modals/sangefault.svelte';
import ExploreCraftModal from './modals/explorecraft.svelte';
import UtilityClientModal from './modals/utilityclient.svelte';
import SangeloSpaceModal from './modals/sangelospace.svelte';
import LunivityModal from './modals/lunivity.svelte';
import MoreProjectsModal from './modals/more.svelte';
// import type { SvelteComponent } from 'svelte';
import { smoothScrollTo, handleKeydown } from '$lib/index';
// Modal
import Modal from '$lib/components/Modal.svelte';
import DashinitModal from '$lib/modals/dashinit.svelte';
import SangeFaultModal from '$lib/modals/sangefault.svelte';
import ExploreCraftModal from '$lib/modals/explorecraft.svelte';
import UtilityClientModal from '$lib/modals/utilityclient.svelte';
import SangeloSpaceModal from '$lib/modals/sangelospace.svelte';
import LunivityModal from '$lib/modals/lunivity.svelte';
import MoreProjectsModal from '$lib/modals/more.svelte';
let showModal = false; let showModal = false;
let selectedModule: any = null; let selectedModule: any = null;
@ -22,27 +24,6 @@
showModal = false; showModal = false;
} }
function smoothScrollTo(elementId: string) {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
}
function redirectToHome() {
// goto('/');
smoothScrollTo('home');
}
function handleKeydown(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
redirectToHome();
}
}
</script> </script>
<div id="projects" class="section"> <div id="projects" class="section">
@ -56,7 +37,7 @@
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
tabindex="0" tabindex="0"
on:click={redirectToHome} on:click={() => smoothScrollTo('home')}
on:keydown={handleKeydown} on:keydown={handleKeydown}
> >
<mask <mask
@ -119,5 +100,5 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import '../styles/projects.scss'; @import '$styles/projects.scss';
</style> </style>

View file

@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { smoothScrollTo, handleKeydown, openWebsite } from '$lib/index';
import { emojis } from '$lib/emojis';
// Icons // Icons
import IconDiscord from 'svelte-material-icons/Discord.svelte'; import IconDiscord from 'svelte-material-icons/Discord.svelte';
@ -14,93 +15,27 @@
import IconMastodon from 'svelte-material-icons/Mastodon.svelte'; import IconMastodon from 'svelte-material-icons/Mastodon.svelte';
import IconSteam from 'svelte-material-icons/Steam.svelte'; import IconSteam from 'svelte-material-icons/Steam.svelte';
// Initialisations
let showMore = false; let showMore = false;
const emojis = [
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ☕️',
'with 🍵',
'with 🍪',
'with 💤',
'on a 💻',
'in 🏫',
'at 🏠',
'with passion',
'with <img src="/assets/emojis/vscodium.png" alt="VSCodium" style="height: 18px;"/>',
'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>',
'with <img src="/assets/emojis/svelte.png" alt="Svelte" style="height: 18px;" />'
];
let emoji = ''; let emoji = '';
// Functions export function changeEmoji() {
function changeEmoji() {
emoji = emojis[Math.floor(Math.random() * emojis.length)]; emoji = emojis[Math.floor(Math.random() * emojis.length)];
} }
function toggleShowMore() { export function toggleShowMore() {
showMore = !showMore; showMore = !showMore;
} }
onMount(() => { export function handleKeydownToggleMore(event: KeyboardEvent) {
changeEmoji();
});
function smoothScrollTo(elementId: string) {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
}
function redirectToHome() {
// goto('/');
smoothScrollTo('home');
}
function handleKeydownHome(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
redirectToHome();
}
}
function handleKeydownToggleMore(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar // Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') { if (event.key === 'Enter' || event.key === ' ') {
toggleShowMore(); toggleShowMore();
} }
} }
function openWebsite(url: string) { onMount(() => {
goto(url); changeEmoji();
} });
</script> </script>
<div id="socials" class="section"> <div id="socials" class="section">
@ -299,8 +234,8 @@
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
tabindex="0" tabindex="0"
on:click={redirectToHome} on:click={() => smoothScrollTo('home')}
on:keydown={handleKeydownHome} on:keydown={handleKeydown}
> >
<mask <mask
id="mask0_1404_2" id="mask0_1404_2"
@ -336,5 +271,5 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import '../styles/socials.scss'; @import '$styles/socials.scss';
</style> </style>

37
src/lib/emojis.ts Normal file
View file

@ -0,0 +1,37 @@
// Initialisations
export const emojis = [
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ☕️',
'with 🍵',
'with 🍪',
'with 💤',
'on a 💻',
'in 🏫',
'at 🏠',
'with passion',
'with <img src="/assets/emojis/vscodium.png" alt="VSCodium" style="height: 18px;"/>',
'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>',
'with <img src="/assets/emojis/svelte.png" alt="Svelte" style="height: 18px;" />'
];

View file

@ -1 +1,28 @@
// place files you want to import through the `$lib` alias in this folder. // index.ts
import { goto } from '$app/navigation';
export function smoothScrollTo(elementId: string) {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
}
// export function redirectToHome() {
// // goto('/');
// smoothScrollTo('home');
// }
export function handleKeydown(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
smoothScrollTo('home');
}
}
export function openWebsite(url: string) {
goto(url);
}

View file

@ -37,6 +37,6 @@
</content> </content>
<style lang="scss"> <style lang="scss">
@import '../../styles/modal.scss'; @import '$styles/modal.scss';
@import '../../styles/mobile/modal-mobile.scss'; @import '$styles/mobile/modal-mobile.scss';
</style> </style>

View file

@ -37,6 +37,6 @@
</content> </content>
<style lang="scss"> <style lang="scss">
@import '../../styles/modal.scss'; @import '$styles/modal.scss';
@import '../../styles/mobile/modal-mobile.scss'; @import '$styles/mobile/modal-mobile.scss';
</style> </style>

View file

@ -37,6 +37,6 @@
</content> </content>
<style lang="scss"> <style lang="scss">
@import '../../styles/modal.scss'; @import '$styles/modal.scss';
@import '../../styles/mobile/modal-mobile.scss'; @import '$styles/mobile/modal-mobile.scss';
</style> </style>

View file

@ -1,11 +1,5 @@
<script lang="ts"> <script lang="ts">
import Modal from '../Modal.svelte';
import DashinitModal from './dashinit.svelte';
import SangeFaultModal from './sangefault.svelte';
import ExploreCraftModal from './explorecraft.svelte';
import UtilityClientModal from './utilityclient.svelte';
import SangeloSpaceModal from './sangelospace.svelte'
import IconCobweb from 'svelte-material-icons/SpiderWeb.svelte'; import IconCobweb from 'svelte-material-icons/SpiderWeb.svelte';
import IconArchive from 'svelte-material-icons/ArchiveOutline.svelte'; import IconArchive from 'svelte-material-icons/ArchiveOutline.svelte';
@ -132,7 +126,7 @@
</content> </content>
<style lang="scss"> <style lang="scss">
@import '../../styles/modal.scss'; @import '$styles/modal.scss';
@import '../../styles/mobile/modal-mobile.scss'; @import '$styles/mobile/modal-mobile.scss';
@import '../../styles/modal-more.scss'; @import '$styles/modal-more.scss';
</style> </style>

View file

@ -37,6 +37,6 @@
</content> </content>
<style lang="scss"> <style lang="scss">
@import '../../styles/modal.scss'; @import '$styles/modal.scss';
@import '../../styles/mobile/modal-mobile.scss'; @import '$styles/mobile/modal-mobile.scss';
</style> </style>

View file

@ -37,6 +37,6 @@
</content> </content>
<style lang="scss"> <style lang="scss">
@import '../../styles/modal.scss'; @import '$styles/modal.scss';
@import '../../styles/mobile/modal-mobile.scss'; @import '$styles/mobile/modal-mobile.scss';
</style> </style>

View file

@ -37,6 +37,6 @@
</content> </content>
<style lang="scss"> <style lang="scss">
@import '../../styles/modal.scss'; @import '$styles/modal.scss';
@import '../../styles/mobile/modal-mobile.scss'; @import '$styles/mobile/modal-mobile.scss';
</style> </style>

View file

@ -1,6 +1,6 @@
<script> <script>
import '../app.scss'; import '../app.scss';
import Navbar from './Navbar.svelte'; import Navbar from '$lib/components/Navbar.svelte';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
export let data; export let data;

View file

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import Home from './Home.svelte'; import Home from '$lib/components/Home.svelte';
import About from './About.svelte'; import About from '$lib/components/About.svelte';
import Projects from './Projects.svelte'; import Projects from '$lib/components/Projects.svelte';
import Socials from './Socials.svelte'; import Socials from '$lib/components/Socials.svelte';
</script> </script>
@ -15,5 +15,5 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import '../styles/index.scss'; @import '$styles/index.scss';
</style> </style>

View file

@ -8,6 +8,13 @@ const config = {
// for more information about preprocessors // for more information about preprocessors
preprocess: [vitePreprocess({})], preprocess: [vitePreprocess({})],
onwarn: (warning, handler) => {
if (warning.code === 'css-unused-selector') {
return;
}
handler(warning);
},
kit: { kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter. // If your environment is not supported or you settled on a specific environment, switch out the adapter.
@ -20,7 +27,13 @@ const config = {
fallback: undefined, fallback: undefined,
precompress: false, precompress: false,
strict: true strict: true
}) }),
alias: {
$routes: "src/routes",
$components: "src/components",
$styles: "src/styles"
},
} }
}; };