add more text and use inter as font

src/BaseDocument.tsx

@@ -14,6 +14,9 @@ function BaseDocument(props: SiteData) {
                 <meta charset="utf-8" />
                 <meta name="viewport" content='width=device-width, initial-scale=1' />
                 <link rel="stylesheet" href="/static/style.css"/>
+                <link rel="preconnect" href="https://fonts.googleapis.com">
+                <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+                <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
                 <script src="https://unpkg.com/htmx.org@2.0.4"></script>
                 <title>${props.title}</title>
             </head>

src/Main.tsx

@@ -8,10 +8,17 @@ export const Main: FC = () => {
         <>
             <Header />
             <main class="middle-flex">
-                <h1>RoBaertschi</h1>
+                <h1>Robin Bärtschi</h1>
 
-                <article>
+                <article class="introduction">
-                    Hi 👋, my name is Robin, I am a computer scientist in apprenticeship @ <a href='https://swisscom.com'>Swisscom</a><br />
+                    { /* HACK: DO NOT REMOVE THE SPACE AFTER THE CH OR ELSE THE EMOJI BREAKS FOR SOME FUCKING REASON */}
+                    Hi 👋, my name is Robin, I am a computer scientist in apprenticeship and live in Switzerland 🇨🇭.<br />
+                    I love to program in my freetime and play some games from time to time. I am also a huge linux nerd and use it on a daily basis.<br /><br />
+
+                    Besides linux and programming, I also like playing Rogue-likes/lites (Balatro, Enter the Gungeon etc.), factory games (Factorio, Satisfactory) and Minecraft.<br />
+                    I tend to not finish games and have a huge steam library of unfinished games, which I should finish someday. <br /><br />
+
+                    I am currently working on a programming language called <a href="https://git.robaertschi.xyz/robaertschi/tt">tt</a> written in Go
                 </article>
             </main>
             <Footer />

static/style.css

@@ -11,25 +11,36 @@
     --background100: rgb(var(--background));
 
     --primary100: rgb(var(--primary));
+    --primary90: rgba(var(--primary), 90%);
+    --primary80: rgba(var(--primary), 80%);
+    --primary70: rgba(var(--primary), 70%);
 
     --secondary100: rgb(var(--secondary));
     --secondary90: rgba(var(--secondary), 90%);
 
     --accent100: rgb(var(--accent));
+    --accent90: rgb(var(--accent), 90%);
+    --accent10: rgb(var(--accent), 10%);
 }
 
 body {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: "Inter", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: normal;
+    font-style: normal;
     height: 100vh;
     width: 100vw;
     margin: 0;
     padding: 0;
     color: var(--text100);
     background-color: var(--background100);
+    font-size: 1.2em;
+    line-height: 1.2rem;
 }
 
 main {
     height: 100%;
+    width: 100%;
 }
 
 .middle-flex {
@@ -40,15 +51,15 @@ main {
 }
 
 a {
-    color: var(--text100);
+    color: var(--primary100);
 }
 
 a:hover {
-    color: var(--text90);
+    color: var(--accent100) !important;
 }
 
 a:visited {
-    color: var(--text100);
+    color: var(--primary70);
 }
 
 button.primary {
@@ -71,13 +82,23 @@ button.primary:hover {
     padding: 0.2rem;
 }
 
+.introduction {
+    max-width: 40%;
+    padding: 1.2em;
+    border-color: var(--secondary100);
+    border-style: solid;
+    border-radius: 0.5em;
+    border-width: 0.1em;
+}
+
 header {
     border: 0;
     padding: 1em;
     border-bottom: 0.1em;
     border-color: var(--secondary100);
     border-style: solid;
-    width: 80%;
+    min-width: 80%;
+    max-width: 80%;
 
     display: flex;
     flex-direction: row;