Revamp content on website
This commit is contained in:
parent
a0d2e194ca
commit
607bb683f0
GPG Key ID:
93549FA07F0AE268
6
api/random_repo.php
Normal file
6
api/random_repo.php
Normal 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");
|
||||
|
||||
@ -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();
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -77,3 +77,11 @@ body {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#typeracer-badge {
|
||||
filter: grayscale() invert();
|
||||
}
|
||||
|
||||
#view-background {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
|
||||
@ -77,3 +77,7 @@ body {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#view-background {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
@ -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 */
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -13,8 +13,8 @@
|
||||
$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>";
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
@ -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">✓</span>
|
||||
|
||||
155
index.php
155
index.php
@ -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>
|
||||
•
|
||||
<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>
|
||||
•
|
||||
<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>
|
||||
•
|
||||
<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>
|
||||
•
|
||||
<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>
|
||||
•
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user