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

new main page

Browse Source
This commit is contained in:
samantha42
2026-05-29 10:38:23 +02:00
parent ce552fa365
commit d8903a42ed
26 changed files with 4454 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+372
View File
@@ -0,0 +1,372 @@
<!DOCTYPE html>
<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 -->
<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">
<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>
</div>
</nav>
<!-- MAIN with parallax -->
<main id="parallax-section" class="relative h-screen overflow-hidden">
<div id="parallax-bg"
class="absolute inset-x-0 will-change-transform overflow-hidden"
style="top:-100%;bottom:-30%;">
<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">
<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>
</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>
</div>
<div class="mb-6">
<p class="text-xs uppercase tracking-widest text-gray-400 mb-2">location</p>
<div class="text-xs text-gray-500 font-mono">Denmark<br>Aalborg Øst, 9220</div>
</div>
<div class="mb-6">
<p class="text-xs uppercase tracking-widest text-gray-400 mb-2">languages</p>
<div class="flex gap-2 text-xs">
<span class="border px-2 py-0.5">Danish</span>
<span class="border px-2 py-0.5">English</span>
</div>
</div>
</aside>
<div class="bg-zinc-50 pt-20 " id="resume" >
<section class="flex-1 pl-10 pr-6 ">
<div id="about" class="mb-12">
<p class="text-xs uppercase tracking-widest text-gray-400 mb-2">About Me · 2026</p>
<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>
<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="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>
</div>
<p class="text-sm text-gray-600 leading-relaxed">Fundamental analysis using SEC filings (10-K, 10-Q) and earnings reports. Assess
profitability, liquidity, risk factors, and long-term business sustainability. Handle incomplete or
low-transparency information through structured cross-validation.</p>
<a class="text-xs font-mono mt-3 inline-block text-blue-600" href="#research">// Go to Analysis</a>
</div>
<div class="border p-6 rounded-xl 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>
</div>
<p class="text-sm text-gray-600 leading-relaxed">Build lightweight backend tools to automate repetitive analytical and operational tasks.
Python for data processing, validation, and workflow automation. Lightweight online services in Go,
focusing on speed and reliability.</p>
<a class="text-xs font-mono mt-3 inline-block" href="#automation">// Go to Tools</a>
</div>
</div>
</section>
<section id="education" class="mb-12">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Education</h2>
<div class="flex flex-col gap-4">
<div class="flex gap-6 border-b pb-4">
<div class="text-xs text-gray-400 font-mono w-28 shrink-0">2025 — present</div>
<div>
<div class="font-medium text-sm">Bachelor of Economics &amp; Business Administration (HA)</div>
<div class="text-xs text-gray-500">Aalborg University · Expected 2028</div>
</div>
</div>
<div class="flex gap-6 border-b pb-4">
<div class="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-b pb-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
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><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="grid grid-cols-1 gap-4">
<div class="border p-6">
<div class="font-medium mb-2">Portfolio Engine</div>
<p class="text-sm text-gray-600 leading-relaxed mb-4">A lightweight portfolio and financial data backend written in Go. Tracks companies,
currencies, revenue reports, and trades across configurable time periods — replacing spreadsheets with a
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 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>
</section>
<section id="research" class="mb-12">
<h2 class="text-2xl font-light border-b pb-2 mb-6">Equity Research</h2>
<div class="border p-6 mb-4">
<div class="font-medium mb-2">Story vs Fundamental value</div>
<p class="text-sm text-gray-600 leading-relaxed">
The truth I keep coming back to is simple: find value grounded in the fundamental numbers of a company.
<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>
<h3 class="text-lg font-light mb-4">Current stock analysis</h3>
<div class="border p-6 mb-4">
<div class="flex justify-between mb-2">
<span class="font-medium">MSTR: Strategy</span>
<span class="text-red-500 text-sm">Sell</span>
</div>
<p class="text-sm text-gray-600 leading-relaxed">The company only owns btc by issuing debt and preferred stock offering.<br>
The company is a ponzi scheme at its best.</p>
<a class="text-xs font-mono mt-3 inline-block" href="/static/pdf/mstr.pdf" target="_blank">// Read file</a>
</div>
<div class="border p-6 mb-4">
<div class="flex justify-between mb-2">
<span class="font-medium">Novo.B/NVO: Novo Nordisk A/S</span>
<span class="text-green-600 text-sm">Buy</span>
</div>
<p class="text-sm text-gray-600 leading-relaxed">The product sales of weight loss drugs are high class, pipeline is undervalued.<br>
Pipeline and wegovy pill is not recognised correctly as high focus on expiration of current sold product. High pessimistic view of pipeline.</p>
<a class="text-xs font-mono mt-3 inline-block" href="/static/pdf/novo.pdf" target="_blank">// Read file</a>
</div>
</section>
<section id="interests" class="mb-12">
<button onclick="toggleInterests()" class="w-full text-left flex items-center justify-between border-b pb-2 mb-6 group">
<h2 class="text-2xl font-light">Interests/Free Time</h2>
<span id="interests-chevron" class="text-gray-400 text-sm transition-transform duration-200">▼</span>
</button>
<div id="interests-body" class="hidden">
<div class="page-header">
<span class="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 class="section-head"><h2>Lunix rice</h2></div>
<div class="flex flex-wrap gap-4">
<div class="flex self-center w-80 shrink-0 mx-auto">
<img src="/static/images/rice.png" class="w-full">
</div>
<p class="exp-body flex-1 min-w-64">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>
</div>
<div class="section-head"><h2>Movie/Show Top list</h2></div>
<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 class="section-head"><h2>programing</h2></div>
<div class="flex flex-wrap gap-4">
<div class="flex self-center w-50 shrink-0 mx-auto">
<img src="/static/images/program.png" class="w-full" alt="program">
</div>
<div class="flex-1 min-w-64">
<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 hx-get="/static/components/games.html" hx-trigger="load" hx-swap="outerHTML"></div>
</div>
</section>
<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">
<a class="mr-auto text-blue-500 " href="mailto:me@samantha42.xyz">me@samantha42.xyz</a>
<p class="mx-auto text-gray-500" >Build by me ❤️</p>
<div class="ml-auto text-gray-400 " >© 2026 - all rights reserved</div>
</footer>
</div>
</div>
</main>
<script>
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 ? '▶' : '▼';
}
const bg = document.getElementById('parallax-bg');
const scroller = document.getElementById('scroller');
const speed = 0.1;
scroller.addEventListener('scroll', () => {
const offset = scroller.scrollTop * speed;
bg.style.transform = `translateY(${offset}px)`;
}, { passive: true });
</script>
</body>
</html>