mirror of
https://github.com/JonasunderscoreJones/jonasjones.dev.git
synced 2025-10-23 08:59:19 +02:00
code refactor
This commit is contained in:
parent
4bf868de38
commit
04890477b0
16 changed files with 734 additions and 611 deletions
2
src/app.d.ts
vendored
2
src/app.d.ts
vendored
|
|
@ -9,4 +9,4 @@ declare global {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export {};
|
export { };
|
||||||
|
|
|
||||||
13
src/app.html
13
src/app.html
|
|
@ -1,13 +1,16 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<link rel="stylesheet" href="/src/routes/+page.css">
|
<link rel="stylesheet" href="/src/routes/+page.css">
|
||||||
<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" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
|
||||||
|
<body data-sveltekit-preload-data="hover">
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
<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,7 +3,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.footer {
|
.footer {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -17,5 +17,5 @@
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.25rem;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -13,13 +13,22 @@
|
||||||
const imageId = images.length + i;
|
const imageId = images.length + i;
|
||||||
const row = Math.floor(i / 4);
|
const row = Math.floor(i / 4);
|
||||||
const col = i % 4;
|
const col = i % 4;
|
||||||
const property = Math.random() > 0.5 ? 'X' : 'O'; // Simulate random properties
|
const property = Math.random() > 0.5 ? "X" : "O"; // Simulate random properties
|
||||||
console.log("imageId: " + imageId + " row: " + row + " col: " + col + " property: " + property)
|
console.log(
|
||||||
|
"imageId: " +
|
||||||
|
imageId +
|
||||||
|
" row: " +
|
||||||
|
row +
|
||||||
|
" col: " +
|
||||||
|
col +
|
||||||
|
" property: " +
|
||||||
|
property
|
||||||
|
);
|
||||||
|
|
||||||
images.push({
|
images.push({
|
||||||
id: imageId,
|
id: imageId,
|
||||||
src: `/image_${row}_${col}.jpg`,
|
src: `/image_${row}_${col}.jpg`,
|
||||||
property: property
|
property: property,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
loading = false;
|
loading = false;
|
||||||
|
|
@ -45,9 +54,28 @@
|
||||||
|
|
||||||
// Initial load
|
// Initial load
|
||||||
fetchImages();
|
fetchImages();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
|
<style>
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
|
@ -65,23 +93,4 @@
|
||||||
.selected {
|
.selected {
|
||||||
border-color: blue;
|
border-color: blue;
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
|
||||||
|
|
|
||||||
|
|
@ -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™", 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">
|
<div class="navbar">
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
<div class="hamburger-menu {showMenu ? 'open' : ''}" on:click={toggleMenu}>
|
<div class="hamburger-menu {showMenu ? 'open' : ''}" on:click={toggleMenu}>
|
||||||
<div class="hamburger-line line-1"></div>
|
<div class="hamburger-line line-1" />
|
||||||
<div class="hamburger-line line-2"></div>
|
<div class="hamburger-line line-2" />
|
||||||
<div class="hamburger-line line-3"></div>
|
<div class="hamburger-line line-3" />
|
||||||
</div>
|
</div>
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img src="/icon_80x80.webp" alt="Logo" class="logo">
|
<img src="/icon_80x80.webp" alt="Logo" class="logo" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
|
|
@ -21,23 +96,26 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="lastfm">
|
<div class="lastfm">
|
||||||
<a href="https://fm.jonasjones.dev">
|
<a href="https://fm.jonasjones.dev">
|
||||||
<span class="link"></span>
|
<span class="link" />
|
||||||
</a>
|
</a>
|
||||||
<div class="lastfmlogoclass" id="lastfm_logo">
|
<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>
|
||||||
|
|
||||||
<div class="lastfm-text">
|
<div class="lastfm-text">
|
||||||
<p id="lastfm_title"></p>
|
<p id="lastfm_title" />
|
||||||
<p id="lastfm_artist"></p>
|
<p id="lastfm_artist" />
|
||||||
</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
|
||||||
<div class="hamburger-line line-1"></div>
|
class="hamburger-menu close-button {showMenu ? 'open' : ''}"
|
||||||
<div class="hamburger-line line-2"></div>
|
on:click={toggleMenu}
|
||||||
<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>
|
||||||
<ul class="links">
|
<ul class="links">
|
||||||
{#each navLinks as link}
|
{#each navLinks as link}
|
||||||
|
|
@ -45,88 +123,12 @@
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="unsupported">
|
<div class="unsupported">
|
||||||
<TooSmallDimsOverlay />
|
<TooSmallDimsOverlay />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<style>
|
||||||
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™', 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 {
|
.hamburger-menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
|
|
@ -215,8 +217,6 @@
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
background-color: #2023247c;
|
background-color: #2023247c;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -290,7 +290,7 @@
|
||||||
right: 3px;
|
right: 3px;
|
||||||
top: 3.5px;
|
top: 3.5px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
max-width:300px;
|
max-width: 300px;
|
||||||
height: 43px;
|
height: 43px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -353,7 +353,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 900px) and (min-width: 650px) {
|
@media only screen and (max-width: 900px) and (min-width: 650px) {
|
||||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
.lastfm #lastfm_title,
|
||||||
|
.lastfm #lastfm_artist {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.lastfm {
|
.lastfm {
|
||||||
|
|
@ -368,7 +369,8 @@
|
||||||
.nav-links {
|
.nav-links {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
.lastfm #lastfm_title,
|
||||||
|
.lastfm #lastfm_artist {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.hamburger-menu {
|
.hamburger-menu {
|
||||||
|
|
@ -380,7 +382,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 375px) and (min-width: 300px) {
|
@media only screen and (max-width: 375px) and (min-width: 300px) {
|
||||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
.lastfm #lastfm_title,
|
||||||
|
.lastfm #lastfm_artist {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.lastfm {
|
.lastfm {
|
||||||
|
|
@ -398,7 +401,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 300px) and (min-width: 0px) {
|
@media only screen and (max-width: 300px) and (min-width: 0px) {
|
||||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
.lastfm #lastfm_title,
|
||||||
|
.lastfm #lastfm_artist {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.lastfm {
|
.lastfm {
|
||||||
|
|
@ -414,5 +418,4 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,25 @@
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
<style>
|
||||||
@import '../routes/+page.css';
|
@import "../routes/+page.css";
|
||||||
.container {
|
.container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -25,23 +42,14 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: url('/ricky.webp');
|
background-image: url("/ricky.webp");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
@media only screen and (min-width: 768px) {
|
@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 */
|
z-index: -1; /* Place the background behind other content */
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
|
||||||
|
|
||||||
|
|
@ -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>
|
<style>
|
||||||
.overlay {
|
.overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -25,10 +34,3 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
|
||||||
|
|
||||||
|
|
@ -11,13 +11,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleTaeyong() {
|
function toggleTaeyong() {
|
||||||
const taeyong = document.querySelector('.taeyong');
|
const taeyong = document.querySelector(".taeyong");
|
||||||
taeyong.style.display = 'block';
|
taeyong.style.display = "block";
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleTaeyongoff() {
|
function toggleTaeyongoff() {
|
||||||
const taeyong = document.querySelector('.taeyong');
|
const taeyong = document.querySelector(".taeyong");
|
||||||
taeyong.style.display = 'none';
|
taeyong.style.display = "none";
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
<div style="height:300px;width:600px">
|
<div style="height:300px;width:600px">
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
<img
|
<img
|
||||||
src={isGif1 ? '/johnrefs1.gif' : '/johnrefs2.gif'}
|
src={isGif1 ? "/johnrefs1.gif" : "/johnrefs2.gif"}
|
||||||
alt="Toggle GIF"
|
alt="Toggle GIF"
|
||||||
on:click={toggleGif}
|
on:click={toggleGif}
|
||||||
/>
|
/>
|
||||||
|
|
@ -44,7 +44,13 @@
|
||||||
</ParallaxBg>
|
</ParallaxBg>
|
||||||
<div class="taeyong">
|
<div class="taeyong">
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- 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>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,8 @@ body {
|
||||||
background-size: 90%;
|
background-size: 90%;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
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 */
|
z-index: -1;
|
||||||
|
/* Place the background behind other content */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set container styles */
|
/* Set container styles */
|
||||||
|
|
@ -56,7 +57,8 @@ body {
|
||||||
perspective: 800px;
|
perspective: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-front, .card-back {
|
.card-front,
|
||||||
|
.card-back {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
|
|
@ -95,7 +97,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-link,
|
.home-link,
|
||||||
.for-the-based-link {
|
.for-the-based-link {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
margin: 0 0.5rem;
|
margin: 0 0.5rem;
|
||||||
color: rgb(0, 255, 0);
|
color: rgb(0, 255, 0);
|
||||||
|
|
@ -103,14 +105,14 @@ body {
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
font-family: 'sary_soft_semiboldregular';
|
font-family: 'sary_soft_semiboldregular';
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-link:hover,
|
.home-link:hover,
|
||||||
.for-the-based-link:hover {
|
.for-the-based-link:hover {
|
||||||
color: green;
|
color: green;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set social media styles */
|
/* Set social media styles */
|
||||||
.social-media {
|
.social-media {
|
||||||
|
|
@ -135,7 +137,8 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.row a:hover {
|
.row a:hover {
|
||||||
transform: scale(1.3); /* make icon 20% bigger on hover */
|
transform: scale(1.3);
|
||||||
|
/* make icon 20% bigger on hover */
|
||||||
}
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
|
|
@ -149,7 +152,7 @@ body {
|
||||||
transition: transform 0.2s ease-in-out;
|
transition: transform 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line:hover + .line-content {
|
.line:hover+.line-content {
|
||||||
transform: scale(100);
|
transform: scale(100);
|
||||||
color: gray;
|
color: gray;
|
||||||
}
|
}
|
||||||
|
|
@ -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>
|
<ParallaxBg>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<title>Jonas_Jones</title>
|
<title>Jonas_Jones</title>
|
||||||
<Padding />
|
<Padding />
|
||||||
<div class="image-wrapper">
|
<div class="image-wrapper">
|
||||||
<div class="card-front">
|
<div class="card-front">
|
||||||
<!-- svelte-ignore a11y-img-redundant-alt -->
|
<!-- 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>
|
||||||
<div class="card-back">
|
<div class="card-back">
|
||||||
<!-- svelte-ignore a11y-img-redundant-alt -->
|
<!-- 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>
|
</div>
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<hr>
|
<hr />
|
||||||
</div>
|
</div>
|
||||||
<div class="line-content">
|
<div class="line-content">
|
||||||
<p>Idk how this dot got here but im leaving it.</p>
|
<p>Idk how this dot got here but im leaving it.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="social-media">
|
<div class="social-media">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<a href="https://github.com/J-onasJones"><i class="fab fa-github"></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"></i></a>
|
<a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg"
|
||||||
<a href="https://discord.gg/V2EsuUVmWh"><i class="fab fa-discord"></i></a>
|
><i class="fab fa-youtube" /></a
|
||||||
<a href="mailto:me@jonasjones.dev"><i class="fas fa-envelope"></i></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>
|
||||||
</div>
|
</div>
|
||||||
</ParallaxBg>
|
</ParallaxBg>
|
||||||
<Footer />
|
<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>
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,11 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<Padding />
|
<Padding />
|
||||||
<h1>This is not acceptable. You must be a robot</h1>
|
<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>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</ParallaxBg>
|
</ParallaxBg>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,10 @@
|
||||||
<title>409</title>
|
<title>409</title>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<Padding />
|
<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>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</ParallaxBg>
|
</ParallaxBg>
|
||||||
|
|
|
||||||
|
|
@ -4,29 +4,70 @@
|
||||||
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>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<Padding />
|
<Padding />
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<h1>About</h1>
|
<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>
|
<p class="text">
|
||||||
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>
|
Once upon a time, in the realm of technology, there emerged a tech
|
||||||
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>
|
prodigy named Jonas Jones. Jonas possessed an unparalleled passion
|
||||||
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>
|
for open-source software and a relentless pursuit of innovation. His
|
||||||
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>
|
vision extended beyond mere conquest; he sought to revolutionize the
|
||||||
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>
|
world with the power of Arch Linux, challenging the dominance of the
|
||||||
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>
|
reigning Windows empire.<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>
|
Armed with his trusty 16-framework laptop, Jonas embarked on a quest
|
||||||
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>
|
to dismantle the barriers erected by Windows and liberate the digital
|
||||||
<br>
|
landscape. With each line of code he crafted, the Arch Linux revolution
|
||||||
TL;DR: I asked ChatGPT.<br>
|
grew stronger, captivating hearts and minds worldwide.<br />
|
||||||
Also, I like K-Pop.<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.
|
I uSe ArCh BtW.
|
||||||
</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 href="https://nvd.nist.gov/vuln/detail/CVE-2022-39221">CVE-2022-39221</a>
|
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 />
|
<Padding />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,10 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<Padding />
|
<Padding />
|
||||||
<h1>There currently is no Alpha.</h1>
|
<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>
|
<p>Go to <a href="/">Home</a></p>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
|
||||||
|
|
@ -7,51 +7,188 @@
|
||||||
|
|
||||||
import projects from "./projects.json";
|
import projects from "./projects.json";
|
||||||
|
|
||||||
var searchResults = projects.filter(project => {
|
var searchResults = projects.filter((project) => {
|
||||||
return project.visible === true;
|
return project.visible === true;
|
||||||
})
|
});
|
||||||
|
|
||||||
var searchtext = '';
|
var searchtext = "";
|
||||||
var searchcategory = '';
|
var searchcategory = "";
|
||||||
var searchlanguage = '';
|
var searchlanguage = "";
|
||||||
var searchstatus = '';
|
var searchstatus = "";
|
||||||
|
|
||||||
function handleSearchText(event) {
|
function handleSearchText(event: { target: { value: string; }; }) {
|
||||||
searchtext = event.target.value.toLowerCase();
|
searchtext = event.target.value.toLowerCase();
|
||||||
handleSearch()
|
handleSearch();
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSearchCategory(event) {
|
function handleSearchCategory(event: { target: { value: string; }; }) {
|
||||||
searchcategory = event.target.value.toLowerCase();
|
searchcategory = event.target.value.toLowerCase();
|
||||||
handleSearch()
|
handleSearch();
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSearchLang(event) {
|
function handleSearchLang(event: { target: { value: string; }; }) {
|
||||||
searchlanguage = event.target.value.toLowerCase();
|
searchlanguage = event.target.value.toLowerCase();
|
||||||
handleSearch()
|
handleSearch();
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSearchStatus(event) {
|
function handleSearchStatus(event: { target: { value: string; }; }) {
|
||||||
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 =
|
||||||
var category = project.categories.join(' ').toLowerCase();
|
project.title.toLowerCase() + project.description.toLowerCase();
|
||||||
var language = project.languages.join(' ').toLowerCase();
|
var category = project.categories.join(" ").toLowerCase();
|
||||||
|
var language = project.languages.join(" ").toLowerCase();
|
||||||
var status = project.status.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>
|
</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>
|
<style>
|
||||||
/* Import Font Awesome for social media icons */
|
/* 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 {
|
.container {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
@ -89,7 +226,11 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
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;
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -222,115 +363,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue