alina
/
alinamarquardt.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js fix and ids for articles

main
Alina Marquardt 2025-05-15 18:53:00 +02:00
parent c18873722b
commit 19850dfc1a
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public_html/functions.js
View File

@ -1,3 +1,11 @@
document.querySelectorAll('.paused-animation').forEach(el => {
el.addEventListener('click', () => {
el.classList.toggle('active');
});
});
// icosahedron
// Wait for everything to load
window.onload = function() {
// Make sure THREE is available

14
public_html/index.html
View File

@ -139,7 +139,7 @@
</h1>
</header>
<div class="opaque whitebg">
<article>
<article id="watchfaces">
<h2><span class="halfbubble blurgreen"></span><em>watchfaces</em> for smartwatches</h2>
<a href="https://git.broken.graphics/alina/Pebble-Time-Watchface-Squared-4.0" target="_blank"><img class="watchface" src="img/experiments/watchface-squared40.webp" width="348" height="348" alt="squared 4.0 watchface on the pebble time round" /></a>
<a href="https://git.broken.graphics/alina/fitbit-echocentric" target="_blank"><img class="watchface" src="img/experiments/watchface-echocentric.webp" width="348" height="348" alt="echocentric clockface on the fitbit ionic" /></a>
@ -147,9 +147,9 @@
<a href="https://git.broken.graphics/alina/fitbit-frosted" target="_blank"><img class="watchface" src="img/experiments/watchface-frosted.webp" width="348" height="348" alt="frosted watchface for fitbit smartwatches" /></a>
<p>ever since the original pebble came out in 2013 I've been in love with the idea of creating my own watchfaces. over the years I have programmed <a href="https://git.broken.graphics/explore/repos?q=watchface" target="_blank">serveral watchfaces</a> for the various pebble smartwatch models as well as fitbit smartwatches.</p>
</article>
<article>
<article id="3d-animation">
<h2><span class="halfbubble blurgreen"></span><em>3d animation</em> for “lastfuture”</h2>
<div class="paused-animation" style="aspect-ratio: 900 / 528;" onclick="togglePausedAnimations()">
<div class="paused-animation" style="aspect-ratio: 900 / 528;">
<div class="play-btn"></div>
<img class="poster-frame" src="img/experiments/lf-poster.webp" width="680" height="400" alt="LF 3d animation poster-frame" />
<img class="anim" src="img/experiments/lf-anim.gif" width="680" height="400" alt="LF 3d animation" />
@ -161,13 +161,5 @@
</div>
<script>
function togglePausedAnimations() {
document.querySelectorAll('.paused-animation').forEach(el => {
el.classList.toggle('active');
});
}
</script>
</body>
</html>