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

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

40
src/assets/main.css
View file

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

262
src/index.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<!-- metadata --> <!-- metadata -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@ -10,250 +11,313 @@
<meta property="og:title" content="Frederik Palmø" /> <meta property="og:title" content="Frederik Palmø" />
<meta property="og:description" content="" /> <meta property="og:description" content="" />
<meta property="og:url" content="https://palmoe.dk" /> <meta property="og:url" content="https://palmoe.dk" />
<!-- assets --> <!-- assets -->
<link rel="stylesheet" href="/assets/main.css" /> <link rel="stylesheet" href="/assets/main.css" />
<link rel="icon" type="image/x-icon " href="/assets/favicon.ico" /> <link rel="icon" type="image/x-icon " href="/assets/favicon.ico" />
<script src="/assets/localization.js" type="text/javascript"></script> <script src="/assets/localization.js" type="text/javascript"></script>
</head> </head>
<body onload="localize();" lang="en-gb" class="no-localize">
<body onload="localize();" lang="en-gb" class="no-localize">
<header> <header>
<h1><a href="/">Frederik Palmø</a></h1> <h1><a href="/">Frederik Palmø</a></h1>
</header> </header>
<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> <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>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"> <span
<a href="https://erdtree.palmoe.dk" target="_blank" rel="noopener noreferrer">projekt</a> style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://git.palmoe.dk/vodofrede/erdtree" target="_blank" rel="noopener noreferrer"> <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 kildekode
</a> </a>
</span> </span>
<p> <p>
Dette projekt gør brug af grundlæggende webteknologier såsom HTML, CSS og JavaScript. Dette projekt gør brug af grundlæggende webteknologier
Formålet var at gøre det nemmere at planlægge en karakter til spillet Elden Ring. Til såsom HTML, CSS og JavaScript.
udvindelse af data blev der gjort brug af et python-script som konverterede data fra spillet 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. til JSON-format.
</p> </p>
</article> </article>
<article> <article>
<b>Implementering af hashing-algoritmer</b> <b>Implementering af hashing-algoritmer</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"> <span
<a href="https://crates.io/crates/lore" target="_blank" rel="noopener noreferrer"> style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://crates.io/crates/lore" target="_blank"
rel="noopener noreferrer">
projekt projekt
</a> </a>
<a href="https://git.palmoe.dk/vodofrede/lore" target="_blank" rel="noopener noreferrer"> <a href="https://git.palmoe.dk/vodofrede/lore"
target="_blank" rel="noopener noreferrer">
kildekode kildekode
</a> </a>
<a href="https://docs.rs/lore/latest/lore/" target="_blank" rel="noopener noreferrer"> <a href="https://docs.rs/lore/latest/lore/"
target="_blank" rel="noopener noreferrer">
dokumentation dokumentation
</a> </a>
</span> </span>
<p> <p>
Formålet med dette projekt var implementeringen af en simpel API til at generere Formålet med dette projekt var implementeringen af en
hashbeskeder ud fra vilkårlig inputdata. Projektet er udformet som en Rust-pakke, og gør simpel API til at generere
brug af unit-testing for at sikre at outputtet er korrekt. En del af øvelsen for mig var hashbeskeder ud fra vilkårlig inputdata. Projektet er
også at skrive god dokumentering, så at det var nemt at komme i gang med at anvende pakken 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. for en ikke-erfaren bruger.
</p> </p>
</article> </article>
<article> <article>
<b>Simpel, effektiv parsing</b> <b>Simpel, effektiv parsing</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"> <span
<a href="https://crates.io/crates/eyes" target="_blank" rel="noopener noreferrer"> style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://crates.io/crates/eyes" target="_blank"
rel="noopener noreferrer">
projekt projekt
</a> </a>
<a href="https://git.palmoe.dk/vodofrede/eyes" target="_blank" rel="noopener noreferrer"> <a href="https://git.palmoe.dk/vodofrede/eyes"
target="_blank" rel="noopener noreferrer">
kildekode kildekode
</a> </a>
<a href="https://docs.rs/eyes/latest/eyes/" target="_blank" rel="noopener noreferrer"> <a href="https://docs.rs/eyes/latest/eyes/"
target="_blank" rel="noopener noreferrer">
dokumentation dokumentation
</a> </a>
</span> </span>
<p> <p>
Mange opgaver i det årlige Mange opgaver i det årlige
<a href="https://adventofcode.com" target="_blank" rel="noopener noreferrer"> <a href="https://adventofcode.com" target="_blank"
rel="noopener noreferrer">
Advent of Code Advent of Code
</a> </a>
event består af at parse noget data og transfomere det til en ønsket output. Denne crate event består af at parse noget data og transfomere det
består af en rudimentær parser som kan transformere sit output til specifikke datatyper. til en ønsket output. Denne crate
Dette gør det nemt at parse input med kun ét macro-kald, hvilket simplificerer mine 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. opgaveløsninger markant.
</p> </p>
</article> </article>
<article> <article>
<b>IoT udendørs lyskæde</b> <b>IoT udendørs lyskæde</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"></span> <span
style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
<p> <p>
Dette projekt omhandlede en løsning til at have udendørs LED RGB lyskæder til brug i et Dette projekt omhandlede en løsning til at have udendørs
udendørs overdækket sofaområde. Projektet gør brug af billige, ikke-smarte RGB lyskæder samt LED RGB lyskæder til brug i et
en WiFi microcontroller (ESP32) som gør en kontrolflade tilgængelig over hjemmenetværket udendørs overdækket sofaområde. Projektet gør brug af
(gennem bl.a. Apple HomeKit og Home-Assistant). Gennem dette projekt har jeg lært om 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. IoT-protokoller og programmering af microcontrollere.
</p> </p>
</article> </article>
<article> <article>
<b>Kloner af Galaga og Breakout</b> <b>Kloner af Galaga og Breakout</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"> <span
<a href="https://github.com/vodofrede/DIKUGames" target="_blank" rel="noopener noreferrer"> style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://github.com/vodofrede/DIKUGames"
target="_blank" rel="noopener noreferrer">
kildekode kildekode
</a> </a>
</span> </span>
<p> <p>
Dette projekt var en del af kurset Softwareudvikling, som løb i forårssemesteret 2022. I Dette projekt var en del af kurset Softwareudvikling,
dette projekt har jeg arbejdet sammen med to andre som en del af min studiegruppe. Projektet som løb i forårssemesteret 2022. I
er udført i C\# og gør brug af mange forskellige softwareudviklingsprincipper (SOLID, 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). testing, diagrammering og arkitekturplanlægning).
</p> </p>
</article> </article>
<article> <article>
<b>Server</b> <b>Server</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"></span> <span
style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
<p> <p>
Fra min hjemmeserver leverer jeg alle de hjemmesider som jeg bruger. Dette involverer brug Fra min hjemmeserver leverer jeg alle de hjemmesider som
af Linux (specifikt Debian) og en god blanding af prælavede pakker, Docker containers og jeg bruger. Dette involverer brug
selvkompilerede pakker, samt orkestrering med SystemD. Herfra har jeg god erfaring med hvad af Linux (specifikt Debian) og en god blanding af
det vil sige at tage et projekt fra en bunke kode til et leveret produkt på en webadresse. 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> </p>
</article> </article>
</div> </div>
<div lang="en-gb"> <div lang="en-gb">
<article> <article>
<b>Tools for planning game characters</b> <b>Tools for planning game characters</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"> <span
<a href="https://erdtree.palmoe.dk" target="_blank" rel="noopener noreferrer">project</a> style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://git.palmoe.dk/vodofrede/erdtree" target="_blank" rel="noopener noreferrer"> <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 source
</a> </a>
</span> </span>
<p> <p>
This project makes use of fundamental web technologies such as HTML, CSS and JavaScript. The This project makes use of fundamental web technologies
lack of good build planning tools for the game Elden Ring made me embark on this project, such as HTML, CSS and JavaScript. The
which consists of simple calculators for characters statistics, armor efficiency and weapon lack of good build planning tools for the game Elden
damage. Beyond the simple calculations, this project also entailed extracting the item Ring made me embark on this project,
values from the game files. This was done using Python, and the resulting values were 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. converted to JSON files for ease of use with JavaScript.
</p> </p>
</article> </article>
<article> <article>
<b>Implementation of hashing algorithms</b> <b>Implementation of hashing algorithms</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"> <span
<a href="https://crates.io/crates/lore" target="_blank" rel="noopener noreferrer"> style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://crates.io/crates/lore" target="_blank"
rel="noopener noreferrer">
project project
</a> </a>
<a href="https://git.palmoe.dk/vodofrede/lore" target="_blank" rel="noopener noreferrer"> <a href="https://git.palmoe.dk/vodofrede/lore"
target="_blank" rel="noopener noreferrer">
source source
</a> </a>
<a href="https://docs.rs/lore/latest/lore/" target="_blank" rel="noopener noreferrer"> <a href="https://docs.rs/lore/latest/lore/"
target="_blank" rel="noopener noreferrer">
docs docs
</a> </a>
</span> </span>
<p> <p>
With this project I wanted to focus on implementing a simple API that would make it easy to With this project I wanted to focus on implementing a
generate message digests for any data in Rust. I was dissatisfied with the APIs of existing simple API that would make it easy to
packages, and sought reduce the amount of function calls necessary to get a hash value. generate message digests for any data in Rust. I was
Other focuses of this project were well-written documentation and testing. 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> </p>
</article> </article>
<article> <article>
<b>Simple, efficient parsing library</b> <b>Simple, efficient parsing library</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"> <span
<a href="https://crates.io/crates/eyes" target="_blank" rel="noopener noreferrer"> style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://crates.io/crates/eyes" target="_blank"
rel="noopener noreferrer">
project project
</a> </a>
<a href="https://git.palmoe.dk/vodofrede/eyes" target="_blank" rel="noopener noreferrer"> <a href="https://git.palmoe.dk/vodofrede/eyes"
target="_blank" rel="noopener noreferrer">
source source
</a> </a>
<a href="https://docs.rs/eyes/latest/eyes/" target="_blank" rel="noopener noreferrer"> <a href="https://docs.rs/eyes/latest/eyes/"
target="_blank" rel="noopener noreferrer">
docs docs
</a> </a>
</span> </span>
<p> <p>
Many problems in the yearly Many problems in the yearly
<a href="https://adventofcode.com">Advent of Code</a> <a href="https://adventofcode.com">Advent of Code</a>
event consist of parsing some data and transforming afterwards. I wanted to try implementing event consist of parsing some data and transforming
my own simple parser, which parses strings using simple templates and converts the parsing afterwards. I wanted to try implementing
results to specific data types. This was my first go at creating a Rust crate, and I focused my own simple parser, which parses strings using simple
on creating an idiomatic API as well as good documentation so that others might be able to 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. use the crate.
</p> </p>
</article> </article>
<article> <article>
<b>Outdoor IoT LED chain lights</b> <b>Outdoor IoT LED chain lights</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"></span> <span
style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
<p> <p>
A simple internet of things project consisting of a few cheap LED chain lights, a power A simple internet of things project consisting of a few
supply and a WiFi-enabled microcontroller. The project uses existing technologies (Home cheap LED chain lights, a power
Assistant, WLED) to provide a nice-looking and simple interface. supply and a WiFi-enabled microcontroller. The project
uses existing technologies (Home
Assistant, WLED) to provide a nice-looking and simple
interface.
</p> </p>
</article> </article>
<article> <article>
<b>Clones of Galaga and Breakout</b> <b>Clones of Galaga and Breakout</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"> <span
<a href="https://github.com/vodofrede/DIKUGames" target="_blank" rel="noopener noreferrer"> style="display: flex; justify-content: flex-end; gap: 0.5rem">
<a href="https://github.com/vodofrede/DIKUGames"
target="_blank" rel="noopener noreferrer">
source source
</a> </a>
</span> </span>
<p> <p>
As part of the Software Development course at UCPH we created some small games in C\# using As part of the Software Development course at UCPH we
the provided DIKUGames library. This class taught me more efficient development patterns for created some small games in C\# using
OOP, as well as how to delegate work in a group environment in order to maintain development the provided DIKUGames library. This class taught me
speed. As part of this project we were taught basic OOP principles such as SOLID and TDD. 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> </p>
</article> </article>
<article> <article>
<b>Private server</b> <b>Private server</b>
<span style="display: flex; justify-content: flex-end; gap: 0.5rem"></span> <span
style="display: flex; justify-content: flex-end; gap: 0.5rem"></span>
<p> <p>
All of my projects are hosted on my private server, located at my residence. As part of this All of my projects are hosted on my private server,
project I have learned a lot about server administration work, web servers, package managers located at my residence. As part of this
and container architectures. From this I have adequate level of experience with the 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. mentioned technologies.
</p> </p>
</article> </article>
</div> </div>
</section> </section>
<aside class="info"> <aside class="info">
<h3>info</h3> <h3>info</h3>
<img src="/assets/profile.png" width="120" height="120" class="profile" /> <img src="/assets/palmoe.png" width="120" height="120"
class="profile" />
<dl> <dl>
<dt>github</dt> <dt>github</dt>
<dd><a href="https://github.com/vodofrede">vodofrede</a></dd> <dd><a href="https://github.com/vodofrede">vodofrede</a></dd>
<dt>gitea</dt> <dt>gitea</dt>
<dd><a href="https://git.palmoe.dk/vodofrede">vodofrede</a></dd> <dd><a href="https://git.palmoe.dk/vodofrede">vodofrede</a></dd>
</dl> </dl>
</aside> </aside>
</main> </main>
<footer> <footer>
<h5> <h5>
<select id="lang" onchange="setLocale(selected(this).value);" style="font-size: 1.5em"> <select id="lang" onchange="setLocale(selected(this).value);"
style="font-size: 1.5em">
<option value="en-gb">🇬🇧</option> <option value="en-gb">🇬🇧</option>
<option value="da-dk">🇩🇰</option> <option value="da-dk">🇩🇰</option>
</select> </select>
</h5> </h5>
<h5> <h5>
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik Palmø</a> <a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik
Palmø</a>
</h5> </h5>
</footer> </footer>
</body> </body>
</html> </html>