mirror of
https://github.com/JonasunderscoreJones/jonasjones.dev.git
synced 2025-10-23 00:49: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 { };
|
||||
|
|
25
src/app.html
25
src/app.html
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
<!-- 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™', 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>
|
||||
|
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue