new sesctions and hidden pages and effects

2026-05-21 06:33:29 +02:00
parent 393f6de5b6
commit 4cb5ea8724
11 changed files with 704 additions and 13 deletions
@@ -32,6 +32,10 @@
        <a href="#experience">experience</a>
        <a href="#education">education</a>
        <a href="#opinion">opinion</a>
+        <a href="#automation">automation</a>
+        <a href="#interest">interest</a>
+        <a class="hidden" href="/42">42</a>
+
      </div>
    </div>
    <div>
@@ -46,14 +50,14 @@
    </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</div>
+      <div style="font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);">Denmark<br>Aalborg Øst, 9220</div>
    </div>
  </aside>

  <main id="about">

    <div class="hero">
-      <p class="hero-eyebrow">portfolio · 2026</p>
+      <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">
@@ -79,6 +83,7 @@
            <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>
@@ -96,7 +101,7 @@
        <div class="edu-card">
          <div class="edu-year">2024 — 2025</div>
          <div class="edu-body">
-            <div class="edu-degree">Mathematics-Technology &amp; Computer Science (BSc)</div>
+            <div class="edu-degree">Mathematics-Technology (BSc)</div>
            <div class="edu-inst">Aalborg University · 1 semester</div>
            <span class="edu-tag tag-dropped">discontinued</span>
          </div>
@@ -146,13 +151,51 @@
    </section>

    <section>
-  <div class="section-head"><h2>Movie/Show Top list</h2></div>
+  
+  <section id="automation">
+    <div class="page-header">
+      <h2 class="page-title">Technical Tools & Automation</h2>
+      <span class="page-sub">engineering/programing</span>
+    </div>
+      <div class="exp-grid">
+        <div class="exp-card">
+          <div class="exp-header">
+            <span class="exp-title">Portfolio Engine</span>
+          </div>
+          <p class="exp-body">A lightweight portfolio and financial data backend written in Go. Tracks companies, currencies, revenue reports, and trades across configurable time periods — replacing spreadsheets with a proper database, REST API, and interactive shell.</p>
+          <span class="exp-title">Roadmap</span>
+          <ul style="padding: 20px;">
+            <li class="exp-body">Price update endpoint</li>
+            <li class="exp-body">Multi-currency conversion</li>
+            <li class="exp-body">Frontend dashboard</li>
+            <li class="exp-body">Shares outstanding history database table</li>
+            <li class="exp-body">Earnings per share (EPS) based on shares owned</li>
+            <li class="exp-body">First-In, First-Out (FIFO) realized gains</li>
+            <li class="exp-body">Dividends earned and related taxes</li>
+            <li class="exp-body">Total tax obligations</li>
+          </ul>
+          <a class="outlink" href="https://git.samantha42.xyz/samantha/Portfolio-Engine" >Git repo</a>
+        </div>
+        <div class="exp-card">
+          <div class="exp-header">
+            <span class="exp-title">Accounting Management</span>
+          </div>
+          <p class="exp-body"> A lightweight, SQL-backed, web-based CLI system designed to track assets and liabilities. The goal is to provide a simple, fast, and scalable financial tracking tool that can grow from personal use to more advanced scenarios.</p>
+        </div>
+      </div>
+    </section>
+    <br>

+  <div class="page-header">
+    <h2 class="page-title" id="interest">interests</h2>
+    <span class="page-sub">Fav lists</span>
+  </div>
+  <div class="section-head"><h2>Movie/Show Top list</h2></div>
  <div class="toplist-group">
    <h3>Top 5 Movies</h3>
-    <div class="toplist-body">
+    <div class="toplist-body" >
    <div class="poster-grid">
-      <div class="poster-item">
+      <div class="poster-item posterhover" onclick="bladerunnerClick()">
        <img src="/static/posters/bladerunner2049.jpg" alt="Blade Runner 2049">
        <p>Blade Runner 2049</p>
      </div>
@@ -164,11 +207,11 @@
        <img src="/static/posters/Fightclub.jpg" alt="Fight Club">
        <p>Fight Club</p>
      </div>
-      <div class="poster-item">
+      <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">
+      <div class="poster-item posterhover" onclick="dragonClick()">
        <img src="/static/posters/TheGirlwiththeDragonTattoo.webp" alt="Girl with a Dragon Tattoos">
        <p>Girl with a Dragon Tattoo</p>
      </div>
@@ -179,14 +222,14 @@
    <h3>Top 5 Shows</h3>
  <div class="toplist-body">
    <div class="poster-grid">
-      <div class="poster-item">
-        <img src="/static/posters/Chernobyl.webp" alt="Chernobyl">
-        <p>Chernobyl</p>
-      </div>
      <div class="poster-item">
        <img src="/static/posters/Succession.webp" alt="Succession">
        <p>Succession</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>
@@ -202,6 +245,42 @@
    </div>
  </div>
 </div>
+<div class="section-head"><h2>Lunix rice</h2></div>
+<div class="rice-wrap">
+  <img src="/static/images/rice.png" width="500px">
+  <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.</p>
+</div>
+   <!--
+   <div class="section-head"><h2>Games</h2></div>
+
+    <div class="toplist-group">
+ 
+      <div class="toplist-body">
+    <div class="game-grid">
+      <div class="poster-item">
+        <img src="/static/posters/Chernobyl.webp" alt="Chernobyl">
+        <p>Chernobyl</p>
+      </div>
+      <div class="poster-item">
+       
+        <p>Balders Gate</p>
+      </div>
+      <div class="poster-item">
+        <p>Factorio</p>
+      </div>
+      <div class="poster-item">
+        <p>Slay the spire 2</p>
+      </div>
+      <div class="game-item">
+        <img src="/static/posters/risetr-banner.png" alt="Rise of the Tomb Raider">
+        <p>Rise of the Tomb Raider</p>
+      </div>
+    </div>
+  </div>-->
+</div>
+
+
 </section>
  </main>
 </div>
@@ -211,5 +290,116 @@
  <div class="footer-copy">© 2026 — all rights reserved</div>
 </footer>

+<script>
+  // just some fun.
+  console.log("%c👀 hi there!", "font-size:20px")
+
+
+  function draculaClick() {
+    const el = document.getElementById('interest');
+    if (!el) return; // el is a DOM node, never a string
+    el.textContent = '🦇 interest 🦇';
+
+    setTimeout(() => {
+      el.textContent = "interest";
+    }, 5000);
+  }
+
+  function bladerunnerClick() {
+    if (document.getElementById('rain-canvas')) return; // already running, do nothing
+
+    const el = document.getElementById('interest');
+    el.textContent = 'tears in rain';
+
+    startRain();
+
+    setTimeout(() => {
+      el.textContent = "interest";
+      stopRain();
+    }, 10000);
+  }
+
+  let rainCanvas, rainCtx, rainInterval;
+
+  function startRain() {
+    rainCanvas = document.createElement('canvas');
+    rainCanvas.id = 'rain-canvas';
+    rainCanvas.width = window.innerWidth;
+    rainCanvas.height = window.innerHeight;
+    document.body.appendChild(rainCanvas);
+    rainCtx = rainCanvas.getContext('2d');
+
+    requestAnimationFrame(() => { rainCanvas.style.opacity = '1'; });
+
+    const drops = Array.from({ length: 120 }, () => ({
+      x: Math.random() * rainCanvas.width,
+      y: Math.random() * rainCanvas.height,
+      speed: 8 + Math.random() * 7,
+      length: 12 + Math.random() * 20,
+      opacity: 0.2 + Math.random() * 0.4
+    }));
+
+    rainInterval = setInterval(() => {
+      rainCtx.clearRect(0, 0, rainCanvas.width, rainCanvas.height);
+      drops.forEach(drop => {
+        rainCtx.beginPath();
+        rainCtx.moveTo(drop.x, drop.y);
+        rainCtx.lineTo(drop.x - 2, drop.y + drop.length);
+        rainCtx.strokeStyle = `rgba(174, 214, 241, ${drop.opacity})`;
+        rainCtx.lineWidth = 3;
+        rainCtx.stroke();
+
+        drop.y += drop.speed;
+        if (drop.y > rainCanvas.height) {
+          drop.y = -drop.length;
+          drop.x = Math.random() * rainCanvas.width;
+        }
+      });
+    }, 30);
+  }
+
+  function stopRain() {
+    if (!rainCanvas) return;
+    rainCanvas.style.opacity = '0';
+    setTimeout(() => {
+      clearInterval(rainInterval);
+      rainCanvas.remove();
+      rainCanvas = null;
+    }, 800);
+  }
+function dragonClick() {
+  const existing = document.getElementById('dragon-grid');
+  if (existing) { existing.remove(); return; }
+
+  const grid = document.createElement('canvas');
+  grid.id = 'dragon-grid';
+  grid.width = window.innerWidth;
+  grid.height = window.innerHeight;
+  grid.style.transition = 'opacity 1s ease';
+  document.body.appendChild(grid);
+
+  const ctx = grid.getContext('2d');
+  const img = new Image();
+  img.src = '/static/images/dragon.png';
+
+  img.onload = () => {
+    const size = 250;
+    const cols = Math.ceil(grid.width / size);
+    const rows = Math.ceil(grid.height / size);
+
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        ctx.drawImage(img, c * size, r * size, size, size);
+      }
+    }
+
+    setTimeout(() => {
+      grid.style.opacity = '0';
+      setTimeout(() => grid.remove(), 1000);
+    }, 300);
+  };
+}
+
+</script>
 </body>
 </html>