135 lines
5.0 KiB
HTML
135 lines
5.0 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="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" fetchpriority="high" />
|
|
<link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-It.woff" fetchpriority="high" />
|
|
<link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-SemiboldIt.woff" fetchpriority="high" />
|
|
<link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-Regular.woff" />
|
|
<link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-Semibold.woff" />
|
|
<link rel="preload" as="font" type="font/woff" href="fonts/SourceSansPro-LightIt.woff" />
|
|
|
|
<link rel="stylesheet" href="style.css" />
|
|
|
|
<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"
|
|
/>
|
|
<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>
|
|
</section>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|