marvinelsen/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add actual website files

Browse Source
This commit is contained in:
Marvin Elsen 2024-08-31 20:53:06 +02:00
parent 4a55eade96
commit a3c5b3fbcc
Signed by: marvinelsen
GPG Key ID: 820672408CC318C2
22 changed files with 971 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.DS_Store

42
.htaccess Normal file
View File

@ -0,0 +1,42 @@
# Activate gzip compression of text
mod_gzip_on Yes
# Set HTTP Strict Transport Security (HSTS) header and optimize for preload list (https://hstspreload.org) (63072000 seconds = 2 years)
Header set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
Header set X-Content-Type-Options "nosniff"
Header set X-XSS-Protection "1; mode=block"
Header append X-Frame-Options "SAMEORIGIN"
Header unset X-Powered-By
Header unset Server
Header set Content-Security-Policy: "object-src 'none'; script-src 'self' 'unsafe-inline'; font-src 'self'; manifest-src 'self'; connect-src 'self'; style-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'"
Header set Permissions-Policy "accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), usb=()"
Header set Referrer-Policy "no-referrer"
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg
# Create file hashes based on the modification time and size.
# If the modification time or size of the file changes
# the existing cache is invalidated on the user's web browser
FileETag MTime Size
# Configure expiry periods
ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/x-icon "access plus 1 months"
ExpiresByType application/vnd.ms-fontobject "access plus 1 years"
ExpiresByType application/x-font-ttf "access plus 1 years"
ExpiresByType application/x-font-opentype "access plus 1 years"
ExpiresByType application/x-font-woff "access plus 1 years"
ExpiresByType application/x-font-woff2 "access plus 1 years"
ExpiresByType image/svg+xml "access plus 1 years"

10
README.md
View File

@ -2,3 +2,13 @@
This is the repository of my personal website hosted over at
[marvinelsen.com](https://marvinelsen.com).
## License
### Fonts
Fonts are copyright of their respective authors.
- Noto Sans TC: (c) 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'. [SIL Open Font License, 1.1](http://scripts.sil.org/OFL)
- Atkinson Hyperlegible: Copyright 2020 Braille Institute of America, Inc. [SIL Open Font License, 1.1](http://scripts.sil.org/OFL)
- Noto Color Emoji: Copyright 2021 Google Inc. All Rights Reserved. [SIL Open Font License, 1.1](http://scripts.sil.org/OFL)

24
css/colors-dark.css Normal file
View File

@ -0,0 +1,24 @@
:root {
--catppuccin-latte-base: hsl(220deg, 23%, 95%);
--catppuccin-latte-text: hsl(234deg, 16%, 35%);
--catppuccin-latte-blue: hsl(220deg, 91%, 54%);
--catppuccin-latte-lavender: hsl(231deg, 97%, 72%);
--catppuccin-latte-sky: hsl(197deg, 97%, 46%);
--catppuccin-latte-teal: hsl(183deg, 74%, 35%);
--catppuccin-latte-crust: hsl(220deg, 21%, 89%);
--catppuccin-latte-surface-0: hsl(223deg, 16%, 83%);
--catppuccin-latte-surface-1: hsl(225deg, 14%, 77%);
--catppuccin-latte-surface-2: hsl(227deg, 12%, 71%);
--blue: #3B87F8;
--dark-green: hsl(160, 80%, 30%);
--green: hsl(160, 25%, 90%);
--black: black;
--white: white;
--foreground: #ffffff;
--background: #000000;
--dl-background: #000000;
--dt-background: #222;
--dt-foreground: #ffffff;
--dl-border-color: #ffffff;
--table-highlight: #333;
}

24
css/colors-light.css Normal file
View File

@ -0,0 +1,24 @@
:root {
--catppuccin-latte-base: hsl(220deg, 23%, 95%);
--catppuccin-latte-text: hsl(234deg, 16%, 35%);
--catppuccin-latte-blue: hsl(220deg, 91%, 54%);
--catppuccin-latte-lavender: hsl(231deg, 97%, 72%);
--catppuccin-latte-sky: hsl(197deg, 97%, 46%);
--catppuccin-latte-teal: hsl(183deg, 74%, 35%);
--catppuccin-latte-crust: hsl(220deg, 21%, 89%);
--catppuccin-latte-surface-0: hsl(223deg, 16%, 83%);
--catppuccin-latte-surface-1: hsl(225deg, 14%, 77%);
--catppuccin-latte-surface-2: hsl(227deg, 12%, 71%);
--blue: #006DD8;
--dark-green: hsl(160, 80%, 30%);
--green: hsl(160, 25%, 90%);
--black: black;
--white: white;
--foreground: #000000;
--background: #ffffff;
--dl-background: #ffffff;
--dt-background: #eee;
--dt-foreground: #ffffff;
--dl-border-color: #000000;
--table-highlight: #ddd;
}

45
css/description-list.css Normal file
View File

@ -0,0 +1,45 @@
dl {
font-style: normal;
background-color: var(--dl-background);
margin: 0;
}
dt {
font-weight: 700;
font-size: 1em;
padding: 4px 8px;
color: var(--foreground);
background-color: var(--dt-background);
border: 1px solid var(--dl-border-color);
&:first-of-type {
border-radius: 0px 0px 0px 0px;
}
}
dd {
margin: 0;
padding: 8px;
border: 1px solid var(--dl-border-color);
border-top: none;
border-bottom: none;
&:last-of-type {
border-radius: 0px 0px 0px 0px;
border-bottom: 1px solid var(--dl-border-color);
}
ul {
display: inline;
list-style: none;
padding: 0;
li {
display: inline;
&:not(:last-child):after {
content: ", ";
}
}
}
}

31
css/fonts.css Normal file
View File

@ -0,0 +1,31 @@
@font-face {
font-display: swap;
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 400;
src: url('fonts/atkinson-hyperlegible-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Atkinson Hyperlegible';
font-style: italic;
font-weight: 400;
src: url('fonts/atkinson-hyperlegible-italic.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 700;
src: url('fonts/atkinson-hyperlegible-700.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Atkinson Hyperlegible';
font-style: italic;
font-weight: 700;
src: url('fonts/atkinson-hyperlegible-700italic.woff2') format('woff2');
}

20
css/links.css Normal file
View File

@ -0,0 +1,20 @@
a {
transition: color 300ms;
text-decoration: none;
/* LVHA-order */
&:link {
color: var(--blue);
}
&:visited {
color: var(--blue);
}
&:hover {
color: var(--blue);
}
&:active {
}
}

93
css/styles.css Normal file
View File

@ -0,0 +1,93 @@
@import "colors-light.css";
@import "colors-dark.css" (prefers-color-scheme: dark);
@import "table.css";
@import "description-list.css";
@import "links.css";
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
scrollbar-color: var(--blue) var(--background);
}
::selection {
color: var(--background);
background-color: var(--foreground);
}
body {
font-family: "Atkinson Hyperlegible", sans-serif;
color: var(--foreground);
background-color: var(--background);
/* background-image: url(img/grid.jpg);*/
/*background-position: 10px 10px;*/
background-repeat: repeat;
margin: 10px;
}
#wrapper {
padding: 16px;
width: 65ch;
margin: 0 auto;
}
#banner {
text-align: left;
}
.vr {
border-left:2px solid var(--foreground);
margin: 8px
}
nav {
ul {
padding-left: 0;
list-style-position: inside;
list-style-type: cjk-heavenly-stem;
}
}
p {
line-height: 1.5em;
}
address {
display: inline;
font-style: normal;
}
h2 a:link {
color: var(--black);
}
h2 a:visited {
color: var(--catppuccin-latte-text);
}
h2 a:hover {
color: var(--catppuccin-latte-sky);
}
h2 a::after {
content: "¶";
visibility: hidden;
opacity: 0;
transition: opacity 0s ease 0.1s;
margin-left: 8px;
}
h2 a:hover::after {
visibility: visible;
opacity: 0.5;
}
footer {
padding-top: 1em;
padding-bottom: 1em;
}

65
css/table.css Normal file
View File

@ -0,0 +1,65 @@
table {
border: 1px solid var(--foreground);
border-collapse: collapse;
max-width: 100%;
width: 100%;
margin: 0 auto;
table-layout: fixed;
thead {
position: sticky;
top: 0;
background: var(--foreground);
color: var(--background);
text-align: start;
}
tbody {
tr {
background-color: var(--background);
border-bottom: 1px solid var(--foreground);
transition: background-color 125ms;
&:nth-child(even) {
background-color: var(--dt-background);
}
&:hover {
background-color: var(--table-highlight);
}
}
}
th,
td {
padding: 6px 12px;
text-align: start;
}
td {
ul {
padding: 0;
margin: 0;
li {
display: inline;
&:not(last-child)::after {
content: ", ";
}
&:last-child::after {
content: "";
}
}
}
p {
margin: 0;
}
}
caption {
caption-side: bottom;
}
}

BIN
favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 674 B

BIN
favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

18
favicon.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<path style="fill:#757E40;" d="M55.88,32.41c0,0-38.48,10.7-41.48,14.83S6.23,59.02,5.76,75.4c-0.38,13.14,6.95,46.93,42.98,48.05
c36.79,1.15,50.49-23.09,57.06-38.1c5.92-13.54,5.82-29.09,9.57-36.23s7.13-13.33,6.95-21.4s-3.19-15.02-8.45-18.4
c-5.26-3.38-9.76-2.82-12.01-3.38C99.61,5.38,55.88,32.41,55.88,32.41z"/>
<path style="fill:#AFB42A;" d="M62.63,18.9c-15.96,6.57-37.17,12.76-47.3,27.03C6.18,58.81,3.13,74.83,15.52,93.6
c11.31,17.14,41.46,24.45,64.01,8.26c20.65-14.83,22.52-36.6,28.72-51.06s19.24-33.46,3.57-42.8C95.11-1.94,75.24,13.71,62.63,18.9z
"/>
<path style="fill:#FFF69D;" d="M108.25,12.14c-7.59-4.38-17.27-2.44-27.97,2.82s-18.96,9.2-22.71,10.51
C53.81,26.78,21.87,38.48,15.71,54c-5.07,12.76-3.75,29.47,9.57,41.67s46.93,11.45,59.88-6.95s13.51-33.22,16.33-39.79
s8.96-16.19,10.7-21.4C114.25,21.34,113.13,14.96,108.25,12.14z"/>
<path style="fill:#855C52;" d="M71.45,47.8c-6.01-7.13-28.91-4.88-36.79,6.38s-4.6,20.41-0.75,25.34
c4.69,6.01,17.46,11.45,29.09,3.38S78.04,55.62,71.45,47.8z"/>
<path style="fill:#D67659;" d="M47.32,60.62c-2.96,4.34-1.48,11.34-6.57,11.67s-8.05-7.84-4.44-14.68
c3.9-7.38,13.14-10.67,15.77-7.17C54.72,53.95,50.13,56.5,47.32,60.62z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
fonts/atkinson-hyperlegible-700.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/atkinson-hyperlegible-700italic.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/atkinson-hyperlegible-italic.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/atkinson-hyperlegible-regular.woff2 Normal file
View File

Binary file not shown.

167
index.html Normal file
View File

@ -0,0 +1,167 @@
<!doctype html>
<!-- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype -->
<!-- https://html.spec.whatwg.org/multipage/dom.html#attr-lang -->
<!-- https://www.rfc-editor.org/info/bcp47 -->
<html lang='en-US'>
<header>
<!-- Metadata
<meta> is a void element and its starting tag should not end with a /-character
Correct: <meta charset='utf-8'>
Wrong: <meta charset='utf-8'/>
See: https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element
See: https://html.spec.whatwg.org/multipage/syntax.html#syntax-start-tag
See: https://html.spec.whatwg.org/multipage/syntax.html#void-elements
-->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta name='author' content='Marvin Elsen'>
<meta name='description' content='Marvin Elsen’s virtual space on the world wide web.'>
<meta name='keywords' content='marvin elsen,marvin,elsen'>
<meta name='referrer' content='no-referrer'>
<meta name='robots' content='index,follow'>
<meta name='color-scheme' content='light dark'>
<meta name='theme-color' content='rgb(0, 130, 255)' media='(prefers-color-scheme: light)'>
<meta name='theme-color' content='rgb(0, 130, 255)' media='(prefers-color-scheme: dark)'>
<link href='/css/styles.css' rel='stylesheet'>
<title>Marvin Elsen’s Website</title>
</header>
<body>
<div id='wrapper'>
<header id='banner'>
<h1>Marvin Elsen’s Web Space</h1>
</header>
<nav>
<header>
<h2>Navigation<span class='vr'></span><span class='chinese' lang='zh-TW'>目錄</span><h2>
</header>
<ul>
<li><a href='#about'>About</a></li>
<li><a href='#contact'>Contact</a></li>
<li><a href='#skills'>Skills</a></li>
<li><a href='https://gitea.marvinelsen.com/marvinelsen/'>Projects</a></li>
<li><a href='/now'>Now</a></li>
<li><a href='/uses'>Uses</a></li>
</ul>
</nav>
<main>
<article>
<section id='about'>
<header>
<h2>About<span class='vr'></span><span class='chinese' lang='zh-TW'>關於我</span></h2>
<p>Welcome to my corner of the web! I’m Marvin Elsen, also known as <span class='chinese' lang='zh-TW'>柳博慎</span> in Chinese. I’m a German software developer in my late twenties, currently residing in the vibrant city of <a href='https://www.duesseldorf.de'>Düsseldorf</a>. I hold a bachelor’s degree in computer science, from which I graduated with distinction.</p>
<p>I’m driven by the excitement of solving complex puzzles in software development, fueled by a lifelong passion for programming. My curiosity for understanding how things work beneath the surface leads me to constantly tinker and explore. As a quick learner, I eagerly embrace new technologies, finding great satisfaction in crafting elegant and sophisticated solutions to challenging problems.</p>
<p>Currently, I work full-time as a backend developer at <a href='https://company.rtl.com/en/business-units/overview/rtl-deutschland/'>RTL Deutschland</a>, Germany’s leading entertainment company, where I contribute to the development of <a href='https://plus.rtl.de'>RTL+</a>, Germany’s largest streaming service, using Kotlin and Spring.</p>
<p>Outside of work, my greatest passion is studying the Chinese language and immersing myself in Chinese culture and history. I also enjoy reading Chinese literature, particularly classics like <span class='chinese' lang='zh-TW'>唐傳奇</span> and <span class='chinese' lang='zh-TW'>聊齋誌異</span>. In the past, I spent two years living in Taiwan studying Chinese full-time at the prestigious <a href='https://mtc.ntnu.edu.tw/eng/'><abbr title='National Taiwan Normal University'>NTNU</abbr> <abbr title='Mandarin Training Center'>MTC</abbr></a>, where I achieved the <a href='https://www.coe.int/en/web/common-european-framework-reference-languages/level-descriptions'><abbr title='Common European Framework of Reference for Languages'>CEFR</abbr> C1 level</a> on the official <a href='https://tocfl.edu.tw'><abbr title='Test of Chinese as a Foreign Language'>TOCFL</abbr> proficiency test</a>. So, <span class='chinese' lang='zh-TW'>歡迎隨時用中文跟我交流！</span></p>
<p>To learn more about my skills, visit the <a href='#skills'>skills section</a>. If you’d like to get in touch, head over to the <a href='#contact'>contact section</a>. Curious about what I’m working on? Check out my <a href='https://gitea.marvinelsen.com/marvinelsen/'>projects</a>.</p>
</header>
</section>
<section id='contact'>
<header>
<h2>Contact<span class='vr'></span><span class='chinese' lang='zh-TW'>聯絡方式</span></h2>
</header>
<p>Below, you’ll find the best ways to get in touch with me. My pronouns are he/him/his. I’m fluent in English, Standard Chinese, and German, so feel free to reach out in any of these languages. My preferred method of contact is email.</p>
<p>I’m open to inquiries about collaboration, job opportunities, or general questions. Looking forward to hearing from you!</p>
<dl>
<dt>Email</dt>
<dd>
<a href="mailto:www@marvinelsen.com">www@marvinelsen.com</a>
</dd>
<dt>LinkedIn</dt>
<dd>
<a href="https://www.linkedin.com/in/marvinelsen">marvinelsen</a>
</dd>
</dl>
</section>
<section id='skills'>
<header>
<h2>Skills<span class='vr'></span><span class='chinese' lang='zh-TW'>技能</span></h2>
</header>
<p>The following list showcases the skills and technologies I’m well-versed in, have substantial experience with, and confidently apply in my work. These are presented in no particular order, reflecting my diverse expertise across multiple domains:</p>
<dl>
<dt>Computer Languages</dt>
<dd>
<ul>
<li><a href="https://kotlinlang.org"><em>Kotlin</em></a></li>
<li><a href="https://www.java.com/">Java</a></li>
<li><a href="https://www.python.org">Python</a></li>
<li><a href="https://en.wikipedia.org/wiki/SQL"><abbr title="Structured Query Language">SQL</abbr></a></li>
<li><a href="https://html.spec.whatwg.org"><abbr title="Hypertext Markup Language">HTML</abbr></a></li>
<li><a href="https://www.w3.org/TR/CSS/"><abbr title="Cascading Style Sheets">CSS</abbr></a></li>
</ul>
</dd>
<dt>Core Technologies</dt>
<dd>
<ul>
<li><a href="https://spring.io"><em>Spring</em></a></li>
<li><a href="https://en.wikipedia.org/wiki/Java_virtual_machine" ><abbr title="Java Virtual Machine">JVM</abbr></a></li>
<li><a href="https://www.postgresql.org">PostgreSQL</a></li>
<li><a href="https://kafka.apache.org">Apache Kafka</a></li>
<li><a href="https://graphql.org">GraphQL</a> (<a href="https://www.apollographql.com/docs/">Apollo</a>)</li>
</ul>
</dd>
<dt>Tools</dt>
<dd>
<ul>
<li><a href="https://www.jetbrains.com/idea/">IntelliJ IDEA</a></li>
<li><a href="https://git-scm.com">Git</a></li>
<li><a href="https://gradle.org">Gradle</a></li>
<li><a href="https://neovim.io">Neovim</a></li>
</ul>
</dd>
<dt>DevOps</dt>
<dd>
<ul>
<li><a href="https://about.gitlab.com/solutions/continuous-integration/">GitLab <abbr title="Continuous Integration / Continuous Delivery">CI/CD</abbr></a></li>
<li><a href="https://kubernetes.io">Kubernetes</a></li>
<li><a href="https://helm.sh">Helm</a></li>
<li><a href="https://www.docker.com">Docker</a></li>
<li><a href="https://www.terraform.io">Terraform</a></li>
<li><a href="https://grafana.com">Grafana</a></li>
<li><a href="https://prometheus.io">Prometheus</a></li>
<li><a href="https://www.elastic.co/kibana">Kibana</a></li>
<li><a href="https://www.jaegertracing.io">Jaeger</a></li>
<li><a href="https://aws.amazon.com"><abbr title="Amazon Web Services">AWS</abbr></a></li>
</ul>
</dd>
<dt>Operating Systems</dt>
<dd>
<ul>
<li><a href="https://archlinux.org">Arch Linux</a></li>
<li><a href="https://nixos.org">NixOS</a></li>
<li><a href="https://en.wikipedia.org/wiki/MacOS">macOS</a></li>
</ul>
</dd>
<dt>Natural Languages</dt>
<dd>
<ul>
<li><a href="https://en.wikipedia.org/wiki/German_language">German</a> (native)</li>
<li><a href="https://en.wikipedia.org/wiki/English_language">English</a> (fluent)</li>
<li><a href="https://en.wikipedia.org/wiki/Standard_Chinese">Standard Chinese</a> (CEFR C1)</li>
</ul>
</dd>
</dl>
</section>
</article>
</main>
<footer>
Created and maintained by
<address>
<a href='mailto:www@marvinelsen.com'>Marvin Elsen</a>
</address>
<br>
Last updated:
<time datetime='2024-08-31'>2024-08-31</time>
</footer>
</div>
</body>
</html>

142
now/index.html Normal file
View File

@ -0,0 +1,142 @@
<!doctype html>
<!-- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype -->
<!-- https://html.spec.whatwg.org/multipage/dom.html#attr-lang -->
<!-- https://www.rfc-editor.org/info/bcp47 -->
<html lang='en-US'>
<header>
<!-- Metadata
<meta> is a void element and its starting tag should not end with a /-character
Correct: <meta charset='utf-8'>
Wrong: <meta charset='utf-8'/>
See: https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element
See: https://html.spec.whatwg.org/multipage/syntax.html#syntax-start-tag
See: https://html.spec.whatwg.org/multipage/syntax.html#void-elements
-->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta name='author' content='Marvin Elsen'>
<meta name='description' content='Marvin Elsen’s virtual space on the world wide web.'>
<meta name='keywords' content='marvin elsen,marvin,elsen'>
<meta name='referrer' content='no-referrer'>
<meta name='robots' content='index,follow'>
<meta name='color-scheme' content='light dark'>
<meta name='theme-color' content='rgb(0, 130, 255)' media='(prefers-color-scheme: light)'>
<meta name='theme-color' content='rgb(0, 130, 255)' media='(prefers-color-scheme: dark)'>
<link href='/css/styles.css' rel='stylesheet'>
<title>Now | Marvin Elsen</title>
</header>
<body>
<div id='wrapper'>
<header id='banner'>
<h1>Marvin Elsen’s Web Space</h1>
</header>
<nav>
<header>
<h2>Navigation<span class='vr'></span><span class='chinese' lang='zh-TW'>目錄</span><h2>
</header>
<ul>
<li><a href='/#about'>About</a></li>
<li><a href='/#contact'>Contact</a></li>
<li><a href='/#skills'>Skills</a></li>
<li><a href='https://gitea.marvinelsen.com/marvinelsen/'>Projects</a></li>
<li><a href='/now'>Now</a></li>
<li><a href='/uses'>Uses</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h2>Now</h2>
</header>
<p>This is my <a href="https://nownownow.com">now</a> page, giving an overview of the things I am currently doing.</p>
<section>
<header>
<h3>Location</h3>
</header>
<p>
I currently live in <a href="https://en.wikipedia.org/wiki/D%C3%BCsseldorf">Düsseldorf</a>,
<a href="https://en.wikipedia.org/wiki/Germany">Germany</a>.
</p>
</section>
<section>
<header>
<h3>Projects</h3>
</header>
<p>I'm currently working on the following personal projects:</p>
<ul>
<li>This website</li>
</ul>
</section>
<section>
<header>
<h3>Gaming</h3>
</header>
<p>I'm currently playing the following games:</p>
<ul>
<li><a href="https://mariokart8.nintendo.com">Mario Kart 8 Deluxe</a></li>
<li><a href="https://www.monsterhunter.com/rise/us/">Monster Hunter Rise</a></li>
</ul>
</section>
<section>
<header>
<h3>Movies and Series</h3>
</header>
<p>I'm currently watching the following movies/series:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/The_Office_(American_TV_series)">The Office</a></li>
</ul>
</section>
<section>
<header>
<h3>Books</h3>
</header>
<p>I'm currently reading the following books:</p>
<ul>
<li>Effective Kotlin by Marcin Moskala</li>
<li>A Philosophy of Software Design by John Ousterhout</li>
<li>聊齋誌異 by 蒲松齡</li>
</ul>
</section>
<section>
<header>
<h3>Music</h3>
</header>
<p>I'm currently listening to the following music:</p>
<ul>
<li><a href="https://open.spotify.com/playlist/2JandDjesk7HneyhEwHQLB?si=5da670aff8ed4168" >My curated <abbr title="Korean popular music">K-pop</abbr> playlist on Spotify</a ></li>
</ul>
</section>
<section>
<header>
<h3>Other Interests and Hobbies</h3>
</header>
<p>Apart from the above, these are other interests and hobbies I currently pursue:</p>
<ul>
<li>Playing darts</li>
<li>Studying Chinese</li>
<li>Exercising</li>
<li>Everything related to tea</li>
</ul>
</section>
</article>
</main>
<footer>
Created and maintained by
<address>
<a href='mailto:www@marvinelsen.com'>Marvin Elsen</a>
</address>
<br>
Last updated:
<time datetime='2024-08-31'>2024-08-31</time>
</footer>
</div>
</body>
</html>

5
robots.txt Normal file
View File

@ -0,0 +1,5 @@
# www.robotstxt.org
# Allow crawling of all content
User-agent: *
Disallow:

284
uses/index.html Normal file
View File

@ -0,0 +1,284 @@
<!doctype html>
<!-- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype -->
<!-- https://html.spec.whatwg.org/multipage/dom.html#attr-lang -->
<!-- https://www.rfc-editor.org/info/bcp47 -->
<html lang='en-US'>
<header>
<!-- Metadata
<meta> is a void element and its starting tag should not end with a /-character
Correct: <meta charset='utf-8'>
Wrong: <meta charset='utf-8'/>
See: https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element
See: https://html.spec.whatwg.org/multipage/syntax.html#syntax-start-tag
See: https://html.spec.whatwg.org/multipage/syntax.html#void-elements
-->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta name='author' content='Marvin Elsen'>
<meta name='description' content='Marvin Elsen’s virtual space on the world wide web.'>
<meta name='keywords' content='marvin elsen,marvin,elsen'>
<meta name='referrer' content='no-referrer'>
<meta name='robots' content='index,follow'>
<meta name='color-scheme' content='light dark'>
<meta name='theme-color' content='rgb(0, 130, 255)' media='(prefers-color-scheme: light)'>
<meta name='theme-color' content='rgb(0, 130, 255)' media='(prefers-color-scheme: dark)'>
<link href='/css/styles.css' rel='stylesheet'>
<title>Marvin Elsen’s Website</title>
</header>
<body>
<div id='wrapper'>
<header id='banner'>
<h1>Marvin Elsen’s Web Space</h1>
</header>
<nav>
<header>
<h2>Navigation<span class='vr'></span><span class='chinese' lang='zh-TW'>目錄</span><h2>
</header>
<ul>
<li><a href='/#about'>About</a></li>
<li><a href='/#contact'>Contact</a></li>
<li><a href='/#skills'>Skills</a></li>
<li><a href='https://gitea.marvinelsen.com/marvinelsen/'>Projects</a></li>
<li><a href='/now'>Now</a></li>
<li><a href='/uses'>Uses</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h2>Uses</h2>
</header>
<section id="introduction">
<header>
<h3>Introduction</h3>
</header>
<p>
Curious about the digital tools in my arsenal? You're in the right spot: this is my <a href='https://uses.tech'>uses</a> page. My software choices
reflect a meticulous selection process. I'm not one to simply go with the flow; instead, I rigorously research
and trial every tool before it earns a spot in my workflow. My preference leans towards flexible, tailorable,
and keyboard-centric <abbr title="Free, Libre, and Open-Source Software">FLOSS</abbr>, with a pronounced
inclination for text/<abbr title="Command-Line Interface">CLI</abbr>
interfaces. A heads-up for those looking for Windows suggestions: my realm is exclusively Linux, so you might
find that area a tad sparse.
</p>
</section>
<section id="disclaimer">
<header>
<h3>Disclaimer</h3>
</header>
<p>
This list is not endorsed by, directly affiliated with, associated with, or in any other way officially
connected with, maintained, authorized or sponsored by any other product, service, brand, company or person. All
product, service, brand and company names as well as related names, marks, emblems and images are the registered
trademarks of their original owners. The use of any trade name or trademark is for identification and reference
purposes only and does not imply any association with the trademark holder of their product brand.
</p>
</section>
<section id="software">
<header>
<h3>Software</h3>
</header>
<table>
<caption>
Software that I use
</caption>
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Tool</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web browser</td>
<td><a href="https://vivaldi.com">Vivaldi</a></td>
</tr>
<tr>
<td>Text editor</td>
<td><a href="https://neovim.io">Neovim</a></td>
</tr>
<tr>
<td>Terminal emulator</td>
<td><a href="https://wezfurlong.org/wezterm/">WezTerm</a></td>
</tr>
<tr>
<td>Shell</td>
<td><a href="https://fishshell.com">fish</a></td>
</tr>
<tr>
<td>Color scheme</td>
<td><a href="https://catppuccin.com">Catppuccin</a></td>
</tr>
<tr>
<td>Programming font</td>
<td><a href="https://typeof.net/Iosevka/">Iosevka</a></td>
</tr>
<tr>
<td>Note-taking</td>
<td><a href="https://logseq.com">Logseq</a></td>
</tr>
<tr>
<td>Flashcards</td>
<td>
<ul>
<li><a href="https://apps.ankiweb.net">Anki</a></li>
<li><a href="https://github.com/ankidroid/Anki-Android">AnkiDroid</a></li>
</ul>
</td>
</tr>
<tr>
<td>Password manager</td>
<td>
<ul>
<li><a href="https://keepassxc.org">KeePassXC</a></li>
<li><a href="https://www.keepassdx.com">KeePassDX</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section id="hardware">
<header>
<h3>Hardware</h3>
</header>
<table>
<caption>
Hardware I use
</caption>
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Tool</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smartphone</td>
<td>
<ul>
<li>
<a href="https://www.samsung.com/us/smartphones/galaxy-a32-5g/">Samsung Galaxy A32 5G</a>
</li>
<li><a href="https://www.apple.com/shop/buy-iphone/iphone-14">iPhone 14</a></li>
</ul>
</td>
</tr>
<tr>
<td>Keyboard</td>
<td>
<a href="https://www.logitech.com/en-us/products/keyboards/k860-split-ergonomic.920-009166.html"
>Logitech Ergo K860</a
>
</td>
</tr>
<tr>
<td>Mouse</td>
<td>
<a href="https://www.logitech.com/en-us/products/mice/mx-vertical-ergonomic-mouse.910-005447.html"
>Logitech MX Vertical</a
>
</td>
</tr>
<tr>
<td>Monitor</td>
<td><a href="https://pcmonitors.info/reviews/philips-328e1ca/">Philips 328E1CA</a></td>
</tr>
<tr>
<td>Watch</td>
<td><a href="https://www.casio.com/us/watches/casio/product.F-91W-1/">Casio F-91W</a></td>
</tr>
<tr>
<td>Electric kettle</td>
<td>
<a href="https://fellowproducts.com/products/stagg-ekg-electric-pour-over-kettle"
>Fellow Stagg EKG</a
>
</td>
</tr>
<tr>
<td>Pens</td>
<td>
<ul>
<li>Uni-ball Signo Broad UM-153 (1.0mm)</li>
<li>Pilot G-2 (0.7mm)</li>
<li>Pilot Juice up (0.5mm)</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section id="darts">
<header>
<h3>Darts</h3>
</header>
<table>
<caption>
Darts equipment I use
</caption>
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Tool</th>
</tr>
</thead>
<tbody>
<tr>
<td>Board</td>
<td><a href="https://granboards.com/product/gran-board-3s-green/">Granboard 3s Green</a></td>
</tr>
<tr>
<td>Barrel</td>
<td>
<a
href="https://www.one80dart.com/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=1086&virtuemart_category_id=26&Itemid=125&lang=en"
>One80 Chameleon Lapis Lazuli</a
>
</td>
</tr>
<tr>
<td>Soft tips</td>
<td><a href="https://l-style.info/product/tip/p-lip">L-style Premium Lippoint</a></td>
</tr>
<tr>
<td>Steel tips</td>
<td><a href="https://l-style.info/product/tip/hardlip">L-style Hard Lip</a></td>
</tr>
<tr>
<td>Shaft</td>
<td><a href="https://l-style.info/product/shaft/lshaft">L-style L-Shaft Lock Straight 260</a></td>
</tr>
<tr>
<td>Flight</td>
<td><a href="https://l-style.info/product/flight/pro/l1">L-style L-Flight PRO L1 [Standard]</a></td>
</tr>
<tr>
<td>Wallet</td>
<td><a href="https://www.target-darts.co.uk/takoma-knox-grey-darts-wallet">Takoma Knox Grey</a></td>
</tr>
</tbody>
</table>
</section>
</article>
</main>
<footer>
Created and maintained by
<address>
<a href='mailto:www@marvinelsen.com'>Marvin Elsen</a>
</address>
<br>
Last updated:
<time datetime='2024-08-31'>2024-08-31</time>
</footer>
</div>
</body>
</html>