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

7
assets/script/navigation.js
View File

@ -3,7 +3,7 @@
window.addEventListener("load", makeLinksDynamic, false);
function makeLinksDynamic() {
var navLinks = document.getElementsByClassName("nav-button");
var navLinks = document.getElementsByClassName("js-link");
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].onclick = function(e) {
@ -41,11 +41,12 @@ function loadUrl(href, callback) {
if (this.status !== 200) location.href = href;
try {
var tags = ["main", "nav"];
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];
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;
}

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

@ -77,3 +77,11 @@ body {
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;
}
#view-background {
color: rgba(0, 0, 0, 0.3);
}

10
assets/style/main.css
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 */
}

9
background/index.php
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>

15
inc/background.inc
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>

4
inc/nav.inc
View File

@ -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>";
}
?>

2
inc/sidebar.inc
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>

43
index.php
View File

@ -17,14 +17,24 @@
<main>
<div class="section container">
<img id="typeracer-badge" style="float: right" src="https://data.typeracer.com/misc/badge?user=reimarpb" width="120" height="240">
<h1>Welcome</h1>
<span>I'm <?= $age == 18 ? "an" : "a" ?> <?= $age ?> year old programmer from Denmark</span>
<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>
<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>
<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">
@ -33,11 +43,16 @@
<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>
<div style="clear: both"></div>
</div>
<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>
@ -71,11 +86,23 @@
&bull;
<a href="/assets/bin/Reimtris">Download for Linux</a>
</i>
</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><!--