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