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
+65 -43
View File
@@ -6,7 +6,6 @@
<title>Home</title>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<link rel="stylesheet" href="/static/tailwind.css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<head>
<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">
<div id="parallax-bg"
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>
<!-- scroller: fills the viewport, scrolls inside -->
@@ -31,21 +30,21 @@
<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="darkmode" onclick="toggleTheme()" >
<img src="/static/icons/sun-light.svg" id="lightmode" onclick="toggleTheme()" class="hidden">
<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">
</div>
<div class="mb-6">
<p class="text-xs uppercase tracking-widest text-gray-400 mb-2">navigate</p>
<div class="flex flex-col gap-1 text-sm">
<a href="#about">// about</a>
<a href="#experience">// experience</a>
<a href="#education">// education</a>
<a href="#opinion">// opinion</a>
<a href="#automation">// automation</a>
<a href="#interests" onclick="InterestShow()">// interests</a>
<p class="text-xs uppercase tracking-widest text-gray-800 mb-2">navigate</p>
<div class="flex flex-col gap-2 text-xs text-gray-500 sidebar-links">
<a href="#about">// About</a>
<a href="#experience">// Experience</a>
<a href="#education">// Education</a>
<a href="#opinion">// Opinion</a>
<a href="#automation">// Automation</a>
<a href="#interests" onclick="InterestShow()">// Interests</a>
</div>
</div>
<div class="mb-6">
<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">
<div>| Excel</div>
@@ -84,25 +83,33 @@
<section id="experience" class="mb-12">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Experience</h2>
<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">
<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>
</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
low-transparency information through structured cross-validation.</p>
<a class="text-xs font-mono mt-3 inline-block text-blue-600" href="#research">// Go to Analysis</a>
low-transparency information through structured cross-validation.
</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 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">
<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>
<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,
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>
</section>
@@ -110,14 +117,14 @@
<section id="education" class="mb-12">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Education</h2>
<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>
<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>
</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>
<span class="text-red-400">discontinued</span>
</div>
@@ -126,7 +133,7 @@
<div class="text-xs text-gray-500">Aalborg University · 1 semester</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>
<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.
</p>
<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>
<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
@@ -179,7 +186,7 @@
</ul>
<a class="text-xs font-mono mt-4 inline-block" href="https://git.samantha42.xyz/samantha/Portfolio-Engine">// Git repo</a>
</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>
<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
@@ -190,7 +197,7 @@
<section id="research" class="mb-12">
<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>
<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.
@@ -205,23 +212,23 @@
</p>
</div>
<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">
<span class="font-medium">MSTR: Strategy</span>
<span class="text-red-500 text-sm">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>
<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 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">
<span class="font-medium">Novo.B/NVO: Novo Nordisk A/S</span>
<span class="text-green-600 text-sm">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>
<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>
</section>
@@ -347,20 +354,35 @@
<script>
// On page load — restore saved theme
(function () {
if (localStorage.theme === 'dark') {
document.documentElement.classList.add('dark');
}
})();
function toggleTheme() {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.theme = isDark ? 'dark' : 'light';
document.getElementById('darkmode').classList.toggle('hidden', isDark);
document.getElementById('lightmode').classList.toggle('hidden', !isDark);
// On page load, restore saved theme
const saved = localStorage.getItem('theme');
if (saved === 'dark') {
document.documentElement.classList.add('dark');
} 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() {
const body = document.getElementById('interests-body');
const chevron = document.getElementById('interests-chevron');
@@ -378,7 +400,7 @@
const bg = document.getElementById('parallax-bg');
const scroller = document.getElementById('scroller');
const speed = 0.1;
const speed = 0.5;
scroller.addEventListener('scroll', () => {
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";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--color-regal-blue: #243c5a;
}
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@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');
@@ -58,3 +54,41 @@
font-weight: 400;
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
exec "./$BIN" ---input static/vars.css \
exec "./$BIN" --input static/vars.css \
--config tailwind.config.js \
--content "./static/**/*.html" \
--output static/tailwind.css \
--watch