samantha/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better desing

Browse Source
This commit is contained in:
samantha42
2026-05-29 23:24:57 +02:00
parent b57eec886a
commit 46c8f691ef
2 changed files with 192 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+13 -14
View File
@@ -26,12 +26,11 @@
</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">
<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=" 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">
<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">
<img src="/static/icons/sun-light.svg" id="btn-light" class="hidden dark:block cursor-pointer">
</div>
<div class="mb-6">
<p class="text-xs uppercase tracking-widest text-gray-800 mb-2">navigate</p>
@@ -45,8 +44,8 @@
</div>
</div>
<div class="mb-6 ">
<p class="text-xs uppercase tracking-widest text-gray-400 mb-2">skills</p>
<div class="flex flex-col gap-1 text-sm">
<p class="text-xs uppercase tracking-widest text-gray-800 mb-2">skills</p>
<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>
<div class="flex gap-2 text-xs">
<span class="border px-2 py-0.5">Danish</span>
<span class="border px-2 py-0.5">English</span>
<p class="text-xs uppercase tracking-widest text-gray-800 mb-2">languages</p>
<div class="flex gap-2 text-xs text-gray-500">
<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 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
+179
View File
@@ -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;