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

added new lab section

Browse Source
This commit is contained in:
Alina Marquardt
2025-05-15 18:10:35 +02:00
parent de0ed16709
commit 93c0b45374
20 changed files with 146 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
public_html/index.html
View File

@@ -9,7 +9,7 @@
<meta name="description" content="personal website" />
<meta name="author" content="alina marquardt" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" fetchpriority="high" />
<link rel="preload" as="image" type="image/webp" href="img/bg.webp" fetchpriority="high" />
@@ -124,7 +124,50 @@
</a>
</article>
</section>
<section class="contentitem box maincontent" id="experiments">
<header class="blurgreen headlineshadow">
<h1>from the <em>lab</em>
<img
class="icon"
src="img/head-experiment.webp"
srcset="img/head-experiment.webp 2x, img/head-experiment_1x.webp 1x"
width="63"
height="103"
alt
>
</h1>
</header>
<div class="opaque whitebg">
<article>
<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>
<a href="https://git.broken.graphics/alina/Pebble-Watchface-Filmplakat" target="_blank"><img class="watchface" src="img/experiments/watchface-filmplakat.webp" width="348" height="348" alt="filmplakat watchface on the original pebble" /></a>
<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>
<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="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" />
</div>
<p>a specific animation style I had in mind for my music persona lastfuture required objects with transparent flat faces, integer snapping, controlled image noise and visual artefacts. to solve this I wrote the tiny 3d engine <span class="nowrap">“<a href="https://git.broken.graphics/alina/3d-simple/" target="_blank">3d simple</a>”</span> that can create this animation style then render it out as a gif.</p>
</article>
</div>
</section>
</div>
<script>
function togglePausedAnimations() {
document.querySelectorAll('.paused-animation').forEach(el => {
el.classList.toggle('active');
});
}
</script>
</body>
</html>