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

better design

Browse Source
This commit is contained in:
samantha42
2026-03-17 08:49:22 +01:00
parent fdd74064ea
commit 1f80e7cf9b
5 changed files with 192 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/about.html
+7 -2
View File
@@ -4,17 +4,22 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About — Samantha Vero Friis</title> <title>About — Samantha Vero Friis</title>
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<!-- PAGE NAV — place right before <header> --> <!-- PAGE NAV — place right before <header> -->
<nav class="page-nav"> <nav class="page-nav">
<a href="#about" class="active"><span>about</span></a> <a href="#about" class="active"><span>about</span></a>
<br /><span><p class="section-label">//Opinion</p></span>
<a href="/cyber"><span>cyber</span></a> <a href="/cyber"><span>cyber</span></a>
<a href="/infra"><span>infra</span></a> <a href="/infra"><span>infra</span></a>
</nav> </nav>
static/cyber.html
+2 -2
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cybersecurity — Samantha Friis</title> <title>Cybersecurity — Samantha Vero Friis</title>
<link <link
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap"
rel="stylesheet" rel="stylesheet"
@@ -17,7 +17,7 @@
<p class="tag">// opinion</p> <p class="tag">// opinion</p>
<h1>The Weakest<br />Link Is Always<br /><span>Human</span></h1> <h1>The Weakest<br />Link Is Always<br /><span>Human</span></h1>
<div class="byline"> <div class="byline">
<span>Samantha Friis</span> <span>Samantha Vero Friis</span>
<span>—</span> <span>—</span>
<span>Cybersecurity</span> <span>Cybersecurity</span>
</div> </div>
static/index.html
-72
View File
@@ -1,72 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Home</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<p class="tag">// personal space</p>
<h1>Hello,<br/>Friend<span>.</span></h1>
<p class="subtitle">Developer, tinkerer, investor. This is my little corner of the internet.</p>
</header>
<nav>
<div class="nav-grid">
<a href="/about" class="nav-item">
<p class="nav-number">01 —</p>
<p class="nav-title">About Me <span class="arrow">↗</span></p>
<p class="nav-desc">Who I am, what I'm working on, and how to get in touch.</p>
</a>
<a href="/portfolio" class="nav-item">
<p class="nav-number">02 —</p>
<p class="nav-title">Portfolio <span class="arrow">↗</span></p>
<p class="nav-desc">Investment thesis, positions, and market observations.</p>
</a>
<a href="/gitpage" target="_blank" rel="noopener" class="nav-item">
<p class="nav-number">03 —</p>
<p class="nav-title">Git <span class="arrow">↗</span></p>
<p class="nav-desc">Personal repositories, open-source projects and code experiments.</p>
</a>
<a href="/Klacq ApS" class="nav-item">
<p class="nav-number">04 —</p>
<p class="nav-title">Klacq ApS<span class="arrow">↗</span></p>
<p class="nav-desc">Small personaly owned streaming service</p>
</a>
<a href="/infra" class="nav-item">
<p class="nav-number">05 —</p>
<p class="nav-title">Infrastructure <span class="arrow">↗</span></p>
<p class="nav-desc">Computer setups for company efficiency </p>
</a>
<a href="/cyber" class="nav-item">
<p class="nav-number">06 —</p>
<p class="nav-title">Cyber Security<span class="arrow">↗</span></p>
<p class="nav-desc">Protect data, personal and companies.</p>
</a>
</div>
</nav>
<footer>
<a href="mailto:contact@samantha42.xyz">contact@samantha42.xyz</a>
<p class="footer-copy">&copy; 2026 — All rights reserved</p>
</footer>
</div>
</body>
</html>
static/infra.html
+96 -24
View File
@@ -1,55 +1,87 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Infrastructure — Samantha Friis</title> <title>Infrastructure — Samantha Vero Friis</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" rel="stylesheet"/> <link
<link rel="stylesheet" href="styles.css"> href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<a href="/" class="back">← back</a> <a href="/" class="back">← back</a>
<p class="tag">// opinion</p> <p class="tag">// opinion</p>
<h1>Convenience<br />Is Making Us<br /><span>Worse</span></h1> <h1>Convenience<br />Is Making Us<br /><span>Worse</span></h1>
<div class="byline"> <div class="byline">
<span>Samantha Friis</span> <span>Samantha Vero Friis</span>
<span>—</span> <span>—</span>
<span>Computer Infrastructure</span> <span>Computer Infrastructure</span>
</div> </div>
</header> </header>
<article> <article>
<p class="lead"> <p class="lead">
The tools a company chooses to build on top of says a lot about how serious it is about the craft. The industry-wide drift toward Word, Teams, and Microsoft 365 is not a productivity upgrade — it is a slow erosion of competence dressed up as convenience. The tools a company chooses to build on top of says a lot
about how serious it is about the craft. The industry-wide
drift toward Word, Teams, and Microsoft 365 is not a
productivity upgrade — it is a slow erosion of competence
dressed up as convenience.
</p> </p>
<h2>The Convenience Trap</h2> <h2>The Convenience Trap</h2>
<p> <p>
Every tool that hides complexity from you takes something away. When a new hire can open a laptop running Windows, install Office in ten minutes, and be "operational" by noon, that feels like a win. But operational is not the same as capable. What that person has actually learned is how to navigate a UI. They have not learned how their machine works, how their data flows, or how to adapt when the abstraction breaks. Every tool that hides complexity from you takes something
away. When a new hire can open a laptop running Windows,
install Office in ten minutes, and be "operational" by noon,
that feels like a win. But operational is not the same as
capable. What that person has actually learned is how to
navigate a UI. They have not learned how their machine
works, how their data flows, or how to adapt when the
abstraction breaks.
</p> </p>
<p> <p>
Large vendor ecosystems like Microsoft 365 are engineered for the lowest common denominator. They are excellent at onboarding someone with no background — and they stop there. The ceiling is built in by design. You cannot meaningfully extend Word. You cannot script Teams in any serious way. You are a tenant inside someone else's system, paying monthly for the privilege of not understanding what is happening underneath you. Large vendor ecosystems like Microsoft 365 are engineered
for the lowest common denominator. They are excellent at
onboarding someone with no background — and they stop there.
The ceiling is built in by design. You cannot meaningfully
extend Word. You cannot script Teams in any serious way. You
are a tenant inside someone else's system, paying monthly
for the privilege of not understanding what is happening
underneath you.
</p> </p>
<blockquote> <blockquote>
Convenience optimizes for the speed of the <span>newcomer</span>.<br/> Convenience optimizes for the speed of the
It does not care about the ceiling of the <span>expert</span>. <span>newcomer</span>.<br />
It does not care about the ceiling of the
<span>expert</span>.
</blockquote> </blockquote>
<h2>What We Trade Away</h2> <h2>What We Trade Away</h2>
<p> <p>
The deeper issue is what gets lost over time. A team that has never had to configure anything has never had to understand anything. When your document pipeline is Word plus SharePoint, you never learn what a proper typesetting system looks like. When your servers are Azure with a click-through UI, you never develop intuition for networking, permissions, or failure modes. The knowledge simply does not accumulate. The deeper issue is what gets lost over time. A team that
has never had to configure anything has never had to
understand anything. When your document pipeline is Word
plus SharePoint, you never learn what a proper typesetting
system looks like. When your servers are Azure with a
click-through UI, you never develop intuition for
networking, permissions, or failure modes. The knowledge
simply does not accumulate.
</p> </p>
<p> <p>
The companies most dependent on big vendor stacks also tend to be the most fragile. A license change, a price increase, a deprecated feature — and suddenly nobody knows what to do. There is no internal knowledge to fall back on. The stack was always a rented abstraction. The companies most dependent on big vendor stacks also tend
to be the most fragile. A license change, a price increase,
a deprecated feature — and suddenly nobody knows what to do.
There is no internal knowledge to fall back on. The stack
was always a rented abstraction.
</p> </p>
<div class="compare"> <div class="compare">
@@ -80,46 +112,86 @@
<h2>Linux as a Philosophy</h2> <h2>Linux as a Philosophy</h2>
<p> <p>
A Linux desktop is not just a different operating system. It is a different relationship with your machine. You configure your window manager, your keybindings, your terminal, your dotfiles. The environment becomes an extension of how you think. Two engineers on the same team can have entirely different setups that are both optimized for their own cognitive style — and that is a feature, not a problem. A Linux desktop is not just a different operating system. It
is a different relationship with your machine. You configure
your window manager, your keybindings, your terminal, your
dotfiles. The environment becomes an extension of how you
think. Two engineers on the same team can have entirely
different setups that are both optimized for their own
cognitive style — and that is a feature, not a problem.
</p> </p>
<p> <p>
This is not about being difficult or contrarian. It is about the fact that a person who has spent time configuring <code>neovim</code>, managing a <code>systemd</code> service, or writing their own shell scripts has fundamentally more understanding of computation than someone who has spent the same time clicking through GUIs. That understanding compounds. It transfers across every problem they touch. This is not about being difficult or contrarian. It is about
the fact that a person who has spent time configuring
<code>neovim</code>, managing a
<code>systemd</code> service, or writing their own shell
scripts has fundamentally more understanding of computation
than someone who has spent the same time clicking through
GUIs. That understanding compounds. It transfers across
every problem they touch.
</p> </p>
<h2>Documents Should Be Code</h2> <h2>Documents Should Be Code</h2>
<p> <p>
The same logic applies to document production. Word processing is a GUI wrapped around formatting decisions you did not make. The output is inconsistent, the versioning is painful, and the result is never quite right. A typesetting system like <code>Typst</code> treats a document as source code — deterministic, version-controlled, composable. You write a template once and it is correct everywhere, forever. The document becomes a reproducible artifact. The same logic applies to document production. Word
processing is a GUI wrapped around formatting decisions you
did not make. The output is inconsistent, the versioning is
painful, and the result is never quite right. A typesetting
system like <code>Typst</code> treats a document as source
code — deterministic, version-controlled, composable. You
write a template once and it is correct everywhere, forever.
The document becomes a reproducible artifact.
</p> </p>
<p> <p>
Custom pipelines like this require an upfront investment. You have to learn the tool, build the template, establish the workflow. But once built, the leverage is enormous. Reports, invoices, analysis documents — all generated cleanly from structured data, with zero manual formatting. That is not possible in Word. It is not even imaginable in Word. Custom pipelines like this require an upfront investment.
You have to learn the tool, build the template, establish
the workflow. But once built, the leverage is enormous.
Reports, invoices, analysis documents — all generated
cleanly from structured data, with zero manual formatting.
That is not possible in Word. It is not even imaginable in
Word.
</p> </p>
<h2>Own Your Servers</h2> <h2>Own Your Servers</h2>
<p> <p>
Self-hosted infrastructure demands that someone in your organization understands it. That is not a burden — it is the point. When you run your own services, you know exactly where your data lives, what it costs to run, and what happens when something fails. You build operational knowledge that no managed cloud service can give you. Self-hosted infrastructure demands that someone in your
organization understands it. That is not a burden — it is
the point. When you run your own services, you know exactly
where your data lives, what it costs to run, and what
happens when something fails. You build operational
knowledge that no managed cloud service can give you.
</p> </p>
<p> <p>
This does not mean rejecting cloud entirely. It means being intentional. Use the cloud where the economics clearly favor it. Build and operate everything else yourself. The goal is a team that could reconstruct its own stack from scratch if it had to — because a team capable of that is a team that actually understands what it has built. This does not mean rejecting cloud entirely. It means being
intentional. Use the cloud where the economics clearly favor
it. Build and operate everything else yourself. The goal is
a team that could reconstruct its own stack from scratch if
it had to — because a team capable of that is a team that
actually understands what it has built.
</p> </p>
<hr /> <hr />
<p> <p>
The best infrastructure is not the most convenient. It is the most understood. Tools that demand something from you — configuration, learning, patience — are the tools that make you better over time. Convenience is a ceiling. Complexity, embraced deliberately, is a floor that keeps getting higher. The best infrastructure is not the most convenient. It is
the most understood. Tools that demand something from you —
configuration, learning, patience — are the tools that make
you better over time. Convenience is a ceiling. Complexity,
embraced deliberately, is a floor that keeps getting higher.
</p> </p>
</article> </article>
<footer> <footer>
<a href="mailto:contact@samantha42.xyz">contact@samantha42.xyz</a> <a href="mailto:contact@samantha42.xyz"
>contact@samantha42.xyz</a
>
<p class="footer-copy">&copy; 2026 — All rights reserved</p> <p class="footer-copy">&copy; 2026 — All rights reserved</p>
</footer> </footer>
</div> </div>
</body> </body>
</html> </html>
static/styles.css
+8 -4
View File
@@ -65,7 +65,6 @@ body::before {
/* ─── Header ─── */ /* ─── Header ─── */
header { header {
padding: 4rem 0 3rem;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
animation: fadeUp 0.6s ease both; animation: fadeUp 0.6s ease both;
} }
@@ -95,14 +94,15 @@ header {
} }
h1 { h1 {
font-family: "Syne", sans-serif; font-family: "Libre Caslon Text", serif;
font-size: clamp(2.2rem, 4vw, 3.5rem); font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800; font-weight: 800;
line-height: 1.05; line-height: 1.05;
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }
h1 span { h1 span {
color: var(--accent); color: var(--accent);
font-size: clamp(2rem, 2.5vw, 3.5rem);
} }
h1--hero { h1--hero {
@@ -552,7 +552,6 @@ input[type="password"] {
transition: transition:
border-color 0.2s, border-color 0.2s,
box-shadow 0.2s; box-shadow 0.2s;
-webkit-appearance: none;
} }
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus { input[type="password"]:focus {
@@ -1076,3 +1075,8 @@ main.two-col {
.attack-table thead th:nth-child(3) { .attack-table thead th:nth-child(3) {
width: 40%; width: 40%;
} }
nav .section-label {
margin: 0;
padding: 0;
}