better desing

static/index.html

@@ -26,9 +26,8 @@
     </div> 
     <!-- scroller: fills the viewport, scrolls inside -->
     <div id="scroller" class="relative z-10 h-full flex justify-center overflow-y-auto">
-      <div class="text-black bg-white h-fit w-4xl flex font-light">
+      <div class=" text-black h-fit w-4xl flex font-light">
-
+        <aside id="sidebar" style="background: white;" class="w-48 bg-white dark:bg-gray-900 z-50 shrink-0 p-6 sticky top-0 self-start h-screen overflow-y-auto pt-20 hidden lg:block">          
-        <aside id="sidebar" class="w-48 bg-white shrink-0 p-6 sticky top-0 self-start h-screen overflow-y-auto pt-20 hidden lg:block">
           <div class="mb-6">
             <img src="/static/icons/half-moon.svg" id="btn-dark" class="block dark:hidden cursor-pointer">
             <img src="/static/icons/sun-light.svg" id="btn-light" class="hidden dark:block cursor-pointer">
@@ -45,8 +44,8 @@
             </div>
           </div>
           <div class="mb-6 ">
-            <p class="text-xs uppercase tracking-widest text-gray-400 mb-2">skills</p>
+            <p class="text-xs uppercase tracking-widest text-gray-800 mb-2">skills</p>
-            <div class="flex flex-col gap-1 text-sm">
+            <div class="flex flex-col gap-1 text-xs text-gray-500  text-sm">
               <div>| Excel</div>
               <div>| Python</div>
               <div>| SQL</div>
@@ -55,18 +54,18 @@
             </div>
           </div>
           <div class="mb-6">
-            <p class="text-xs uppercase tracking-widest text-gray-400 mb-2">location</p>
+            <p class="text-xs uppercase tracking-widest text-gray-800 mb-2">location</p>
             <div class="text-xs text-gray-500 font-mono">Denmark<br>Aalborg Øst, 9220</div>
           </div>
           <div class="mb-6">
-            <p class="text-xs uppercase tracking-widest text-gray-400 mb-2">languages</p>
+            <p class="text-xs uppercase tracking-widest text-gray-800 mb-2">languages</p>
-            <div class="flex gap-2 text-xs">
+            <div class="flex gap-2 text-xs text-gray-500">
-              <span class="border px-2 py-0.5">Danish</span>
+              <span class="border px-2 py-0.5 border border-blue-600 text-blue-600 rounded-sm">Danish</span>
-              <span class="border px-2 py-0.5">English</span>
+              <span class="border px-2 py-0.5 border border-blue-600 text-blue-600 rounded-sm">English</span>
             </div>
           </div>
         </aside>
-        <div class="bg-zinc-50 pt-20 " id="resume" >
+        <div class="pt-20 bg-zinc-50/95 " id="resume">
         <section class="flex-1 pl-10 pr-6 ">
           <div id="about" class="mb-12">
             <p class="text-xs uppercase tracking-widest text-gray-400 mb-2">About Me · 2026</p>
@@ -215,7 +214,7 @@
             <div class="border-2 border-gray-200 rounded-md p-6 mb-4 hover:border-pink-400"  onclick="window.location.href='/static/pdf/mstr.pdf'">
               <div class="flex justify-between mb-2">
                 <span class="font-medium">MSTR: Strategy</span>
-                <span class="text-red-500 text-sm">Sell</span>
+                <span class="text-xs border border-red-600 text-red-600 rounded-sm px-2 py-0.5 self-start"> Sell </span>
               </div>
               <p class="text-sm text-gray-600 leading-relaxed">The company only owns btc by issuing debt and preferred stock offering.<br>
               The company is a ponzi scheme at its best.</p>
@@ -224,7 +223,7 @@
             <div class="border-2 border-gray-200 rounded-md p-6 mb-4 hover:border-pink-400" onclick="window.location.href='/static/pdf/mstr.pdf'">
               <div class="flex justify-between mb-2">
                 <span class="font-medium">Novo.B/NVO: Novo Nordisk A/S</span>
-                <span class="text-green-600 text-sm">Buy</span>
+                <span class="text-xs border border-green-600 text-green-600 rounded-sm px-2 py-0.5 self-start">Buy</span>
               </div>
               <p class="text-sm text-gray-600 leading-relaxed">The product sales of weight loss drugs are high class, pipeline is undervalued.<br>
               Pipeline and wegovy pill is not recognised correctly as high focus on expiration of current sold product. High pessimistic view of pipeline.</p>

static/tailwind.css

@@ -9,6 +9,7 @@
     monospace;
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-blue-400: oklch(70.7% 0.165 254.624);
@@ -22,6 +23,7 @@
     --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
     --color-zinc-50: oklch(98.5% 0 0);
     --color-black: #000;
     --color-white: #fff;
@@ -201,6 +203,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .collapse {
     visibility: collapse;
   }
@@ -225,15 +230,30 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .isolate {
+    isolation: isolate;
+  }
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -258,6 +278,9 @@
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
+  .m-6 {
+    margin: calc(var(--spacing) * 6);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -315,6 +338,9 @@
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
   .h-36 {
     height: calc(var(--spacing) * 36);
   }
@@ -330,6 +356,9 @@
   .w-4xl {
     width: var(--container-4xl);
   }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -583,9 +612,21 @@
   .border-gray-400 {
     border-color: var(--color-gray-400);
   }
+  .border-green-600 {
+    border-color: var(--color-green-600);
+  }
+  .border-red-600 {
+    border-color: var(--color-red-600);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-white\/80 {
+    background-color: color-mix(in srgb, #fff 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
+    }
+  }
   .bg-white\/90 {
     background-color: color-mix(in srgb, #fff 90%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -595,6 +636,82 @@
   .bg-zinc-50 {
     background-color: var(--color-zinc-50);
   }
+  .bg-zinc-50\/20 {
+    background-color: color-mix(in srgb, oklch(98.5% 0 0) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zinc-50) 20%, transparent);
+    }
+  }
+  .bg-zinc-50\/30 {
+    background-color: color-mix(in srgb, oklch(98.5% 0 0) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zinc-50) 30%, transparent);
+    }
+  }
+  .bg-zinc-50\/50 {
+    background-color: color-mix(in srgb, oklch(98.5% 0 0) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zinc-50) 50%, transparent);
+    }
+  }
+  .bg-zinc-50\/60 {
+    background-color: color-mix(in srgb, oklch(98.5% 0 0) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zinc-50) 60%, transparent);
+    }
+  }
+  .bg-zinc-50\/80 {
+    background-color: color-mix(in srgb, oklch(98.5% 0 0) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zinc-50) 80%, transparent);
+    }
+  }
+  .bg-zinc-50\/90 {
+    background-color: color-mix(in srgb, oklch(98.5% 0 0) 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zinc-50) 90%, transparent);
+    }
+  }
+  .bg-zinc-50\/95 {
+    background-color: color-mix(in srgb, oklch(98.5% 0 0) 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zinc-50) 95%, transparent);
+    }
+  }
+  .bg-zinc-50\/98 {
+    background-color: color-mix(in srgb, oklch(98.5% 0 0) 98%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zinc-50) 98%, transparent);
+    }
+  }
+  .bg-gradient-to-l {
+    --tw-gradient-position: to left in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .bg-gradient-to-r {
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .bg-gradient-to-t {
+    --tw-gradient-position: to top in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-transparent {
+    --tw-gradient-from: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .from-zinc-50 {
+    --tw-gradient-from: var(--color-zinc-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-zinc-50 {
+    --tw-gradient-to: var(--color-zinc-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -613,6 +730,9 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -737,6 +857,9 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -813,6 +936,11 @@
       }
     }
   }
+  .dark\:bg-gray-900 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-gray-900);
+    }
+  }
   .dark\:text-blue-400 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       color: var(--color-blue-400);
@@ -1004,6 +1132,48 @@ aside {
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -1035,6 +1205,15 @@ aside {
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;