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

adding fonts and css change

Browse Source
This commit is contained in:
samantha42
2026-08-28 11:10:00 +02:00
parent 3d3d87fad9
commit cd536b1c8f
9 changed files with 103 additions and 1931 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2 -1
View File
@@ -1,2 +1,3 @@
.env
tailwindcss-*
tailwindcss-*
site
source/index.html
-208
View File
@@ -1,208 +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/output.css"/>
</head>
<body class="theme-root day " id="themeRoot">
<nav>
<a class="nav-logo" href="/#">samantha_vero_friis</a>
</nav>
<div class="shell">
<aside>
<div class="row">
<img id="day" src="/static/icons/lovesun.png" width="30px" class="hidden" onclick="makeday()" >
<img id="night" src="/static/icons/moon.png" width="30px" onclick="makenight()" >
</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="#interests">interests</a>
</div>
</div>
<div>
<p class="sidebar-label">pages</p>
<div class="sidebar-links">
<a href="/automation">automation</a>
<a href="/research">research</a>
<a href="/bookkeeping">bookkeeping</a>
<a href="/interests">interests</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 class="skill-item">Linux</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 class="exp-tag">samantha42.xyz</span>
<span class="exp-tag">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 link" 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>
</div>
<div class="exp-card link" onclick="window.location.href='/bookkeeping'">
<div class="exp-header">
<span class="exp-title">Bookkeeping &amp; Administration</span>
<span class="exp-tag">Record keeping</span>
</div>
<p class="exp-body">Excel to In house Bookkeeping tooling and backups and safe sql databse for larger scale. made to better comply to lawmakers in KLACQ ApS(small self owned company) currently selling SaaS products. <a href="https:klacq.eu">klacq website</a> </p>
</div>
<div class="exp-card link" onclick="window.location.href='/automation'">
<div class="exp-header">
<span class="exp-title">Technical Tools &amp; Automation</span>
<span class="exp-tag">programing</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>
</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="interests">
<div class="section-head">
<h2>interests</h2>
</div>
<div class="exp-grid">
<div class="exp-card link" onclick="window.location.href='/interests'">
<div class="exp-header">
<span class="exp-title">Personal Free Time Interest</span>
<span class="exp-tag">Personal</span>
</div>
<p class="exp-body">Movies, computers, PC gaming and oard games</p>
</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>
// just some fun.
console.log("%c👀 hi there!", "font-size:20px")
function makeday() {
themeRoot.classList.remove('night');
const day = document.getElementById('day');
const night = document.getElementById('night');
day.classList.add("hidden");
night.classList.remove("hidden");
}
function makenight() {
themeRoot.classList.add('night');
const day = document.getElementById('day');
const night = document.getElementById('night');
day.classList.remove("hidden");
night.classList.add("hidden");
}
</script>
</body>
</html>
source/pages/index.html
+3 -4
View File
@@ -44,17 +44,16 @@
{{end}}
{{define "body"}}
<section class="hero">
<section class="hero" id="about">
<p class="hero-eyebrow">About Me · 2026</p>
<h1>Samantha<br><span>Vero Friis</span>
<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 class="exp-tag">samantha42.xyz</span>
<span class="available">Available</span>
<span class="exp-tag">me@samantha42.xyz</span>
</div>
</section>
source/pages/research.html
+32 -6
View File
@@ -30,26 +30,39 @@
</p>
</div>
<br>
<div class="section-head">
<h2>Current stock analysis</h2>
</div>
<p class="hero-bio">
Reports listed is what i consider still actionable and align with my opinion on the given company at this time. Understand that the infomaion and the time of writing may be dated. The mispricing of the thesis remain valuable.
</p>
<br>
<div class="exp-card link" onclick="window.open('/static/pdf/mstr.pdf', '_blank')">
<div class="exp-header">
<span class="exp-title">MSTR: Strategy<span style="color: red;"> (Sell)</span></span>
<span class="exp-tag">due diligence</span>
<span class="exp-title">MSTR: Strategy</span>
<div>
<span class="exp-tag">due diligence</span>
<span class="exp-tag red">Sell</span>
</div>
</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.
The company is expensive btc at its best and ponzi scheme at its worst.
</p>
</div>
<br>
<div class="exp-card link" onclick="window.open('/static/pdf/novo.pdf', '_blank')">
<div class="exp-header">
<span class="exp-title">Novo.B/NVO: Novo Nordisk A/S<span style="color: green"> (buy)</span></span>
<span class="exp-tag">due diligence</span>
</div>
<span class="exp-title">Novo.B/NVO: Novo Nordisk A/S</span>
<div>
<span class="exp-tag">due diligence</span>
<span class="exp-tag green">buy</span>
</div>
</div>
<p class="exp-body">
The product sales of wieght loss drugs are highclass, pipeline is undervalued.
<br>
@@ -61,6 +74,19 @@
<div class="section-head">
<h2>Equity portfolio performance</h2>
</div>
<p class="hero-bio">
year to date performance has its risked and luck based issues. hard to say if these numbers will continue year by year.
</p>
<div class="exp-card">
<div class="exp-header">
<span class="exp-title">Trades</span>
</div>
<div>
<p class="exp-body"> mostly long trades on NOVO, MEARSK, ORTSED and VWS with a low wieght of puts on RGTI </p>
</div>
</div>
<br>
<div class="exp-card">
<div hx-get="/static/components/eq.html" hx-trigger="load" hx-swap="outerHTML">
<span class="spinner">Loading chart...</span>
source/templates/main.html
+6 -11
View File
@@ -16,7 +16,11 @@
<body class="theme-root day " id="themeRoot">
<nav>
<a class="nav-logo" href="/#">samantha_vero_friis</a> {{if .Sub}}<a class="nav-logo sub">{{.Title}}</a> {{end}}
<a class="nav-logo" href="/#">samantha_vero_friis</a>
{{if .Sub}}
<a class="nav-logo sub">{{.Title}}</a>
<a class="nav-logo back" href="/">BACK</a>
{{end}}
</nav>
<div class="shell">
@@ -25,19 +29,10 @@
<img id="day" src="/static/icons/lovesun.png" width="30px" class="hidden" onclick="makeday()" >
<img id="night" src="/static/icons/moon.png" width="30px" onclick="makenight()" >
</div>
{{if .Sub}}
<div>
<div class="sidebar-links back">
<a href="/">BACK</a>
</div>
</div>
{{end}}
{{template "nav" .}}
<div style="flex: 1;"></div>
</aside>
<main id="{{.Title}}">
<main>
{{template "body" .}}
</main>
</div>
static/index.html
-517
View File
@@ -1,517 +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/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="/login">login</a>
</div>
</nav>
<div class="shell">
<aside>
<div class="row">
<img id="day" src="/static/icons/lovesun.png" width="30px" class="hidden" onclick="makeday()" >
<img id="night" src="/static/icons/moon.png" width="30px" onclick="makenight()" >
</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="#research">research</a>
<a href="#interests">interests</a>
<a class="hidden" href="/42">42</a>
<a href="#newsletter">newsletter</a>
<a href="#contact">contact</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 class="exp-tag">samantha42.xyz</span>
<span class="exp-tag">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>
<br>
<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>
<div class="section-head">
<h2>Equity portfolio performance</h2>
</div>
<div class="exp-card">
<div hx-get="/static/components/eq.html" hx-trigger="load" hx-swap="outerHTML">
<span class="spinner">Loading chart...</span>
</div>
</div>
</section>
<section id="newsletter">
<div class="page-header">
<h2 class="page-title">Equity Research · Newsletter</h2>
</div>
<div class="exp-card">
<div class="exp-header">
<span class="exp-title">When the numbers say something worth saying.</span>
</div>
<p class="exp-body">
Not a scheduled publication. Sent when there is a specific, well-reasoned case to make — a mispricing, a narrative the market has wrong, or an implied expectation that doesn't survive contact with the filings.
<br><br>
Fundamental analysis. SEC filings. No macro noise.
</p>
<div style="display:flex;flex-wrap:wrap;gap:1rem;margin:1.25rem 0;">
<div style="flex:1;min-width:140px;">
<div class="exp-title" style="margin-bottom:6px;">// thesis</div>
<p class="exp-body">A specific position on a specific company. Long or short. With a reason.</p>
</div>
<div style="flex:1;min-width:140px;">
<div class="exp-title" style="margin-bottom:6px;">// filings-first</div>
<p class="exp-body">10-K, 10-Q, earnings. The numbers, not the press release.</p>
</div>
</div>
<div id="nl-form" style="display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem;">
<input
id="nl-email"
type="email"
placeholder="your@email.com"
autocomplete="email"
style="font-family:var(--ff-mono);font-size:0.75rem;background:transparent;border:0.5px solid var(--border);color:var(--text);padding:0 12px;height:36px;border-radius:3px;outline:none;min-width:200px;flex:1;"
/>
<button
onclick="nlSubmit()"
class="navigate"
style="height:36px;padding:0 16px;cursor:pointer;white-space:nowrap;"
>subscribe →</button>
</div>
<p id="nl-note" style="font-family:var(--ff-mono);font-size:0.65rem;color:var(--muted);margin-top:8px;">// no schedule. no spam. unsubscribe anytime.</p>
<p id="nl-success" style="display:none;font-family:var(--ff-mono);font-size:0.75rem;color:var(--accent, #5DCAA5);margin-top:8px;">// subscribed. you'll hear from me when something is worth writing about.</p>
</div>
</section>
<section id="interests">
<div class="page-header">
<h2 class="page-title" id="interest">
Interests
</h2>
<button id="interest-button" onclick="toggleInterests()" class="">open ↓</button>
</div>
<div id="interests-body" class="hidden">
<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 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 hx-get="/static/components/games.html" hx-trigger="load" hx-swap="outerHTML">
<span class="spinner">Loading stats…</span>
</div>
</div>
</section>
<section id="contact">
<div class="page-header"><h2 class="page-title" id="interest">Contact</h2></div>
<div class="exp-card" >
<div class="exp-header">
<span class="exp-title">Open to opportunities</span>
</div>
<p class="cta-body">
Looking for an entry-level analyst or finance-adjacent role alongside my studies. If you're working on something interesting.
</p>
<a class="cta-btn" href="mailto:me@samantha42.xyz">write to me →</a>
</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>
// just some fun.
console.log("%c👀 hi there!", "font-size:20px")
function makeday() {
themeRoot.classList.remove('night');
const day = document.getElementById('day');
const night = document.getElementById('night');
day.classList.add("hidden");
night.classList.remove("hidden");
}
function makenight() {
themeRoot.classList.add('night');
const day = document.getElementById('day');
const night = document.getElementById('night');
day.classList.remove("hidden");
night.classList.add("hidden");
}
// about.js
function closeOverlay() {
document.getElementById('overlay').style.display = 'none';
}
// or toggle it from anywhere:
function openOverlay() {
document.getElementById('overlay').style.display = 'flex';
}
function toggleInterests() {
const body = document.getElementById('interests-body');
const button = document.getElementById('interest-button');
const hidden = body.classList.toggle('hidden');
if (hidden) {
button.textContent = "open ↓"
} else {
button.textContent = "close ↑"
}
}
function nlSubmit() {
const input = document.getElementById('nl-email');
const val = input.value.trim();
if (!val || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) {
input.style.borderColor = 'red';
input.focus();
setTimeout(() => { input.style.borderColor = ''; }, 1600);
return;
}
console.log(val)
// TODO: POST to your subscriber endpoint (Listmonk, Buttondown, etc.)
fetch('/newsletter/subscribe', { method:'POST', body: JSON.stringify({email:val}), headers:{'Content-Type':'application/json'} })
document.getElementById('nl-form').style.display = 'none';
document.getElementById('nl-note').style.display = 'none';
document.getElementById('nl-success').style.display = 'block';
}
document.getElementById('nl-email').addEventListener('keydown', e => {
if (e.key === 'Enter') nlSubmit();
});
</script>
<script src="/static/scripts/posteranimation.js"></script>
</body>
</html>
static/input.css
+59 -14
View File
@@ -1,3 +1,35 @@
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
.ibm-plex-serif-thin {
font-family: "IBM Plex Serif", serif;
font-weight: 100;
font-style: normal;
}
.ibm-plex-serif-extralight {
font-family: "IBM Plex Serif", serif;
font-weight: 200;
font-style: normal;
}
.ibm-plex-serif-light {
font-family: "IBM Plex Serif", serif;
font-weight: 300;
font-style: normal;
}
.ibm-plex-serif-regular {
font-family: "IBM Plex Serif", serif;
font-weight: 400;
font-style: normal;
}
.ibm-plex-serif-medium {
font-family: "IBM Plex Serif", serif;
font-weight: 500;
font-style: normal;
}
.theme-root.night {
--bg: #1c1c1c;
--surface: #252525;
@@ -55,7 +87,6 @@ body::before{
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;
}
@@ -74,6 +105,8 @@ nav{
}
.nav-logo::before{content:'>';color:var(--green);font-weight:500;}
.nav-logo.sub::before{content:'/';color:var(--green);font-weight:500;}
.nav-logo.back::before{content:'<-';color:var(--green);font-weight:500;}
.nav-links{display:flex;gap:0.2rem;align-items:center;}
.nav-links a{
@@ -96,15 +129,6 @@ nav{
}
.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;
@@ -149,9 +173,10 @@ main{
}
.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);
font-family: "IBM Plex Serif", serif;
font-weight: 300;
font-style: normal;
font-size: 4rem;
letter-spacing:-0.02em;line-height:1.1;
}
h1 span{color:var(--accent);}
@@ -193,7 +218,13 @@ h1 span{color:var(--accent);}
}
.exp-title{font-family:var(--ff-mono);font-size:0.9rem;font-weight:500;color:var(--text);}
.exp-title{
font-family: "IBM Plex Serif", serif;
font-weight: 500;
font-style: normal;
color:var(--text);}
.exp-tag{
font-family:var(--ff-mono);font-size:0.65rem;
letter-spacing:0.1em;text-transform:uppercase;
@@ -201,6 +232,20 @@ h1 span{color:var(--accent);}
border:1px solid rgba(26,86,219,0.2);
padding:2px 8px;border-radius:3px;
}
.exp-tag.green{
color: green;
background:rgba(61, 219, 26, 0.07);
border:1px solid rgba(38, 103, 13, 0.2);
}
.exp-tag.red{
color: red;
background:rgba(219, 26, 26, 0.07);
border:1px solid rgba(219, 26, 26, 0.2);
}
.exp-body{font-size:0.85rem;color:var(--muted);line-height:1.8;}
.edu-grid{display:flex;flex-direction:column;gap:8px;}
static/output.css
+1 -1
View File
File diff suppressed because one or more lines are too long
static/style/styles.css
-1169
View File
File diff suppressed because it is too large Load Diff