miles/miles-web
1
0
Fork 0
mirror of https://github.com/mileswolfallen2/miles-web.git synced 2026-09-08 11:23:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
miles
2026-08-28 23:15:25 -05:00
parent d27792b813
commit e3611c053c
2 changed files with 88 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
share.html
+82 -1
View File
@@ -58,7 +58,20 @@
line-height:1.5; line-height:1.5;
display:flex;flex-direction:column;align-items:center; display:flex;flex-direction:column;align-items:center;
min-height:100vh;padding:40px 20px 64px; 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;} a{color:inherit;text-decoration:none;}
@@ -157,6 +170,7 @@
</style> </style>
</head> </head>
<body> <body>
<canvas id="bgCanvas" aria-hidden="true"></canvas>
<div class="card"> <div class="card">
<div class="banner"> <div class="banner">
@@ -199,6 +213,11 @@
<span class="r-body"><span class="r-title">GitHub</span></span> <span class="r-body"><span class="r-title">GitHub</span></span>
<span class="r-right">↗</span> <span class="r-right">↗</span>
</a> </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"> <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="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> <span class="r-body"><span class="r-title">X</span></span>
@@ -250,6 +269,68 @@
<script> <script>
(function(){ (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'); var copyBtn = document.getElementById('copyBtn');
if(copyBtn) copyBtn.addEventListener('click', function(){ if(copyBtn) copyBtn.addEventListener('click', function(){
copyText('https://milesallen.site/share.html', copyBtn, function(){ flash(copyBtn, 'Copied!'); }); copyText('https://milesallen.site/share.html', copyBtn, function(){ flash(copyBtn, 'Copied!'); });
sitemap.xml
+6
View File
@@ -144,6 +144,12 @@
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
<url>
<loc>https://milesallen.site/share.html</loc>
<lastmod>2026-08-28</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url> <url>
<loc>https://milesallen.site/404.html</loc> <loc>https://milesallen.site/404.html</loc>
<lastmod>2026-07-28</lastmod> <lastmod>2026-07-28</lastmod>