game section
This commit is contained in:
samantha42
+366
-274
@@ -1,38 +1,46 @@
|
||||
<!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"/>
|
||||
<link rel="stylesheet" href="/static/style/styles2.css" />
|
||||
<link rel="stylesheet" href="/static/style/game.css" />
|
||||
<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" />
|
||||
<link rel="stylesheet" href="/static/style/styles2.css" />
|
||||
<link rel="stylesheet" href="/static/style/game.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>
|
||||
<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 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>
|
||||
</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 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">
|
||||
@@ -42,269 +50,353 @@
|
||||
<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="#interest">interest</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>
|
||||
<!--
|
||||
<div class="sidebar-links">
|
||||
<p class="sidebar-label">mini games</p>
|
||||
<a href="#alice" onclick="unhideGame()"> Follow the rabbit</a>
|
||||
<a href="#tetris" onclick="unhideTetris()" >Alexey Pajitnov</a>
|
||||
</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>
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
<main id="about">
|
||||
|
||||
<div 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><span class="dot"></span>available for work</span>
|
||||
<span>samantha42.xyz</span>
|
||||
<span>me@samantha42.xyz</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="experience">
|
||||
<div class="section-head"><h2>experience</h2></div>
|
||||
<div class="exp-grid">
|
||||
<div class="exp-card">
|
||||
<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">
|
||||
<div class="exp-header">
|
||||
<span class="exp-title">Technical Tools & 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 & 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 & Technology</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>
|
||||
</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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section id="interestlist" >
|
||||
<div class="section-head"><h2>interests</h2></div>
|
||||
<div class="interestssection-row">
|
||||
<span class="interest-chip">cinema</span>
|
||||
<span class="interest-chip">tv shows</span>
|
||||
<span class="interest-chip">Economics</span>
|
||||
<span class="interest-chip">gaming</span>
|
||||
<span class="interest-chip">Design</span>
|
||||
<span class="interest-chip">board-games</span>
|
||||
<span class="interest-chip">programming</span>
|
||||
<span class="interest-chip">financial-markets</span>
|
||||
<span class="interest-chip">Tech</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<p class="sidebar-label">languages</p>
|
||||
<div class="lang-row">
|
||||
<span class="lang-badge">Danish</span>
|
||||
<span class="lang-badge">English</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<br>
|
||||
|
||||
<section id="interests" >
|
||||
<div class="page-header">
|
||||
<h2 class="page-title" id="interest">interests</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.
|
||||
<div style="flex: 1;"></div>
|
||||
<!--
|
||||
<div class="sidebar-links">
|
||||
<p class="sidebar-label">mini games</p>
|
||||
<a href="#alice" onclick="unhideGame()"> Follow the rabbit</a>
|
||||
<a href="#tetris" onclick="unhideTetris()" >Alexey Pajitnov</a>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
<main id="about">
|
||||
|
||||
<div 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>
|
||||
<span class="dot"></span>available for work</span>
|
||||
<span>samantha42.xyz</span>
|
||||
<span>me@samantha42.xyz</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="experience">
|
||||
<div class="section-head">
|
||||
<h2>experience</h2>
|
||||
</div>
|
||||
<div class="exp-grid">
|
||||
<div class="exp-card">
|
||||
<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" onclick="window.location.href='#automation'">
|
||||
<div class="exp-header">
|
||||
<span class="exp-title">Technical Tools & 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 & 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 & 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>
|
||||
|
||||
<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>
|
||||
<br>
|
||||
Neo: What truth?
|
||||
<br>
|
||||
Boy: There is no spoon.
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
<section id="interests">
|
||||
<div class="page-header">
|
||||
<h2 class="page-title" id="interest">interests</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 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: 300px;" alt="program">
|
||||
<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>
|
||||
<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>
|
||||
<br>
|
||||
<div class="section-head">
|
||||
<h2>Games</h2>
|
||||
</div>
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
<div class="section-head"><h2>Lunix rice</h2></div>
|
||||
<div>
|
||||
<div style="padding-left: 10%;"><img src="/static/images/rice.png" width="80%" style="align-self: center;"></div>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
<script src="/static/about.js"></script>
|
||||
<script src="/static/scripts/posteranimation.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 734 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 727 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
@@ -538,7 +538,7 @@ function stopTypewriter() {
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
let matrixCanvas, matrixCtx, matrixAnimFrame;
|
||||
let matrixCanvas, matrixCtx, matrixAnimFrame, matrixStopping = false;
|
||||
|
||||
function startMatrix() {
|
||||
matrixCanvas = document.createElement('canvas');
|
||||
@@ -576,8 +576,8 @@ function startMatrix() {
|
||||
// each column: how far down it has dripped (in rows)
|
||||
// start negative so columns begin off-screen at staggered times
|
||||
const drops = Array.from({ length: COLS }, () => ({
|
||||
y: -(Math.random() * 10), // staggered start above top
|
||||
speed: 0.1 + Math.random() * 0.5,
|
||||
y: -(Math.random() * 50), // staggered start above top
|
||||
speed: 0.1 + Math.random() * 0.2,
|
||||
glyphs: [] // trail of { char, age }
|
||||
}));
|
||||
|
||||
@@ -630,11 +630,18 @@ function startMatrix() {
|
||||
});
|
||||
|
||||
// reset column when it scrolls fully off the bottom
|
||||
if (drop.y * FONT_SIZE > H + TRAIL_LEN * FONT_SIZE) {
|
||||
drop.y = -(Math.random() * 30);
|
||||
drop.speed = 0.3 + Math.random() * 0.3;
|
||||
drop.glyphs = [];
|
||||
}
|
||||
// reset column when it scrolls fully off the bottom
|
||||
if (drop.y * FONT_SIZE > H + TRAIL_LEN * FONT_SIZE) {
|
||||
if (matrixStopping) {
|
||||
// don't recycle — park it off-screen so the trail dies
|
||||
drop.y = -(TRAIL_LEN * 10);
|
||||
drop.glyphs = [];
|
||||
} else {
|
||||
drop.y = -(Math.random() * 30);
|
||||
drop.speed = 0.3 + Math.random() * 0.7;
|
||||
drop.glyphs = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (matrixCanvas) matrixAnimFrame = requestAnimationFrame(drawFrame);
|
||||
@@ -645,12 +652,21 @@ function startMatrix() {
|
||||
|
||||
function stopMatrix() {
|
||||
if (!matrixCanvas) return;
|
||||
matrixCanvas.style.opacity = '0';
|
||||
cancelAnimationFrame(matrixAnimFrame);
|
||||
|
||||
// signal: no new heads, let existing trails die out
|
||||
matrixStopping = true;
|
||||
|
||||
// after trails have had time to fade, pull the canvas
|
||||
setTimeout(() => {
|
||||
matrixCanvas.remove();
|
||||
matrixCanvas = null;
|
||||
}, 1200);
|
||||
cancelAnimationFrame(matrixAnimFrame);
|
||||
matrixCanvas.style.opacity = '0';
|
||||
matrixCanvas.style.transition = 'opacity 1.2s ease';
|
||||
setTimeout(() => {
|
||||
matrixCanvas.remove();
|
||||
matrixCanvas = null;
|
||||
matrixStopping = false;
|
||||
}, 1200);
|
||||
}, 1800);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user