144 lines
7.6 KiB
HTML
144 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head id="alinamarquardt-com">
|
||
<meta charset="utf-8">
|
||
|
||
<title>alina marquardt</title>
|
||
|
||
<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" />
|
||
<link rel="preload" as="image" type="image/webp" href="img/bg_blur.webp" />
|
||
<link rel="preload" as="image" type="image/svg+xml" href="img/track-pause.svg" />
|
||
|
||
<script src="js/three.min.js" defer></script>
|
||
<script src="functions.js" defer></script>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="background_wrap"></div>
|
||
|
||
<div id="wrapper">
|
||
<header id="greeting" class="sidebaritem headlineshadow">
|
||
<div id="icosahedron-container"></div>
|
||
<span class="line1">hello!</span>
|
||
<span class="line2">my name is</span>
|
||
<span class="line3">alina marquardt</span>
|
||
</header>
|
||
|
||
<section id="iam" class="sidebaritem headlineshadow">
|
||
<span class="line1">i am a senior</span>
|
||
<span class="line2 bigline"><em>UX/UI designer</em></span>
|
||
<span class="line3">& electronic musician</span>
|
||
<span class="line4">based in germany</span>
|
||
</section>
|
||
|
||
<section id="findme" class="sidebaritem headlineshadow">
|
||
<span class="line1">please also see</span>
|
||
<ul>
|
||
<li class="line2 bigline"><a href="https://git.broken.graphics/explore/repos" target="_blank">my <em>git repos</em></a></li>
|
||
<li class="line3 bigline"><a href="https://lastfuture.bandcamp.com/" target="_blank">my <em>bandcamp</em></a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="contentitem box maincontent" id="music">
|
||
<header class="blurgreen headlineshadow">
|
||
<h1><em>music</em> releases
|
||
<img class="icon" src="img/head-music.webp" srcset="img/head-music.webp 2x, img/head-music_1x.webp 1x" width="69" height="77" alt>
|
||
</h1>
|
||
</header>
|
||
|
||
<div class="clearfix"></div>
|
||
<article class="opaque whitebg album">
|
||
<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
|
||
<img class="albumcover" src="img/album/lastfuture_-_signal_to_noise.webp" srcset="img/album/lastfuture_-_signal_to_noise.webp 2x, img/album/lastfuture_-_signal_to_noise_1x.webp 1x" alt="album cover for the lastfuture album signal to noise" width="120" height="120" fetchpriority="high" />
|
||
<h2>lastfuture <em>signal to noise</em></h2>
|
||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||
</a>
|
||
</article>
|
||
|
||
<div class="clearfix"></div>
|
||
<article class="opaque whitebg album">
|
||
<a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank">
|
||
<img class="albumcover" src="img/album/lastfuture_-_dreamshifter.webp" srcset="img/album/lastfuture_-_dreamshifter.webp 2x, img/album/lastfuture_-_dreamshifter_1x.webp 1x" alt="album cover for the lastfuture album dreamshifter" width="120" height="120" loading="lazy" />
|
||
<h2>lastfuture <em>dreamshifter</em></h2>
|
||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||
</a>
|
||
</article>
|
||
|
||
<article class="opaque whitebg album">
|
||
<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
|
||
<img class="albumcover" src="img/album/lastfuture_-_misinterpreter.webp" srcset="img/album/lastfuture_-_misinterpreter.webp 2x, img/album/lastfuture_-_misinterpreter_1x.webp 1x" alt="album cover for the lastfuture track misinterpreter" width="120" height="120" loading="lazy" />
|
||
<h2>lastfuture <em>misinterpreter</em></h2>
|
||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||
</a>
|
||
</article>
|
||
|
||
<div class="clearfix"></div>
|
||
<article class="opaque whitebg album">
|
||
<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank">
|
||
<img class="albumcover" src="img/album/lastfuture_-_reverse_kill.webp" srcset="img/album/lastfuture_-_reverse_kill.webp 2x, img/album/lastfuture_-_reverse_kill_1x.webp 1x" alt="album cover for the lastfuture album reverse kill" width="120" height="120" loading="lazy" />
|
||
<h2>lastfuture <em>reverse kill</em></h2>
|
||
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
|
||
</a>
|
||
</article>
|
||
|
||
<header class="blurgreen headlineshadow spaceup">
|
||
<h1><em>highlight</em> tracks
|
||
<img class="icon" src="img/head-music.webp" srcset="img/head-music.webp 2x, img/head-music_1x.webp 1x" width="69" height="77" alt>
|
||
</h1>
|
||
</header>
|
||
|
||
<div class="transparent headlineshadow">
|
||
<article class="track">
|
||
<h2><span class="halfbubble whitebg elementshadow"></span>lastfuture <em> – rattlefox</em></h2>
|
||
<div class="track-player" data-track="lastfuture-rattlefox"></div>
|
||
</article>
|
||
<article class="track">
|
||
<h2><span class="halfbubble whitebg elementshadow"></span>lastfuture <em> – majesty</em></h2>
|
||
<div class="track-player" data-track="lastfuture-majesty"></div>
|
||
</article>
|
||
</div>
|
||
|
||
</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 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>
|
||
<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 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;">
|
||
<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>
|
||
|
||
</body>
|
||
|
||
</html>
|