Add background animation and new npm link to share.html; update sitemap.xml to include share.html

2026-09-08 11:23:17 +00:00 · 2026-08-28 23:15:25 -05:00
parent d27792b813
commit e3611c053c
2 changed files with 88 additions and 1 deletions
@@ -58,7 +58,20 @@
    line-height:1.5;
    display:flex;flex-direction:column;align-items:center;
    min-height:100vh;padding:40px 20px 64px;
-    overflow-x:hidden;
+    overflow-x:hidden;position:relative;
+  }
+  body::before{
+    content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
+  }
+  #bgCanvas{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block;}
+  body::after{
+    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
+    background-image:
+      linear-gradient(rgba(20,22,26,.045) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(20,22,26,.045) 1px, transparent 1px);
+    background-size:44px 44px;
+    -webkit-mask-image:radial-gradient(820px 720px at 50% 12%, #000 30%, transparent 78%);
+            mask-image:radial-gradient(820px 720px at 50% 12%, #000 30%, transparent 78%);
  }
  a{color:inherit;text-decoration:none;}

@@ -157,6 +170,7 @@
 </style>
 </head>
 <body>
+<canvas id="bgCanvas" aria-hidden="true"></canvas>

 <div class="card">
  <div class="banner">
@@ -199,6 +213,11 @@
      <span class="r-body"><span class="r-title">GitHub</span></span>
      <span class="r-right">↗</span>
    </a>
+    <a class="row" href="https://www.npmjs.com/~wolf_reaper91" target="_blank" rel="noopener">
+      <span class="ico"><svg viewBox="0 0 24 24"><path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></svg></span>
+      <span class="r-body"><span class="r-title">npm</span></span>
+      <span class="r-right">↗</span>
+    </a>
    <a class="row" href="https://x.com/Mileswa1q2" target="_blank" rel="noopener">
      <span class="ico"><svg viewBox="0 0 24 24"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg></span>
      <span class="r-body"><span class="r-title">X</span></span>
@@ -250,6 +269,68 @@

 <script>
 (function(){
+
+  // ---- Ambient drifting orbs background ----
+  (function bg(){
+    var canvas = document.getElementById('bgCanvas');
+    if(!canvas) return;
+    var ctx = canvas.getContext('2d');
+    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    var orbs = [];
+    var COLORS = [
+      [29,155,240],  // blue
+      [255,61,154],  // pink
+      [34,211,153],  // mint
+      [168,85,247]   // purple
+    ];
+
+    function resize(){
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      seed();
+    }
+    function seed(){
+      orbs = [];
+      var count = Math.min(6, Math.round(canvas.width / 220) + 3);
+      for(var i=0;i<count;i++){
+        orbs.push({
+          x: Math.random()*canvas.width,
+          y: Math.random()*canvas.height,
+          r: 80 + Math.random()*160,
+          c: COLORS[i % COLORS.length],
+          sp: 0.15 + Math.random()*0.25,
+          a: 0.12 + Math.random()*0.10,
+          seed: Math.random()*1000
+        });
+      }
+    }
+
+    var t = 0;
+    function frame(){
+      requestAnimationFrame(frame);
+      if(reduced) return;
+      ctx.clearRect(0,0,canvas.width,canvas.height);
+      t += 0.005;
+      for(var i=0;i<orbs.length;i++){
+        var o = orbs[i];
+        var nx = o.x + Math.sin(t*o.sp + o.seed) * 90;
+        var ny = o.y + Math.cos(t*o.sp*0.8 + o.seed*1.3) * 70;
+        var g = ctx.createRadialGradient(nx,ny,0,nx,ny,o.r);
+        g.addColorStop(0, 'rgba('+o.c[0]+','+o.c[1]+','+o.c[2]+','+o.a+')');
+        g.addColorStop(1, 'rgba('+o.c[0]+','+o.c[1]+','+o.c[2]+',0)');
+        ctx.fillStyle = g;
+        ctx.beginPath();
+        ctx.arc(nx,ny,o.r,0,Math.PI*2);
+        ctx.fill();
+      }
+    }
+
+    window.addEventListener('resize', resize);
+    resize();
+    frame();
+  })();
+
  var copyBtn = document.getElementById('copyBtn');
  if(copyBtn) copyBtn.addEventListener('click', function(){
    copyText('https://milesallen.site/share.html', copyBtn, function(){ flash(copyBtn, 'Copied!'); });
@@ -144,6 +144,12 @@
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
+  <url>
+    <loc>https://milesallen.site/share.html</loc>
+    <lastmod>2026-08-28</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
  <url>
    <loc>https://milesallen.site/404.html</loc>
    <lastmod>2026-07-28</lastmod>