simplified localization + css
This commit is contained in:
parent
b3af26e015
commit
f55cd5f6e9
4 changed files with 185 additions and 242 deletions
|
|
@ -1,23 +0,0 @@
|
||||||
const LANGUAGES = ["en-gb", "da-dk"];
|
|
||||||
|
|
||||||
const selected = select => select.options[select.selectedIndex];
|
|
||||||
const getCookie = key => (document.cookie.split("; ").findLast(c => c.startsWith(key)) ?? "=").split("=").reverse()[0];
|
|
||||||
const setCookie = (key, value) => (document.cookie = `${key}=${value}; path=/; SameSite=Strict;`);
|
|
||||||
|
|
||||||
function localize() {
|
|
||||||
let currentLang = getCookie("lang");
|
|
||||||
if (!currentLang) {
|
|
||||||
setCookie("lang", LANGUAGES[0]);
|
|
||||||
currentLang = LANGUAGES[0];
|
|
||||||
}
|
|
||||||
let langIndex = LANGUAGES.indexOf(currentLang) ?? 0;
|
|
||||||
document.getElementById("lang").selectedIndex = langIndex;
|
|
||||||
[...document.querySelectorAll("[lang]")].forEach(
|
|
||||||
elem => (elem.hidden = elem.lang != currentLang && !elem.classList.contains("no-localize")),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setLocale(language) {
|
|
||||||
setCookie("lang", language);
|
|
||||||
localize();
|
|
||||||
}
|
|
||||||
|
|
@ -13,9 +13,7 @@
|
||||||
:root {
|
:root {
|
||||||
--primary: #202020;
|
--primary: #202020;
|
||||||
--secondary: #2b2b2b;
|
--secondary: #2b2b2b;
|
||||||
--border: darkgrey;
|
|
||||||
--font-color: white;
|
--font-color: white;
|
||||||
--font-inverted: black;
|
|
||||||
--link-color: tomato;
|
--link-color: tomato;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -26,7 +24,7 @@ html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html * {
|
* {
|
||||||
color: var(--font-color);
|
color: var(--font-color);
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
|
@ -129,52 +127,6 @@ a:hover {
|
||||||
color: var(--font-inverted);
|
color: var(--font-inverted);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
|
||||||
padding-left: 1.4em;
|
|
||||||
margin-top: 0px;
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-bottom: 0.4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
overflow-x: auto;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: 0.15rem solid var(--border);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
border-spacing: 0px;
|
|
||||||
overflow: scroll;
|
|
||||||
background-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
table tbody,
|
|
||||||
table thead {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
border-bottom: 1px dotted var(--border);
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
padding: 0.4rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
thead,
|
|
||||||
tbody {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto 1fr;
|
grid-template-columns: auto 1fr;
|
||||||
|
|
@ -190,37 +142,6 @@ dd {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
|
||||||
display: inline-block;
|
|
||||||
user-select: none;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
label,
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
progress,
|
|
||||||
meter {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0em 0.2em 0.1em 0.2em;
|
|
||||||
background-color: var(--secondary);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 1px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
background-color: var(--link-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* custom */
|
|
||||||
.profile {
|
.profile {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
|
||||||
183
src/en/index.html
Normal file
183
src/en/index.html
Normal file
|
|
@ -0,0 +1,183 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- metadata -->
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Home | Frederik Palmø</title>
|
||||||
|
<meta name="description" content="palmoe.dk | Frederik Palmø" />
|
||||||
|
<meta name="author" content="vodofrede" />
|
||||||
|
<meta property="og:title" content="Frederik Palmø" />
|
||||||
|
<meta property="og:description" content="" />
|
||||||
|
<meta property="og:url" content="https://palmoe.dk" />
|
||||||
|
<!-- assets -->
|
||||||
|
<link rel="stylesheet" href="/assets/main.css" />
|
||||||
|
<link rel="icon" type="image/x-icon " href="/assets/favicon.ico" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1><a href="/">Frederik Palmø</a></h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section class="articles">
|
||||||
|
<h2 lang="da-dk">Projekter</h2>
|
||||||
|
<div lang="en-gb">
|
||||||
|
<article>
|
||||||
|
<b>Tools for planning game characters</b>
|
||||||
|
<span
|
||||||
|
style="display: flex; justify-content: flex-end; gap: 0.5rem">
|
||||||
|
<a href="https://erdtree.palmoe.dk" target="_blank"
|
||||||
|
rel="noopener noreferrer">project</a>
|
||||||
|
<a href="https://git.palmoe.dk/vodofrede/erdtree"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
source
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<p>
|
||||||
|
This project makes use of fundamental web technologies
|
||||||
|
such as HTML, CSS and JavaScript. The
|
||||||
|
lack of good build planning tools for the game Elden
|
||||||
|
Ring made me embark on this project,
|
||||||
|
which consists of simple calculators for characters
|
||||||
|
statistics, armor efficiency and weapon
|
||||||
|
damage. Beyond the simple calculations, this project
|
||||||
|
also entailed extracting the item
|
||||||
|
values from the game files. This was done using Python,
|
||||||
|
and the resulting values were
|
||||||
|
converted to JSON files for ease of use with JavaScript.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<b>Implementation of hashing algorithms</b>
|
||||||
|
<span
|
||||||
|
style="display: flex; justify-content: flex-end; gap: 0.5rem">
|
||||||
|
<a href="https://crates.io/crates/lore" target="_blank"
|
||||||
|
rel="noopener noreferrer">
|
||||||
|
project
|
||||||
|
</a>
|
||||||
|
<a href="https://git.palmoe.dk/vodofrede/lore"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
source
|
||||||
|
</a>
|
||||||
|
<a href="https://docs.rs/lore/latest/lore/"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
docs
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<p>
|
||||||
|
With this project I wanted to focus on implementing a
|
||||||
|
simple API that would make it easy to
|
||||||
|
generate message digests for any data in Rust. I was
|
||||||
|
dissatisfied with the APIs of existing
|
||||||
|
packages, and sought reduce the amount of function calls
|
||||||
|
necessary to get a hash value.
|
||||||
|
Other focuses of this project were well-written
|
||||||
|
documentation and testing.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<b>Simple, efficient parsing library</b>
|
||||||
|
<span
|
||||||
|
style="display: flex; justify-content: flex-end; gap: 0.5rem">
|
||||||
|
<a href="https://crates.io/crates/eyes" target="_blank"
|
||||||
|
rel="noopener noreferrer">
|
||||||
|
project
|
||||||
|
</a>
|
||||||
|
<a href="https://git.palmoe.dk/vodofrede/eyes"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
source
|
||||||
|
</a>
|
||||||
|
<a href="https://docs.rs/eyes/latest/eyes/"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
docs
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<p>
|
||||||
|
Many problems in the yearly
|
||||||
|
<a href="https://adventofcode.com">Advent of Code</a>
|
||||||
|
event consist of parsing some data and transforming
|
||||||
|
afterwards. I wanted to try implementing
|
||||||
|
my own simple parser, which parses strings using simple
|
||||||
|
templates and converts the parsing
|
||||||
|
results to specific data types. This was my first go at
|
||||||
|
creating a Rust crate, and I focused
|
||||||
|
on creating an idiomatic API as well as good
|
||||||
|
documentation so that others might be able to
|
||||||
|
use the crate.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<b>Outdoor IoT LED chain lights</b>
|
||||||
|
<span
|
||||||
|
style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
|
||||||
|
<p>
|
||||||
|
A simple internet of things project consisting of a few
|
||||||
|
cheap LED chain lights, a power
|
||||||
|
supply and a WiFi-enabled microcontroller. The project
|
||||||
|
uses existing technologies (Home
|
||||||
|
Assistant, WLED) to provide a nice-looking and simple
|
||||||
|
interface.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<b>Clones of Galaga and Breakout</b>
|
||||||
|
<span
|
||||||
|
style="display: flex; justify-content: flex-end; gap: 0.5rem">
|
||||||
|
<a href="https://github.com/vodofrede/DIKUGames"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
source
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<p>
|
||||||
|
As part of the Software Development course at UCPH we
|
||||||
|
created some small games in C\# using
|
||||||
|
the provided DIKUGames library. This class taught me
|
||||||
|
more efficient development patterns for
|
||||||
|
OOP, as well as how to delegate work in a group
|
||||||
|
environment in order to maintain development
|
||||||
|
speed. As part of this project we were taught basic OOP
|
||||||
|
principles such as SOLID and TDD.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<b>Private server</b>
|
||||||
|
<span
|
||||||
|
style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
|
||||||
|
<p>
|
||||||
|
All of my projects are hosted on my private server,
|
||||||
|
located at my residence. As part of this
|
||||||
|
project I have learned a lot about server administration
|
||||||
|
work, web servers, package managers
|
||||||
|
and container architectures. From this I have adequate
|
||||||
|
level of experience with the
|
||||||
|
mentioned technologies.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<aside class="info">
|
||||||
|
<h3>info</h3>
|
||||||
|
<img src="/assets/palmoe.png" width="120" height="120"
|
||||||
|
class="profile" />
|
||||||
|
<dl>
|
||||||
|
<dt>github</dt>
|
||||||
|
<dd><a href="https://github.com/vodofrede">vodofrede</a></dd>
|
||||||
|
<dt>gitea</dt>
|
||||||
|
<dd><a href="https://git.palmoe.dk/vodofrede">vodofrede</a></dd>
|
||||||
|
</dl>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<h5>
|
||||||
|
<a href="/">Dansk</a>
|
||||||
|
</h5>
|
||||||
|
<h5>
|
||||||
|
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik
|
||||||
|
Palmø</a>
|
||||||
|
</h5>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
140
src/index.html
140
src/index.html
|
|
@ -24,7 +24,6 @@
|
||||||
<main>
|
<main>
|
||||||
<section style="flex-grow: 1" class="articles">
|
<section style="flex-grow: 1" class="articles">
|
||||||
<h2 lang="da-dk">Projekter</h2>
|
<h2 lang="da-dk">Projekter</h2>
|
||||||
<h2 lang="en-gb">Projects</h2>
|
|
||||||
<div lang="da-dk">
|
<div lang="da-dk">
|
||||||
<article>
|
<article>
|
||||||
<b>Redskaber til planlægning af spilkarakterer</b>
|
<b>Redskaber til planlægning af spilkarakterer</b>
|
||||||
|
|
@ -159,139 +158,6 @@
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
<div lang="en-gb">
|
|
||||||
<article>
|
|
||||||
<b>Tools for planning game characters</b>
|
|
||||||
<span
|
|
||||||
style="display: flex; justify-content: flex-end; gap: 0.5rem">
|
|
||||||
<a href="https://erdtree.palmoe.dk" target="_blank"
|
|
||||||
rel="noopener noreferrer">project</a>
|
|
||||||
<a href="https://git.palmoe.dk/vodofrede/erdtree"
|
|
||||||
target="_blank" rel="noopener noreferrer">
|
|
||||||
source
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
<p>
|
|
||||||
This project makes use of fundamental web technologies
|
|
||||||
such as HTML, CSS and JavaScript. The
|
|
||||||
lack of good build planning tools for the game Elden
|
|
||||||
Ring made me embark on this project,
|
|
||||||
which consists of simple calculators for characters
|
|
||||||
statistics, armor efficiency and weapon
|
|
||||||
damage. Beyond the simple calculations, this project
|
|
||||||
also entailed extracting the item
|
|
||||||
values from the game files. This was done using Python,
|
|
||||||
and the resulting values were
|
|
||||||
converted to JSON files for ease of use with JavaScript.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<b>Implementation of hashing algorithms</b>
|
|
||||||
<span
|
|
||||||
style="display: flex; justify-content: flex-end; gap: 0.5rem">
|
|
||||||
<a href="https://crates.io/crates/lore" target="_blank"
|
|
||||||
rel="noopener noreferrer">
|
|
||||||
project
|
|
||||||
</a>
|
|
||||||
<a href="https://git.palmoe.dk/vodofrede/lore"
|
|
||||||
target="_blank" rel="noopener noreferrer">
|
|
||||||
source
|
|
||||||
</a>
|
|
||||||
<a href="https://docs.rs/lore/latest/lore/"
|
|
||||||
target="_blank" rel="noopener noreferrer">
|
|
||||||
docs
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
<p>
|
|
||||||
With this project I wanted to focus on implementing a
|
|
||||||
simple API that would make it easy to
|
|
||||||
generate message digests for any data in Rust. I was
|
|
||||||
dissatisfied with the APIs of existing
|
|
||||||
packages, and sought reduce the amount of function calls
|
|
||||||
necessary to get a hash value.
|
|
||||||
Other focuses of this project were well-written
|
|
||||||
documentation and testing.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<b>Simple, efficient parsing library</b>
|
|
||||||
<span
|
|
||||||
style="display: flex; justify-content: flex-end; gap: 0.5rem">
|
|
||||||
<a href="https://crates.io/crates/eyes" target="_blank"
|
|
||||||
rel="noopener noreferrer">
|
|
||||||
project
|
|
||||||
</a>
|
|
||||||
<a href="https://git.palmoe.dk/vodofrede/eyes"
|
|
||||||
target="_blank" rel="noopener noreferrer">
|
|
||||||
source
|
|
||||||
</a>
|
|
||||||
<a href="https://docs.rs/eyes/latest/eyes/"
|
|
||||||
target="_blank" rel="noopener noreferrer">
|
|
||||||
docs
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
<p>
|
|
||||||
Many problems in the yearly
|
|
||||||
<a href="https://adventofcode.com">Advent of Code</a>
|
|
||||||
event consist of parsing some data and transforming
|
|
||||||
afterwards. I wanted to try implementing
|
|
||||||
my own simple parser, which parses strings using simple
|
|
||||||
templates and converts the parsing
|
|
||||||
results to specific data types. This was my first go at
|
|
||||||
creating a Rust crate, and I focused
|
|
||||||
on creating an idiomatic API as well as good
|
|
||||||
documentation so that others might be able to
|
|
||||||
use the crate.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<b>Outdoor IoT LED chain lights</b>
|
|
||||||
<span
|
|
||||||
style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
|
|
||||||
<p>
|
|
||||||
A simple internet of things project consisting of a few
|
|
||||||
cheap LED chain lights, a power
|
|
||||||
supply and a WiFi-enabled microcontroller. The project
|
|
||||||
uses existing technologies (Home
|
|
||||||
Assistant, WLED) to provide a nice-looking and simple
|
|
||||||
interface.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<b>Clones of Galaga and Breakout</b>
|
|
||||||
<span
|
|
||||||
style="display: flex; justify-content: flex-end; gap: 0.5rem">
|
|
||||||
<a href="https://github.com/vodofrede/DIKUGames"
|
|
||||||
target="_blank" rel="noopener noreferrer">
|
|
||||||
source
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
<p>
|
|
||||||
As part of the Software Development course at UCPH we
|
|
||||||
created some small games in C\# using
|
|
||||||
the provided DIKUGames library. This class taught me
|
|
||||||
more efficient development patterns for
|
|
||||||
OOP, as well as how to delegate work in a group
|
|
||||||
environment in order to maintain development
|
|
||||||
speed. As part of this project we were taught basic OOP
|
|
||||||
principles such as SOLID and TDD.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<b>Private server</b>
|
|
||||||
<span
|
|
||||||
style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
|
|
||||||
<p>
|
|
||||||
All of my projects are hosted on my private server,
|
|
||||||
located at my residence. As part of this
|
|
||||||
project I have learned a lot about server administration
|
|
||||||
work, web servers, package managers
|
|
||||||
and container architectures. From this I have adequate
|
|
||||||
level of experience with the
|
|
||||||
mentioned technologies.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
<aside class="info">
|
<aside class="info">
|
||||||
<h3>info</h3>
|
<h3>info</h3>
|
||||||
|
|
@ -307,11 +173,7 @@
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<h5>
|
<h5>
|
||||||
<select id="lang" onchange="setLocale(selected(this).value);"
|
<a href="/en">English</a>
|
||||||
style="font-size: 1.5em">
|
|
||||||
<option value="en-gb">🇬🇧</option>
|
|
||||||
<option value="da-dk">🇩🇰</option>
|
|
||||||
</select>
|
|
||||||
</h5>
|
</h5>
|
||||||
<h5>
|
<h5>
|
||||||
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik
|
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue