code refactor

This commit is contained in:
J-onasJones 2023-09-17 00:26:58 +02:00
parent 4bf868de38
commit 04890477b0
16 changed files with 734 additions and 611 deletions

2
src/app.d.ts vendored
View file

@ -9,4 +9,4 @@ declare global {
}
}
export {};
export { };

View file

@ -1,13 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="/src/routes/+page.css">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
<link rel="stylesheet" href="/src/routes/+page.css">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

View file

@ -1,4 +1,7 @@
<head>
<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">
<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"
/>
</head>

View file

@ -1,21 +1,21 @@
<div class="footer">
<p>Website by Jonas_Jones 2021 - 2023</p>
<p>Website by Jonas_Jones 2021 - 2023</p>
</div>
<style>
.footer {
height: 1rem;
background-color: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
padding-top: 0.25rem;
padding-bottom: 0.5rem;
font-size: 20px;
}
.footer {
height: 1rem;
background-color: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
padding-top: 0.25rem;
padding-bottom: 0.5rem;
font-size: 20px;
}
</style>

View file

@ -1,87 +1,96 @@
<script>
let images = [];
let selectedSquares = new Set();
let loading = false;
const fetchImages = () => {
loading = true;
// Load images from the /areyouarobot folder
// You can replace this with your image loading logic
setTimeout(() => {
// Simulate loading images with random properties (e.g., 'X', 'O', etc.)
for (let i = 0; i < 16; i++) {
const imageId = images.length + i;
const row = Math.floor(i / 4);
const col = i % 4;
const property = Math.random() > 0.5 ? 'X' : 'O'; // Simulate random properties
console.log("imageId: " + imageId + " row: " + row + " col: " + col + " property: " + property)
images.push({
id: imageId,
src: `/image_${row}_${col}.jpg`,
property: property
});
}
loading = false;
}, 1000);
};
const toggleSquareSelection = (image) => {
if (selectedSquares.has(image.id)) {
selectedSquares.delete(image.id);
} else {
selectedSquares.add(image.id);
let images = [];
let selectedSquares = new Set();
let loading = false;
const fetchImages = () => {
loading = true;
// Load images from the /areyouarobot folder
// You can replace this with your image loading logic
setTimeout(() => {
// Simulate loading images with random properties (e.g., 'X', 'O', etc.)
for (let i = 0; i < 16; i++) {
const imageId = images.length + i;
const row = Math.floor(i / 4);
const col = i % 4;
const property = Math.random() > 0.5 ? "X" : "O"; // Simulate random properties
console.log(
"imageId: " +
imageId +
" row: " +
row +
" col: " +
col +
" property: " +
property
);
images.push({
id: imageId,
src: `/image_${row}_${col}.jpg`,
property: property,
});
}
};
window.addEventListener("scroll", () => {
if (
!loading &&
window.innerHeight + window.scrollY >= document.body.offsetHeight - 200
) {
fetchImages();
}
});
// Initial load
fetchImages();
</script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
loading = false;
}, 1000);
};
const toggleSquareSelection = (image) => {
if (selectedSquares.has(image.id)) {
selectedSquares.delete(image.id);
} else {
selectedSquares.add(image.id);
}
.image {
width: 150px;
height: 150px;
object-fit: cover;
border: 2px solid transparent;
cursor: pointer;
};
window.addEventListener("scroll", () => {
if (
!loading &&
window.innerHeight + window.scrollY >= document.body.offsetHeight - 200
) {
fetchImages();
}
.selected {
border-color: blue;
}
</style>
<div class="grid">
{#each images as image}
<img
class="image {selectedSquares.has(image.id) ? 'selected' : ''}"
src={image.src}
alt={`Image ${image.id}`}
on:click={() => toggleSquareSelection(image)}
/>
{/each}
{#if loading}
<p>Loading...</p>
{/if}
</div>
<div>
<p>Selected squares: {Array.from(selectedSquares).join(', ')}</p>
</div>
});
// Initial load
fetchImages();
</script>
<div class="grid">
{#each images as image}
<img
class="image {selectedSquares.has(image.id) ? 'selected' : ''}"
src={image.src}
alt={`Image ${image.id}`}
on:click={() => toggleSquareSelection(image)}
/>
{/each}
{#if loading}
<p>Loading...</p>
{/if}
</div>
<div>
<p>Selected squares: {Array.from(selectedSquares).join(", ")}</p>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.image {
width: 150px;
height: 150px;
object-fit: cover;
border: 2px solid transparent;
cursor: pointer;
}
.selected {
border-color: blue;
}
</style>

View file

@ -1,13 +1,88 @@
<script>
let showMenu = false;
function toggleMenu() {
showMenu = !showMenu;
}
import TooSmallDimsOverlay from "./TooSmallDimsOverlay.svelte";
let navLinks = [
{ name: "Home", url: "/" },
{ name: "Projects", url: "/projects" },
// just removed this cause it bothered me
//{ name: 'For The Based™', url: '/based'},
//{ name: 'Status', url: '/status'},
{ name: "About", url: "/about" },
];
// @ts-ignore
let miscLinks = [{ name: "For The Based&trade;", url: "/based" }];
const fetch_url =
"https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Jonas_Jones&api_key=57c0ca64285c7ca676bb8c2acf320f41&format=json&limit=1";
/**
* @param {string} str
*/
function truncateString(str) {
if (str.length > 30) {
return str.slice(0, 30) + "...";
} else {
return str;
}
}
async function fetchLastFmData() {
let response = await fetch(fetch_url);
let data = await response.json();
let album_cover = data.recenttracks.track[0].image[1]["#text"];
let song_title = truncateString(data.recenttracks.track[0].name);
//let song_title = truncateString("WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWw");
let artist = truncateString(data.recenttracks.track[0].artist["#text"]);
try {
// @ts-ignore
document.getElementById("lastfm_title").innerHTML = song_title;
// @ts-ignore
document.getElementById("lastfm_artist").innerHTML = artist;
// @ts-ignore
document.getElementById(
"lastfm_logo"
).style.backgroundImage = `url(${album_cover})`;
} catch (error) {}
try {
let is_playing = data.recenttracks.track[0]["@attr"].nowplaying;
if (is_playing == "true") {
// @ts-ignore
document.getElementById("lastfm_logo_overlay").src = "/equalizer.gif";
} else {
// @ts-ignore
document.getElementById("lastfm_logo_overlay").src =
"/pause-icon-256.png";
}
} catch (error) {
try {
// @ts-ignore
document.getElementById("lastfm_logo_overlay").src =
"/pause-icon-256.png";
} catch (error) {}
}
}
fetchLastFmData();
setInterval(fetchLastFmData, 15000);
</script>
<div class="navbar">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="hamburger-menu {showMenu ? 'open' : ''}" on:click={toggleMenu}>
<div class="hamburger-line line-1"></div>
<div class="hamburger-line line-2"></div>
<div class="hamburger-line line-3"></div>
<div class="hamburger-line line-1" />
<div class="hamburger-line line-2" />
<div class="hamburger-line line-3" />
</div>
<div class="logo">
<a href="/">
<img src="/icon_80x80.webp" alt="Logo" class="logo">
<img src="/icon_80x80.webp" alt="Logo" class="logo" />
</a>
</div>
<div class="nav-links">
@ -21,23 +96,26 @@
</div>
<div class="lastfm">
<a href="https://fm.jonasjones.dev">
<span class="link"></span>
<span class="link" />
</a>
<div class="lastfmlogoclass" id="lastfm_logo">
<img src="" alt=" " class="lastfmlogooverlay" id="lastfm_logo_overlay">
<img src="" alt=" " class="lastfmlogooverlay" id="lastfm_logo_overlay" />
</div>
<div class="lastfm-text">
<p id="lastfm_title"></p>
<p id="lastfm_artist"></p>
<p id="lastfm_title" />
<p id="lastfm_artist" />
</div>
</div>
<div class="navigation-menu {showMenu ? 'show' : ''}">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="hamburger-menu close-button {showMenu ? 'open' : ''}" on:click={toggleMenu}>
<div class="hamburger-line line-1"></div>
<div class="hamburger-line line-2"></div>
<div class="hamburger-line line-3"></div>
<div
class="hamburger-menu close-button {showMenu ? 'open' : ''}"
on:click={toggleMenu}
>
<div class="hamburger-line line-1" />
<div class="hamburger-line line-2" />
<div class="hamburger-line line-3" />
</div>
<ul class="links">
{#each navLinks as link}
@ -45,89 +123,13 @@
{/each}
</ul>
</div>
</div>
<div class="unsupported">
<TooSmallDimsOverlay />
</div>
<script>
let showMenu = false;
function toggleMenu() {
showMenu = !showMenu;
}
import TooSmallDimsOverlay from './TooSmallDimsOverlay.svelte';
let navLinks = [
{ name: 'Home', url: '/' },
{ name: 'Projects', url: '/projects'},
// just removed this cause it bothered me
//{ name: 'For The Based™', url: '/based'},
//{ name: 'Status', url: '/status'},
{ name: 'About', url: '/about' }
];
// @ts-ignore
let miscLinks = [
{ name: 'For The Based&trade;', url: '/based'}
]
const fetch_url = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Jonas_Jones&api_key=57c0ca64285c7ca676bb8c2acf320f41&format=json&limit=1"
/**
* @param {string} str
*/
function truncateString(str) {
if (str.length > 30) {
return str.slice(0, 30) + "...";
} else {
return str;
}
}
async function fetchLastFmData() {
let response = await fetch(fetch_url);
let data = await response.json();
let album_cover = data.recenttracks.track[0].image[1]['\#text'];
let song_title = truncateString(data.recenttracks.track[0].name);
//let song_title = truncateString("WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWw");
let artist = truncateString(data.recenttracks.track[0].artist['\#text']);
try {
// @ts-ignore
document.getElementById("lastfm_title").innerHTML = song_title;
// @ts-ignore
document.getElementById("lastfm_artist").innerHTML = artist;
// @ts-ignore
document.getElementById("lastfm_logo").style.backgroundImage = `url(${album_cover})`;
} catch (error) {}
try {
let is_playing = data.recenttracks.track[0]['\@attr'].nowplaying;
if (is_playing == "true") {
// @ts-ignore
document.getElementById("lastfm_logo_overlay").src="/equalizer.gif";
} else {
// @ts-ignore
document.getElementById("lastfm_logo_overlay").src="/pause-icon-256.png";
}
} catch (error) {
try {
// @ts-ignore
document.getElementById("lastfm_logo_overlay").src="/pause-icon-256.png";
} catch (error) {}
}
}
fetchLastFmData();
setInterval(fetchLastFmData, 15000);
</script>
<style>
.hamburger-menu {
<style>
.hamburger-menu {
position: relative;
width: 30px;
height: 21.5px;
@ -215,204 +217,205 @@
font-size: 18px;
}
.navbar {
background-color: #2023247c;
padding: 10px;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100%;
height: 58px;
display: flex;
position: fixed;
top: 0;
z-index: 1;
}
.logo {
height: 45px;
border-radius: 10px;
margin-top: 3.5px;
}
.navbar {
background-color: #2023247c;
padding: 10px;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100%;
height: 58px;
display: flex;
position: fixed;
top: 0;
z-index: 1;
}
.nav-links {
display: flex;
justify-content: center;
flex-grow: 1;
}
.logo {
height: 45px;
border-radius: 10px;
margin-top: 3.5px;
}
.nav-links {
margin-top: 5px;
margin-bottom: 5px;
}
nav {
padding: 10px;
justify-content: center;
width: 100%;
display: table;
}
.nav-links {
display: flex;
justify-content: center;
flex-grow: 1;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-links {
margin-top: 5px;
margin-bottom: 5px;
}
nav {
padding: 10px;
justify-content: center;
width: 100%;
display: table;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin-right: 10px;
}
a {
text-decoration: none;
color: #ffffff;
padding: 5px;
font-size: 23px;
}
a:hover {
color: #ddd;
}
li {
display: inline;
margin-right: 10px;
}
.lastfm {
padding: 3px;
padding-right: 10px;
padding-left: 0;
margin: 0;
justify-content: right;
justify-self: right;
align-items: right;
float: right;
display: flex;
position: relative;
right: 3px;
top: 3.5px;
border-radius: 5px;
max-width:300px;
height: 43px;
overflow: hidden;
}
.lastfm:hover {
background-color: #202324;
}
.lastfm img {
width: 30px;
height: 30px;
border-radius: 10%;
margin-right: 10px;
}
.lastfm #lastfm_logo {
width: 40px;
height: 40px;
margin-right: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 10%;
align-items: center;
}
.lastfm #lastfm_artist {
font-size: 13px;
text-align: left;
padding: 0;
margin: 0;
display: flex;
}
.lastfm #lastfm_title {
font-size: 19px;
text-align: left;
padding: 0;
margin: 0;
display: flex;
}
.lastfm #lastfm_logo_overlay {
width: 40px;
height: 40px;
margin-right: 10px;
opacity: 0.5;
align-self: center;
}
.link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
a {
text-decoration: none;
color: #ffffff;
padding: 5px;
font-size: 23px;
}
.unsupported {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
a:hover {
color: #ddd;
}
.lastfm {
padding: 3px;
padding-right: 10px;
padding-left: 0;
margin: 0;
justify-content: right;
justify-self: right;
align-items: right;
float: right;
display: flex;
position: relative;
right: 3px;
top: 3.5px;
border-radius: 5px;
max-width: 300px;
height: 43px;
overflow: hidden;
}
.lastfm:hover {
background-color: #202324;
}
.lastfm img {
width: 30px;
height: 30px;
border-radius: 10%;
margin-right: 10px;
}
.lastfm #lastfm_logo {
width: 40px;
height: 40px;
margin-right: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 10%;
align-items: center;
}
.lastfm #lastfm_artist {
font-size: 13px;
text-align: left;
padding: 0;
margin: 0;
display: flex;
}
.lastfm #lastfm_title {
font-size: 19px;
text-align: left;
padding: 0;
margin: 0;
display: flex;
}
.lastfm #lastfm_logo_overlay {
width: 40px;
height: 40px;
margin-right: 10px;
opacity: 0.5;
align-self: center;
}
.link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.unsupported {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
}
}
@media only screen and (max-width: 900px) and (min-width: 650px) {
.lastfm #lastfm_title, .lastfm #lastfm_artist {
display: none;
}
.lastfm {
width: 50px;
}
.navigation-menu {
display: none;
}
@media only screen and (max-width: 900px) and (min-width: 650px) {
.lastfm #lastfm_title,
.lastfm #lastfm_artist {
display: none;
}
@media only screen and (max-width: 650px) and (min-width: 375px) {
.nav-links {
display: none;
}
.lastfm #lastfm_title, .lastfm #lastfm_artist {
display: flex;
}
.hamburger-menu {
display: block;
}
.logo {
display: none;
}
.lastfm {
width: 50px;
}
@media only screen and (max-width: 375px) and (min-width: 300px) {
.lastfm #lastfm_title, .lastfm #lastfm_artist {
display: none;
}
.lastfm {
width: 50px;
}
.nav-links {
display: none;
}
.hamburger-menu {
display: block;
}
.logo {
display: none;
}
.navigation-menu {
display: none;
}
}
@media only screen and (max-width: 300px) and (min-width: 0px) {
.lastfm #lastfm_title, .lastfm #lastfm_artist {
display: none;
}
.lastfm {
width: 50px;
}
.nav-links {
display: none;
}
.hamburger-menu {
display: block;
}
.logo {
display: none;
}
@media only screen and (max-width: 650px) and (min-width: 375px) {
.nav-links {
display: none;
}
.lastfm #lastfm_title,
.lastfm #lastfm_artist {
display: flex;
}
.hamburger-menu {
display: block;
}
.logo {
display: none;
}
}
</style>
@media only screen and (max-width: 375px) and (min-width: 300px) {
.lastfm #lastfm_title,
.lastfm #lastfm_artist {
display: none;
}
.lastfm {
width: 50px;
}
.nav-links {
display: none;
}
.hamburger-menu {
display: block;
}
.logo {
display: none;
}
}
@media only screen and (max-width: 300px) and (min-width: 0px) {
.lastfm #lastfm_title,
.lastfm #lastfm_artist {
display: none;
}
.lastfm {
width: 50px;
}
.nav-links {
display: none;
}
.hamburger-menu {
display: block;
}
.logo {
display: none;
}
}
</style>

View file

@ -10,9 +10,26 @@
mouseY = event.clientY;
}
</script>
<main class="container" on:mousemove={handleMouseMove}>
<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"
/>
</div>
<!-- Your main content goes here -->
<slot />
</main>
<style>
@import '../routes/+page.css';
@import "../routes/+page.css";
.container {
min-height: 100vh;
position: relative;
@ -25,23 +42,14 @@
left: 0;
width: 100%;
height: 100%;
background-image: url('/ricky.webp');
background-image: url("/ricky.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
@media only screen and (min-width: 768px) {
transform: translateX(calc(-1 * var(--mouse-x) / 50)) translateY(calc(-1 * var(--mouse-y) / 50));
}
transform: translateX(calc(-1 * var(--mouse-x) / 50))
translateY(calc(-1 * var(--mouse-y) / 50));
}
z-index: -1; /* Place the background behind other content */
}
</style>
<main class="container" on:mousemove={handleMouseMove}>
<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">
</div>
<!-- Your main content goes here -->
<slot></slot>
</main>

View file

@ -1,3 +1,12 @@
<div class="overlay">
<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>
</div>
</div>
<style>
.overlay {
position: fixed;
@ -25,10 +34,3 @@
text-align: center;
}
</style>
<div class="overlay">
<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>
</div>
</div>

View file

@ -11,13 +11,13 @@
}
function toggleTaeyong() {
const taeyong = document.querySelector('.taeyong');
taeyong.style.display = 'block';
const taeyong = document.querySelector(".taeyong");
taeyong.style.display = "block";
}
function toggleTaeyongoff() {
const taeyong = document.querySelector('.taeyong');
taeyong.style.display = 'none';
const taeyong = document.querySelector(".taeyong");
taeyong.style.display = "none";
}
</script>
@ -34,7 +34,7 @@
<div style="height:300px;width:600px">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<img
src={isGif1 ? '/johnrefs1.gif' : '/johnrefs2.gif'}
src={isGif1 ? "/johnrefs1.gif" : "/johnrefs2.gif"}
alt="Toggle GIF"
on:click={toggleGif}
/>
@ -44,7 +44,13 @@
</ParallaxBg>
<div class="taeyong">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<img src="/taeyong.gif" alt="taeyong" on:click={toggleTaeyongoff} height="100%" width="100%" />
<img
src="/taeyong.gif"
alt="taeyong"
on:click={toggleTaeyongoff}
height="100%"
width="100%"
/>
</div>
<style>

View file

@ -4,7 +4,7 @@
@font-face {
font-family: 'sary_soft_semiboldregular';
src: url('/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'),
url('/font/sary-soft.soft-semibold-webfont.woff') format('woff');
url('/font/sary-soft.soft-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
@ -35,7 +35,8 @@ body {
background-size: 90%;
background-position: center center;
transform: translateX(calc(-1 * (var(--mouse-x)) / 50)) translateY(calc(-1 * var(--mouse-y) / 50));
z-index: -1; /* Place the background behind other content */
z-index: -1;
/* Place the background behind other content */
}
/* Set container styles */
@ -56,7 +57,8 @@ body {
perspective: 800px;
}
.card-front, .card-back {
.card-front,
.card-back {
position: absolute;
width: 100%;
backface-visibility: hidden;
@ -95,22 +97,22 @@ body {
}
.home-link,
.for-the-based-link {
font-size: 2rem;
margin: 0 0.5rem;
color: rgb(0, 255, 0);
text-decoration: underline;
transition: all 0.2s ease-in-out;
font-family: 'sary_soft_semiboldregular';
font-style: italic;
}
.for-the-based-link {
font-size: 2rem;
margin: 0 0.5rem;
color: rgb(0, 255, 0);
text-decoration: underline;
transition: all 0.2s ease-in-out;
font-family: 'sary_soft_semiboldregular';
font-style: italic;
}
.home-link:hover,
.for-the-based-link:hover {
color: green;
text-decoration: none;
font-size: 2.5rem;
}
.home-link:hover,
.for-the-based-link:hover {
color: green;
text-decoration: none;
font-size: 2.5rem;
}
/* Set social media styles */
.social-media {
@ -135,7 +137,8 @@ body {
}
.row a:hover {
transform: scale(1.3); /* make icon 20% bigger on hover */
transform: scale(1.3);
/* make icon 20% bigger on hover */
}
.line {
@ -149,7 +152,7 @@ body {
transition: transform 0.2s ease-in-out;
}
.line:hover + .line-content {
.line:hover+.line-content {
transform: scale(100);
color: gray;
}
}

View file

@ -1,37 +1,43 @@
<script>
import Navbar from "../components/NavBar.svelte";
import Footer from "../components/Footer.svelte";
import ParallaxBg from "../components/ParallaxBg.svelte";
import Padding from "../components/padding.svelte";
</script>
<ParallaxBg>
<Navbar />
<title>Jonas_Jones</title>
<Navbar />
<title>Jonas_Jones</title>
<Padding />
<div class="image-wrapper">
<div class="card-front">
<!-- svelte-ignore a11y-img-redundant-alt -->
<img src="/icon_800x800_transparent.webp" alt="My Picture" class="picture">
<img
src="/icon_800x800_transparent.webp"
alt="My Picture"
class="picture"
/>
</div>
<div class="card-back">
<!-- svelte-ignore a11y-img-redundant-alt -->
<img src="/root_logo.webp" alt="My Picture" class="picture">
<img src="/root_logo.webp" alt="My Picture" class="picture" />
</div>
</div>
<div class="line">
<hr>
<hr />
</div>
<div class="line-content">
<p>Idk how this dot got here but im leaving it.</p>
</div>
<div class="social-media">
<div class="row">
<a href="https://github.com/J-onasJones"><i class="fab fa-github"></i></a>
<a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg"><i class="fab fa-youtube"></i></a>
<a href="https://discord.gg/V2EsuUVmWh"><i class="fab fa-discord"></i></a>
<a href="mailto:me@jonasjones.dev"><i class="fas fa-envelope"></i></a>
<a href="https://github.com/J-onasJones"><i class="fab fa-github" /></a>
<a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg"
><i class="fab fa-youtube" /></a
>
<a href="https://discord.gg/V2EsuUVmWh"><i class="fab fa-discord" /></a>
<a href="mailto:me@jonasjones.dev"><i class="fas fa-envelope" /></a>
</div>
</div>
</ParallaxBg>
<Footer />
<script>
import Navbar from '../components/NavBar.svelte';
import Footer from '../components/Footer.svelte';
import ParallaxBg from '../components/ParallaxBg.svelte';
import Padding from '../components/padding.svelte';
</script>

View file

@ -11,7 +11,11 @@
<div class="container">
<Padding />
<h1>This is not acceptable. You must be a robot</h1>
<h1>Please visit <a href="https://jonasjones.dev/I-am-a-robot">https://jonasjones.dev/I-am-a-robot</a></h1>
<h1>
Please visit <a href="https://jonasjones.dev/I-am-a-robot"
>https://jonasjones.dev/I-am-a-robot</a
>
</h1>
</div>
<Footer />
</ParallaxBg>

View file

@ -10,7 +10,10 @@
<title>409</title>
<div class="container">
<Padding />
<h1>Conflict. Sir, there's a conflict of interests here. Please stop going any further [frog].</h1>
<h1>
Conflict. Sir, there's a conflict of interests here. Please stop
going any further [frog].
</h1>
</div>
<Footer />
</ParallaxBg>

View file

@ -4,29 +4,70 @@
import ParallaxBg from "../../components/ParallaxBg.svelte";
import Padding from "../../components/padding.svelte";
</script>
<ParallaxBg>
<title>About</title>
<div class="container">
<Padding />
<NavBar />
<h1>About</h1>
<p class="text">Once upon a time, in the realm of technology, there emerged a tech prodigy named Jonas Jones. Jonas possessed an unparalleled passion for open-source software and a relentless pursuit of innovation. His vision extended beyond mere conquest; he sought to revolutionize the world with the power of Arch Linux, challenging the dominance of the reigning Windows empire.<br>
Armed with his trusty 16-framework laptop, Jonas embarked on a quest to dismantle the barriers erected by Windows and liberate the digital landscape. With each line of code he crafted, the Arch Linux revolution grew stronger, captivating hearts and minds worldwide.<br>
Jonas's expertise in the realm of Arch Linux was awe-inspiring. He possessed an encyclopedic knowledge of the command line, deftly navigating the intricate intricacies of the operating system. His coding skills were matched only by his indomitable spirit and unwavering dedication to the cause.<br>
Word of Jonas's audacious mission spread like wildfire. From dimly lit hacker forums to bustling tech conferences, his name became synonymous with the Arch Linux uprising. Tech enthusiasts rallied behind him, inspired by his passion and unwavering belief in the power of open-source software.<br>
As Jonas continued to advance his noble cause, the world felt the tremors of change. Corporations, governments, and individuals began embracing the freedom and security offered by Arch Linux. Its versatility and customizable nature proved to be a formidable weapon in the battle against proprietary software.<br>
Windows, once considered an unassailable fortress, faced the relentless onslaught of Jonas's Arch Linux revolution. In a symphony of code and determination, Jonas dismantled the walls that had long confined users, empowering them to forge their own digital destinies.<br>
The transformation was nothing short of extraordinary. Jonas's Arch Linux-powered empire began to flourish, fostering a vibrant community of like-minded individuals. They shared knowledge, collaborated on groundbreaking projects, and created a harmonious ecosystem where innovation thrived.<br>
Yet, Jonas never lost sight of his humble beginnings. Amidst the rapid rise of his empire, he remained grounded, connecting with Arch Linux enthusiasts across the globe. His charisma and down-to-earth nature endeared him to the masses, inspiring a new generation of tech leaders driven by the principles of openness and collaboration.<br>
And so, the world witnessed the ascent of Jonas Jones, the Arch Linux luminary, who, armed with his 16-framework laptop, embarked on a quest to topple the Windows kingdom and ignite a technological revolution. His journey taught us that with passion, knowledge, and the power of community, even the mightiest empires can be transformed.<br>
<br>
TL;DR: I asked ChatGPT.<br>
Also, I like K-Pop.<br>
<p class="text">
Once upon a time, in the realm of technology, there emerged a tech
prodigy named Jonas Jones. Jonas possessed an unparalleled passion
for open-source software and a relentless pursuit of innovation. His
vision extended beyond mere conquest; he sought to revolutionize the
world with the power of Arch Linux, challenging the dominance of the
reigning Windows empire.<br />
Armed with his trusty 16-framework laptop, Jonas embarked on a quest
to dismantle the barriers erected by Windows and liberate the digital
landscape. With each line of code he crafted, the Arch Linux revolution
grew stronger, captivating hearts and minds worldwide.<br />
Jonas's expertise in the realm of Arch Linux was awe-inspiring. He possessed
an encyclopedic knowledge of the command line, deftly navigating the
intricate intricacies of the operating system. His coding skills were
matched only by his indomitable spirit and unwavering dedication to the
cause.<br />
Word of Jonas's audacious mission spread like wildfire. From dimly lit
hacker forums to bustling tech conferences, his name became synonymous
with the Arch Linux uprising. Tech enthusiasts rallied behind him, inspired
by his passion and unwavering belief in the power of open-source software.<br
/>
As Jonas continued to advance his noble cause, the world felt the tremors
of change. Corporations, governments, and individuals began embracing
the freedom and security offered by Arch Linux. Its versatility and customizable
nature proved to be a formidable weapon in the battle against proprietary
software.<br />
Windows, once considered an unassailable fortress, faced the relentless
onslaught of Jonas's Arch Linux revolution. In a symphony of code and
determination, Jonas dismantled the walls that had long confined users,
empowering them to forge their own digital destinies.<br />
The transformation was nothing short of extraordinary. Jonas's Arch Linux-powered
empire began to flourish, fostering a vibrant community of like-minded
individuals. They shared knowledge, collaborated on groundbreaking projects,
and created a harmonious ecosystem where innovation thrived.<br />
Yet, Jonas never lost sight of his humble beginnings. Amidst the rapid
rise of his empire, he remained grounded, connecting with Arch Linux
enthusiasts across the globe. His charisma and down-to-earth nature endeared
him to the masses, inspiring a new generation of tech leaders driven
by the principles of openness and collaboration.<br />
And so, the world witnessed the ascent of Jonas Jones, the Arch Linux
luminary, who, armed with his 16-framework laptop, embarked on a quest
to topple the Windows kingdom and ignite a technological revolution.
His journey taught us that with passion, knowledge, and the power of
community, even the mightiest empires can be transformed.<br />
<br />
TL;DR: I asked ChatGPT.<br />
Also, I like K-Pop.<br />
I uSe ArCh BtW.
</p>
<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>
<a href="https://nvd.nist.gov/vuln/detail/CVE-2022-39221">CVE-2022-39221</a>
<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
>
<Padding />
</div>
<Footer />

View file

@ -11,7 +11,10 @@
<div class="container">
<Padding />
<h1>There currently is no Alpha.</h1>
<p>Can't believe I actually managed to release this website in under a year.</p>
<p>
Can't believe I actually managed to release this website in under a
year.
</p>
<p>Go to <a href="/">Home</a></p>
</div>
<Footer />

View file

@ -7,51 +7,188 @@
import projects from "./projects.json";
var searchResults = projects.filter(project => {
var searchResults = projects.filter((project) => {
return project.visible === true;
})
});
var searchtext = '';
var searchcategory = '';
var searchlanguage = '';
var searchstatus = '';
var searchtext = "";
var searchcategory = "";
var searchlanguage = "";
var searchstatus = "";
function handleSearchText(event) {
function handleSearchText(event: { target: { value: string; }; }) {
searchtext = event.target.value.toLowerCase();
handleSearch()
handleSearch();
}
function handleSearchCategory(event) {
function handleSearchCategory(event: { target: { value: string; }; }) {
searchcategory = event.target.value.toLowerCase();
handleSearch()
handleSearch();
}
function handleSearchLang(event) {
function handleSearchLang(event: { target: { value: string; }; }) {
searchlanguage = event.target.value.toLowerCase();
handleSearch()
handleSearch();
}
function handleSearchStatus(event) {
function handleSearchStatus(event: { target: { value: string; }; }) {
searchstatus = event.target.value.toLowerCase();
handleSearch()
handleSearch();
}
function handleSearch() {
// set searchResults by filtering with searchtext, searchcategory, and searchlanguage
searchResults = projects.filter(project => {
var text = project.title.toLowerCase() + project.description.toLowerCase();
var category = project.categories.join(' ').toLowerCase();
var language = project.languages.join(' ').toLowerCase();
searchResults = projects.filter((project) => {
var text =
project.title.toLowerCase() + project.description.toLowerCase();
var category = project.categories.join(" ").toLowerCase();
var language = project.languages.join(" ").toLowerCase();
var status = project.status.toLowerCase();
return text.includes(searchtext) && category.includes(searchcategory) && language.includes(searchlanguage) && status.includes(searchstatus) && project.visible === true;
})
return (
text.includes(searchtext) &&
category.includes(searchcategory) &&
language.includes(searchlanguage) &&
status.includes(searchstatus) &&
project.visible === true
);
});
}
</script>
<FontAwesome />
<ParallaxBg>
<title>Projects</title>
<div class="container">
<Padding />
<NavBar />
<h1>Projects</h1>
<div class="search-bar">
<input
type="text"
placeholder="Search projects"
on:input={handleSearchText}
/>
<i class="fa fa-folder-open" aria-hidden="true" />
<select name="category" id="category" on:change={handleSearchCategory}>
<option value="">All</option>
<optgroup label="Minecraft">
<option value="minecraft">Minecraft</option>
<option value="mcmodding">Modding</option>
<option value="fabric">FabricMC</option>
<option value="quilt">QuiltMC</option>
<option value="forge">Forge</option>
</optgroup>
<optgroup label="WebDev">
<option value="webdev">WebDev</option>
<option value="website">Website</option>
</optgroup>
<optgroup label="Other">
<option value="tools">Tool</option>
<option value="lib">Library</option>
</optgroup>
</select>
<i class="fa fa-globe" aria-hidden="true" />
<select name="language" id="language" on:change={handleSearchLang}>
<option value="">All</option>
<option value="clang">C</option>
<option value="c++">C++</option>
<option value="py">Python</option>
<option value="java">Java</option>
<option value="rslang">Rust</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="jslang">Javascript</option>
<option value="svelte">Svelte</option>
<option value="sh">Shell</option>
<option value="lualang">Lua</option>
<option value="ps2">PowerShell 2</option>
<option value="godot">Godot Lang</option>
</select>
<i class="fa fa-tasks" aria-hidden="true" />
<select name="status" id="status" on:change={handleSearchStatus}>
<option value="">All</option>
<option value="planned">Planned</option>
<option value="dev">In Development</option>
<option value="alpha">Alpha</option>
<option value="beta">Beta</option>
<option value="release">Release</option>
<option value="discontinued">Discontinued</option>
</select>
<!-- svelte-ignore a11y-missing-attribute -->
<a style="float: right;margin-right: 10px;margin-top: 10px;"
>{searchResults.length} results</a
>
</div>
<div class="project-container">
{#each searchResults as project}
<div class="project">
<!-- svelte-ignore a11y-missing-attribute -->
<h2 class="project-title">
{project.title}<br class="smaller-screen" /><br
class="smaller-screen"
/><a
class="project-status"
style="color: {project.statuscolor};border-color:{project.statuscolor}"
>{project.status}</a
><a class="project-version">{project.version}</a>
</h2>
<p class="project-description">{project.description}</p>
<div class="project-bg">
<img
src="https://cdn.jonasjones.dev/project-banners{project.backgroud}"
alt=" "
/>
</div>
<Padding />
<Padding />
<div class="project-links">
<div>
{#each Object.entries(project.links) as [platform, link]}
<a
class="project-link"
href={link}
target="_blank"
rel="noopener noreferrer"
>
{#if platform === "GH"}
<i class="fa fa-github" aria-hidden="true" />
{:else if platform === "WB"}
<i class="fa fa-globe" aria-hidden="true" />
{:else if platform === "YT"}
<i class="fa fa-youtube" aria-hidden="true" />
{:else if platform === "TW"}
<i class="fa fa-twitter" aria-hidden="true" />
{:else if platform === "DC"}
<i class="fa fa-discord" aria-hidden="true" />
{:else if platform === "PT"}
<i class="fa fa-patreon" aria-hidden="true" />
{:else if platform === "SP"}
<i class="fa fa-spotify" aria-hidden="true" />
{:else if platform === "IG"}
<i class="fa fa-instagram" aria-hidden="true" />
{:else}
{platform}
{/if}
</a>
{/each}
</div>
</div>
<div>
<a class="download-button" href="/projects/{project.title}"
>More Info</a
>
</div>
</div>
{/each}
</div>
<Padding />
</div>
<Footer />
</ParallaxBg>
<style>
/* Import Font Awesome for social media icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
.container {
width: 90%;
}
@ -89,7 +226,11 @@
width: 100%;
height: 100%;
object-fit: cover;
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.918), rgba(0, 0, 0, 0));
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.918),
rgba(0, 0, 0, 0)
);
transition: 0.3s;
}
@ -176,10 +317,10 @@
}
.search-bar {
margin-bottom: 20px;
background-color: rgba(0, 0, 0, 0.678);
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
background-color: rgba(0, 0, 0, 0.678);
padding: 10px;
border-radius: 5px;
}
.search-bar input {
@ -222,115 +363,3 @@
}
}
</style>
<FontAwesome />
<ParallaxBg>
<title>Projects</title>
<div class="container">
<Padding />
<NavBar />
<h1>Projects</h1>
<div class="search-bar">
<input type="text" placeholder="Search projects" on:input={handleSearchText} />
<i class="fa fa-folder-open" aria-hidden="true"></i>
<select name="category" id="category" on:change={handleSearchCategory}>
<option value="">All</option>
<optgroup label="Minecraft">
<option value="minecraft">Minecraft</option>
<option value="mcmodding">Modding</option>
<option value="fabric">FabricMC</option>
<option value="quilt">QuiltMC</option>
<option value="forge">Forge</option>
</optgroup>
<optgroup label="WebDev">
<option value="webdev">WebDev</option>
<option value="website">Website</option>
</optgroup>
<optgroup label="Other">
<option value="tools">Tool</option>
<option value="lib">Library</option>
</optgroup>
</select>
<i class="fa fa-globe" aria-hidden="true"></i>
<select name="language" id="language" on:change={handleSearchLang}>
<option value="">All</option>
<option value="clang">C</option>
<option value="c++">C++</option>
<option value="py">Python</option>
<option value="java">Java</option>
<option value="rslang">Rust</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="jslang">Javascript</option>
<option value="svelte">Svelte</option>
<option value="sh">Shell</option>
<option value="lualang">Lua</option>
<option value="ps2">PowerShell 2</option>
<option value="godot">Godot Lang</option>
</select>
<i class="fa fa-tasks" aria-hidden="true"></i>
<select name="status" id="status" on:change={handleSearchStatus}>
<option value="">All</option>
<option value="planned">Planned</option>
<option value="dev">In Development</option>
<option value="alpha">Alpha</option>
<option value="beta">Beta</option>
<option value="release">Release</option>
<option value="discontinued">Discontinued</option>
</select>
<!-- svelte-ignore a11y-missing-attribute -->
<a style="float: right;margin-right: 10px;margin-top: 10px;">{searchResults.length} results</a>
</div>
<div class="project-container">
{#each searchResults as project}
<div class="project">
<!-- svelte-ignore a11y-missing-attribute -->
<h2 class="project-title">{project.title}<br class="smaller-screen"><br class="smaller-screen"><a class="project-status" style="color: {project.statuscolor};border-color:{project.statuscolor}">{project.status}</a><a class="project-version">{project.version}</a></h2>
<p class="project-description">{project.description}</p>
<div class="project-bg">
<img src="https://cdn.jonasjones.dev/project-banners{project.backgroud}" alt=" " />
</div>
<Padding />
<Padding />
<div class="project-links">
<div>
{#each Object.entries(project.links) as [platform, link]}
<a
class="project-link"
href={link}
target="_blank"
rel="noopener noreferrer"
>
{#if platform === "GH"}
<i class="fa fa-github" aria-hidden="true"></i>
{:else if platform === "WB"}
<i class="fa fa-globe" aria-hidden="true"></i>
{:else if platform === "YT"}
<i class="fa fa-youtube" aria-hidden="true"></i>
{:else if platform === "TW"}
<i class="fa fa-twitter" aria-hidden="true"></i>
{:else if platform === "DC"}
<i class="fa fa-discord" aria-hidden="true"></i>
{:else if platform === "PT"}
<i class="fa fa-patreon" aria-hidden="true"></i>
{:else if platform === "SP"}
<i class="fa fa-spotify" aria-hidden="true"></i>
{:else if platform === "IG"}
<i class="fa fa-instagram" aria-hidden="true"></i>
{:else}
{platform}
{/if}
</a>
{/each}
</div>
</div>
<div>
<a class="download-button" href="/projects/{project.title}">More Info</a>
</div>
</div>
{/each}
</div>
<Padding />
</div>
<Footer />
</ParallaxBg>