wip redesign

2025-09-18 14:44:35 +02:00
parent 215c9ff878
commit 0478cb71b9
4 changed files with 108 additions and 14 deletions
--- a/src/assets/favicon.ico
+++ b/src/assets/favicon.ico
--- a/src/assets/profile.jpg
+++ b/src/assets/profile.jpg
--- a/src/index.ts
+++ b/src/index.ts
@@ -25,8 +25,14 @@ new ToolchainBuilder(paths)
        {
          path: "src/templates/404.html",
          nameOverride: "Not Found Page",
-          menuEntry: true,
+          menuEntry: false,
        },
+        {
+          path: "src/assets/profile.jpg",
+        },
+        {
+          path: "src/assets/favicon.ico",
+        }
      ],
    }),
    new StartPagePlugin({
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,30 +8,34 @@
  <style>
    html {
      font-family: Arial, sans-serif;
-      font-size: 1.3em;
+      font-size: 17px;
+      line-height: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
+      font-family: monospace;
    }
+
+    a {
+      color: #FFF;
+    }
+
    body {
      max-width: 800px;
      color: #fbfbfe;
-      background-color: #1c1b22;
+      background-color: #1c1b28;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
-    ul {
+
+    .content ul {
      list-style-type: none;
      padding: 0;
-
-      
    }
-    li:nth-child(1){
-      display: none;
-    }
-    li {
+
+    .content li {
      margin: 1em 0;
      padding: 8px;
      border-radius: 8px;
@@ -38,17 +43,100 @@
      border-width: 1px;
      border-color: #aaa;
    }
-    li::before {
+
+    .content li::before {
      content: "📝";
      margin-right: 8px;
    }
-    a {
+
+
+    .content a {
      color: #fbfbfe;
      text-decoration: none;
    }
+
+    .profile {
+      border-color: #00FFFF;
+      border-width: 1px;
+      border-style: solid;
+      width: 100%;
+      padding: 20px;
+      box-sizing: border-box;
+      font-family: monospace;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .profile .picture {
+      border-radius: 50%;
+    }
+
+    .profile ul {
+      margin: 0;
+    }
+
+    .profile li {}
+
+    .banner {
+      margin-top: 2rem;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 1rem;
+      align-items: center;
+      flex: 1;
+      font-family: monospace;
+    }
+
+    .banner .title {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+    }
+
+    .banner .title::after {
+      background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
+      content: "";
+      display: block;
+      width: 100%;
+      margin-left: 10px;
+    }
+
+    .banner .title .name {
+      color: #1c1b28;
+      background-color: #00FFFF;
+      white-space: nowrap;
+      padding: 5px;
+    }
  </style>
 </head>
+
 <body>
-  {{content}}
+  <div class="banner">
+    <div class="title">
+      <div class="name">Zackarias Montell</div>
+    </div>
+  </div>
+  <div class="profile">
+    <img class="picture" src="profile.jpg" width="150" height="150" />
+    <p>Yup, this is me! You probably wonder how i ended up in this situation.</p>
+    <p>Here are some things that I like:</p>
+    <ul>
+      <li>Programming</li>
+      <li>Building stuff</li>
+      <li>Adventures with family</li>
+      <li>Brewing beer</li>
+      <li>Music</li>
+    </ul>
+
+    <a href="mailto:contact@montell.se">contact@montell.se</a> | <a href="">a</a> | <a href="">a</a> | <a href="">a</a>
+
+
+  </div>
+  <div class="content">
+    {{content}}
+  </div>
 </body>
+
 </html>