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

merged changes from J-onasJones/alpha.jonasjones.me

Browse source
This commit is contained in:
Jonas_Jones 2023-07-09 18:17:06 +02:00
parent 2f55e87331
commit bcb0d8bdca
38 changed files with 448 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -1,2 +1,2 @@
# jonasjones.me
My website at https://jonasjones.me
# alpha.jonasjones.dev
alpha repo

2
package.json
View file

@ -3,7 +3,7 @@
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"dev": "vite dev --host",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",

1
src/app.html
View file

@ -1,5 +1,6 @@
<!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" />

22
src/components/Footer.svelte Normal file
View file

@ -0,0 +1,22 @@
<div class="footer">
<p>Website by Jonas_Jones @ jonasjones.dev. 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;
}
</style>

212
src/components/NavBar.svelte Normal file
View file

@ -0,0 +1,212 @@
<div class="navbar">
<div class="logo">
<a href="/">
<img src="/icon_80x80.webp" alt="Logo" class="logo">
</a>
</div>
<div class="nav-links">
<nav>
<ul>
{#each navLinks as link}
<li><a href={link.url}>{link.name}</a></li>
{/each}
</ul>
</nav>
</div>
<div class="lastfm">
<a href="https://fm.jonasjones.dev">
<span class="link"></span>
</a>
<div class="lastfmlogoclass" id="lastfm_logo">
<img src="" alt=" " class="lastfmlogooverlay" id="lastfm_logo_overlay">
</div>
<div class="lastfm-text">
<p id="lastfm_title"></p>
<p id="lastfm_artist"></p>
</div>
</div>
</div>
<script>
let navLinks = [
{ name: 'Home', url: '/' },
{ name: 'Projects', url: '/projects'},
{ name: 'For The Based™', url: '/based'},
{ name: 'Status', url: '/status'},
{ name: 'About', url: '/about' }
];
// @ts-ignore
let miscLinks = [
{ name: 'For The Based&trade;', url: '/based'}
]
const fetch_url = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Jonas_Jones&api_key=57c0ca64285c7ca676bb8c2acf320f41&format=json&limit=1"
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 = data.recenttracks.track[0].name;
let artist = data.recenttracks.track[0].artist['\#text'];
console.log(data);
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) {
console.log(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) {
console.log(error);
}
}
}
fetchLastFmData();
setInterval(fetchLastFmData, 15000);
</script>
<style>
.navbar {
background-color: #2023247c;
padding: 10px;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100%;
display: flex;
}
.logo {
height: 45px;
border-radius: 10px;
margin-top: 2px;
}
.nav-links {
display: flex;
justify-content: center;
flex-grow: 1;
}
@media (max-width: 768px) {
.navbar {
flex-direction: column;
}
.nav-links {
margin-top: 10px;
}
}
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;
}
.lastfm {
padding: 3px;
padding-right: 10px;
margin: 0;
justify-content: right;
justify-self: right;
align-items: right;
float: right;
display: flex;
position: relative;
right: 3px;
top: 3px;
border-radius: 5px;
}
.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;
}
.lastfm #lastfm_title {
font-size: 19px;
text-align: left;
padding: 0;
margin: 0;
}
.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;
}
</style>

47
src/components/ParallaxBg.svelte Normal file
View file

@ -0,0 +1,47 @@
<script>
let mouseX = 0;
let mouseY = 0;
/**
* @param {{ clientX: number; clientY: number; }} event
*/
function handleMouseMove(event) {
mouseX = event.clientX;
mouseY = event.clientY;
}
</script>
<style>
@import '../routes/+page.css';
.container {
min-height: 100vh;
position: relative;
overflow: hidden; /* Ensure the background image does not overflow */
}
.parallax-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
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));
}
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>

34
src/routes/+error.svelte Normal file
View file

@ -0,0 +1,34 @@
<script>
import NavBar from "../components/NavBar.svelte";
import Footer from "../components/Footer.svelte";
import ParallaxBg from "../components/ParallaxBg.svelte";
</script>
<ParallaxBg>
<NavBar />
<title>404 - Page not found</title>
<center>
<h1>ERROR 404</h1>
<h2>Page not found</h2>
<div style="height:300px;width:600px">
<img src="http://cdn.jonasjones.me/uploads/homepage/slime-teal.gif" alt="Teal Slime" class="picture">
</div>
</center>
<style>
@import '+page.css';
</style>
<Footer />
</ParallaxBg>
<style>
@import '+page.css';
h1 {
font-size: 50px;
color: rgb(0, 255, 0);
margin: 0;
margin-top: 20px;
}
h2 {
font-size: 35px;
color: rgb(0, 255, 0);
}
</style>

66
src/routes/+page.css
View file

@ -1,20 +1,51 @@
/* Import Font Awesome for social media icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
@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');
font-weight: normal;
font-style: normal;
}
html {
font-family: 'sary_soft_semiboldregular';
margin: 0px;
background-color: #202324;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background-color: #333;
font-family: 'sary_soft_semiboldregular';
color: rgb(0, 255, 0)
}
.parallax-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/ricky.png');
background-repeat: no-repeat;
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 */
}
/* Set container styles */
.container {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
min-height: 100vh;
position: relative;
overflow: hidden;
}
.image-wrapper {
@ -70,7 +101,7 @@ body {
color: rgb(0, 255, 0);
text-decoration: underline;
transition: all 0.2s ease-in-out;
font-family: 'Fira Code', monospace;
font-family: 'sary_soft_semiboldregular';
font-style: italic;
}
@ -85,6 +116,7 @@ body {
.social-media {
margin-top: 1rem;
color: white;
margin-bottom: 30px;
}
.row {
@ -106,21 +138,6 @@ body {
transform: scale(1.3); /* make icon 20% bigger on hover */
}
.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.125rem;
}
.line {
padding: 10px;
}
@ -136,16 +153,3 @@ body {
transform: scale(100);
color: gray;
}
.alpha-test {
background-color: orange;
border-radius: 0px 0px 0px 25px;
padding-right: 15px;
color: #fff;
width: 500px;
position: fixed;
top: 0;
right: 0;
text-align: right;
}

30
src/routes/+page.svelte
View file

@ -1,23 +1,18 @@
<ParallaxBg>
<Navbar />
<title>Jonas_Jones</title>
<div class="container">
<div class="image-wrapper">
<div class="card-front">
<!-- svelte-ignore a11y-img-redundant-alt -->
<img src="/icon_800x800_transparent.png" 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.png" alt="My Picture" class="picture">
<img src="/root_logo.webp" alt="My Picture" class="picture">
</div>
</div>
<div class="alpha-test">
<h3>Alpha Site</h3>
<p>Click <a href="https://alpha.jonasjones.dev/">here</a> to get to the alpha website and check out the latest progress towards the upcoming release</p>
</div>
<div class="links">
<a href="https://old.jonasjones.me" class="home-link">Home</a>
<a href="based/" class="for-the-based-link">For The Based&trade;</a>
</div>
<div class="line">
<hr>
</div>
@ -27,7 +22,7 @@
<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/@JonasJones"><i class="fab fa-youtube"></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>
</div>
<div class="row">
@ -36,15 +31,16 @@
<a href="https://www.instagram.com/_jonas_jones_"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="footer">
<p>Website by Jonas_Jones @ jonasjones.me. 2021 - 2023</p>
</div>
</ParallaxBg>
<Footer />
<script>
// Add script here if needed
import Navbar from '../components/NavBar.svelte';
import Footer from '../components/Footer.svelte';
import ParallaxBg from '../components/ParallaxBg.svelte';
</script>
<style>
@import '+page.css';
</style>

29
src/routes/based/+page.css Normal file
View file

@ -0,0 +1,29 @@
html {
background-color: #141414;
color: #fff;
font-family: 'Fira Code', monospace;
}
.terminal_user__name__text {
color: #FF9D00;
}
.terminal_user__host__text {
color: #05CE91;
}
.terminal_user {
display: flex;
}
#terminal-input {
color: #fff;
background-color: #1D2A35;
border: none;
outline: none;
font-size: 1rem;
font-family: 'Fira Code', monospace;
width: 100%;
/* debug */
border: 1px solid red;
}

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

@ -1 +1,28 @@
<h1>Coming Soon&trade;</h1>
<script>
import NavBar from "../../components/NavBar.svelte";
import Footer from "../../components/Footer.svelte";
import ParallaxBg from "../../components/ParallaxBg.svelte";
</script>
<ParallaxBg>
<NavBar />
<title>For the Based</title>
<div class="container">
<div class="terminal_user">
<span class="terminal_user__name__text">based</span>
<span class="terminal_user__at__text">@</span>
<span class="terminal_user__host__text">jonasjones.dev</span>
<span class="terminal_user__colon__text">:</span>
<span class="terminal_user__path__text">/home/jonasjones</span>
<span class="terminal_user__dollar__text">$</span>
<input title="terminal-input" type="text" id="terminal-input" autocomplete="off" spellcheck="false" autocapitalize="none" class="sc-ilhmMj iNZnsg" value="">
</div>
</div>
<Footer />
</ParallaxBg>
<style>
@import '+page.css';
</style>

BIN
static/equalizer.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
static/favicon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 295 B

After

Width:  |  Height:  |  Size: 229 B

Before After
Before After

BIN
static/favicon.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 288 B

12
static/font/sary-soft.soft-regular-webfont.css Executable file
View file

@ -0,0 +1,12 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2022 */
@font-face {
font-family: 'sary_softregular';
src: url('sary-soft.soft-regular-webfont.woff2') format('woff2'),
url('sary-soft.soft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

BIN
static/font/sary-soft.soft-regular-webfont.woff Executable file
View file

Binary file not shown.

BIN
static/font/sary-soft.soft-regular-webfont.woff2 Executable file
View file

Binary file not shown.

12
static/font/sary-soft.soft-semibold-webfont.css Executable file
View file

@ -0,0 +1,12 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2022 */
@font-face {
font-family: 'sary_soft_semiboldregular';
src: url('sary-soft.soft-semibold-webfont.woff2') format('woff2'),
url('sary-soft.soft-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

BIN
static/font/sary-soft.soft-semibold-webfont.woff Executable file
View file

Binary file not shown.

BIN
static/font/sary-soft.soft-semibold-webfont.woff2 Executable file
View file

Binary file not shown.

BIN
static/icon_800x800.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 299 B

Before After
Before After

BIN
static/icon_800x800.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/icon_800x800_transparent.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 312 B

Before After
Before After

BIN
static/icon_800x800_transparent.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/icon_80x80.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 295 B

After

Width:  |  Height:  |  Size: 102 B

Before After
Before After

BIN
static/icon_80x80.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 148 B

BIN
static/logo_colored.png Executable file → Normal file
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

Before After
Before After

BIN
static/logo_colored.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/pause-icon-256.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 259 B

BIN
static/pause-icon-256.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 464 B

BIN
static/ricky.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
static/ricky.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/root_logo.png Executable file → Normal file
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Before After
Before After

BIN
static/root_logo.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
static/taeyong-blackwhite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
static/taeyong-blackwhite.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 562 B

BIN
static/taeyong.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
static/taeyong.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB