From 9733f9ec848f85bfdb051a81f1f4bd2a90efb738 Mon Sep 17 00:00:00 2001 From: vodofrede Date: Mon, 25 Mar 2024 22:50:47 +0100 Subject: [PATCH] overhauled css and structure --- src/assets/main.css | 165 +++++++------------------------ src/en/index.html | 230 ++++++++++++++----------------------------- src/index.html | 232 ++++++++++++++------------------------------ src/sitemap.xml | 4 +- 4 files changed, 179 insertions(+), 452 deletions(-) diff --git a/src/assets/main.css b/src/assets/main.css index 8db985c..c7eb0b5 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -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; } \ No newline at end of file diff --git a/src/en/index.html b/src/en/index.html index edf63e3..93f276d 100644 --- a/src/en/index.html +++ b/src/en/index.html @@ -1,182 +1,94 @@ - + - + Frederik Palmø - Home | Frederik Palmø - - - - - - - -
+ +

Frederik Palmø

-
-
-

Projects

-
-
- Tools for planning game characters - - project - - source - +
+
+

Projects

+
+
+

Character planner

+ + projekt + kildekode -

- 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. -

-
-
+

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.

+ +
+
+

Hashing library

+ + projekt + kildekode + dokumentation -

- 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. -

-
-
- Simple, efficient parsing library - - - project - - - source - - - docs - + +

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.

+
+
+
+

Leetcode input parser

+ + projekt + kildekode + dokumentation -

- Many problems in the yearly - Advent of Code - 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. -

-
-
- Outdoor IoT LED chain lights - -

- 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. -

-
-
- Clones of Galaga and Breakout - - - source - + +

During the annual Advent of Code 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.

+
+
+
+

Controllable string lights

+ +
+

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.

+
+
+
+

Clones of Galaga og Breakout

+ + kildekode -

- 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. -

-
-
- Private server - -

- 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. -

-
- + +

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).

+ +
+
+

Server

+ +
+

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.

+
-
-