diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000..08c6327 --- /dev/null +++ b/.htaccess @@ -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" diff --git a/README.md b/README.md index d07904f..90fdab8 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/css/colors-dark.css b/css/colors-dark.css new file mode 100644 index 0000000..aaec7d0 --- /dev/null +++ b/css/colors-dark.css @@ -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; +} diff --git a/css/colors-light.css b/css/colors-light.css new file mode 100644 index 0000000..0e4da0f --- /dev/null +++ b/css/colors-light.css @@ -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; +} diff --git a/css/description-list.css b/css/description-list.css new file mode 100644 index 0000000..6a9aab9 --- /dev/null +++ b/css/description-list.css @@ -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: ", "; + } + } + } +} diff --git a/css/fonts.css b/css/fonts.css new file mode 100644 index 0000000..7cb4a59 --- /dev/null +++ b/css/fonts.css @@ -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'); +} diff --git a/css/links.css b/css/links.css new file mode 100644 index 0000000..5234352 --- /dev/null +++ b/css/links.css @@ -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 { + } +} diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..31ec321 --- /dev/null +++ b/css/styles.css @@ -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; +} diff --git a/css/table.css b/css/table.css new file mode 100644 index 0000000..725a30c --- /dev/null +++ b/css/table.css @@ -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; + } +} diff --git a/favicon-16x16.png b/favicon-16x16.png new file mode 100644 index 0000000..78dcb23 Binary files /dev/null and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..243b5be Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..fb19316 Binary files /dev/null and b/favicon.ico differ diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..3f71933 --- /dev/null +++ b/favicon.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/fonts/atkinson-hyperlegible-700.woff2 b/fonts/atkinson-hyperlegible-700.woff2 new file mode 100644 index 0000000..19a58ea Binary files /dev/null and b/fonts/atkinson-hyperlegible-700.woff2 differ diff --git a/fonts/atkinson-hyperlegible-700italic.woff2 b/fonts/atkinson-hyperlegible-700italic.woff2 new file mode 100644 index 0000000..43f253e Binary files /dev/null and b/fonts/atkinson-hyperlegible-700italic.woff2 differ diff --git a/fonts/atkinson-hyperlegible-italic.woff2 b/fonts/atkinson-hyperlegible-italic.woff2 new file mode 100644 index 0000000..d35d3a7 Binary files /dev/null and b/fonts/atkinson-hyperlegible-italic.woff2 differ diff --git a/fonts/atkinson-hyperlegible-regular.woff2 b/fonts/atkinson-hyperlegible-regular.woff2 new file mode 100644 index 0000000..99b3c6f Binary files /dev/null and b/fonts/atkinson-hyperlegible-regular.woff2 differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..034e686 --- /dev/null +++ b/index.html @@ -0,0 +1,167 @@ + + + + + +
+ + + + + + + + + + + + + + + Marvin Elsen’s Website +
+ + +
+ + + + +
+
+
+
+

About關於我

+

Welcome to my corner of the web! I’m Marvin Elsen, also known as 柳博慎 in Chinese. I’m a German software developer in my late twenties, currently residing in the vibrant city of Düsseldorf. I hold a bachelor’s degree in computer science, from which I graduated with distinction.

+

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.

+

Currently, I work full-time as a backend developer at RTL Deutschland, Germany’s leading entertainment company, where I contribute to the development of RTL+, Germany’s largest streaming service, using Kotlin and Spring.

+

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 唐傳奇 and 聊齋誌異. In the past, I spent two years living in Taiwan studying Chinese full-time at the prestigious NTNU MTC, where I achieved the CEFR C1 level on the official TOCFL proficiency test. So, 歡迎隨時用中文跟我交流！

+

To learn more about my skills, visit the skills section. If you’d like to get in touch, head over to the contact section. Curious about what I’m working on? Check out my projects.

+
+
+ +
+
+

Contact聯絡方式

+
+

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.

+

I’m open to inquiries about collaboration, job opportunities, or general questions. Looking forward to hearing from you!

+
+
Email
+
+ www@marvinelsen.com +
+
LinkedIn
+
+ marvinelsen +
+
+
+ +
+
+

Skills技能

+
+

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:

+
+
Computer Languages
+
+ +
+
Core Technologies
+
+ +
+
Tools
+
+ +
+
DevOps
+
+ +
+
Operating Systems
+
+ +
+
Natural Languages
+
+ +
+
+
+
+
+ + +
+ + diff --git a/now/index.html b/now/index.html new file mode 100644 index 0000000..1989842 --- /dev/null +++ b/now/index.html @@ -0,0 +1,142 @@ + + + + + +
+ + + + + + + + + + + + + + + Now | Marvin Elsen +
+ + +
+ + + + +
+
+
+

Now

+
+

This is my now page, giving an overview of the things I am currently doing.

+
+
+

Location

+
+

+ I currently live in Düsseldorf, + Germany. +

+
+
+
+

Projects

+
+

I'm currently working on the following personal projects:

+
    +
  • This website
    • +
+
+
+
+

Gaming

+
+

I'm currently playing the following games:

+ +
+
+
+

Movies and Series

+
+

I'm currently watching the following movies/series:

+ +
+
+
+

Books

+
+

I'm currently reading the following books:

+
    +
  • Effective Kotlin by Marcin Moskala
    • +
  • A Philosophy of Software Design by John Ousterhout
    • +
  • 聊齋誌異 by 蒲松齡
    • +
+
+
+
+

Music

+
+

I'm currently listening to the following music:

+ +
+
+
+

Other Interests and Hobbies

+
+

Apart from the above, these are other interests and hobbies I currently pursue:

+
    +
  • Playing darts
    • +
  • Studying Chinese
    • +
  • Exercising
    • +
  • Everything related to tea
    • +
+
+
+
+ + +
+ + diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..a0cd02c --- /dev/null +++ b/robots.txt @@ -0,0 +1,5 @@ +# www.robotstxt.org + +# Allow crawling of all content +User-agent: * +Disallow: \ No newline at end of file diff --git a/uses/index.html b/uses/index.html new file mode 100644 index 0000000..7e4a0a9 --- /dev/null +++ b/uses/index.html @@ -0,0 +1,284 @@ + + + + + +
+ + + + + + + + + + + + + + + Marvin Elsen’s Website +
+ + +
+ + + + +
+
+
+

Uses

+
+
+
+

Introduction

+
+

+ Curious about the digital tools in my arsenal? You're in the right spot: this is my uses 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 FLOSS, with a pronounced + inclination for text/CLI + interfaces. A heads-up for those looking for Windows suggestions: my realm is exclusively Linux, so you might + find that area a tad sparse. +

+
+
+
+

Disclaimer

+
+

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

+
+
+
+

Software

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Software that I use +
CategoryTool
Web browserVivaldi
Text editorNeovim
Terminal emulatorWezTerm
Shellfish
Color schemeCatppuccin
Programming fontIosevka
Note-takingLogseq
Flashcards + +
Password manager + +
+
+
+
+

Hardware

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Hardware I use +
CategoryTool
Smartphone + +
Keyboard + Logitech Ergo K860 +
Mouse + Logitech MX Vertical +
MonitorPhilips 328E1CA
WatchCasio F-91W
Electric kettle + Fellow Stagg EKG +
Pens +
    +
  • Uni-ball Signo Broad UM-153 (1.0mm)
    • +
  • Pilot G-2 (0.7mm)
    • +
  • Pilot Juice up (0.5mm)
    • +
+
+
+
+
+

Darts

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Darts equipment I use +
CategoryTool
BoardGranboard 3s Green
Barrel + One80 Chameleon Lapis Lazuli +
Soft tipsL-style Premium Lippoint
Steel tipsL-style Hard Lip
ShaftL-style L-Shaft Lock Straight 260
FlightL-style L-Flight PRO L1 [Standard]
WalletTakoma Knox Grey
+
+
+
+ + +
+ +