Compare commits

...

1 Commits

Author SHA1 Message Date
607bb683f0
Revamp content on website 2023-12-31 12:06:45 +01:00
10 changed files with 186 additions and 108 deletions

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");

View File

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

View File

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

View File

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

View File

@ -8,7 +8,7 @@ body {
position: fixed;
width: 100%;
width: 100vw;
height: 100vh;
max-height: 100vh;
font-family: Arial, sans-serif;
/* Prevent user from selecting whitespace between containers */
user-select: none;
@ -242,6 +242,13 @@ h1, h2 {
image-rendering: pixelated;
}
#view-background {
display: inline-block;
font-size: 0.6em;
text-decoration: none;
margin-bottom: 15px;
}
/* Fixes */
/* 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 {
border: none; /* Fix ico images on internet explorer */
}

View File

@ -4,6 +4,15 @@
<?php require "../inc/head.inc" ?>
</head>
<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" ?>
</body>
</html>

View File

@ -1 +1,16 @@
<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>

View File

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

View File

@ -15,7 +15,7 @@
</picture>
</div>
<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) ?>
</a>
<span class="theme-check">&#10003;</span>

155
index.php
View File

@ -3,88 +3,115 @@
?>
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<?php require "inc/head.inc" ?>
</head>
<body>
</head>
<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" class="inline-block">
<main>
<div id="main-wrapper" class="inline-block">
<div id="main" class="inline-block">
<main>
<div class="section container">
<h1>Welcome</h1>
<span>I'm <?= $age == 18 ? "an" : "a" ?> <?= $age ?> year old programmer from Denmark</span>
<br>
<div class="section container">
<img id="typeracer-badge" style="float: right" src="https://data.typeracer.com/misc/badge?user=reimarpb" width="120" height="240">
<a href="https://www.linkedin.com/in/reimarpb/" target="_blank" title="LinkedIn">
<img class="icon" src="/assets/icons/linkedin.png" alt="LinkedIn" width="16" height="16"><!--
--></a>
<a href="https://github.com/ReimarPB" target="_blank" title="GitHub">
<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>
</div>
<h1>Welcome</h1>
<span>I'm <?= $age == 18 ? "an" : "a" ?> <?= $age ?> year old programmer from Denmark.</span>
<br>
<span>I mainly code in JavaScript, PHP, C and Rust.</span>
<br>
<span>I can also type between 100-130 words per minute.</span>
<br>
<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>
<br><br>
<div class="section container">
<h1>Projects</h1>
<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 class="icon" src="/assets/icons/linkedin.png" alt="LinkedIn" width="16" height="16">
<a href="https://www.linkedin.com/in/reimarpb/" target="_blank" title="LinkedIn">
LinkedIn
</a>
<br>
<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="">
<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>
<div style="clear: both"></div>
</div>
<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="">
<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>
<hr>
<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>
</div><!--
<div class="section container">
<h1>Services</h1>
<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" ?>
</body>
</body>
</html>