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 {
|
||||
--primary: #202020;
|
||||
--secondary: #2b2b2b;
|
||||
--border: darkgrey;
|
||||
--font-color: white;
|
||||
--font-inverted: black;
|
||||
--link-color: tomato;
|
||||
}
|
||||
}
|
||||
|
|
@ -26,7 +24,7 @@ html {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html * {
|
||||
* {
|
||||
color: var(--font-color);
|
||||
box-sizing: inherit;
|
||||
margin: 0px;
|
||||
|
|
@ -129,52 +127,6 @@ a:hover {
|
|||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
|
@ -190,37 +142,6 @@ dd {
|
|||
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 {
|
||||
width: 50%;
|
||||
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>
|
||||
<section style="flex-grow: 1" class="articles">
|
||||
<h2 lang="da-dk">Projekter</h2>
|
||||
<h2 lang="en-gb">Projects</h2>
|
||||
<div lang="da-dk">
|
||||
<article>
|
||||
<b>Redskaber til planlægning af spilkarakterer</b>
|
||||
|
|
@ -159,139 +158,6 @@
|
|||
</p>
|
||||
</article>
|
||||
</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>
|
||||
<aside class="info">
|
||||
<h3>info</h3>
|
||||
|
|
@ -307,11 +173,7 @@
|
|||
</main>
|
||||
<footer>
|
||||
<h5>
|
||||
<select id="lang" onchange="setLocale(selected(this).value);"
|
||||
style="font-size: 1.5em">
|
||||
<option value="en-gb">🇬🇧</option>
|
||||
<option value="da-dk">🇩🇰</option>
|
||||
</select>
|
||||
<a href="/en">English</a>
|
||||
</h5>
|
||||
<h5>
|
||||
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik
|
||||
|
|
|
|||
Loading…
Reference in a new issue