Jonas_Jones/jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/jonasjones.dev.git synced 2025-10-23 17:09:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

code refactor

Browse source
This commit is contained in:
Jonas_Jones 2023-07-24 15:28:39 +02:00
parent c10e75ac36
commit d63ed25e1a
13 changed files with 386 additions and 405 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/FontAwesome.svelte
View file

@ -1,4 +1,4 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head> </head>

3
src/components/Footer.svelte
View file

@ -1,9 +1,8 @@
<div class="footer"> <div class="footer">
<p>Website by Jonas_Jones 2021 - 2023</p> <p>Website by Jonas_Jones 2021 - 2023</p>
</div> </div>
<style> <style>
.footer { .footer {
height: 1rem; height: 1rem;
background-color: #000; background-color: #000;

9
src/components/NavBar.svelte
View file

@ -32,8 +32,6 @@
<p id="lastfm_artist"></p> <p id="lastfm_artist"></p>
</div> </div>
</div> </div>
<div class="navigation-menu {showMenu ? 'show' : ''}"> <div class="navigation-menu {showMenu ? 'show' : ''}">
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="hamburger-menu close-button {showMenu ? 'open' : ''}" on:click={toggleMenu}> <div class="hamburger-menu close-button {showMenu ? 'open' : ''}" on:click={toggleMenu}>
@ -49,9 +47,9 @@
</div> </div>
</div> </div>
<div class="unsupported"><TooSmallDimsOverlay /></div> <div class="unsupported">
<TooSmallDimsOverlay />
</div>
<script> <script>
let showMenu = false; let showMenu = false;
@ -127,7 +125,6 @@
setInterval(fetchLastFmData, 15000); setInterval(fetchLastFmData, 15000);
</script> </script>
<style> <style>
.hamburger-menu { .hamburger-menu {
position: relative; position: relative;

10
src/components/ParallaxBg.svelte
View file

@ -9,9 +9,9 @@
mouseX = event.clientX; mouseX = event.clientX;
mouseY = event.clientY; mouseY = event.clientY;
} }
</script> </script>
<style> <style>
@import '../routes/+page.css'; @import '../routes/+page.css';
.container { .container {
min-height: 100vh; min-height: 100vh;
@ -34,14 +34,14 @@
} }
z-index: -1; /* Place the background behind other content */ z-index: -1; /* Place the background behind other content */
} }
</style> </style>
<main class="container" on:mousemove={handleMouseMove}> <main class="container" on:mousemove={handleMouseMove}>
<div class="parallax-background" style="--mouse-x: {mouseX}px; --mouse-y: {mouseY}px;"> <div class="parallax-background" style="--mouse-x: {mouseX}px; --mouse-y: {mouseY}px;">
<img src="/ricky.webp" width="102%" height="101%" alt="Parallax Background" class="parallax-image"> <img src="/ricky.webp" width="102%" height="101%" alt="Parallax Background" class="parallax-image">
</div> </div>
<!-- Your main content goes here --> <!-- Your main content goes here -->
<slot></slot> <slot></slot>
</main> </main>

1
src/components/TooSmallDimsOverlay.svelte
View file

@ -25,6 +25,7 @@
text-align: center; text-align: center;
} }
</style> </style>
<div class="overlay"> <div class="overlay">
<div class="notice"> <div class="notice">
<p>Your screen resolution isn't supported by this website. if You're on a computer, try zooming out or resizing the window.</p> <p>Your screen resolution isn't supported by this website. if You're on a computer, try zooming out or resizing the window.</p>

6
src/routes/+error.svelte
View file

@ -19,8 +19,8 @@
const taeyong = document.querySelector('.taeyong'); const taeyong = document.querySelector('.taeyong');
taeyong.style.display = 'none'; taeyong.style.display = 'none';
} }
</script> </script>
<ParallaxBg> <ParallaxBg>
<NavBar /> <NavBar />
<Padding /> <Padding />
@ -40,10 +40,6 @@
/> />
</div> </div>
</center> </center>
<style>
@import '+page.css';
</style>
<Footer /> <Footer />
</ParallaxBg> </ParallaxBg>
<div class="taeyong"> <div class="taeyong">

10
src/routes/+page.svelte
View file

@ -12,7 +12,6 @@
<img src="/root_logo.webp" alt="My Picture" class="picture"> <img src="/root_logo.webp" alt="My Picture" class="picture">
</div> </div>
</div> </div>
<div class="line"> <div class="line">
<hr> <hr>
</div> </div>
@ -34,14 +33,9 @@
</ParallaxBg> </ParallaxBg>
<Footer /> <Footer />
<script> <script>
import Navbar from '../components/NavBar.svelte'; import Navbar from '../components/NavBar.svelte';
import Footer from '../components/Footer.svelte'; import Footer from '../components/Footer.svelte';
import ParallaxBg from '../components/ParallaxBg.svelte'; import ParallaxBg from '../components/ParallaxBg.svelte';
import Padding from '../components/padding.svelte'; import Padding from '../components/padding.svelte';
</script> </script>
<style>
@import '+page.css';
</style>

7
src/routes/about/+page.svelte
View file

@ -1,8 +1,8 @@
<script> <script>
import Footer from "../../components/Footer.svelte"; import Footer from "../../components/Footer.svelte";
import NavBar from "../../components/NavBar.svelte"; import NavBar from "../../components/NavBar.svelte";
import ParallaxBg from "../../components/ParallaxBg.svelte"; import ParallaxBg from "../../components/ParallaxBg.svelte";
import Padding from "../../components/padding.svelte"; import Padding from "../../components/padding.svelte";
</script> </script>
<ParallaxBg> <ParallaxBg>
<title>About</title> <title>About</title>
@ -23,7 +23,6 @@ import Padding from "../../components/padding.svelte";
TL;DR: I asked ChatGPT. <br> TL;DR: I asked ChatGPT. <br>
Also, I like K-Pop. Also, I like K-Pop.
</p> </p>
<h1>Greatest Acomplishment</h1> <h1>Greatest Acomplishment</h1>
<p>A severity 7.5/10 rated CVE I received for a humble project of mine as the second ever CVE in Minecraft Modding history!</p> <p>A severity 7.5/10 rated CVE I received for a humble project of mine as the second ever CVE in Minecraft Modding history!</p>
<a href="https://nvd.nist.gov/vuln/detail/CVE-2022-39221">CVE-2022-39221</a> <a href="https://nvd.nist.gov/vuln/detail/CVE-2022-39221">CVE-2022-39221</a>

4
src/routes/based/+page.svelte
View file

@ -4,6 +4,7 @@
import ParallaxBg from "../../components/ParallaxBg.svelte"; import ParallaxBg from "../../components/ParallaxBg.svelte";
import Padding from "../../components/padding.svelte"; import Padding from "../../components/padding.svelte";
</script> </script>
<ParallaxBg> <ParallaxBg>
<NavBar /> <NavBar />
<title>For the Based</title> <title>For the Based</title>
@ -19,13 +20,10 @@
<span class="terminal_user__dollar__text">$</span> <span class="terminal_user__dollar__text">$</span>
<input title="terminal-input" type="text" id="terminal-input" autocomplete="off" spellcheck="false" autocapitalize="none" class="sc-ilhmMj iNZnsg" value=""> <input title="terminal-input" type="text" id="terminal-input" autocomplete="off" spellcheck="false" autocapitalize="none" class="sc-ilhmMj iNZnsg" value="">
</div> </div>
</div> </div>
<Footer /> <Footer />
</ParallaxBg> </ParallaxBg>
<style> <style>
@import '+page.css'; @import '+page.css';
.terminal_user { .terminal_user {

40
src/routes/projects/+page.svelte
View file

@ -1,42 +1,41 @@
<script lang="ts"> <script lang="ts">
import FontAwesome from "../../components/FontAwesome.svelte"; import FontAwesome from "../../components/FontAwesome.svelte";
import Footer from "../../components/Footer.svelte"; import Footer from "../../components/Footer.svelte";
import NavBar from "../../components/NavBar.svelte"; import NavBar from "../../components/NavBar.svelte";
import ParallaxBg from "../../components/ParallaxBg.svelte"; import ParallaxBg from "../../components/ParallaxBg.svelte";
import Padding from "../../components/padding.svelte"; import Padding from "../../components/padding.svelte";
import projects from "./projects.json"; import projects from "./projects.json";
var searchResults = projects;
var searchResults = projects; var searchtext = '';
var searchcategory = '';
var searchlanguage = '';
var searchstatus = '';
var searchtext = ''; function handleSearchText(event) {
var searchcategory = '';
var searchlanguage = '';
var searchstatus = '';
function handleSearchText(event) {
searchtext = event.target.value.toLowerCase(); searchtext = event.target.value.toLowerCase();
handleSearch() handleSearch()
} }
function handleSearchCategory(event) { function handleSearchCategory(event) {
searchcategory = event.target.value.toLowerCase(); searchcategory = event.target.value.toLowerCase();
handleSearch() handleSearch()
} }
function handleSearchLang(event) { function handleSearchLang(event) {
searchlanguage = event.target.value.toLowerCase(); searchlanguage = event.target.value.toLowerCase();
handleSearch() handleSearch()
} }
function handleSearchStatus(event) { function handleSearchStatus(event) {
searchstatus = event.target.value.toLowerCase(); searchstatus = event.target.value.toLowerCase();
handleSearch() handleSearch()
} }
function handleSearch() { function handleSearch() {
// set searchResults by filtering with searchtext, searchcategory, and searchlanguage // set searchResults by filtering with searchtext, searchcategory, and searchlanguage
searchResults = projects.filter(project => { searchResults = projects.filter(project => {
var text = project.title.toLowerCase() + project.description.toLowerCase(); var text = project.title.toLowerCase() + project.description.toLowerCase();
@ -45,8 +44,7 @@ function handleSearch() {
var status = project.status.toLowerCase(); var status = project.status.toLowerCase();
return text.includes(searchtext) && category.includes(searchcategory) && language.includes(searchlanguage) && status.includes(searchstatus); return text.includes(searchtext) && category.includes(searchcategory) && language.includes(searchlanguage) && status.includes(searchstatus);
}); });
} }
</script> </script>
<style> <style>
@ -221,8 +219,7 @@ function handleSearch() {
display: block; display: block;
} }
} }
</style>
</style>
<FontAwesome /> <FontAwesome />
<ParallaxBg> <ParallaxBg>
@ -326,7 +323,6 @@ function handleSearch() {
</div> </div>
{/each} {/each}
</div> </div>
<Padding /> <Padding />
</div> </div>
<Footer /> <Footer />

7
src/routes/status/+page.svelte
View file

@ -1,9 +1,10 @@
<script> <script>
import Footer from "../../components/Footer.svelte"; import Footer from "../../components/Footer.svelte";
import NavBar from "../../components/NavBar.svelte"; import NavBar from "../../components/NavBar.svelte";
import ParallaxBg from "../../components/ParallaxBg.svelte"; import ParallaxBg from "../../components/ParallaxBg.svelte";
import Padding from "../../components/padding.svelte"; import Padding from "../../components/padding.svelte";
</script> </script>
<ParallaxBg> <ParallaxBg>
<title>Status</title> <title>Status</title>
<div class="container"> <div class="container">