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

darkmode

Browse Source
This commit is contained in:
zipfriis
2026-05-29 17:02:26 +02:00
parent d8903a42ed
commit c1bd40d5a5
5 changed files with 56 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -1 +1,2 @@
.env
tailwindcss-*
site
BIN
View File
Binary file not shown.
static/index.html
+33 -15
View File
@@ -6,11 +6,12 @@
<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">
<!-- NAV -->
<nav class="fixed inset-x-0 top-0 h-12 z-50 flex items-center px-8 bg-white/95 backdrop-blur-l border-b border-gray-200">
<nav class="fixed inset-x-0 top-0 h-12 z-50 flex items-center px-8 bg-white/90 dark:bg-black/90 backdrop-blur-l border-b border-gray-200">
<a class="text-blue-400 text-xs" href="#"><span class="text-green-500">></span> samantha_vero_friis</a>
<div class="ml-auto">
<button onclick="openOverlay()">login</button>
@@ -23,32 +24,35 @@
class="absolute inset-x-0 will-change-transform overflow-hidden"
style="top:-100%;bottom:-30%;">
<div hx-get="/static/components/background.html" hx-trigger="load" hx-swap="outerHTML"></div>
</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="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">
</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>
<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">
<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>
<div>Python</div>
<div>SQL</div>
<div>Go</div>
<div>Git</div>
<div>| Excel</div>
<div>| Python</div>
<div>| SQL</div>
<div>| Go</div>
<div>| Git</div>
</div>
</div>
<div class="mb-6">
@@ -80,7 +84,7 @@
<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 p-6 rounded-md cursor-pointer hover:bg-gray-50" onclick="window.location.href='#research'">
<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="flex justify-between mb-2">
<span class="font-medium">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>
@@ -90,7 +94,7 @@
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>
</div>
<div class="border p-6 rounded-xl cursor-pointer hover:bg-gray-50" onclick="window.location.href='#automation'">
<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="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>
@@ -343,6 +347,20 @@
<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);
}
function InterestShow() {
const body = document.getElementById('interests-body');
const chevron = document.getElementById('interests-chevron');
static/vars.css
+1
View File
@@ -1,5 +1,6 @@
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--color-regal-blue: #243c5a;
}
tailwind.sh
Regular → Executable
+20 -1
View File
@@ -1 +1,20 @@
./tailwindcss-linux-x64 --input static/vars.css --content "./static/**/*.html" --output static/tailwind.css --watch
#!/usr/bin/env sh
set -e
OS="$(uname -s)"
ARCH="$(uname -m)"
BIN="tailwindcss-linux-x64"
if [ "$OS" = "Darwin" ]; then
if [ "$ARCH" = "arm64" ]; then
BIN="tailwindcss-macos-arm64"
else
BIN="tailwindcss-macos-x64"
fi
fi
exec "./$BIN" ---input static/vars.css \
--content "./static/**/*.html" \
--output static/tailwind.css \
--watch