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

better desgin

Browse Source
This commit is contained in:
samantha42
2026-05-29 22:49:39 +02:00
parent c1bd40d5a5
commit b57eec886a
6 changed files with 229 additions and 2840 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site
BIN
View File
Binary file not shown.
static/index.html
+64 -42
View File
@@ -6,7 +6,6 @@
<title>Home</title> <title>Home</title>
<script src="https://unpkg.com/htmx.org@2.0.4"></script> <script src="https://unpkg.com/htmx.org@2.0.4"></script>
<link rel="stylesheet" href="/static/tailwind.css" /> <link rel="stylesheet" href="/static/tailwind.css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<head> <head>
<body class="m-0 p-0 bg-zinc-50 rubik-400"> <body class="m-0 p-0 bg-zinc-50 rubik-400">
@@ -22,7 +21,7 @@
<main id="parallax-section" class="relative h-screen overflow-hidden"> <main id="parallax-section" class="relative h-screen overflow-hidden">
<div id="parallax-bg" <div id="parallax-bg"
class="absolute inset-x-0 will-change-transform overflow-hidden" class="absolute inset-x-0 will-change-transform overflow-hidden"
style="top:-100%;bottom:-30%;"> style="top:-200%;bottom:-30%;">
<div hx-get="/static/components/background.html" hx-trigger="load" hx-swap="outerHTML"></div> <div hx-get="/static/components/background.html" hx-trigger="load" hx-swap="outerHTML"></div>
</div> </div>
<!-- scroller: fills the viewport, scrolls inside --> <!-- scroller: fills the viewport, scrolls inside -->
@@ -31,18 +30,18 @@
<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"> <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"> <div class="mb-6">
<img src="/static/icons/half-moon.svg" id="darkmode" onclick="toggleTheme()" > <img src="/static/icons/half-moon.svg" id="btn-dark" class="block dark:hidden cursor-pointer">
<img src="/static/icons/sun-light.svg" id="lightmode" onclick="toggleTheme()" class="hidden"> <img src="/static/icons/sun-light.svg" id="btn-light" class="hidden dark:block cursor-pointer">
</div> </div>
<div class="mb-6"> <div class="mb-6">
<p class="text-xs uppercase tracking-widest text-gray-400 mb-2">navigate</p> <p class="text-xs uppercase tracking-widest text-gray-800 mb-2">navigate</p>
<div class="flex flex-col gap-1 text-sm"> <div class="flex flex-col gap-2 text-xs text-gray-500 sidebar-links">
<a href="#about">// about</a> <a href="#about">// About</a>
<a href="#experience">// experience</a> <a href="#experience">// Experience</a>
<a href="#education">// education</a> <a href="#education">// Education</a>
<a href="#opinion">// opinion</a> <a href="#opinion">// Opinion</a>
<a href="#automation">// automation</a> <a href="#automation">// Automation</a>
<a href="#interests" onclick="InterestShow()">// interests</a> <a href="#interests" onclick="InterestShow()">// Interests</a>
</div> </div>
</div> </div>
<div class="mb-6 "> <div class="mb-6 ">
@@ -84,25 +83,33 @@
<section id="experience" class="mb-12"> <section id="experience" class="mb-12">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Experience</h2> <h2 class="text-2xl font-light border-b pb-2 mb-6">Experience</h2>
<div class="grid grid-cols-1 gap-4"> <div class="grid grid-cols-1 gap-4">
<div class="border border-gray-400 hover:border-pink-400 rounded-md p-6 cursor-pointer hover:bg-gray-50" onclick="window.location.href='#research'"> <div class="border-2 border-gray-200 hover:border-pink-400 rounded-md p-6 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 dark:border-gray-600 dark:hover:border-pink-400"
onclick="window.location.href='#research'">
<div class="flex justify-between mb-2"> <div class="flex justify-between mb-2">
<span class="font-medium">Independent Equity Research</span> <span class="font-medium dark:text-white">Independent Equity Research</span>
<span class="text-xs border border-blue-600 text-blue-600 rounded-sm px-2 py-0.5 self-start">finance</span> <span class="text-xs border border-blue-600 text-blue-600 rounded-sm px-2 py-0.5 self-start">finance</span>
</div> </div>
<p class="text-sm text-gray-600 leading-relaxed">Fundamental analysis using SEC filings (10-K, 10-Q) and earnings reports. Assess
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
Fundamental analysis using SEC filings (10-K, 10-Q) and earnings reports. Assess
profitability, liquidity, risk factors, and long-term business sustainability. Handle incomplete or profitability, liquidity, risk factors, and long-term business sustainability. Handle incomplete or
low-transparency information through structured cross-validation.</p> low-transparency information through structured cross-validation.
<a class="text-xs font-mono mt-3 inline-block text-blue-600" href="#research">// Go to Analysis</a> </p>
<a class="text-xs font-mono mt-3 inline-block text-blue-600 dark:text-blue-400"
href="#research"
onclick="event.stopPropagation()">// Go to Analysis</a>
</div> </div>
<div class="border border-gray-400 hover:border-pink-400 rounded-md p-6 cursor-pointer hover:bg-gray-50" onclick="window.location.href='#automation'"> <div class="border-2 border-gray-200 hover:border-pink-400 rounded-md p-6 cursor-pointer hover:bg-gray-50" onclick="window.location.href='#automation'">
<div class="flex justify-between mb-2"> <div class="flex justify-between mb-2">
<span class="font-medium">Technical Tools &amp; Automation</span> <span class="font-medium">Technical Tools &amp; Automation</span>
<span class="text-xs border px-2 py-0.5 self-start">engineering</span> <span class="text-xs border px-2 py-0.5 text-blue-600 rounded-sm self-start">engineering</span>
</div> </div>
<p class="text-sm text-gray-600 leading-relaxed">Build lightweight backend tools to automate repetitive analytical and operational tasks. <p class="text-sm text-gray-600 leading-relaxed">Build lightweight backend tools to automate repetitive analytical and operational tasks.
Python for data processing, validation, and workflow automation. Lightweight online services in Go, Python for data processing, validation, and workflow automation. Lightweight online services in Go,
focusing on speed and reliability.</p> focusing on speed and reliability.</p>
<a class="text-xs font-mono mt-3 inline-block" href="#automation">// Go to Tools</a> <a class="text-xs font-mono mt-3 inline-block text-blue-600" href="#automation">// Go to Tools</a>
</div> </div>
</div> </div>
</section> </section>
@@ -110,14 +117,14 @@
<section id="education" class="mb-12"> <section id="education" class="mb-12">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Education</h2> <h2 class="text-2xl font-light border-b pb-2 mb-6">Education</h2>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex gap-6 border-b pb-4"> <div class="flex gap-6 border-2 border-gray-200 rounded-md p-4">
<div class="text-xs text-gray-400 font-mono w-28 shrink-0">2025 — present</div> <div class="text-xs text-gray-400 font-mono w-28 shrink-0">2025 — present</div>
<div> <div>
<div class="font-medium text-sm">Bachelor of Economics &amp; Business Administration (HA)</div> <div class="font-medium text-sm">Bachelor of Economics &amp; Business Administration (HA)</div>
<div class="text-xs text-gray-500">Aalborg University · Expected 2028</div> <div class="text-xs text-gray-500">Aalborg University · Expected 2028</div>
</div> </div>
</div> </div>
<div class="flex gap-6 border-b pb-4"> <div class="flex gap-6 border-2 border-gray-200 rounded-md p-4">
<div class="text-xs text-gray-400 font-mono w-28 shrink-0">2024 — 2025<br> <div class="text-xs text-gray-400 font-mono w-28 shrink-0">2024 — 2025<br>
<span class="text-red-400">discontinued</span> <span class="text-red-400">discontinued</span>
</div> </div>
@@ -126,7 +133,7 @@
<div class="text-xs text-gray-500">Aalborg University · 1 semester</div> <div class="text-xs text-gray-500">Aalborg University · 1 semester</div>
</div> </div>
</div> </div>
<div class="flex gap-6 border-b pb-4"> <div class="flex gap-6 border-2 border-gray-200 rounded-md p-4">
<div class="text-xs text-gray-400 font-mono w-28 shrink-0">2020 — 2023</div> <div class="text-xs text-gray-400 font-mono w-28 shrink-0">2020 — 2023</div>
<div> <div>
<div class="font-medium text-sm">HTX - Technical Upper Secondary Education</div> <div class="font-medium text-sm">HTX - Technical Upper Secondary Education</div>
@@ -161,7 +168,7 @@
often poorly understood by the team and difficult to reason about over time. often poorly understood by the team and difficult to reason about over time.
</p> </p>
<div class="grid grid-cols-1 gap-4"> <div class="grid grid-cols-1 gap-4">
<div class="border p-6"> <div class="border-2 border-gray-200 rounded-md p-6">
<div class="font-medium mb-2">Portfolio Engine</div> <div class="font-medium mb-2">Portfolio Engine</div>
<p class="text-sm text-gray-600 leading-relaxed mb-4">A lightweight portfolio and financial data backend written in Go. Tracks companies, <p class="text-sm text-gray-600 leading-relaxed mb-4">A lightweight portfolio and financial data backend written in Go. Tracks companies,
currencies, revenue reports, and trades across configurable time periods — replacing spreadsheets with a currencies, revenue reports, and trades across configurable time periods — replacing spreadsheets with a
@@ -179,7 +186,7 @@
</ul> </ul>
<a class="text-xs font-mono mt-4 inline-block" href="https://git.samantha42.xyz/samantha/Portfolio-Engine">// Git repo</a> <a class="text-xs font-mono mt-4 inline-block" href="https://git.samantha42.xyz/samantha/Portfolio-Engine">// Git repo</a>
</div> </div>
<div class="border p-6"> <div class="border-2 border-gray-200 rounded-md p-6">
<div class="font-medium mb-2">Accounting Management</div> <div class="font-medium mb-2">Accounting Management</div>
<p class="text-sm text-gray-600 leading-relaxed">A lightweight, SQL-backed, web-based CLI system designed to track assets and liabilities. The goal is to <p class="text-sm text-gray-600 leading-relaxed">A lightweight, SQL-backed, web-based CLI system designed to track assets and liabilities. The goal is to
provide a simple, fast, and scalable financial tracking tool that can grow from personal use to more provide a simple, fast, and scalable financial tracking tool that can grow from personal use to more
@@ -190,7 +197,7 @@
<section id="research" class="mb-12"> <section id="research" class="mb-12">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Equity Research</h2> <h2 class="text-2xl font-light border-b pb-2 mb-6">Equity Research</h2>
<div class="border p-6 mb-4"> <div class="border-2 border-gray-200 rounded-md p-6 mb-4">
<div class="font-medium mb-2">Story vs Fundamental value</div> <div class="font-medium mb-2">Story vs Fundamental value</div>
<p class="text-sm text-gray-600 leading-relaxed"> <p class="text-sm text-gray-600 leading-relaxed">
The truth I keep coming back to is simple: find value grounded in the fundamental numbers of a company. The truth I keep coming back to is simple: find value grounded in the fundamental numbers of a company.
@@ -205,23 +212,23 @@
</p> </p>
</div> </div>
<h3 class="text-lg font-light mb-4">Current stock analysis</h3> <h3 class="text-lg font-light mb-4">Current stock analysis</h3>
<div class="border p-6 mb-4"> <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"> <div class="flex justify-between mb-2">
<span class="font-medium">MSTR: Strategy</span> <span class="font-medium">MSTR: Strategy</span>
<span class="text-red-500 text-sm">Sell</span> <span class="text-red-500 text-sm">Sell</span>
</div> </div>
<p class="text-sm text-gray-600 leading-relaxed">The company only owns btc by issuing debt and preferred stock offering.<br> <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> The company is a ponzi scheme at its best.</p>
<a class="text-xs font-mono mt-3 inline-block" href="/static/pdf/mstr.pdf" target="_blank">// Read file</a> <a class="text-xs font-mono mt-3 inline-block text-blue-600" href="/static/pdf/mstr.pdf" target="_blank">// Read file</a>
</div> </div>
<div class="border p-6 mb-4"> <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"> <div class="flex justify-between mb-2">
<span class="font-medium">Novo.B/NVO: Novo Nordisk A/S</span> <span class="font-medium">Novo.B/NVO: Novo Nordisk A/S</span>
<span class="text-green-600 text-sm">Buy</span> <span class="text-green-600 text-sm">Buy</span>
</div> </div>
<p class="text-sm text-gray-600 leading-relaxed">The product sales of weight loss drugs are high class, pipeline is undervalued.<br> <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> Pipeline and wegovy pill is not recognised correctly as high focus on expiration of current sold product. High pessimistic view of pipeline.</p>
<a class="text-xs font-mono mt-3 inline-block" href="/static/pdf/novo.pdf" target="_blank">// Read file</a> <a class="text-xs font-mono mt-3 inline-block text-blue-600" href="/static/pdf/novo.pdf" target="_blank">// Read file</a>
</div> </div>
</section> </section>
@@ -347,20 +354,35 @@
<script> <script>
// On page load — restore saved theme
(function () {
if (localStorage.theme === 'dark') {
document.documentElement.classList.add('dark');
}
})();
function toggleTheme() { // On page load, restore saved theme
const isDark = document.documentElement.classList.toggle('dark'); const saved = localStorage.getItem('theme');
localStorage.theme = isDark ? 'dark' : 'light'; if (saved === 'dark') {
document.getElementById('darkmode').classList.toggle('hidden', isDark); document.documentElement.classList.add('dark');
document.getElementById('lightmode').classList.toggle('hidden', !isDark); } else {
document.documentElement.classList.remove('dark');
} }
function darkTheme() {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
function lightTheme() {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
document.getElementById('btn-dark').addEventListener('click', function() {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
});
document.getElementById('btn-light').addEventListener('click', function() {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
});
function InterestShow() { function InterestShow() {
const body = document.getElementById('interests-body'); const body = document.getElementById('interests-body');
const chevron = document.getElementById('interests-chevron'); const chevron = document.getElementById('interests-chevron');
@@ -378,7 +400,7 @@
const bg = document.getElementById('parallax-bg'); const bg = document.getElementById('parallax-bg');
const scroller = document.getElementById('scroller'); const scroller = document.getElementById('scroller');
const speed = 0.1; const speed = 0.5;
scroller.addEventListener('scroll', () => { scroller.addEventListener('scroll', () => {
const offset = scroller.scrollTop * speed; const offset = scroller.scrollTop * speed;
static/tailwind.css
+109 -2786
View File
File diff suppressed because it is too large Load Diff
static/vars.css
+39 -5
View File
@@ -1,10 +1,6 @@
@import "tailwindcss"; @import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@theme {
--color-regal-blue: #243c5a;
}
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Noto+Sans+JP:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Noto+Sans+JP:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@@ -58,3 +54,41 @@
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
.sidebar-links a.hidden {
opacity: 0;
transition: opacity 0.4s linear;
}
.sidebar-links:hover a.hidden {
opacity: 1;
}
aside{
border-right:1px solid var(--border);
padding:2.5rem 1.5rem;
display:flex;flex-direction:column;gap:1rem;
position:sticky;top:52px;height:calc(100vh - 52px);
overflow-y:auto;
background:var(--surface);
}
.sidebar-label{
font-family:var(--ff-mono);font-size:0.65rem;
letter-spacing:0.2em;text-transform:uppercase;
color:var(--dim);margin-bottom:0.8rem;
}
.sidebar-links{display:flex;flex-direction:column;gap:2px;}
.sidebar-links a{
font-family:var(--ff-mono);font-size:0.78rem;color:var(--muted);
transition:color 0.15s,background 0.15s;
display:flex;align-items:center;gap:6px;
}
.sidebar-links a:hover{color:var(--text);background:var(--surface2);}
.skill-list{display:flex;flex-direction:column;gap:4px;}
.skill-item{
font-family:var(--ff-mono);font-size:0.78rem;
color:var(--muted);padding:0.3rem 0.6rem;
border-left:2px solid var(--border2);
transition:border-color 0.15s,color 0.15s;cursor:default;
}
.skill-item:hover{border-color:var(--accent);color:var(--text);}
tailwind.config.js
+9
View File
@@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: ['./static/**/*.html'], // adjust to where your HTML files are
theme: {
extend: {},
},
plugins: [],
}
tailwind.sh
+2 -1
View File
@@ -14,7 +14,8 @@ if [ "$OS" = "Darwin" ]; then
fi fi
fi fi
exec "./$BIN" ---input static/vars.css \ exec "./$BIN" --input static/vars.css \
--config tailwind.config.js \
--content "./static/**/*.html" \ --content "./static/**/*.html" \
--output static/tailwind.css \ --output static/tailwind.css \
--watch --watch