vodofrede/palmoe.dk
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed layout flow

Browse Source
This commit is contained in:
Frederik Palmø 2024-03-02 21:18:33 +01:00
parent 22ec7abe89
commit cf314bc0ec
3 changed files with 330 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/assets/main.css
View File

@ -26,12 +26,6 @@ html {
box-sizing: border-box;
}
@media (max-width: 1000px) {
html {
font-size: 0.8rem;
}
}
html * {
color: var(--font-color);
box-sizing: inherit;
@ -46,13 +40,7 @@ body {
}
body > * {
padding: 0 4%;
}
@media (min-width: 1000px) {
body > * {
padding: 0 25%;
}
padding: 0 4vw;
}
header {
@ -61,9 +49,14 @@ header {
main {
display: flex;
flex-flow: row wrap-reverse;
flex-flow: row;
justify-content: space-around;
gap: 2rem;
}
@media only screen and (max-width: 600px) {
main {
flex-flow: row wrap-reverse
}
}
article {
@ -113,10 +106,8 @@ h5,
h6 {
margin-top: 1rem;
margin-bottom: 1.2rem;
overflow-wrap: break-word;
word-wrap: break-word;
line-height: 1.1;
font-weight: bold;
}
@ -132,6 +123,7 @@ a {
text-decoration: underline solid var(--link-color) 10%;
text-underline-offset: 3.8px;
}
a:hover {
background-color: var(--link-color);
color: var(--font-inverted);
@ -157,7 +149,6 @@ table {
border-radius: 0.5rem;
border-spacing: 0px;
overflow: scroll;
background-color: var(--primary);
}
@ -214,11 +205,9 @@ 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%;
}
@ -233,6 +222,8 @@ button:active {
/* custom */
.profile {
width: 70%;
height: auto;
margin-bottom: 1rem;
border-radius: 10px;
}
@ -240,7 +231,6 @@ button:active {
.articles {
display: flex;
flex-flow: column nowrap;
max-width: 70%;
}
.info {
@ -248,12 +238,4 @@ button:active {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.email::after {
content: attr(data-domain);
}
.email::before {
content: attr(data-user) "\0040";
}
}

BIN
src/assets/palmoe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

572
src/index.html
View File

@ -1,259 +1,323 @@
<!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" />
<script src="/assets/localization.js" type="text/javascript"></script>
</head>
<body onload="localize();" lang="en-gb" class="no-localize">
<header>
<h1><a href="/">Frederik Palmø</a></h1>
</header>
<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" />
<script src="/assets/localization.js" type="text/javascript"></script>
</head>
<main>
<section style="flex-grow: 1" class="articles">
<h2 lang="da-dk">Projekter</h2>
<h2 lang="en-gb">Projects</h2>
<body onload="localize();" lang="en-gb" class="no-localize">
<header>
<h1><a href="/">Frederik Palmø</a></h1>
</header>
<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>
<span
style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://erdtree.palmoe.dk" target="_blank"
rel="noopener noreferrer">projekt</a>
<a href="https://git.palmoe.dk/vodofrede/erdtree"
target="_blank" rel="noopener noreferrer">
kildekode
</a>
</span>
<p>
Dette projekt gør brug af grundlæggende webteknologier
såsom HTML, CSS og JavaScript.
Formålet var at gøre det nemmere at planlægge en
karakter til spillet Elden Ring. Til
udvindelse af data blev der gjort brug af et
python-script som konverterede data fra spillet
til JSON-format.
</p>
</article>
<article>
<b>Implementering af hashing-algoritmer</b>
<span
style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://crates.io/crates/lore" target="_blank"
rel="noopener noreferrer">
projekt
</a>
<a href="https://git.palmoe.dk/vodofrede/lore"
target="_blank" rel="noopener noreferrer">
kildekode
</a>
<a href="https://docs.rs/lore/latest/lore/"
target="_blank" rel="noopener noreferrer">
dokumentation
</a>
</span>
<p>
Formålet med dette projekt var implementeringen af en
simpel API til at generere
hashbeskeder ud fra vilkårlig inputdata. Projektet er
udformet som en Rust-pakke, og gør
brug af unit-testing for at sikre at outputtet er
korrekt. En del af øvelsen for mig var
også at skrive god dokumentering, så at det var nemt at
komme i gang med at anvende pakken
for en ikke-erfaren bruger.
</p>
</article>
<article>
<b>Simpel, effektiv parsing</b>
<span
style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://crates.io/crates/eyes" target="_blank"
rel="noopener noreferrer">
projekt
</a>
<a href="https://git.palmoe.dk/vodofrede/eyes"
target="_blank" rel="noopener noreferrer">
kildekode
</a>
<a href="https://docs.rs/eyes/latest/eyes/"
target="_blank" rel="noopener noreferrer">
dokumentation
</a>
</span>
<p>
Mange opgaver i det årlige
<a href="https://adventofcode.com" target="_blank"
rel="noopener noreferrer">
Advent of Code
</a>
event består af at parse noget data og transfomere det
til en ønsket output. Denne crate
består af en rudimentær parser som kan transformere sit
output til specifikke datatyper.
Dette gør det nemt at parse input med kun ét macro-kald,
hvilket simplificerer mine
opgaveløsninger markant.
</p>
</article>
<article>
<b>IoT udendørs lyskæde</b>
<span
style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
<p>
Dette projekt omhandlede en løsning til at have udendørs
LED RGB lyskæder til brug i et
udendørs overdækket sofaområde. Projektet gør brug af
billige, ikke-smarte RGB lyskæder samt
en WiFi microcontroller (ESP32) som gør en kontrolflade
tilgængelig over hjemmenetværket
(gennem bl.a. Apple HomeKit og Home-Assistant). Gennem
dette projekt har jeg lært om
IoT-protokoller og programmering af microcontrollere.
</p>
</article>
<article>
<b>Kloner af Galaga og 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">
kildekode
</a>
</span>
<p>
Dette projekt var en del af kurset Softwareudvikling,
som løb i forårssemesteret 2022. I
dette projekt har jeg arbejdet sammen med to andre som
en del af min studiegruppe. Projektet
er udført i C\# og gør brug af mange forskellige
softwareudviklingsprincipper (SOLID,
testing, diagrammering og arkitekturplanlægning).
</p>
</article>
<article>
<b>Server</b>
<span
style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
<p>
Fra min hjemmeserver leverer jeg alle de hjemmesider som
jeg bruger. Dette involverer brug
af Linux (specifikt Debian) og en god blanding af
prælavede pakker, Docker containers og
selvkompilerede pakker, samt orkestrering med SystemD.
Herfra har jeg god erfaring med hvad
det vil sige at tage et projekt fra en bunke kode til et
leveret produkt på en webadresse.
</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>
<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>
<select id="lang" onchange="setLocale(selected(this).value);"
style="font-size: 1.5em">
<option value="en-gb">🇬🇧</option>
<option value="da-dk">🇩🇰</option>
</select>
</h5>
<h5>
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik
Palmø</a>
</h5>
</footer>
</body>
<div lang="da-dk">
<article>
<b>Redskaber til planlægning af spilkarakterer</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://erdtree.palmoe.dk" target="_blank" rel="noopener noreferrer">projekt</a>
<a href="https://git.palmoe.dk/vodofrede/erdtree" target="_blank" rel="noopener noreferrer">
kildekode
</a>
</span>
<p>
Dette projekt gør brug af grundlæggende webteknologier såsom HTML, CSS og JavaScript.
Formålet var at gøre det nemmere at planlægge en karakter til spillet Elden Ring. Til
udvindelse af data blev der gjort brug af et python-script som konverterede data fra spillet
til JSON-format.
</p>
</article>
<article>
<b>Implementering af hashing-algoritmer</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://crates.io/crates/lore" target="_blank" rel="noopener noreferrer">
projekt
</a>
<a href="https://git.palmoe.dk/vodofrede/lore" target="_blank" rel="noopener noreferrer">
kildekode
</a>
<a href="https://docs.rs/lore/latest/lore/" target="_blank" rel="noopener noreferrer">
dokumentation
</a>
</span>
<p>
Formålet med dette projekt var implementeringen af en simpel API til at generere
hashbeskeder ud fra vilkårlig inputdata. Projektet er udformet som en Rust-pakke, og gør
brug af unit-testing for at sikre at outputtet er korrekt. En del af øvelsen for mig var
også at skrive god dokumentering, så at det var nemt at komme i gang med at anvende pakken
for en ikke-erfaren bruger.
</p>
</article>
<article>
<b>Simpel, effektiv parsing</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://crates.io/crates/eyes" target="_blank" rel="noopener noreferrer">
projekt
</a>
<a href="https://git.palmoe.dk/vodofrede/eyes" target="_blank" rel="noopener noreferrer">
kildekode
</a>
<a href="https://docs.rs/eyes/latest/eyes/" target="_blank" rel="noopener noreferrer">
dokumentation
</a>
</span>
<p>
Mange opgaver i det årlige
<a href="https://adventofcode.com" target="_blank" rel="noopener noreferrer">
Advent of Code
</a>
event består af at parse noget data og transfomere det til en ønsket output. Denne crate
består af en rudimentær parser som kan transformere sit output til specifikke datatyper.
Dette gør det nemt at parse input med kun ét macro-kald, hvilket simplificerer mine
opgaveløsninger markant.
</p>
</article>
<article>
<b>IoT udendørs lyskæde</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
<p>
Dette projekt omhandlede en løsning til at have udendørs LED RGB lyskæder til brug i et
udendørs overdækket sofaområde. Projektet gør brug af billige, ikke-smarte RGB lyskæder samt
en WiFi microcontroller (ESP32) som gør en kontrolflade tilgængelig over hjemmenetværket
(gennem bl.a. Apple HomeKit og Home-Assistant). Gennem dette projekt har jeg lært om
IoT-protokoller og programmering af microcontrollere.
</p>
</article>
<article>
<b>Kloner af Galaga og 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">
kildekode
</a>
</span>
<p>
Dette projekt var en del af kurset Softwareudvikling, som løb i forårssemesteret 2022. I
dette projekt har jeg arbejdet sammen med to andre som en del af min studiegruppe. Projektet
er udført i C\# og gør brug af mange forskellige softwareudviklingsprincipper (SOLID,
testing, diagrammering og arkitekturplanlægning).
</p>
</article>
<article>
<b>Server</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
<p>
Fra min hjemmeserver leverer jeg alle de hjemmesider som jeg bruger. Dette involverer brug
af Linux (specifikt Debian) og en god blanding af prælavede pakker, Docker containers og
selvkompilerede pakker, samt orkestrering med SystemD. Herfra har jeg god erfaring med hvad
det vil sige at tage et projekt fra en bunke kode til et leveret produkt på en webadresse.
</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>
<img src="/assets/profile.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>
<select id="lang" onchange="setLocale(selected(this).value);" style="font-size: 1.5em">
<option value="en-gb">🇬🇧</option>
<option value="da-dk">🇩🇰</option>
</select>
</h5>
<h5>
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik Palmø</a>
</h5>
</footer>
</body>
</html>
</html>