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

overhauled css and structure

Browse source
This commit is contained in:
Frederik Palmø 2024-03-25 22:50:47 +01:00
parent d142a1bc19
commit 9733f9ec84
4 changed files with 179 additions and 452 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

165
src/assets/main.css
View file

@ -1,163 +1,68 @@
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--primary: white; --primary: white;
--secondary: white;
--border: grey;
--font-color: black; --font-color: black;
--font-inverted: white; --font-inverted: white;
--link-color: blue; --link-color: blue;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--primary: #202020; --primary: black;
--secondary: #2b2b2b;
--font-color: white; --font-color: white;
--link-color: tomato; --font-inverted: black;
--link-color: lime;
} }
} }
html { *, *::before, *::after {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
background-color: var(--primary);
box-sizing: border-box; box-sizing: border-box;
}
* {
color: var(--font-color); color: var(--font-color);
box-sizing: inherit; margin: 0;
margin: 0px; padding: 0;
padding: 0px; }
html, body {
font-family: Bahnschrift, sans-serif-condensed, sans-serif;
background-color: var(--primary);
width: 100%;
height: 100%;
} }
body { h1, h2, h3, h4, h5, h6 {
display: flex;
flex-direction: column;
height: 100vh;
}
body > * {
padding: 0 4vw;
}
header {
text-align: center;
}
main {
display: flex;
flex-flow: row;
justify-content: center;
}
@media only screen and (max-width: 600px) {
main {
flex-flow: row wrap-reverse
}
}
article {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
article > * {
min-width: 15%;
max-width: 100%;
flex-grow: 1;
}
hr {
color: var(--border);
margin-top: 0.12rem;
margin-bottom: 0.3rem;
}
nav,
footer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
nav > *,
footer > * {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
footer {
margin-top: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1rem;
margin-bottom: 1.2rem;
overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.1; width: fit-content;
font-weight: bold;
}
p {
margin-top: 0rem;
margin-bottom: 1rem;
} }
a { a {
padding-right: 0px; display: inline-block;
font-family: monospace;
text-decoration: underline solid var(--link-color) 10%; text-decoration: underline solid var(--link-color) 10%;
text-underline-offset: 3.8px; text-underline-offset: 4px;
} }
a:hover { a:hover {
background-color: var(--link-color); background-color: var(--link-color);
color: var(--font-inverted); color: var(--font-inverted);
} }
dl { .column {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 0.2rem 1rem;
}
dt {
font-size: 0.9rem;
font-weight: bold;
}
dd {
font-size: 0.9rem;
}
.profile {
width: 50%;
height: auto;
margin-bottom: 1rem;
border-radius: 10px;
}
.articles {
display: flex; display: flex;
flex-flow: column nowrap; flex-direction: column;
max-width: 700px;
} }
.row {
.info {
min-width: 25%;
display: flex; display: flex;
flex-flow: column nowrap; flex-direction: row;
align-items: center; }
.center {
justify-content: center;
gap: 5px;
}
.separate {
justify-content: space-between;
align-content: space-between;
gap: 5px;
}
.wrap {
flex-wrap: wrap;
}
.nowrap {
flex-wrap: nowrap;
} }

230
src/en/index.html
View file

@ -1,182 +1,94 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="da-dk">
<head> <head>
<!-- metadata --> <title>Frederik Palmø</title>
<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" />
<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="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" />
</head> </head>
<body> <body class="column separate" style="padding: 2%; gap: 15px">
<header> <header class="row center">
<h1><a href="/">Frederik Palmø</a></h1> <h1><a href="/">Frederik Palmø</a></h1>
</header> </header>
<main> <main class="row center" style="flex-wrap: wrap-reverse">
<section class="articles"> <section class="column" style="max-width: 700px; gap: 15px; width: 100%;">
<h2 lang="da-dk">Projects</h2> <h2>Projects</h2>
<div lang="en-gb"> <article class="column separate">
<article> <div class="row separate wrap">
<b>Tools for planning game characters</b> <h3>Character planner</h3>
<span <span class="row separate">
style="display: flex; justify-content: flex-end; gap: 0.5rem"> <a href="https://erdtree.palmoe.dk">projekt</a>
<a href="https://erdtree.palmoe.dk" target="_blank" <a href="https://git.palmoe.dk/vodofrede/erdtree">kildekode</a>
rel="noopener noreferrer">project</a>
<a href="https://git.palmoe.dk/vodofrede/erdtree"
target="_blank" rel="noopener noreferrer">
source
</a>
</span> </span>
<p> </div>
This project makes use of fundamental web technologies <p>This project utilizes fundamental web technologies such as HTML, CSS, and JavaScript. The purpose was to make it easier to plan a character for the game Elden Ring. Game data for the website was scraped into JSON format by a homemade Python script.</p>
such as HTML, CSS and JavaScript. The </article>
lack of good build planning tools for the game Elden <article class="column separate">
Ring made me embark on this project, <div class="row separate wrap">
which consists of simple calculators for characters <h3>Hashing library</h3>
statistics, armor efficiency and weapon <span class="row separate">
damage. Beyond the simple calculations, this project <a href="https://crates.io/crates/lore">projekt</a>
also entailed extracting the item <a href="https://git.palmoe.dk/vodofrede/lore">kildekode</a>
values from the game files. This was done using Python, <a href="https://docs.rs/lore/latest/lore/">dokumentation</a>
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> </span>
<p> </div>
With this project I wanted to focus on implementing a <p>The purpose of this project was the implementation of a simple API for generating hashes. The project utilizes unit testing to ensure that the output is correct. A part of the exercise for me was also writing good documentation, making it easy for a new user to get started with using the package.</p>
simple API that would make it easy to </article>
generate message digests for any data in Rust. I was <article class="column separate">
dissatisfied with the APIs of existing <div class="row separate wrap">
packages, and sought reduce the amount of function calls <h3>Leetcode input parser</h3>
necessary to get a hash value. <span class="row separate">
Other focuses of this project were well-written <a href="https://crates.io/crates/eyes">projekt</a>
documentation and testing. <a href="https://git.palmoe.dk/vodofrede/eyes">kildekode</a>
</p> <a href="https://docs.rs/eyes/latest/eyes/">dokumentation</a>
</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> </span>
<p> </div>
Many problems in the yearly <p>During the annual <a href="https://adventofcode.com">Advent of Code</a> event, solutions typically begin by reading input data and transforming it into a data structure that can be worked on. This library consists of a rudimentary parser that can transform its output into specific data types. This makes it easy to understand input with just a few lines of code.</p>
<a href="https://adventofcode.com">Advent of Code</a> </article>
event consist of parsing some data and transforming <article class="column separate">
afterwards. I wanted to try implementing <div class="row separate wrap">
my own simple parser, which parses strings using simple <h3>Controllable string lights</h3>
templates and converts the parsing <span class="row separate"></span>
results to specific data types. This was my first go at </div>
creating a Rust crate, and I focused <p>This project involved a solution for having outdoor string lights for use in a covered lounge area. The project utilizes inexpensive, "dumb" string lights along with a microcontroller that provides a control interface accessible over the home network (for platforms like Apple HomeKit and Home-Assistant). Through this project, I have learned about IoT protocols and programming microcontrollers.</p>
on creating an idiomatic API as well as good </article>
documentation so that others might be able to <article class="column separate">
use the crate. <div class="row separate wrap">
</p> <h3>Clones of Galaga og Breakout</h3>
</article> <span class="row separate">
<article> <a href="https://github.com/vodofrede/DIKUGames">kildekode</a>
<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> </span>
<p> </div>
As part of the Software Development course at UCPH we <p>This project was part of the Software Development course at UCPH. In this project, I collaborated with two others as part of my study group. The project is implemented in C# and utilizes various object-oriented programming (OOP) and general software development principles (SOLID, testing, diagramming, and architectural planning).</p>
created some small games in C\# using </article>
the provided DIKUGames library. This class taught me <article class="column separate">
more efficient development patterns for <div class="row separate wrap">
OOP, as well as how to delegate work in a group <h3>Server</h3>
environment in order to maintain development <span class="row separate"></span>
speed. As part of this project we were taught basic OOP </div>
principles such as SOLID and TDD. <p>From my home server, I manage all my projects. This involves using Linux and containers. From here, I have experience in taking a project from a pile of code to a finished product on a website.</p>
</p> </article>
</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="column" style="align-items: center; min-width: 25%; gap: 15px">
<h3>info</h3> <img src="/assets/palmoe.png" style="width: 50%; height: auto; border-radius: 10px" alt="palmoe.dk logo" />
<img src="/assets/palmoe.png" width="120" height="120"
class="profile" />
<dl> <dl>
<dt>github</dt> <div class="row separate">
<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> </div>
<div class="row separate" style="gap: 20px">
<dt>GitHub</dt>
<dd><a href="https://github.com/vodofrede">vodofrede</a></dd>
</div>
</dl> </dl>
</aside> </aside>
</main> </main>
<footer> <footer class="row separate">
<h5> <a href="/en">English</a>
<a href="/">Dansk</a> <a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik Palmø</a>
</h5>
<h5>
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik
Palmø</a>
</h5>
</footer> </footer>
</body> </body>

232
src/index.html
View file

@ -1,184 +1,94 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="da-dk">
<head> <head>
<!-- metadata --> <title>Frederik Palmø</title>
<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" />
<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="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>
</head> </head>
<body onload="localize();" lang="en-gb" class="no-localize"> <body class="column separate" style="padding: 2%; gap: 15px">
<header> <header class="row center">
<h1><a href="/">Frederik Palmø</a></h1> <h1><a href="/">Frederik Palmø</a></h1>
</header> </header>
<main> <main class="row center" style="flex-wrap: wrap-reverse">
<section style="flex-grow: 1" class="articles"> <section class="column" style="max-width: 700px; gap: 15px; width: 100%;">
<h2 lang="da-dk">Projekter</h2> <h2>Projekter</h2>
<div lang="da-dk"> <article class="column separate">
<article> <div class="row separate wrap">
<b>Redskaber til planlægning af spilkarakterer</b> <h3>Spilkarakter-planlægger</h3>
<span <span class="row separate">
style="display: flex; justify-content: flex-end; gap: 0.5rem"> <a href="https://erdtree.palmoe.dk">projekt</a>
<a href="https://erdtree.palmoe.dk" target="_blank" <a href="https://git.palmoe.dk/vodofrede/erdtree">kildekode</a>
rel="noopener noreferrer">projekt</a>
<a href="https://git.palmoe.dk/vodofrede/erdtree"
target="_blank" rel="noopener noreferrer">
kildekode
</a>
</span> </span>
<p> </div>
Dette projekt gør brug af grundlæggende webteknologier <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. Spil-data til hjemmesiden blev skrabet til JSON-format af et hjemmelavet Python-script. </p>
såsom HTML, CSS og JavaScript. </article>
Formålet var at gøre det nemmere at planlægge en <article class="column separate">
karakter til spillet Elden Ring. Til <div class="row separate wrap">
udvindelse af data blev der gjort brug af et <h3>Hashing-bibliotek</h3>
python-script som konverterede data fra spillet <span class="row separate">
til JSON-format. <a href="https://crates.io/crates/lore">projekt</a>
</p> <a href="https://git.palmoe.dk/vodofrede/lore">kildekode</a>
</article> <a href="https://docs.rs/lore/latest/lore/">dokumentation</a>
<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> </span>
<p> </div>
Formålet med dette projekt var implementeringen af en <p>Formålet med dette projekt var implementeringen af en simpel API til at generere hashes. Projektet 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 ny bruger.</p>
simpel API til at generere </article>
hashbeskeder ud fra vilkårlig inputdata. Projektet er <article class="column separate">
udformet som en Rust-pakke, og gør <div class="row separate wrap">
brug af unit-testing for at sikre at outputtet er <h3>Leetcode input parser</h3>
korrekt. En del af øvelsen for mig var <span class="row separate">
også at skrive god dokumentering, så at det var nemt at <a href="https://crates.io/crates/eyes">projekt</a>
komme i gang med at anvende pakken <a href="https://git.palmoe.dk/vodofrede/eyes">kildekode</a>
for en ikke-erfaren bruger. <a href="https://docs.rs/eyes/latest/eyes/">dokumentation</a>
</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> </span>
<p> </div>
Mange opgaver i det årlige <p>During the annual <a href="https://adventofcode.com">Advent of Code</a> event, solutions typically begin by reading input data and transforming it into a data structure that can be worked on. This library consists of a rudimentary parser that can transform its output into specific data types. This makes it easy to understand input with just a few lines of code.</p>
<a href="https://adventofcode.com" target="_blank" </article>
rel="noopener noreferrer"> <article class="column separate">
Advent of Code <div class="row separate wrap">
</a> <h3>Justerbar lyskæde</h3>
event består af at parse noget data og transfomere det <span class="row separate"></span>
til en ønsket output. Denne crate </div>
består af en rudimentær parser som kan transformere sit <p>Dette projekt omhandlede en løsning til at have udendørs lyskæder til brug i et overdækket sofaområde. Projektet gør brug af billige, "dumme" lyskæder samt en microcontroller som gør en kontrolflade tilgængelig over hjemmenetværket (til bl.a. Apple HomeKit og Home-Assistant). Gennem dette projekt har jeg lært om IoT-protokoller og programmering af microcontrollere.</p>
output til specifikke datatyper. </article>
Dette gør det nemt at parse input med kun ét macro-kald, <article class="column separate">
hvilket simplificerer mine <div class="row separate wrap">
opgaveløsninger markant. <h3>Spilkloner af Galaga og Breakout</h3>
</p> <span class="row separate">
</article> <a href="https://github.com/vodofrede/DIKUGames">kildekode</a>
<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> </span>
<p> </div>
Dette projekt var en del af kurset Softwareudvikling, <p>Projektet var en del af kurset Softwareudvikling på KU. 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 OOP- og generelle softwareudviklingsprincipper (SOLID, testing, diagrammering og arkitekturplanlægning).</p>
som løb i forårssemesteret 2022. I </article>
dette projekt har jeg arbejdet sammen med to andre som <article class="column separate">
en del af min studiegruppe. Projektet <div class="row separate wrap">
er udført i C\# og gør brug af mange forskellige <h3>Server</h3>
softwareudviklingsprincipper (SOLID, <span class="row separate"></span>
testing, diagrammering og arkitekturplanlægning). </div>
</p> <p>Fra min hjemmeserver styrer jeg alle mine projekter. Dette involverer brug af Linux og containers. Herfra har jeg erfaring med hvad det vil sige at tage et projekt fra en bunke kode til et færdigt produkt på en hjemmeside.</p>
</article> </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>
</section> </section>
<aside class="info"> <aside class="column" style="align-items: center; min-width: 25%; gap: 15px">
<h3>info</h3> <img src="/assets/palmoe.png" style="width: 50%; height: auto; border-radius: 10px" alt="palmoe.dk logo" />
<img src="/assets/palmoe.png" width="120" height="120"
class="profile" />
<dl> <dl>
<dt>github</dt> <div class="row separate">
<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> </div>
<div class="row separate" style="gap: 20px">
<dt>GitHub</dt>
<dd><a href="https://github.com/vodofrede">vodofrede</a></dd>
</div>
</dl> </dl>
</aside> </aside>
</main> </main>
<footer> <footer class="row separate">
<h5> <a href="/en">English</a>
<a href="/en">English</a> <a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik Palmø</a>
</h5>
<h5>
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik
Palmø</a>
</h5>
</footer> </footer>
</body> </body>

4
src/sitemap.xml
View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url>
<loc>http://palmoe.dk/</loc> <loc>https://palmoe.dk/</loc>
<lastmod>2022-18-11</lastmod> <lastmod>2024-25-03</lastmod>
</url> </url>
</urlset> </urlset>