Reimar/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revamp content on website

Browse Source
This commit is contained in:
Reimar 2023-12-31 12:05:29 +01:00
parent a0d2e194ca
commit 607bb683f0
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
10 changed files with 186 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api/random_repo.php Normal file
View File

@ -0,0 +1,6 @@
<?php
$repos = json_decode(file_get_contents("https://git.reim.ar/api/v1/repos/search"))->data;
$repo = $repos[array_rand($repos)];
header("Location: $repo->html_url");

79
assets/script/navigation.js
View File

@ -3,65 +3,66 @@
window.addEventListener("load", makeLinksDynamic, false); window.addEventListener("load", makeLinksDynamic, false);
function makeLinksDynamic() { function makeLinksDynamic() {
var navLinks = document.getElementsByClassName("nav-button"); var navLinks = document.getElementsByClassName("js-link");
for (var i = 0; i < navLinks.length; i++) { for (var i = 0; i < navLinks.length; i++) {
navLinks[i].onclick = function(e) { navLinks[i].onclick = function(e) {
var event = e || window.event; var event = e || window.event;
var target = event.target || event.srcElement; var target = event.target || event.srcElement;
if (target.nodeName !== "A" || event.ctrlKey || document.body.className.indexOf("loading") !== -1) return; if (target.nodeName !== "A" || event.ctrlKey || document.body.className.indexOf("loading") !== -1) return;
loadUrl(target.href, function() { loadUrl(target.href, function() {
if (window.history && history.pushState) { if (window.history && history.pushState) {
history.pushState(null, "", target.href); history.pushState(null, "", target.href);
} }
}); });
event.preventDefault(); event.preventDefault();
event.returnValue = false; event.returnValue = false;
} }
} }
} }
window.addEventListener("popstate", function() { window.addEventListener("popstate", function() {
loadUrl(location.href); loadUrl(location.href);
}, false); }, false);
function loadUrl(href, callback) { function loadUrl(href, callback) {
document.body.className += " loading"; document.body.className += " loading";
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
if (this.readyState === 4) { if (this.readyState === 4) {
if (this.status !== 200) location.href = href; if (this.status !== 200) location.href = href;
try { try {
var tags = ["main", "nav"]; var tags = ["main", "nav", "aside", "footer"];
for (var i = 0; i < tags.length; i++) { for (var i = 0; i < tags.length; i++) {
document.querySelector(tags[i]).innerHTML = this.responseText.match(new RegExp("<" + tags[i] + ">([\\s\\S]+)<\\/" + tags[i] + ">"))[1]; document.querySelector(tags[i]).innerHTML = this.responseText.match(new RegExp("<" + tags[i] + ">([\\s\\S]*)<\\/" + tags[i] + ">"))[1];
} }
} catch(e) { } catch(e) {
location.href = href; console.error(e);
} location.href = href;
}
// Dispatch load event // Dispatch load event
var loadEvent = document.createEvent('Event'); var loadEvent = document.createEvent('Event');
loadEvent.initEvent('load', false, false); loadEvent.initEvent('load', false, false);
window.dispatchEvent(loadEvent); window.dispatchEvent(loadEvent);
if (callback) callback(); if (callback) callback();
document.body.className = document.body.className.replace(/\s*loading/g, ""); document.body.className = document.body.className.replace(/\s*loading/g, "");
} }
} }
xhr.open("GET", href); xhr.open("GET", href);
xhr.send(); xhr.send();
} }

8
assets/style/dark-mode.css
View File

@ -77,3 +77,11 @@ body {
display: none !important; display: none !important;
} }
#typeracer-badge {
filter: grayscale() invert();
}
#view-background {
color: rgba(255, 255, 255, 0.3);
}

4
assets/style/light-mode.css
View File

@ -77,3 +77,7 @@ body {
display: none !important; display: none !important;
} }
#view-background {
color: rgba(0, 0, 0, 0.3);
}

10
assets/style/main.css
View File

@ -8,7 +8,7 @@ body {
position: fixed; position: fixed;
width: 100%; width: 100%;
width: 100vw; width: 100vw;
height: 100vh; max-height: 100vh;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
/* Prevent user from selecting whitespace between containers */ /* Prevent user from selecting whitespace between containers */
user-select: none; user-select: none;
@ -242,6 +242,13 @@ h1, h2 {
image-rendering: pixelated; image-rendering: pixelated;
} }
#view-background {
display: inline-block;
font-size: 0.6em;
text-decoration: none;
margin-bottom: 15px;
}
/* Fixes */ /* Fixes */
/* IE 9-11 has a bug which makes the ch css unit unusable, this will make it use the inputs size attribute instead */ /* IE 9-11 has a bug which makes the ch css unit unusable, this will make it use the inputs size attribute instead */
@ -265,3 +272,4 @@ object {
img { img {
border: none; /* Fix ico images on internet explorer */ border: none; /* Fix ico images on internet explorer */
} }

9
background/index.php
View File

@ -4,6 +4,15 @@
<?php require "../inc/head.inc" ?> <?php require "../inc/head.inc" ?>
</head> </head>
<body> <body>
<div id="nav">
<nav></nav>
</div>
<div id="main-and-sidebar">
<main></main>
<aside></aside>
</div>
<?php $is_background = true ?>
<?php require "../inc/background.inc" ?> <?php require "../inc/background.inc" ?>
</body> </body>
</html> </html>

15
inc/background.inc
View File

@ -1 +1,16 @@
<div id="grass"></div> <div id="grass"></div>
<br>
<footer>
<a
id="view-background"
href="<?= $is_background ? "/" : "/background" ?>"
class="js-link"
onmouseup="document.getElementById('nav').style.opacity = document.getElementById('main-and-sidebar').style.opacity = 1"
onmouseenter="document.getElementById('nav').style.opacity = document.getElementById('main-and-sidebar').style.opacity = 0"
onmouseleave="document.getElementById('nav').style.opacity = document.getElementById('main-and-sidebar').style.opacity = 1"
>
<?= $is_background ? "Back to homepage" : "Enjoying the background?" ?>
</a>
</footer>

6
inc/nav.inc
View File

@ -13,10 +13,10 @@
$is_selected = $link[0] == $path || $link[0] == rtrim($path, '/'); $is_selected = $link[0] == $path || $link[0] == rtrim($path, '/');
echo echo
$is_selected ? $is_selected ?
"<span class='container nav-button nav-button-selected'>$link[1]</span>" : "<span class='container js-link nav-button nav-button-selected'>$link[1]</span>" :
"<a href='$link[0]' class='container nav-button nav-button-not-selected'>$link[1]</a>"; "<a href='$link[0]' class='container js-link nav-button nav-button-not-selected'>$link[1]</a>";
} }
?> ?>
</nav> </nav>
</div> </div>

2
inc/sidebar.inc
View File

@ -15,7 +15,7 @@
</picture> </picture>
</div> </div>
<span id="<?= $theme ?>-theme"> <span id="<?= $theme ?>-theme">
<a class="theme-btn" data-theme="<?= $theme ?>" href="/api/set_theme/<?= $name ?>.php"> <a class="theme-btn" data-theme="<?= $theme ?>" href="/api/set_theme/<?= $theme ?>.php">
<?= ucwords($theme) ?> <?= ucwords($theme) ?>
</a> </a>
<span class="theme-check">&#10003;</span> <span class="theme-check">&#10003;</span>

155
index.php
View File

@ -3,88 +3,115 @@
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<?php require "inc/head.inc" ?> <?php require "inc/head.inc" ?>
</head> </head>
<body> <body>
<?php require "inc/nav.inc" ?> <?php require "inc/nav.inc" ?>
<div id="main-and-sidebar" dir="rtl" class="inline-block"> <div id="main-and-sidebar" dir="rtl" class="inline-block">
<div id="main-wrapper" class="inline-block"> <div id="main-wrapper" class="inline-block">
<div id="main" class="inline-block"> <div id="main" class="inline-block">
<main> <main>
<div class="section container"> <div class="section container">
<h1>Welcome</h1> <img id="typeracer-badge" style="float: right" src="https://data.typeracer.com/misc/badge?user=reimarpb" width="120" height="240">
<span>I'm <?= $age == 18 ? "an" : "a" ?> <?= $age ?> year old programmer from Denmark</span>
<br>
<a href="https://www.linkedin.com/in/reimarpb/" target="_blank" title="LinkedIn"> <h1>Welcome</h1>
<img class="icon" src="/assets/icons/linkedin.png" alt="LinkedIn" width="16" height="16"><!-- <span>I'm <?= $age == 18 ? "an" : "a" ?> <?= $age ?> year old programmer from Denmark.</span>
--></a> <br>
<a href="https://github.com/ReimarPB" target="_blank" title="GitHub"> <span>I mainly code in JavaScript, PHP, C and Rust.</span>
<picture class="dark"> <br>
<source type="image/svg+xml" srcset="/assets/icons/dark-mode/github.svg"> <span>I can also type between 100-130 words per minute.</span>
<img class="dark icon" src="/assets/icons/dark-mode/github.png" alt="GitHub"> <br>
</picture> <span>This website is being hosted on a Raspberry Pi at my home, along with some other services that can be found on this site.</span>
<picture class="light"> <br><br>
<source type="image/svg+xml" srcset="/assets/icons/light-mode/github.svg">
<img class="light icon" src="/assets/icons/light-mode/github.png" alt="GitHub">
</picture>
</a>
</div>
<div class="section container"> <img class="icon" src="/assets/icons/linkedin.png" alt="LinkedIn" width="16" height="16">
<h1>Projects</h1> <a href="https://www.linkedin.com/in/reimarpb/" target="_blank" title="LinkedIn">
<hr> LinkedIn
<img src="/assets/icons/popup-timer.ico" class="pixelated icon" alt=""> </a>
<b>Popup Timer</b> <br>
<br>
<span>Have a timer or stopwatch in the corner of your screen, directly from within your browser</span>
<br>
<i><a href="https://popup-timer.reim.ar" target="_blank">Open in browser</a></i>
<hr> <picture class="dark">
<source type="image/svg+xml" srcset="/assets/icons/dark-mode/github.svg">
<img class="dark icon" src="/assets/icons/dark-mode/github.png" alt="GitHub">
</picture>
<picture class="light">
<source type="image/svg+xml" srcset="/assets/icons/light-mode/github.svg">
<img class="light icon" src="/assets/icons/light-mode/github.png" alt="GitHub">
</picture>
<a href="https://github.com/ReimarPB" target="_blank" title="GitHub">
GitHub
</a>
<img src="/assets/icons/gameoflife.ico" class="pixelated icon" alt=""> <div style="clear: both"></div>
<b>Game of life</b> </div>
<br>
<span>Conway's Game of Life created with the win32 API</span>
<br>
<i>
<a href="/assets/bin/gameoflife.exe">Download for Windows</a>
&bull;
<a href="https://github.com/ReimarPB/GameOfLife-Win32" target="_blank">View on GitHub</a>
</i>
<hr> <div class="section container">
<h1>Projects</h1>
<span>These are some of the projects I've made:</span>
<hr>
<img src="/assets/icons/popup-timer.ico" class="pixelated icon" alt="">
<b>Popup Timer</b>
<br>
<span>Have a timer or stopwatch in the corner of your screen, directly from within your browser</span>
<br>
<i><a href="https://popup-timer.reim.ar" target="_blank">Open in browser</a></i>
<img src="/assets/icons/reimtris.ico" class="icon" alt=""> <hr>
<b>Reimtris</b>
<br>
<span>A Tetris clone written in Rust with epic background music</span>
<br>
<i>
<a href="/assets/bin/Reimtris.exe">Download for Windows</a>
&bull;
<a href="/assets/bin/Reimtris">Download for Linux</a>
</i>
<img src="/assets/icons/gameoflife.ico" class="pixelated icon" alt="">
<b>Game of life</b>
<br>
<span>Conway's Game of Life created with the win32 API</span>
<br>
<i>
<a href="/assets/bin/gameoflife.exe">Download for Windows</a>
&bull;
<a href="https://github.com/ReimarPB/GameOfLife-Win32" target="_blank">View on GitHub</a>
</i>
<hr>
</div> <img src="/assets/icons/reimtris.ico" class="icon" alt="">
<b>Reimtris</b>
<br>
<span>A Tetris clone written in Rust with epic background music</span>
<br>
<i>
<a href="/assets/bin/Reimtris.exe">Download for Windows</a>
&bull;
<a href="/assets/bin/Reimtris">Download for Linux</a>
</i>
</div>
</main> <div class="section container">
</div> <h1>Services</h1>
</div><!-- <span>These are the services currently being hosted on this server:</span>
<hr>
<img src="https://git.reim.ar/favicon.ico" class="icon" alt="">
<b>Gitea</b>
<br>
<span>This is my Gitea instance and the remote host I use for some of my projects</span>
<br>
<i>
<a href="https://git.reim.ar/explore/repos">View repositories</a>
&bull;
<a href="/api/random_repo.php">Go to random repository</a>
</i>
</div>
</main>
</div>
</div><!--
--><?php require "inc/sidebar.inc" ?> --><?php require "inc/sidebar.inc" ?>
</div> </div>
<?php require "inc/background.inc" ?> <?php require "inc/background.inc" ?>
</body> </body>
</html> </html>