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) {
:root {
--primary: white;
--secondary: white;
--border: grey;
--font-color: black;
--font-inverted: white;
--link-color: blue;
}
}
@media (prefers-color-scheme: dark) {
:root {
--primary: #202020;
--secondary: #2b2b2b;
--primary: black;
--font-color: white;
--link-color: tomato;
--font-inverted: black;
--link-color: lime;
}
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
background-color: var(--primary);
*, *::before, *::after {
box-sizing: border-box;
}
* {
color: var(--font-color);
box-sizing: inherit;
margin: 0px;
padding: 0px;
margin: 0;
padding: 0;
}
html, body {
font-family: Bahnschrift, sans-serif-condensed, sans-serif;
background-color: var(--primary);
width: 100%;
height: 100%;
}
body {
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;
h1, h2, h3, h4, h5, h6 {
word-wrap: break-word;
line-height: 1.1;
font-weight: bold;
}
p {
margin-top: 0rem;
margin-bottom: 1rem;
width: fit-content;
}
a {
padding-right: 0px;
font-family: monospace;
display: inline-block;
text-decoration: underline solid var(--link-color) 10%;
text-underline-offset: 3.8px;
text-underline-offset: 4px;
}
a:hover {
background-color: var(--link-color);
color: var(--font-inverted);
}
dl {
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 {
.column {
display: flex;
flex-flow: column nowrap;
max-width: 700px;
flex-direction: column;
}
.info {
min-width: 25%;
.row {
display: flex;
flex-flow: column nowrap;
align-items: center;
flex-direction: row;
}
.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>
<html>
<html lang="da-dk">
<head>
<!-- metadata -->
<title>Frederik Palmø</title>
<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>
<body class="column separate" style="padding: 2%; gap: 15px">
<header class="row center">
<h1><a href="/">Frederik Palmø</a></h1>
</header>
<main>
<section class="articles">
<h2 lang="da-dk">Projects</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>
<main class="row center" style="flex-wrap: wrap-reverse">
<section class="column" style="max-width: 700px; gap: 15px; width: 100%;">
<h2>Projects</h2>
<article class="column separate">
<div class="row separate wrap">
<h3>Character planner</h3>
<span class="row separate">
<a href="https://erdtree.palmoe.dk">projekt</a>
<a href="https://git.palmoe.dk/vodofrede/erdtree">kildekode</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>
</div>
<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>
</article>
<article class="column separate">
<div class="row separate wrap">
<h3>Hashing library</h3>
<span class="row separate">
<a href="https://crates.io/crates/lore">projekt</a>
<a href="https://git.palmoe.dk/vodofrede/lore">kildekode</a>
<a href="https://docs.rs/lore/latest/lore/">dokumentation</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>
</div>
<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>
</article>
<article class="column separate">
<div class="row separate wrap">
<h3>Leetcode input parser</h3>
<span class="row separate">
<a href="https://crates.io/crates/eyes">projekt</a>
<a href="https://git.palmoe.dk/vodofrede/eyes">kildekode</a>
<a href="https://docs.rs/eyes/latest/eyes/">dokumentation</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>
</div>
<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>
</article>
<article class="column separate">
<div class="row separate wrap">
<h3>Controllable string lights</h3>
<span class="row separate"></span>
</div>
<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>
</article>
<article class="column separate">
<div class="row separate wrap">
<h3>Clones of Galaga og Breakout</h3>
<span class="row separate">
<a href="https://github.com/vodofrede/DIKUGames">kildekode</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>
</div>
<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>
</article>
<article class="column separate">
<div class="row separate wrap">
<h3>Server</h3>
<span class="row separate"></span>
</div>
<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>
</article>
</section>
<aside class="info">
<h3>info</h3>
<img src="/assets/palmoe.png" width="120" height="120"
class="profile" />
<aside class="column" style="align-items: center; min-width: 25%; gap: 15px">
<img src="/assets/palmoe.png" style="width: 50%; height: auto; border-radius: 10px" alt="palmoe.dk logo" />
<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>
<div class="row separate">
<dt>Gitea</dt>
<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>
</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 class="row separate">
<a href="/en">English</a>
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik Palmø</a>
</footer>
</body>

232
src/index.html
View file

@ -1,184 +1,94 @@
<!DOCTYPE html>
<html>
<html lang="da-dk">
<head>
<!-- metadata -->
<title>Frederik Palmø</title>
<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>
<body class="column separate" style="padding: 2%; gap: 15px">
<header class="row center">
<h1><a href="/">Frederik Palmø</a></h1>
</header>
<main>
<section style="flex-grow: 1" class="articles">
<h2 lang="da-dk">Projekter</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>
<main class="row center" style="flex-wrap: wrap-reverse">
<section class="column" style="max-width: 700px; gap: 15px; width: 100%;">
<h2>Projekter</h2>
<article class="column separate">
<div class="row separate wrap">
<h3>Spilkarakter-planlægger</h3>
<span class="row separate">
<a href="https://erdtree.palmoe.dk">projekt</a>
<a href="https://git.palmoe.dk/vodofrede/erdtree">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>
</div>
<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>
</article>
<article class="column separate">
<div class="row separate wrap">
<h3>Hashing-bibliotek</h3>
<span class="row separate">
<a href="https://crates.io/crates/lore">projekt</a>
<a href="https://git.palmoe.dk/vodofrede/lore">kildekode</a>
<a href="https://docs.rs/lore/latest/lore/">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>
</div>
<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>
</article>
<article class="column separate">
<div class="row separate wrap">
<h3>Leetcode input parser</h3>
<span class="row separate">
<a href="https://crates.io/crates/eyes">projekt</a>
<a href="https://git.palmoe.dk/vodofrede/eyes">kildekode</a>
<a href="https://docs.rs/eyes/latest/eyes/">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>
</div>
<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>
</article>
<article class="column separate">
<div class="row separate wrap">
<h3>Justerbar lyskæde</h3>
<span class="row separate"></span>
</div>
<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>
</article>
<article class="column separate">
<div class="row separate wrap">
<h3>Spilkloner af Galaga og Breakout</h3>
<span class="row separate">
<a href="https://github.com/vodofrede/DIKUGames">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>
<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>
</article>
<article class="column separate">
<div class="row separate wrap">
<h3>Server</h3>
<span class="row separate"></span>
</div>
<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>
</section>
<aside class="info">
<h3>info</h3>
<img src="/assets/palmoe.png" width="120" height="120"
class="profile" />
<aside class="column" style="align-items: center; min-width: 25%; gap: 15px">
<img src="/assets/palmoe.png" style="width: 50%; height: auto; border-radius: 10px" alt="palmoe.dk logo" />
<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>
<div class="row separate">
<dt>Gitea</dt>
<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>
</aside>
</main>
<footer>
<h5>
<a href="/en">English</a>
</h5>
<h5>
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik
Palmø</a>
</h5>
<footer class="row separate">
<a href="/en">English</a>
<a href="https://git.palmoe.dk/vodofrede/palmoe.dk">© 2022 Frederik Palmø</a>
</footer>
</body>

4
src/sitemap.xml
View file

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