mirror of
https://github.com/JonasunderscoreJones/jonasjones.dev.git
synced 2025-10-23 17:09:19 +02:00
merged changes from J-onasJones/alpha.jonasjones.me
This commit is contained in:
Jonas_Jones
parent
2f55e87331
commit
bcb0d8bdca
38 changed files with 448 additions and 52 deletions
34
src/routes/+error.svelte
Normal file
34
src/routes/+error.svelte
Normal 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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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™</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
29
src/routes/based/+page.css
Normal 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;
|
||||
}
|
||||
|
|
@ -1 +1,28 @@
|
|||
<h1>Coming Soon™</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue