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

interest good open close

Browse Source
This commit is contained in:
samantha42
2026-05-30 16:38:27 +02:00
parent e2fa5a291d
commit 8c3d876aa5
10 changed files with 1689 additions and 2168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main.go
+1 -1
View File
@@ -39,7 +39,7 @@ func main() {
fs := http.FileServer(http.Dir("static")) fs := http.FileServer(http.Dir("static"))
http.Handle("/static/", http.StripPrefix("/static/", fs)) http.Handle("/static/", http.StripPrefix("/static/", fs))
http.HandleFunc("GET /{$}", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/about.html") }) http.HandleFunc("GET /{$}", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/index.html") })
http.HandleFunc("GET /infra", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/infra.html") }) http.HandleFunc("GET /infra", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/infra.html") })
http.HandleFunc("GET /finance", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/finance.html") }) http.HandleFunc("GET /finance", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/finance.html") })
http.HandleFunc("GET /cinema", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/cinema.html") }) http.HandleFunc("GET /cinema", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/cinema.html") })
site
BIN
View File
Binary file not shown.
static/about.html
-440
View File
@@ -1,440 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Samantha Vero Friis</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap"
rel="stylesheet" />
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<link rel="stylesheet" href="/static/style/styles2.css"/>
</head>
<body class="theme-root day " id="themeRoot">
<nav>
<a class="nav-logo" href="#">samantha_vero_friis</a>
<div class="nav-links">
<a href="/engine">engine</a>
<a href="/portfolio">portfolio</a>
<a href="/cinema">cinema</a>
<a href="/finance">finance</a>
<a href="/infra">infrastructure</a>
<a href="/git">git</a>
<a class="cta" href="mailto:me@samantha42.xyz">contact</a>
</div>
</nav>
<div class="shell">
<aside>
<div class="row">
<div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle"
aria-label="Toggle day/night mode">
<div class="track day" id="track">
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</div>
<div class="knob day" id="knob">
<div class="sun-rays" id="rays"></div>
<div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
<div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
<div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
</div>
</div>
</div>
<div>
<p class="sidebar-label">navigate</p>
<div class="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">interests</a>
<a class="hidden" href="/42">42</a>
</div>
</div>
<div>
<p class="sidebar-label">skills</p>
<div class="skill-list">
<div class="skill-item">Excel</div>
<div class="skill-item">Python</div>
<div class="skill-item">SQL</div>
<div class="skill-item">Go</div>
<div class="skill-item">Git</div>
</div>
</div>
<div>
<p class="sidebar-label">location</p>
<div style="font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);">Denmark<br>Aalborg Øst, 9220</div>
</div>
<div>
<p class="sidebar-label">languages</p>
<div class="lang-row">
<span class="lang-badge">Danish</span>
<span class="lang-badge">English</span>
</div>
</div>
<div style="flex: 1;"></div>
</aside>
<main id="about">
<section class="hero">
<p class="hero-eyebrow">About Me · 2026</p>
<h1>Samantha<br><span>Vero Friis</span>
</h1>
<p class="hero-bio">Bachelor's student in Business Administration seeking an entry-level analyst or
finance-related role while studying. Strong numerical skills, advanced Excel, and experience in company, risk,
and financial analysis. Analytical, detail-oriented, and efficiency-focused.</p>
<div class="hero-meta">
<span>
<div hx-get="/status" hx-trigger="load" hx-swap="outerHTML"></div>
<span>samantha42.xyz</span>
<span>me@samantha42.xyz</span>
</div>
</section>
<section id="experience">
<div class="section-head">
<h2>experience</h2>
</div>
<div class="exp-grid">
<div class="exp-card" onclick="window.location.href='#research'">
<div class="exp-header">
<span class="exp-title">Independent Equity Research</span>
<span class="exp-tag">finance</span>
</div>
<p class="exp-body">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="navigate" href="#research">// Go to Analysis</a>
</div>
<div class="exp-card" onclick="window.location.href='#automation'">
<div class="exp-header">
<span class="exp-title">Technical Tools &amp; Automation</span>
<span class="exp-tag">engineering</span>
</div>
<p class="exp-body">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="navigate" href="#automation">// Go to Tools</a>
</div>
</div>
</section>
<section id="education">
<div class="section-head">
<h2>education</h2>
</div>
<div class="edu-grid">
<div class="edu-card">
<div class="edu-year">2025 — present</div>
<div>
<div class="edu-degree">Bachelor of Economics &amp; Business Administration (HA)</div>
<div class="edu-inst">Aalborg University · Expected 2028</div>
</div>
</div>
<div class="edu-card">
<div class="edu-year">2024 — 2025
<br>
<span class="edu-tag tag-dropped">discontinued</span>
</div>
<div class="edu-body">
<div class="edu-degree">Mathematics-Technology (BSc)</div>
<div class="edu-inst">Aalborg University · 1 semester</div>
</div>
</div>
<div class="edu-card">
<div class="edu-year">2020 — 2023</div>
<div>
<div class="edu-degree">HTX – Technical Upper Secondary Education</div>
<div class="edu-inst">Viden Gymnasier</div>
<div class="edu-detail">Mathematics A, Biology B · Study project: Mathematics &amp; Technology</div>
</div>
</div>
</div>
</section>
<section id="opinion">
<div class="section-head">
<h2>opinion</h2>
</div>
<div class="opinion-grid">
<a class="opinion-link" href="/cinema">cinema</a>
<a class="opinion-link" href="/finance">finance</a>
<a class="opinion-link" href="/infra">infra</a>
</div>
</section>
<section id="automation">
<div class="page-header">
<h2 class="page-title">Technical Tools & Automation</h2>
<span class="page-sub">engineering/programing</span>
</div>
<div class="exp-grid">
<p class="exp-body">
The task here is simple: to reduce work, it's a simple investment. The choice of picking the correct
bottleneck is as important as the tool itself, as this gives it use. If it's never used, it never creates
value. The same goes for uptime, it's important that stability is almost perfect, as downtime undermines
the utility of having the tool. Remember that making and using a tool also creates debt for future
maintenance of the tool.
<br>
To adhere to this, I often choose Golang or Python as they are cheap to maintain. Golang has good
stability because it is easy to code and compile checks give early error detection. A word of caution on
AI generated tools: while they are cheap to make, the maintenance debt grows exponentially, as the code is
often poorly understood by the team and difficult to reason about over time.
</p>
<div class="exp-card" >
<div class="exp-header">
<span class="exp-title">Portfolio Engine</span>
</div>
<p class="exp-body">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
proper database, REST API, and interactive shell.</p>
<span class="exp-title">Roadmap</span>
<ul style="padding: 20px;">
<li class="exp-body">Price update endpoint</li>
<li class="exp-body">Multi-currency conversion</li>
<li class="exp-body">Frontend dashboard</li>
<li class="exp-body">Shares outstanding history database table</li>
<li class="exp-body">Earnings per share (EPS) based on shares owned</li>
<li class="exp-body">First-In, First-Out (FIFO) realized gains</li>
<li class="exp-body">Dividends earned and related taxes</li>
<li class="exp-body">Total tax obligations</li>
</ul>
<a class="outlink" href="https://git.samantha42.xyz/samantha/Portfolio-Engine">Git repo</a>
</div>
<div class="exp-card">
<div class="exp-header">
<span class="exp-title">Accounting Management</span>
</div>
<p class="exp-body">
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
advanced scenarios.</p>
</div>
</div>
</section>
<section id="research">
<div class="page-header">
<h2 class="page-title">Equity Research</h2>
</div>
<div class="exp-card">
<div class="exp-header">
<span class="exp-title">Story vs Fundamental value</span>
</div>
<p class="exp-body">
The truth I keep coming back to is simple: find value grounded in the fundamental numbers of a company.
<br>
My approach is rooted in fundamental analysis using SEC filings (10-K, 10-Q), earnings reports, profitability, liquidity, risk factors, and long-term business sustainability. In low-transparency situations I rely on structured cross-validation across sources.
<br>
A pattern I keep seeing is CEOs speaking just close enough to reality to generate a short-term price boost, then moving the goalposts when reality catches up. What companies state in filings and what they communicate to retail or even professional investors can be two very different stories. Guidance only needs to reach far enough into the future to say almost anything.
</p>
</div>
<div class="section-head">
<h2>Current stock analysis</h2>
</div>
<div class="exp-card">
<div class="exp-header">
<span class="exp-title">MSTR: Strategy<span style="color: red;"> (Sell)</span></span>
</div>
<p class="exp-body">
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="outlink" href="/static/pdf/mstr.pdf" target="_blank">Read file</a>
</div>
<br>
<div class="exp-card">
<div class="exp-header">
<span class="exp-title">Novo.B/NVO: Novo Nordisk A/S<span style="color: green"> (buy)</span></span>
</div>
<p class="exp-body">
The product sales of wieght loss drugs are highclass, pipeline is undervalued.
<br>
Pipeline and wegovy pil is not reconsiced correctly as high focus on expireation of current sold product. high pisimistic view of pipeline.
</p>
<a class="outlink" href="/static/pdf/novo.pdf" target="_blank">Read file</a>
</div>
<br>
</section>
<section id="interests">
<div class="page-header">
<h2 class="page-title" id="interest">
interests
<button onclick="toggleInterests()" class="">open</button>
</h2>
<span class="page-sub" id="interest-sub">Fav lists</span>
<span class="matrix-hidden" id="matrix-hidden">
Boy: Do not try and bend the spoon. That's impossible. Instead... only try to realize the truth.
<br>
Neo: What truth?
<br>
Boy: There is no spoon.
</span>
</div>
<div id="interests-body" class="hidden">
<div class="section-head">
<h2>Movie/Show Top list</h2>
</div>
<div class="toplist-group">
<h3>Top 5 Movies</h3>
<div class="toplist-body">
<div class="poster-grid">
<div class="poster-item posterhover" onclick="bladerunnerClick()">
<img src="/static/posters/bladerunner2049.jpg" alt="Blade Runner 2049">
<p>Blade Runner 2049</p>
</div>
<div class="poster-item posterhover" onclick="cureClick()">
<img src="/static/posters/AcureForWellness.jpg" alt="A Cure of Wellness">
<p>A Cure of Wellness</p>
</div>
<div class="poster-item posterhover" onclick="matrixClick()">
<img src="/static/posters/matrix.jpg" alt="matrix">
<p>The Matrix</p>
</div>
<div class="poster-item posterhover" onclick="draculaClick()">
<img src="/static/posters/Dracula.webp" alt="Dracula: A Love Tale">
<p>Dracula: A Love Tale</p>
</div>
<div class="poster-item posterhover" onclick="dragonTypewriterClick()">
<img src="/static/posters/TheGirlwiththeDragonTattoo.webp" alt="Girl with a Dragon Tattoos">
<p>Girl with a Dragon Tattoo</p>
</div>
</div>
</div>
<div class="toplist-group">
<h3>Top 5 Shows</h3>
<div class="toplist-body">
<div class="poster-grid">
<div class="poster-item">
<img src="/static/posters/foundation.jpg" alt="foundation">
<p>Foundation</p>
</div>
<div class="poster-item">
<img src="/static/posters/Chernobyl.webp" alt="Chernobyl">
<p>Chernobyl</p>
</div>
<div class="poster-item">
<img src="/static/posters/Breaking Bad.webp" alt="Breaking Bad">
<p>Breaking Bad</p>
</div>
<div class="poster-item">
<img src="/static/posters/Avatar.webp" alt="Avatar: The Last Airbender">
<p>Avatar: The Last Airbender</p>
</div>
<div class="poster-item">
<img src="/static/posters/Adolescence.webp" alt="Adolescence">
<p>Adolescence</p>
</div>
</div>
</div>
</div>
<div class="section-head">
<h2>Lunix rice</h2>
</div>
<div style="display: flex; align-items: center; gap: 1rem;">
<p class="exp-body">I love my custom Linux setup. I use Hyprland, which automatically arranges app windows
on my screen so everything stays organized without dragging things around. I also use Quickshell, which
lets me customize menus, shortcuts, and system controls to work exactly how I want.
My system is based on Arch Linux or Manjaro Linux, which are versions of Linux that give you more
control and customization than a typical computer setup. The result is a clean, fast, and super
efficient desktop that’s hard to go back from.
<a class="outlink" href="https://git.samantha42.xyz/samantha/dotfiles">Git repo</a>
</p>
<img src="/static/images/rice.png" style="height: 200px; align-self: center;">
</div>
<div class="section-head">
<h2>programing</h2>
</div>
<div style="display: flex; align-items: center; gap: 1rem;">
<img src="/static/images/program.png" style="height: 350px;" alt="program">
<div>
<p class="exp-body">
Programming can be a task, but for me it's a source of joy. This is something I do as a hobby, and I
don't use AI much. It's about having fun and making a fool of yourself. It's not about how good it is,
in this case, I'd rather just listen to music and drink a cup of tea. I enjoy the struggle to debug, the
beauty in understanding why a bug is there to begin with.
</p>
<br>
<p class="exp-body">
The text editor I use most is VS Code, but I love the Neovim setup as it enables me to code on a
low-level system without a desktop environment being necessary. I do most of my coding on my own
desktop, synced with Git to other systems, like the server that hosts this website, which I have built
myself. The creation of this website is more of a fun dumb activity for me... go click on one of the
movie posters and see.
</p>
</div>
</div>
<br>
<div class="section-head">
<h2>Games</h2>
</div>
<p class="exp-body" >Game i will play in my free time to wind down.</p>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem; padding: 20px;">
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/minecraft.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Minecraft</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/Tombraider.png" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Rise of the Tomb Raider</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/planetzoo.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Planet Zoo</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/gtav.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">GTA V</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/factorio.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Factorio</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/detroitbecomehuman.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Detroit: Become Human</p>
</div>
</div>
</div>
</section>
</main>
</div>
<footer>
<div class="footer-contact">
<a href="mailto:me@samantha42.xyz">me@samantha42.xyz</a>
</div>
<div class="footer-copy">© 2026 — all rights reserved</div>
</footer>
<script src="/static/about.js"></script>
<script src="/static/scripts/posteranimation.js"></script>
</body>
</html>
static/about.js
-68
View File
@@ -1,68 +0,0 @@
const toggle = document.getElementById('toggle');
const track = document.getElementById('track');
const knob = document.getElementById('knob');
const rays = document.getElementById('rays');
const stateLabel = document.getElementById('state-label');
const themeRoot = document.getElementById('themeRoot');
let isDay = true;
const RAY_COUNT = 8;
for (let i = 0; i < RAY_COUNT; i++) {
const r = document.createElement('div');
r.className = 'ray';
r.style.transform = `rotate(${i * (360/RAY_COUNT)}deg)`;
rays.appendChild(r);
}
function applyState() {
if (isDay) {
track.className = 'track day';
knob.className = 'knob day';
toggle.setAttribute('aria-checked', 'true');
themeRoot.classList.remove('night');
} else {
track.className = 'track night';
knob.className = 'knob night';
toggle.setAttribute('aria-checked', 'false');
themeRoot.classList.add('night');
}
}
toggle.addEventListener('click', () => { isDay = !isDay; applyState(); });
toggle.addEventListener('keydown', e => {
if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); isDay = !isDay; applyState(); }
});
function copyClass() {
navigator.clipboard.writeText(classOut.textContent).catch(() => {});
}
// just some fun.
console.log("%c👀 hi there!", "font-size:20px")
// about.js
function closeOverlay() {
document.getElementById('overlay').style.display = 'none';
}
// or toggle it from anywhere:
function openOverlay() {
document.getElementById('overlay').style.display = 'flex';
}
function InterestShow() {
const body = document.getElementById('interests-body');
const chevron = document.getElementById('interests-chevron');
chevron.classList.add("hidden")
body.classList.remove("hidden")
chevron.textContent = hidden ? '▶' : '▼';
}
function toggleInterests() {
const body = document.getElementById('interests-body');
const chevron = document.getElementById('interests-chevron');
const hidden = body.classList.toggle('hidden');
chevron.textContent = hidden ? '▶' : '▼';
}
static/index.html
+438 -339
View File
@@ -1,411 +1,510 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<link rel="stylesheet" href="/static/tailwind.css" />
<head>
<body class="m-0 p-0 bg-zinc-50 rubik-400">
<!-- NAV --> <head>
<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"> <meta charset="UTF-8" />
<a class="text-blue-400 text-xs" href="#"><span class="text-green-500">></span> samantha_vero_friis</a> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="ml-auto"> <title>Samantha Vero Friis</title>
<button onclick="openOverlay()">login</button> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap"
rel="stylesheet" />
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<link rel="stylesheet" href="/static/output.css"/>
</head>
<body class="theme-root day " id="themeRoot">
<nav>
<a class="nav-logo" href="#">samantha_vero_friis</a>
<div class="nav-links">
<a href="/engine">engine</a>
<a href="/portfolio">portfolio</a>
<a href="/cinema">cinema</a>
<a href="/finance">finance</a>
<a href="/infra">infrastructure</a>
<a href="/git">git</a>
<a class="cta" href="mailto:me@samantha42.xyz">contact</a>
</div> </div>
</nav> </nav>
<!-- MAIN with parallax --> <div class="shell">
<main id="parallax-section" class="relative h-screen overflow-hidden"> <aside>
<div id="parallax-bg" <div class="row">
class="absolute inset-x-0 will-change-transform overflow-hidden" <div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle"
style="top:-200%;bottom:-30%;"> aria-label="Toggle day/night mode">
<div hx-get="/static/components/background.html" hx-trigger="load" hx-swap="outerHTML"></div> <div class="track day" id="track">
</div> <div class="stars">
<!-- scroller: fills the viewport, scrolls inside --> <div class="star"></div>
<div id="scroller" class="relative z-10 h-full flex justify-center overflow-y-auto"> <div class="star"></div>
<div class=" text-black h-fit w-4xl flex font-light"> <div class="star"></div>
<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="star"></div>
<div class="mb-6"> <div class="star"></div>
<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-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> </div>
<div class="mb-6 "> <div class="knob day" id="knob">
<p class="text-xs uppercase tracking-widest text-gray-800 mb-2">skills</p> <div class="sun-rays" id="rays"></div>
<div class="flex flex-col gap-1 text-xs text-gray-500 text-sm"> <div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
<div>| Excel</div> <div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
<div>| Python</div> <div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
<div>| SQL</div> </div>
<div>| Go</div> </div>
<div>| Git</div> </div>
<div>
<p class="sidebar-label">navigate</p>
<div class="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">interests</a>
<a class="hidden" href="/42">42</a>
</div>
</div>
<div>
<p class="sidebar-label">skills</p>
<div class="skill-list">
<div class="skill-item">Excel</div>
<div class="skill-item">Python</div>
<div class="skill-item">SQL</div>
<div class="skill-item">Go</div>
<div class="skill-item">Git</div>
</div>
</div>
<div>
<p class="sidebar-label">location</p>
<div style="font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);">Denmark<br>Aalborg Øst, 9220</div>
</div>
<div>
<p class="sidebar-label">languages</p>
<div class="lang-row">
<span class="lang-badge">Danish</span>
<span class="lang-badge">English</span>
</div>
</div>
<div style="flex: 1;"></div>
</aside>
<main id="about">
<section class="hero">
<p class="hero-eyebrow">About Me · 2026</p>
<h1>Samantha<br><span>Vero Friis</span>
</h1>
<p class="hero-bio">Bachelor's student in Business Administration seeking an entry-level analyst or
finance-related role while studying. Strong numerical skills, advanced Excel, and experience in company, risk,
and financial analysis. Analytical, detail-oriented, and efficiency-focused.</p>
<div class="hero-meta">
<span>
<div hx-get="/status" hx-trigger="load" hx-swap="outerHTML"></div>
<span>samantha42.xyz</span>
<span>me@samantha42.xyz</span>
</div>
</section>
<section id="experience">
<div class="section-head">
<h2>experience</h2>
</div>
<div class="exp-grid">
<div class="exp-card" onclick="window.location.href='#research'">
<div class="exp-header">
<span class="exp-title">Independent Equity Research</span>
<span class="exp-tag">finance</span>
</div>
<p class="exp-body">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="navigate" href="#research">// Go to Analysis</a>
</div>
<div class="exp-card" onclick="window.location.href='#automation'">
<div class="exp-header">
<span class="exp-title">Technical Tools &amp; Automation</span>
<span class="exp-tag">engineering</span>
</div>
<p class="exp-body">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="navigate" href="#automation">// Go to Tools</a>
</div>
</div>
</section>
<section id="education">
<div class="section-head">
<h2>education</h2>
</div>
<div class="edu-grid">
<div class="edu-card">
<div class="edu-year">2025 — present</div>
<div>
<div class="edu-degree">Bachelor of Economics &amp; Business Administration (HA)</div>
<div class="edu-inst">Aalborg University · Expected 2028</div>
</div> </div>
</div> </div>
<div class="mb-6"> <div class="edu-card">
<p class="text-xs uppercase tracking-widest text-gray-800 mb-2">location</p> <div class="edu-year">2024 — 2025
<div class="text-xs text-gray-500 font-mono">Denmark<br>Aalborg Øst, 9220</div> <br>
</div> <span class="edu-tag tag-dropped">discontinued</span>
<div class="mb-6">
<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>
</div> <div class="edu-body">
</aside> <div class="edu-degree">Mathematics-Technology (BSc)</div>
<div class="pt-20 bg-zinc-50/95 " id="resume"> <div class="edu-inst">Aalborg University · 1 semester</div>
<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>
<h1 class="text-5xl font-light mb-4 libre-caslon-text-regular">Samantha<br><span class="text-blue-400 libre-caslon-text-regular ">Vero Friis</span></h1>
<p class="text-base text-gray-600 leading-relaxed max-w-prose">Bachelor's student in Business Administration seeking an entry-level analyst or
finance-related role while studying. Strong numerical skills, advanced Excel, and experience in company, risk,
and financial analysis. Analytical, detail-oriented, and efficiency-focused.</p>
<div class="mt-4 text-sm text-gray-500">
<div hx-get="/status" hx-trigger="load" hx-swap="outerHTML"></div>
<span>email: me@samantha42.xyz</span>
</div> </div>
</div> </div>
<section id="experience" class="mb-12"> <div class="edu-card">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Experience</h2> <div class="edu-year">2020 — 2023</div>
<div class="grid grid-cols-1 gap-4"> <div>
<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" <div class="edu-degree">HTX – Technical Upper Secondary Education</div>
onclick="window.location.href='#research'"> <div class="edu-inst">Viden Gymnasier</div>
<div class="edu-detail">Mathematics A, Biology B · Study project: Mathematics &amp; Technology</div>
<div class="flex justify-between mb-2">
<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 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 dark:text-blue-400"
href="#research"
onclick="event.stopPropagation()">// Go to Analysis</a>
</div> </div>
<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>
<div class="flex justify-between mb-2"> </div>
<span class="font-medium">Technical Tools &amp; Automation</span> </section>
<span class="text-xs border px-2 py-0.5 text-blue-600 rounded-sm self-start">engineering</span> <section id="opinion">
</div> <div class="section-head">
<p class="text-sm text-gray-600 leading-relaxed">Build lightweight backend tools to automate repetitive analytical and operational tasks. <h2>opinion</h2>
Python for data processing, validation, and workflow automation. Lightweight online services in Go, </div>
focusing on speed and reliability.</p> <div class="opinion-grid">
<a class="text-xs font-mono mt-3 inline-block text-blue-600" href="#automation">// Go to Tools</a> <a class="opinion-link" href="/cinema">cinema</a>
</div> <a class="opinion-link" href="/finance">finance</a>
</div> <a class="opinion-link" href="/infra">infra</a>
</section> </div>
</section>
<section id="education" class="mb-12"> <section id="automation">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Education</h2> <div class="page-header">
<div class="flex flex-col gap-4"> <h2 class="page-title">Technical Tools & Automation</h2>
<div class="flex gap-6 border-2 border-gray-200 rounded-md p-4"> <span class="page-sub">engineering/programing</span>
<div class="text-xs text-gray-400 font-mono w-28 shrink-0">2025 — present</div> </div>
<div> <div class="exp-grid">
<div class="font-medium text-sm">Bachelor of Economics &amp; Business Administration (HA)</div> <p class="exp-body">
<div class="text-xs text-gray-500">Aalborg University · Expected 2028</div>
</div>
</div>
<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>
<div>
<div class="font-medium text-sm">Mathematics-Technology (BSc)</div>
<div class="text-xs text-gray-500">Aalborg University · 1 semester</div>
</div>
</div>
<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>
<div class="text-xs text-gray-500">Viden Gymnasier</div>
<div class="text-xs text-gray-400">Mathematics A, Biology B · Study project: Mathematics &amp; Technology</div>
</div>
</div>
</div>
</section>
<section id="opinion" class="mb-12">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Opinion</h2>
<div class="flex gap-4">
<a class="border px-4 py-2 text-sm hover:bg-gray-50" href="/cinema">cinema</a>
<a class="border px-4 py-2 text-sm hover:bg-gray-50" href="/finance">finance</a>
<a class="border px-4 py-2 text-sm hover:bg-gray-50" href="/infra">infra</a>
</div>
</section>
<section id="automation" class="mb-12">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Technical Tools &amp; Automation <span class="text-sm text-gray-400">engineering/programming</span></h2>
<p class="text-sm text-gray-600 leading-relaxed mb-6 max-w-prose">
The task here is simple: to reduce work, it's a simple investment. The choice of picking the correct The task here is simple: to reduce work, it's a simple investment. The choice of picking the correct
bottleneck is as important as the tool itself, as this gives it use. If it's never used, it never creates bottleneck is as important as the tool itself, as this gives it use. If it's never used, it never creates
value. The same goes for uptime, it's important that stability is almost perfect, as downtime undermines value. The same goes for uptime, it's important that stability is almost perfect, as downtime undermines
the utility of having the tool. Remember that making and using a tool also creates debt for future the utility of having the tool. Remember that making and using a tool also creates debt for future
maintenance of the tool. maintenance of the tool.
<br><br> <br>
To adhere to this, I often choose Golang or Python as they are cheap to maintain. Golang has good To adhere to this, I often choose Golang or Python as they are cheap to maintain. Golang has good
stability because it is easy to code and compile checks give early error detection. A word of caution on stability because it is easy to code and compile checks give early error detection. A word of caution on
AI generated tools: while they are cheap to make, the maintenance debt grows exponentially, as the code is AI generated tools: while they are cheap to make, the maintenance debt grows exponentially, as the code is
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="exp-card" >
<div class="border-2 border-gray-200 rounded-md p-6"> <div class="exp-header">
<div class="font-medium mb-2">Portfolio Engine</div> <span class="exp-title">Portfolio Engine</span>
<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
proper database, REST API, and interactive shell.</p>
<div class="font-medium text-sm mb-2">Roadmap</div>
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
<li>Price update endpoint</li>
<li>Multi-currency conversion</li>
<li>Frontend dashboard</li>
<li>Shares outstanding history database table</li>
<li>Earnings per share (EPS) based on shares owned</li>
<li>First-In, First-Out (FIFO) realized gains</li>
<li>Dividends earned and related taxes</li>
<li>Total tax obligations</li>
</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-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
advanced scenarios.</p>
</div> </div>
<p class="exp-body">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
proper database, REST API, and interactive shell.</p>
<span class="exp-title">Roadmap</span>
<ul style="padding: 20px;">
<li class="exp-body">Price update endpoint</li>
<li class="exp-body">Multi-currency conversion</li>
<li class="exp-body">Frontend dashboard</li>
<li class="exp-body">Shares outstanding history database table</li>
<li class="exp-body">Earnings per share (EPS) based on shares owned</li>
<li class="exp-body">First-In, First-Out (FIFO) realized gains</li>
<li class="exp-body">Dividends earned and related taxes</li>
<li class="exp-body">Total tax obligations</li>
</ul>
<a class="outlink" href="https://git.samantha42.xyz/samantha/Portfolio-Engine">Git repo</a>
</div> </div>
</section> <div class="exp-card">
<div class="exp-header">
<span class="exp-title">Accounting Management</span>
</div>
<p class="exp-body">
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
advanced scenarios.</p>
</div>
</div>
</section>
<section id="research">
<div class="page-header">
<h2 class="page-title">Equity Research</h2>
</div>
<div class="exp-card">
<div class="exp-header">
<span class="exp-title">Story vs Fundamental value</span>
</div>
<p class="exp-body">
The truth I keep coming back to is simple: find value grounded in the fundamental numbers of a company.
<br>
My approach is rooted in fundamental analysis using SEC filings (10-K, 10-Q), earnings reports, profitability, liquidity, risk factors, and long-term business sustainability. In low-transparency situations I rely on structured cross-validation across sources.
<br>
A pattern I keep seeing is CEOs speaking just close enough to reality to generate a short-term price boost, then moving the goalposts when reality catches up. What companies state in filings and what they communicate to retail or even professional investors can be two very different stories. Guidance only needs to reach far enough into the future to say almost anything.
</p>
</div>
<section id="research" class="mb-12"> <div class="section-head">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Equity Research</h2> <h2>Current stock analysis</h2>
<div class="border-2 border-gray-200 rounded-md p-6 mb-4"> </div>
<div class="font-medium mb-2">Story vs Fundamental value</div> <div class="exp-card">
<p class="text-sm text-gray-600 leading-relaxed"> <div class="exp-header">
The truth I keep coming back to is simple: find value grounded in the fundamental numbers of a company. <span class="exp-title">MSTR: Strategy<span style="color: red;"> (Sell)</span></span>
<br><br>
My approach is rooted in fundamental analysis using SEC filings (10-K, 10-Q), earnings reports,
profitability, liquidity, risk factors, and long-term business sustainability. In low-transparency
situations I rely on structured cross-validation across sources.
<br><br>
A pattern I keep seeing is CEOs speaking just close enough to reality to generate a short-term price
boost, then moving the goalposts when reality catches up. What companies state in filings and what they
communicate to retail or even professional investors can be two very different stories.
</p>
</div> </div>
<h3 class="text-lg font-light mb-4">Current stock analysis</h3> <p class="exp-body">
<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'"> The company only owns btc by issuing debt and preferred stock offering.
<div class="flex justify-between mb-2"> <br>
<span class="font-medium">MSTR: Strategy</span> The company is a ponzi scheme at its best.
<span class="text-xs border border-red-600 text-red-600 rounded-sm px-2 py-0.5 self-start"> Sell </span> </p>
</div> <a class="outlink" href="/static/pdf/mstr.pdf" target="_blank">Read file</a>
<p class="text-sm text-gray-600 leading-relaxed">The company only owns btc by issuing debt and preferred stock offering.<br> </div>
The company is a ponzi scheme at its best.</p> <br>
<a class="text-xs font-mono mt-3 inline-block text-blue-600" href="/static/pdf/mstr.pdf" target="_blank">// Read file</a> <div class="exp-card">
<div class="exp-header">
<span class="exp-title">Novo.B/NVO: Novo Nordisk A/S<span style="color: green"> (buy)</span></span>
</div> </div>
<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'"> <p class="exp-body">
<div class="flex justify-between mb-2"> The product sales of wieght loss drugs are highclass, pipeline is undervalued.
<span class="font-medium">Novo.B/NVO: Novo Nordisk A/S</span> <br>
<span class="text-xs border border-green-600 text-green-600 rounded-sm px-2 py-0.5 self-start">Buy</span> Pipeline and wegovy pil is not reconsiced correctly as high focus on expireation of current sold product. high pisimistic view of pipeline.
</div> </p>
<p class="text-sm text-gray-600 leading-relaxed">The product sales of weight loss drugs are high class, pipeline is undervalued.<br> <a class="outlink" href="/static/pdf/novo.pdf" target="_blank">Read file</a>
Pipeline and wegovy pill is not recognised correctly as high focus on expiration of current sold product. High pessimistic view of pipeline.</p> </div>
<a class="text-xs font-mono mt-3 inline-block text-blue-600" href="/static/pdf/novo.pdf" target="_blank">// Read file</a> <br>
</div> </section>
</section> <section id="interests">
<div class="page-header">
<section id="interests" class="mb-12"> <h2 class="page-title" id="interest">
<button onclick="toggleInterests()" class="w-full text-left flex items-center justify-between border-b pb-2 mb-6 group"> interests
<h2 class="text-2xl font-light">Interests/Free Time</h2> </h2>
<span id="interests-chevron" class="text-gray-400 text-sm transition-transform duration-200">▼</span> <button id="interest-button" onclick="toggleInterests()" class="">open ↓</button>
</button> </div>
<div id="interests-body" class="hidden"> <div id="interests-body" class="hidden">
<div class="page-header"> <span class="page-sub" id="interest-sub">Fav lists</span>
<span class="hidden" id="matrix-hidden"> <span class="matrix-hidden" id="matrix-hidden">
Boy: Do not try and bend the spoon. That's impossible. Instead... only try to realize the truth. Boy: Do not try and bend the spoon. That's impossible. Instead... only try to realize the truth.
<br>Neo: What truth?<br>Boy: There is no spoon. <br>
</span> Neo: What truth?
<br>
Boy: There is no spoon.
</span>
<div class="section-head">
<h2>Movie/Show Top list</h2>
</div>
<div class="toplist-group">
<h3>Top 5 Movies</h3>
<div class="toplist-body">
<div class="poster-grid">
<div class="poster-item posterhover" onclick="bladerunnerClick()">
<img src="/static/posters/bladerunner2049.jpg" alt="Blade Runner 2049">
<p>Blade Runner 2049</p>
</div>
<div class="poster-item posterhover" onclick="cureClick()">
<img src="/static/posters/AcureForWellness.jpg" alt="A Cure of Wellness">
<p>A Cure of Wellness</p>
</div>
<div class="poster-item posterhover" onclick="matrixClick()">
<img src="/static/posters/matrix.jpg" alt="matrix">
<p>The Matrix</p>
</div>
<div class="poster-item posterhover" onclick="draculaClick()">
<img src="/static/posters/Dracula.webp" alt="Dracula: A Love Tale">
<p>Dracula: A Love Tale</p>
</div>
<div class="poster-item posterhover" onclick="dragonTypewriterClick()">
<img src="/static/posters/TheGirlwiththeDragonTattoo.webp" alt="Girl with a Dragon Tattoos">
<p>Girl with a Dragon Tattoo</p>
</div>
</div>
</div> </div>
<div class="section-head"><h2>Lunix rice</h2></div> <div class="toplist-group">
<div class="flex flex-wrap gap-4"> <h3>Top 5 Shows</h3>
<div class="flex self-center w-80 shrink-0 mx-auto"> <div class="toplist-body">
<img src="/static/images/rice.png" class="w-full"> <div class="poster-grid">
<div class="poster-item">
<img src="/static/posters/foundation.jpg" alt="foundation">
<p>Foundation</p>
</div>
<div class="poster-item">
<img src="/static/posters/Chernobyl.webp" alt="Chernobyl">
<p>Chernobyl</p>
</div>
<div class="poster-item">
<img src="/static/posters/Breaking Bad.webp" alt="Breaking Bad">
<p>Breaking Bad</p>
</div>
<div class="poster-item">
<img src="/static/posters/Avatar.webp" alt="Avatar: The Last Airbender">
<p>Avatar: The Last Airbender</p>
</div>
<div class="poster-item">
<img src="/static/posters/Adolescence.webp" alt="Adolescence">
<p>Adolescence</p>
</div>
</div>
</div> </div>
<p class="exp-body flex-1 min-w-64">I love my custom Linux setup. I use Hyprland, which automatically arranges app windows </div>
<div class="section-head">
<h2>Lunix rice</h2>
</div>
<div style="display: flex; align-items: center; gap: 1rem;">
<p class="exp-body">I love my custom Linux setup. I use Hyprland, which automatically arranges app windows
on my screen so everything stays organized without dragging things around. I also use Quickshell, which on my screen so everything stays organized without dragging things around. I also use Quickshell, which
lets me customize menus, shortcuts, and system controls to work exactly how I want. lets me customize menus, shortcuts, and system controls to work exactly how I want.
My system is based on Arch Linux or Manjaro Linux, which are versions of Linux that give you more My system is based on Arch Linux or Manjaro Linux, which are versions of Linux that give you more
control and customization than a typical computer setup. The result is a clean, fast, and super control and customization than a typical computer setup. The result is a clean, fast, and super
efficient desktop that's hard to go back from. efficient desktop that’s hard to go back from.
<a class="outlink" href="https://git.samantha42.xyz/samantha/dotfiles">Git repo</a> <a class="outlink" href="https://git.samantha42.xyz/samantha/dotfiles">Git repo</a>
</p> </p>
<img src="/static/images/rice.png" style="height: 200px; align-self: center;">
</div> </div>
<div class="section-head">
<div class="section-head"><h2>Movie/Show Top list</h2></div> <h2>programing</h2>
<span class="page-sub" id="interest-sub">Fav lists</span>
<div class="toplist-group">
<h3>Top 5 Movies</h3>
<div class="flex justify-center flex-wrap gap-3">
<div class="flex flex-col items-center w-24" onclick="bladerunnerClick()">
<img src="/static/posters/bladerunner2049.jpg" alt="Blade Runner 2049" class="w-24 h-36 object-cover rounded-lg">
<p class="text-xs text-center mt-1">Blade Runner 2049</p>
</div>
<div class="flex flex-col items-center w-24" onclick="cureClick()">
<img src="/static/posters/AcureForWellness.jpg" alt="A Cure of Wellness" class="w-24 h-36 object-cover rounded-lg">
<p class="text-xs text-center mt-1">A Cure of Wellness</p>
</div>
<div class="flex flex-col items-center w-24" onclick="matrixClick()">
<img src="/static/posters/matrix.jpg" alt="matrix" class="w-24 h-36 object-cover rounded-lg">
<p class="text-xs text-center mt-1">The Matrix</p>
</div>
<div class="flex flex-col items-center w-24" onclick="draculaClick()">
<img src="/static/posters/Dracula.webp" alt="Dracula: A Love Tale" class="w-24 h-36 object-cover rounded-lg">
<p class="text-xs text-center mt-1">Dracula: A Love Tale</p>
</div>
<div class="flex flex-col items-center w-24" onclick="dragonTypewriterClick()">
<img src="/static/posters/TheGirlwiththeDragonTattoo.webp" alt="Girl with a Dragon Tattoos" class="w-24 h-36 object-cover rounded-lg">
<p class="text-xs text-center mt-1">Girl with a Dragon Tattoo</p>
</div>
</div>
<h3>Top 5 Shows</h3>
<div class="flex justify-center flex-wrap gap-3">
<div class="flex flex-col items-center w-24">
<img src="/static/posters/foundation.jpg" alt="foundation" class="w-24 h-36 object-cover rounded-lg">
<p class="text-xs text-center mt-1">Foundation</p>
</div>
<div class="flex flex-col items-center w-24">
<img src="/static/posters/Chernobyl.webp" alt="Chernobyl" class="w-24 h-36 object-cover rounded-lg">
<p class="text-xs text-center mt-1">Chernobyl</p>
</div>
<div class="flex flex-col items-center w-24">
<img src="/static/posters/Breaking Bad.webp" alt="Breaking Bad" class="w-24 h-36 object-cover rounded-lg">
<p class="text-xs text-center mt-1">Breaking Bad</p>
</div>
<div class="flex flex-col items-center w-24">
<img src="/static/posters/Avatar.webp" alt="Avatar: The Last Airbender" class="w-24 h-36 object-cover rounded-lg">
<p class="text-xs text-center mt-1">Avatar: The Last Airbender</p>
</div>
<div class="flex flex-col items-center w-24">
<img src="/static/posters/Adolescence.webp" alt="Adolescence" class="w-24 h-36 object-cover rounded-lg">
<p class="text-xs text-center mt-1">Adolescence</p>
</div>
</div>
</div> </div>
<div style="display: flex; align-items: center; gap: 1rem;">
<div class="section-head"><h2>programing</h2></div> <img src="/static/images/program.png" style="height: 350px;" alt="program">
<div class="flex flex-wrap gap-4"> <div>
<div class="flex self-center w-50 shrink-0 mx-auto"> <p class="exp-body">
<img src="/static/images/program.png" class="w-full" alt="program"> Programming can be a task, but for me it's a source of joy. This is something I do as a hobby, and I
</div> don't use AI much. It's about having fun and making a fool of yourself. It's not about how good it is,
<div class="flex-1 min-w-64"> in this case, I'd rather just listen to music and drink a cup of tea. I enjoy the struggle to debug, the
<p class="exp-body"> beauty in understanding why a bug is there to begin with.
Programming can be a task, but for me it's a source of joy. This is something I do as a hobby, and I </p>
don't use AI much. It's about having fun and making a fool of yourself. It's not about how good it is, <br>
in this case, I'd rather just listen to music and drink a cup of tea. I enjoy the struggle to debug, <p class="exp-body">
the beauty in understanding why a bug is there to begin with. The text editor I use most is VS Code, but I love the Neovim setup as it enables me to code on a
</p> low-level system without a desktop environment being necessary. I do most of my coding on my own
<br> desktop, synced with Git to other systems, like the server that hosts this website, which I have built
<p class="exp-body"> myself. The creation of this website is more of a fun dumb activity for me... go click on one of the
The text editor I use most is VS Code, but I love the Neovim setup as it enables me to code on a movie posters and see.
low-level system without a desktop environment being necessary. I do most of my coding on my own </p>
desktop, synced with Git to other systems, like the server that hosts this website, which I have built
myself. The creation of this website is more of a fun dumb activity for me... go click on one of the
movie posters and see.
</p>
</div> </div>
</div> </div>
<br> <br>
<div class="section-head"><h2>Games</h2></div> <div class="section-head">
<p class="exp-body">Game i will play in my free time to wind down.</p> <h2>Games</h2>
<div hx-get="/static/components/games.html" hx-trigger="load" hx-swap="outerHTML"></div> </div>
<p class="exp-body" >Game i will play in my free time to wind down.</p>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem; padding: 20px;">
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/minecraft.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Minecraft</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/Tombraider.png" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Rise of the Tomb Raider</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/planetzoo.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Planet Zoo</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/gtav.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">GTA V</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/factorio.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Factorio</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
<img src="/static/gamesbanners/detroitbecomehuman.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
<p style="margin: 0; text-align: center;">Detroit: Become Human</p>
</div>
</div>
</div> </div>
</section> </section>
</main>
</div>
<footer class="absolute flex items-center text-sm h-12 p-2 z-10 left-0 w-screen bg-white border-gray-200 border-t"> <footer>
<a class="mr-auto text-blue-500 " href="mailto:me@samantha42.xyz">me@samantha42.xyz</a> <div class="footer-contact">
<p class="mx-auto text-gray-500" >Build by me ❤️</p> <a href="mailto:me@samantha42.xyz">me@samantha42.xyz</a>
<div class="ml-auto text-gray-400 " >© 2026 - all rights reserved</div>
</footer>
</div>
</div> </div>
</main> <div class="footer-copy">© 2026 — all rights reserved</div>
</footer>
<script> <script>
const toggle = document.getElementById('toggle');
const track = document.getElementById('track');
const knob = document.getElementById('knob');
const rays = document.getElementById('rays');
const stateLabel = document.getElementById('state-label');
const themeRoot = document.getElementById('themeRoot');
// On page load, restore saved theme let isDay = true;
const saved = localStorage.getItem('theme');
if (saved === 'dark') { const RAY_COUNT = 8;
document.documentElement.classList.add('dark'); for (let i = 0; i < RAY_COUNT; i++) {
const r = document.createElement('div');
r.className = 'ray';
r.style.transform = `rotate(${i * (360/RAY_COUNT)}deg)`;
rays.appendChild(r);
}
function applyState() {
if (isDay) {
track.className = 'track day';
knob.className = 'knob day';
toggle.setAttribute('aria-checked', 'true');
themeRoot.classList.remove('night');
} else { } else {
document.documentElement.classList.remove('dark'); track.className = 'track night';
knob.className = 'knob night';
toggle.setAttribute('aria-checked', 'false');
themeRoot.classList.add('night');
} }
}
function darkTheme() { toggle.addEventListener('click', () => { isDay = !isDay; applyState(); });
document.documentElement.classList.add('dark'); toggle.addEventListener('keydown', e => {
localStorage.setItem('theme', 'dark'); if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); isDay = !isDay; applyState(); }
} });
function lightTheme() { function copyClass() {
document.documentElement.classList.remove('dark'); navigator.clipboard.writeText(classOut.textContent).catch(() => {});
localStorage.setItem('theme', 'light'); }
} // just some fun.
console.log("%c👀 hi there!", "font-size:20px")
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'); // about.js
localStorage.setItem('theme', 'light'); function closeOverlay() {
}); document.getElementById('overlay').style.display = 'none';
}
// or toggle it from anywhere:
function openOverlay() {
document.getElementById('overlay').style.display = 'flex';
}
function InterestShow() { function InterestShow() {
const body = document.getElementById('interests-body'); const body = document.getElementById('interests-body');
const chevron = document.getElementById('interests-chevron'); const button = document.getElementById('interest-button');
chevron.classList.add("hidden") button.textContent = "close ↑"
body.classList.remove("hidden") body.classList.remove("hidden")
chevron.textContent = hidden ? '▶' : '▼';
} }
function toggleInterests() { function toggleInterests() {
const body = document.getElementById('interests-body'); const body = document.getElementById('interests-body');
const chevron = document.getElementById('interests-chevron'); const button = document.getElementById('interest-button');
const hidden = body.classList.toggle('hidden'); const hidden = body.classList.toggle('hidden');
chevron.textContent = hidden ? '▶' : '▼'; if (hidden) {
button.textContent = "open ↓"
} else {
button.textContent = "close ↑"
}
} }
const bg = document.getElementById('parallax-bg');
const scroller = document.getElementById('scroller');
const speed = 0.5;
scroller.addEventListener('scroll', () => {
const offset = scroller.scrollTop * speed;
bg.style.transform = `translateY(${offset}px)`;
}, { passive: true });
</script> </script>
<script src="/static/scripts/posteranimation.js"></script>
</body> </body>
</html> </html>
static/input.css
+624
View File
@@ -0,0 +1,624 @@
.theme-root.night {
--bg: #1c1c1c;
--surface: #252525;
--surface2: #2a2a2a;
--border: #363636;
--border2: #ccc7be;
--text: #ffffff;
--muted: #d9d9d9;
--dim: #b0aa9f;
--navback: rgba(28, 28, 28, 0.8);
--accent: #5389ff;
--accent2:#1447b8;
--green:#0eaf74;
--amber:#ffd78e;
}
.theme-root {
--bg:#f7f6f3;
--surface:#ffffff;
--surface2:#f0eeea;
--border:#e2ddd6;
--border2:#ccc7be;
--text:#1a1917;
--muted:#6b6560;
--dim:#b0aa9f;
--accent:#1a56db;
--accent2:#1447b8;
--green:#0a7c52;
--amber:#92620a;
--navback: rgba(247,246,243,0.8)
--ff-mono:'IBM Plex Mono',monospace;
--ff-sans:'IBM Plex Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:15px;scroll-behavior:smooth;}
body{
background:var(--bg);
color:var(--text);
font-family:var(--ff-sans);
font-weight:300;
line-height:1.7;
min-height:100vh;
}
/* subtle dot grid */
body::before{
content:'';
position:fixed;inset:0;
background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);
background-size:24px 24px;
opacity:0.5;
pointer-events:none;z-index:0;
}
nav{
position:sticky;top:0;z-index:100;
background: var(--navback);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
padding:0 clamp(1rem,5vw,3rem);
display:flex;align-items:center;justify-content:space-between;
height:52px;
}
.nav-logo{
font-family:var(--ff-mono);font-size:0.78rem;font-weight:500;
color:var(--accent);text-decoration:none;
display:flex;align-items:center;gap:6px;
}
.nav-logo::before{content:'>';color:var(--green);font-weight:500;}
.nav-links{display:flex;gap:0.2rem;align-items:center;}
.nav-links a{
font-family:var(--ff-mono);font-size:0.72rem;
color:var(--muted);text-decoration:none;
padding:0.3rem 0.7rem;border-radius:4px;
transition:color 0.15s,background 0.15s;
}
.nav-links a:hover{color:var(--text);background:var(--surface2);}
.nav-links .cta{color:var(--accent);border:1px solid var(--accent);margin-left:0.4rem;}
.nav-links .cta:hover{background:var(--accent2);color:#fff;}
.shell{
position:relative;z-index:1;
display:grid;
grid-template-columns:220px 1fr;
min-height:calc(100vh - 52px);
max-width:1100px;
margin:0 auto;
}
.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);
text-decoration:none;padding:0.3rem 0.6rem;border-radius:4px;
transition:color 0.15s,background 0.15s;
display:flex;align-items:center;gap:6px;
}
.sidebar-links a::before{content:'//';color:var(--dim);font-size:0.65rem;}
.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);}
main{
padding:3rem clamp(1.5rem,4vw,3rem);
display:flex;flex-direction:column;gap:4rem;
}
.hero-eyebrow{
font-family:var(--ff-mono);font-size:0.72rem;color:var(--green);
letter-spacing:0.18em;margin-bottom:1rem;
display:flex;align-items:center;gap:8px;
}
.hero-eyebrow::before{content:'';display:block;width:20px;height:1px;background:var(--green);}
h1{
font-family:var(--ff-mono);
font-size:clamp(1.8rem,4vw,2.8rem);
font-weight:500;color:var(--text);
letter-spacing:-0.02em;line-height:1.1;
}
h1 span{color:var(--accent);}
.hero-bio{
margin-top:1.2rem;font-size:0.9rem;color:var(--muted);
max-width:560px;line-height:1.8;
}
.hero-meta{
margin-top:1.5rem;display:flex;gap:1.5rem;flex-wrap:wrap;
font-family:var(--ff-mono);font-size:0.72rem;color:var(--dim);
}
.hero-meta span{display:flex;align-items:center;gap:5px;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:1.8rem;}
.section-head h2{
font-family:var(--ff-mono);font-size:0.72rem;font-weight:400;
letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);
white-space:nowrap;
}
.section-head::after{content:'';flex:1;height:1px;background:var(--border);}
.exp-grid{display:flex;flex-direction:column;gap:8px;}
.exp-card{
background:var(--surface);border:1px solid var(--border);
border-radius:6px;padding:1.4rem 1.5rem;
transition:border-color 0.2s,box-shadow 0.2s;
}
.exp-card:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.exp-header{
display:flex;align-items:baseline;justify-content:space-between;
margin-bottom:0.6rem;flex-wrap:wrap;gap:0.5rem;
}
.exp-title{font-family:var(--ff-mono);font-size:0.9rem;font-weight:500;color:var(--text);}
.exp-tag{
font-family:var(--ff-mono);font-size:0.65rem;
letter-spacing:0.1em;text-transform:uppercase;
background:rgba(26,86,219,0.07);color:var(--accent);
border:1px solid rgba(26,86,219,0.2);
padding:2px 8px;border-radius:3px;
}
.exp-body{font-size:0.85rem;color:var(--muted);line-height:1.8;}
.edu-grid{display:flex;flex-direction:column;gap:8px;}
.edu-card{
display:grid;grid-template-columns:80px 1fr;gap:1.2rem;
background:var(--surface);border:1px solid var(--border);
border-radius:6px;padding:1.2rem 1.4rem;
transition:border-color 0.2s,box-shadow 0.2s;
}
.edu-card:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.edu-year{font-family:var(--ff-mono);font-size:0.7rem;color:var(--amber);padding-top:2px;line-height:1.6;}
.edu-degree{font-size:0.9rem;font-weight:500;color:var(--text);}
.edu-inst{font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);margin-top:2px;}
.edu-detail{font-size:0.82rem;color:var(--dim);margin-top:4px;}
.lang-row{display:flex;gap:0.6rem;flex-wrap:wrap;}
.lang-badge{
font-family:var(--ff-mono);font-size:0.78rem;color:var(--text);
background:var(--surface);border:1px solid var(--border);
padding:0.35rem 0.9rem;border-radius:4px;
}
.interests-row{display:flex;gap:0.6rem;flex-wrap:wrap;}
.interest-chip{
font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);
background:var(--surface);border:1px solid var(--border);
padding:0.3rem 0.75rem;border-radius:4px;
}
.interest-chip::before{content:'# ';color:var(--dim);}
.opinion-grid{display:flex;flex-wrap:wrap;gap:0.6rem;}
.opinion-link{
font-family:var(--ff-mono);font-size:0.78rem;
color:var(--muted);text-decoration:none;
background:var(--surface);border:1px solid var(--border);
padding:0.4rem 0.9rem;border-radius:4px;
display:flex;align-items:center;gap:6px;
transition:border-color 0.2s,color 0.2s,box-shadow 0.2s;
}
.opinion-link::before{content:'→';color:var(--dim);font-size:0.75rem;}
.opinion-link:hover{border-color:var(--accent2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.06);}
footer{
position:relative;z-index:1;
border-top:1px solid var(--border);
padding:1.4rem clamp(1rem,5vw,3rem);
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:0.5rem;
background:var(--surface);
}
.footer-contact a{font-family:var(--ff-mono);font-size:0.78rem;color:var(--accent);text-decoration:none;}
.footer-contact a:hover{text-decoration:underline;}
.footer-copy{font-family:var(--ff-mono);font-size:0.7rem;color:var(--dim);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.hero{animation:fadeUp 0.6s ease both;}
.exp-card:nth-child(1){animation:fadeUp 0.5s 0.05s ease both;}
.exp-card:nth-child(2){animation:fadeUp 0.5s 0.12s ease both;}
.edu-card:nth-child(1){animation:fadeUp 0.5s 0.08s ease both;}
.edu-card:nth-child(2){animation:fadeUp 0.5s 0.15s ease both;}
@media(max-width:700px){
.shell{grid-template-columns:1fr;}
aside{display:none;}
.edu-card{grid-template-columns:1fr;gap:0.3rem;}
}
.edu-tag {
display: inline-block;
margin-top: 8px;
font-family: 'DM Mono', monospace;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 5px;
border-radius: 3px;
}
.tag-dropped {
background: var(--surface2);
color: var(--amber);
}
.toplist-ranked li {
display: flex;
align-items: center;
gap: 14px;
counter-increment: rank;
}
.toplist-ranked {
counter-reset: rank;
}
.toplist-ranked li::before {
content: counter(rank);
font-family: 'DM Mono', monospace;
font-size: 11px;
color: var(--muted);
min-width: 16px;
text-align: right;
}
.toplist-ranked li img {
width: 42px;
height: 62px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.toplist-toggle {
display: block;
width: 100%;
text-align: center;
}
.poster-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
padding: 1rem 0;
}
.poster-item {
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
}
.poster-item img {
width: 120px;
height: 180px;
object-fit: cover;
border-radius: 6px;
}
.poster-item p {
margin-top: 8px;
font-size: 12px;
text-align: center;
line-height: 1.4;
}
.game-grid {
justify-content: center;
gap: 1.5rem;
padding: 1rem 0;
}
.game-item {
display: flex;
flex-direction: column;
align-items: center;
width: 180px;
}
.page-header {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 2.5rem;
}
.page-title {
font-family: var(--ff-mono);
font-size: clamp(1rem, 4vw, 2rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
color: var(--accent);
}
.page-title::before {
content: '> ';
color: var(--green);
font-weight: 500;
}
.page-sub {
font-family: var(--ff-mono);
font-size: 0.72rem;
color: var(--muted);
letter-spacing: 0.08em;
padding-left: 1.1rem;
}
.posterhover:hover img {
transform: scale(1.07);
}
#rain-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 999;
opacity: 0;
transition: opacity 0.8s ease;
}
#dragon-grid {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 999;
opacity: 0.15;
}
.outlink {font-family:var(--ff-mono);font-size:0.78rem;color:var(--accent);text-decoration:none;}
.outlink:hover{text-decoration:underline;}
a{
font-family:var(--ff-mono);font-size:0.78rem;color:var(--muted);
text-decoration:none;padding:0.3rem 0.6rem;border-radius:4px;
transition:color 0.15s,background 0.15s;
display:flex;align-items:center;gap:6px;
}
.rabbit-svg path { fill: gray; transition: fill 0.3s ease; }
.rabbit-svg:hover path { fill: #7F77DD; }
.scene {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
gap: 1rem;
font-family: var(--font-sans);
}
.toggle-wrap {
position: relative;
width: 50px;
height: 25px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.track {
position: absolute;
inset: 0;
width: 50px;
height: 25px;
border-radius: 12.5px;
transition: background 0.5s ease;
overflow: hidden;
}
.track.day { background: #87CEEB; }
.track.night { background: #1a1a3e; }
.stars {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.4s ease;
}
.night .stars { opacity: 1; }
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 2s infinite;
}
.star:nth-child(1) { width:2px; height:2px; top:4px; left:6px; animation-delay:0s; }
.star:nth-child(2) { width:1px; height:1px; top:10px; left:14px; animation-delay:0.4s; }
.star:nth-child(3) { width:1px; height:1px; top:5px; left:22px; animation-delay:0.8s; }
.star:nth-child(4) { width:2px; height:2px; top:14px; left:10px; animation-delay:1.2s; }
.star:nth-child(5) { width:1px; height:1px; top:8px; left:30px; animation-delay:0.2s; }
@keyframes twinkle {
0%,100% { opacity:1; } 50% { opacity:0.3; }
}
.knob {
position: absolute;
top: 3px;
width: 19px;
height: 19px;
border-radius: 50%;
transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.knob.night {
left: 3px;
background: radial-gradient(circle at 35% 35%, #e8e8ff, #c8c8f8);
box-shadow:
0 0 0 2px rgba(180,180,255,0.18),
0 0 7px 4px rgba(140,140,255,0.35),
0 0 14px 6px rgba(100,100,220,0.18);
}
.knob.day {
left: 28px;
background: radial-gradient(circle at 40% 40%, #fff8c5, #FFD700);
box-shadow:
0 0 0 3px rgba(255,220,0,0.25),
0 0 8px 4px rgba(255,200,0,0.45),
0 0 16px 6px rgba(255,160,0,0.2);
}
.sun-rays {
position: absolute;
inset: -7px;
opacity: 0;
transition: opacity 0.3s ease 0.15s;
pointer-events: none;
}
.knob.day .sun-rays { opacity: 1; }
.ray {
position: absolute;
width: 1.5px;
height: 4px;
background: rgba(255,220,0,0.9);
border-radius: 1px;
left: 50%;
transform-origin: 50% 16px;
margin-left: -0.75px;
}
.moon-crater {
position: absolute;
border-radius: 50%;
background: rgba(140,140,200,0.4);
transition: opacity 0.3s ease;
}
.knob.day .moon-crater { opacity: 0; }
.knob.night .moon-crater { opacity: 1; }
.label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.03em;
transition: color 0.4s ease;
user-select: none;
}
.label.day-label { color: #B8860B; }
.label.night-label { color: #9090d0; }
.state-label {
font-size: 11px;
color: var(--color-text-secondary);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.row {
display: flex;
align-items: center;
gap: 12px;
}
.copy-block {
background: var(--color-background-secondary);
border: 0.5px solid var(--color-border-tertiary);
border-radius: var(--border-radius-lg);
padding: 1rem 1.25rem;
width: 100%;
max-width: 420px;
}
.copy-block p { margin: 0 0 8px; font-size: 13px; color: var(--color-text-secondary); }
.copy-block code {
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-text-primary);
display: block;
white-space: nowrap;
overflow-x: auto;
}
.copy-btn {
margin-top: 10px;
font-size: 12px;
padding: 4px 10px;
border-radius: var(--border-radius-md);
cursor: pointer;
border: 0.5px solid var(--color-border-secondary);
background: transparent;
color: var(--color-text-secondary);
}
.copy-btn:hover { background: var(--color-background-secondary); }
.Hitchhiker {
max-width: 480px;
width: 100%;
text-align: center;
display: none;
}
.matrix-hidden {
display: none;
color: green;
font-family: var(--ff-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
padding-left: 1.1rem;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
animation: pulse 2s infinite;
}
.dot--available { background: var(--green); }
.dot--busy { background: red; }
/* styles2.css */
.overlay {
position: fixed;
inset: 0; /* top/right/bottom/left: 0 */
background: rgba(0, 0, 0, 0.6); /* semi-transparent dark */
z-index: 100;
display: none;
align-items: center;
justify-content: center;
}
button {
font-family:var(--ff-mono);font-size:0.65rem;
letter-spacing:0.1em;text-transform:uppercase;
background:rgba(26,86,219,0.07);color:var(--accent);
border:1px solid rgba(26,86,219,0.2);
padding:2px 8px;border-radius:3px;
}
button:hover {
border:1px solid rgb(26, 87, 219);
}
.hidden {
display: none;
}
static/output.css
+624
View File
@@ -0,0 +1,624 @@
.theme-root.night {
--bg: #1c1c1c;
--surface: #252525;
--surface2: #2a2a2a;
--border: #363636;
--border2: #ccc7be;
--text: #ffffff;
--muted: #d9d9d9;
--dim: #b0aa9f;
--navback: rgba(28, 28, 28, 0.8);
--accent: #5389ff;
--accent2:#1447b8;
--green:#0eaf74;
--amber:#ffd78e;
}
.theme-root {
--bg:#f7f6f3;
--surface:#ffffff;
--surface2:#f0eeea;
--border:#e2ddd6;
--border2:#ccc7be;
--text:#1a1917;
--muted:#6b6560;
--dim:#b0aa9f;
--accent:#1a56db;
--accent2:#1447b8;
--green:#0a7c52;
--amber:#92620a;
--navback: rgba(247,246,243,0.8)
--ff-mono:'IBM Plex Mono',monospace;
--ff-sans:'IBM Plex Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:15px;scroll-behavior:smooth;}
body{
background:var(--bg);
color:var(--text);
font-family:var(--ff-sans);
font-weight:300;
line-height:1.7;
min-height:100vh;
}
/* subtle dot grid */
body::before{
content:'';
position:fixed;inset:0;
background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);
background-size:24px 24px;
opacity:0.5;
pointer-events:none;z-index:0;
}
nav{
position:sticky;top:0;z-index:100;
background: var(--navback);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
padding:0 clamp(1rem,5vw,3rem);
display:flex;align-items:center;justify-content:space-between;
height:52px;
}
.nav-logo{
font-family:var(--ff-mono);font-size:0.78rem;font-weight:500;
color:var(--accent);text-decoration:none;
display:flex;align-items:center;gap:6px;
}
.nav-logo::before{content:'>';color:var(--green);font-weight:500;}
.nav-links{display:flex;gap:0.2rem;align-items:center;}
.nav-links a{
font-family:var(--ff-mono);font-size:0.72rem;
color:var(--muted);text-decoration:none;
padding:0.3rem 0.7rem;border-radius:4px;
transition:color 0.15s,background 0.15s;
}
.nav-links a:hover{color:var(--text);background:var(--surface2);}
.nav-links .cta{color:var(--accent);border:1px solid var(--accent);margin-left:0.4rem;}
.nav-links .cta:hover{background:var(--accent2);color:#fff;}
.shell{
position:relative;z-index:1;
display:grid;
grid-template-columns:220px 1fr;
min-height:calc(100vh - 52px);
max-width:1100px;
margin:0 auto;
}
.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);
text-decoration:none;padding:0.3rem 0.6rem;border-radius:4px;
transition:color 0.15s,background 0.15s;
display:flex;align-items:center;gap:6px;
}
.sidebar-links a::before{content:'//';color:var(--dim);font-size:0.65rem;}
.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);}
main{
padding:3rem clamp(1.5rem,4vw,3rem);
display:flex;flex-direction:column;gap:4rem;
}
.hero-eyebrow{
font-family:var(--ff-mono);font-size:0.72rem;color:var(--green);
letter-spacing:0.18em;margin-bottom:1rem;
display:flex;align-items:center;gap:8px;
}
.hero-eyebrow::before{content:'';display:block;width:20px;height:1px;background:var(--green);}
h1{
font-family:var(--ff-mono);
font-size:clamp(1.8rem,4vw,2.8rem);
font-weight:500;color:var(--text);
letter-spacing:-0.02em;line-height:1.1;
}
h1 span{color:var(--accent);}
.hero-bio{
margin-top:1.2rem;font-size:0.9rem;color:var(--muted);
max-width:560px;line-height:1.8;
}
.hero-meta{
margin-top:1.5rem;display:flex;gap:1.5rem;flex-wrap:wrap;
font-family:var(--ff-mono);font-size:0.72rem;color:var(--dim);
}
.hero-meta span{display:flex;align-items:center;gap:5px;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:1.8rem;}
.section-head h2{
font-family:var(--ff-mono);font-size:0.72rem;font-weight:400;
letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);
white-space:nowrap;
}
.section-head::after{content:'';flex:1;height:1px;background:var(--border);}
.exp-grid{display:flex;flex-direction:column;gap:8px;}
.exp-card{
background:var(--surface);border:1px solid var(--border);
border-radius:6px;padding:1.4rem 1.5rem;
transition:border-color 0.2s,box-shadow 0.2s;
}
.exp-card:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.exp-header{
display:flex;align-items:baseline;justify-content:space-between;
margin-bottom:0.6rem;flex-wrap:wrap;gap:0.5rem;
}
.exp-title{font-family:var(--ff-mono);font-size:0.9rem;font-weight:500;color:var(--text);}
.exp-tag{
font-family:var(--ff-mono);font-size:0.65rem;
letter-spacing:0.1em;text-transform:uppercase;
background:rgba(26,86,219,0.07);color:var(--accent);
border:1px solid rgba(26,86,219,0.2);
padding:2px 8px;border-radius:3px;
}
.exp-body{font-size:0.85rem;color:var(--muted);line-height:1.8;}
.edu-grid{display:flex;flex-direction:column;gap:8px;}
.edu-card{
display:grid;grid-template-columns:80px 1fr;gap:1.2rem;
background:var(--surface);border:1px solid var(--border);
border-radius:6px;padding:1.2rem 1.4rem;
transition:border-color 0.2s,box-shadow 0.2s;
}
.edu-card:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.edu-year{font-family:var(--ff-mono);font-size:0.7rem;color:var(--amber);padding-top:2px;line-height:1.6;}
.edu-degree{font-size:0.9rem;font-weight:500;color:var(--text);}
.edu-inst{font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);margin-top:2px;}
.edu-detail{font-size:0.82rem;color:var(--dim);margin-top:4px;}
.lang-row{display:flex;gap:0.6rem;flex-wrap:wrap;}
.lang-badge{
font-family:var(--ff-mono);font-size:0.78rem;color:var(--text);
background:var(--surface);border:1px solid var(--border);
padding:0.35rem 0.9rem;border-radius:4px;
}
.interests-row{display:flex;gap:0.6rem;flex-wrap:wrap;}
.interest-chip{
font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);
background:var(--surface);border:1px solid var(--border);
padding:0.3rem 0.75rem;border-radius:4px;
}
.interest-chip::before{content:'# ';color:var(--dim);}
.opinion-grid{display:flex;flex-wrap:wrap;gap:0.6rem;}
.opinion-link{
font-family:var(--ff-mono);font-size:0.78rem;
color:var(--muted);text-decoration:none;
background:var(--surface);border:1px solid var(--border);
padding:0.4rem 0.9rem;border-radius:4px;
display:flex;align-items:center;gap:6px;
transition:border-color 0.2s,color 0.2s,box-shadow 0.2s;
}
.opinion-link::before{content:'→';color:var(--dim);font-size:0.75rem;}
.opinion-link:hover{border-color:var(--accent2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.06);}
footer{
position:relative;z-index:1;
border-top:1px solid var(--border);
padding:1.4rem clamp(1rem,5vw,3rem);
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:0.5rem;
background:var(--surface);
}
.footer-contact a{font-family:var(--ff-mono);font-size:0.78rem;color:var(--accent);text-decoration:none;}
.footer-contact a:hover{text-decoration:underline;}
.footer-copy{font-family:var(--ff-mono);font-size:0.7rem;color:var(--dim);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.hero{animation:fadeUp 0.6s ease both;}
.exp-card:nth-child(1){animation:fadeUp 0.5s 0.05s ease both;}
.exp-card:nth-child(2){animation:fadeUp 0.5s 0.12s ease both;}
.edu-card:nth-child(1){animation:fadeUp 0.5s 0.08s ease both;}
.edu-card:nth-child(2){animation:fadeUp 0.5s 0.15s ease both;}
@media(max-width:700px){
.shell{grid-template-columns:1fr;}
aside{display:none;}
.edu-card{grid-template-columns:1fr;gap:0.3rem;}
}
.edu-tag {
display: inline-block;
margin-top: 8px;
font-family: 'DM Mono', monospace;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 5px;
border-radius: 3px;
}
.tag-dropped {
background: var(--surface2);
color: var(--amber);
}
.toplist-ranked li {
display: flex;
align-items: center;
gap: 14px;
counter-increment: rank;
}
.toplist-ranked {
counter-reset: rank;
}
.toplist-ranked li::before {
content: counter(rank);
font-family: 'DM Mono', monospace;
font-size: 11px;
color: var(--muted);
min-width: 16px;
text-align: right;
}
.toplist-ranked li img {
width: 42px;
height: 62px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.toplist-toggle {
display: block;
width: 100%;
text-align: center;
}
.poster-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
padding: 1rem 0;
}
.poster-item {
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
}
.poster-item img {
width: 120px;
height: 180px;
object-fit: cover;
border-radius: 6px;
}
.poster-item p {
margin-top: 8px;
font-size: 12px;
text-align: center;
line-height: 1.4;
}
.game-grid {
justify-content: center;
gap: 1.5rem;
padding: 1rem 0;
}
.game-item {
display: flex;
flex-direction: column;
align-items: center;
width: 180px;
}
.page-header {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 2.5rem;
}
.page-title {
font-family: var(--ff-mono);
font-size: clamp(1rem, 4vw, 2rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
color: var(--accent);
}
.page-title::before {
content: '> ';
color: var(--green);
font-weight: 500;
}
.page-sub {
font-family: var(--ff-mono);
font-size: 0.72rem;
color: var(--muted);
letter-spacing: 0.08em;
padding-left: 1.1rem;
}
.posterhover:hover img {
transform: scale(1.07);
}
#rain-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 999;
opacity: 0;
transition: opacity 0.8s ease;
}
#dragon-grid {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 999;
opacity: 0.15;
}
.outlink {font-family:var(--ff-mono);font-size:0.78rem;color:var(--accent);text-decoration:none;}
.outlink:hover{text-decoration:underline;}
a{
font-family:var(--ff-mono);font-size:0.78rem;color:var(--muted);
text-decoration:none;padding:0.3rem 0.6rem;border-radius:4px;
transition:color 0.15s,background 0.15s;
display:flex;align-items:center;gap:6px;
}
.rabbit-svg path { fill: gray; transition: fill 0.3s ease; }
.rabbit-svg:hover path { fill: #7F77DD; }
.scene {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
gap: 1rem;
font-family: var(--font-sans);
}
.toggle-wrap {
position: relative;
width: 50px;
height: 25px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.track {
position: absolute;
inset: 0;
width: 50px;
height: 25px;
border-radius: 12.5px;
transition: background 0.5s ease;
overflow: hidden;
}
.track.day { background: #87CEEB; }
.track.night { background: #1a1a3e; }
.stars {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.4s ease;
}
.night .stars { opacity: 1; }
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 2s infinite;
}
.star:nth-child(1) { width:2px; height:2px; top:4px; left:6px; animation-delay:0s; }
.star:nth-child(2) { width:1px; height:1px; top:10px; left:14px; animation-delay:0.4s; }
.star:nth-child(3) { width:1px; height:1px; top:5px; left:22px; animation-delay:0.8s; }
.star:nth-child(4) { width:2px; height:2px; top:14px; left:10px; animation-delay:1.2s; }
.star:nth-child(5) { width:1px; height:1px; top:8px; left:30px; animation-delay:0.2s; }
@keyframes twinkle {
0%,100% { opacity:1; } 50% { opacity:0.3; }
}
.knob {
position: absolute;
top: 3px;
width: 19px;
height: 19px;
border-radius: 50%;
transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.knob.night {
left: 3px;
background: radial-gradient(circle at 35% 35%, #e8e8ff, #c8c8f8);
box-shadow:
0 0 0 2px rgba(180,180,255,0.18),
0 0 7px 4px rgba(140,140,255,0.35),
0 0 14px 6px rgba(100,100,220,0.18);
}
.knob.day {
left: 28px;
background: radial-gradient(circle at 40% 40%, #fff8c5, #FFD700);
box-shadow:
0 0 0 3px rgba(255,220,0,0.25),
0 0 8px 4px rgba(255,200,0,0.45),
0 0 16px 6px rgba(255,160,0,0.2);
}
.sun-rays {
position: absolute;
inset: -7px;
opacity: 0;
transition: opacity 0.3s ease 0.15s;
pointer-events: none;
}
.knob.day .sun-rays { opacity: 1; }
.ray {
position: absolute;
width: 1.5px;
height: 4px;
background: rgba(255,220,0,0.9);
border-radius: 1px;
left: 50%;
transform-origin: 50% 16px;
margin-left: -0.75px;
}
.moon-crater {
position: absolute;
border-radius: 50%;
background: rgba(140,140,200,0.4);
transition: opacity 0.3s ease;
}
.knob.day .moon-crater { opacity: 0; }
.knob.night .moon-crater { opacity: 1; }
.label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.03em;
transition: color 0.4s ease;
user-select: none;
}
.label.day-label { color: #B8860B; }
.label.night-label { color: #9090d0; }
.state-label {
font-size: 11px;
color: var(--color-text-secondary);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.row {
display: flex;
align-items: center;
gap: 12px;
}
.copy-block {
background: var(--color-background-secondary);
border: 0.5px solid var(--color-border-tertiary);
border-radius: var(--border-radius-lg);
padding: 1rem 1.25rem;
width: 100%;
max-width: 420px;
}
.copy-block p { margin: 0 0 8px; font-size: 13px; color: var(--color-text-secondary); }
.copy-block code {
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-text-primary);
display: block;
white-space: nowrap;
overflow-x: auto;
}
.copy-btn {
margin-top: 10px;
font-size: 12px;
padding: 4px 10px;
border-radius: var(--border-radius-md);
cursor: pointer;
border: 0.5px solid var(--color-border-secondary);
background: transparent;
color: var(--color-text-secondary);
}
.copy-btn:hover { background: var(--color-background-secondary); }
.Hitchhiker {
max-width: 480px;
width: 100%;
text-align: center;
display: none;
}
.matrix-hidden {
display: none;
color: green;
font-family: var(--ff-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
padding-left: 1.1rem;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
animation: pulse 2s infinite;
}
.dot--available { background: var(--green); }
.dot--busy { background: red; }
/* styles2.css */
.overlay {
position: fixed;
inset: 0; /* top/right/bottom/left: 0 */
background: rgba(0, 0, 0, 0.6); /* semi-transparent dark */
z-index: 100;
display: none;
align-items: center;
justify-content: center;
}
button {
font-family:var(--ff-mono);font-size:0.65rem;
letter-spacing:0.1em;text-transform:uppercase;
background:rgba(26,86,219,0.07);color:var(--accent);
border:1px solid rgba(26,86,219,0.2);
padding:2px 8px;border-radius:3px;
}
button:hover {
border:1px solid rgb(26, 87, 219);
}
.hidden {
display: none;
}
static/tailwind.css
-1224
View File
File diff suppressed because it is too large Load Diff
static/vars.css
-94
View File
@@ -1,94 +0,0 @@
@import "tailwindcss";
@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');
.theme-root.night {
--bg: #1c1c1c;
--surface: #252525;
--surface2: #2a2a2a;
--border: #363636;
--border2: #ccc7be;
--text: #ffffff;
--muted: #d9d9d9;
--dim: #b0aa9f;
--navback: rgba(28, 28, 28, 0.8);
--accent: #5389ff;
--accent2:#1447b8;
--green:#0eaf74;
--amber:#ffd78e;
}
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:1.8rem;}
.section-head h2{
font-family:var(--ff-mono);font-size:0.72rem;font-weight:400;
letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);
white-space:nowrap;
}
.section-head::after{content:'';flex:1;height:1px;background:var(--border);}
.exp-body{font-size:0.85rem;color:var(--muted);line-height:1.8;}
.libre-caslon-text-regular {
font-family: "Libre Caslon Text", serif;
font-weight: 400;
font-style: normal;
}
.libre-caslon-text-bold {
font-family: "Libre Caslon Text", serif;
font-weight: 700;
font-style: normal;
}
.libre-caslon-text-regular-italic {
font-family: "Libre Caslon Text", serif;
font-weight: 400;
font-style: italic;
}
.rubik-400 {
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
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.sh
+2 -2
View File
@@ -14,8 +14,8 @@ if [ "$OS" = "Darwin" ]; then
fi fi
fi fi
exec "./$BIN" --input static/vars.css \ exec "./$BIN" --input static/input.css \
--config tailwind.config.js \ --config tailwind.config.js \
--content "./static/**/*.html" \ --content "./static/**/*.html" \
--output static/tailwind.css \ --output static/output.css \
--watch --watch