Merge branch 'main' of git.broken.graphics:alina/alinamarquardt.com

public_html/img/play-btn.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="play-btn" transform="matrix(1,0,0,1,-464.497,-245.176)">
+        <rect x="464.497" y="245.176" width="95.007" height="95.01" style="fill:none;"/>
+        <clipPath id="_clip1">
+            <rect x="464.497" y="245.176" width="95.007" height="95.01"/>
+        </clipPath>
+        <g clip-path="url(#_clip1)">
+            <g transform="matrix(1,0,0,1,462.499,242.853)">
+                <path d="M49.9,2.5C23.6,2.8 2.1,24.4 2.5,50.4C2.9,76.5 24.7,98 50.3,97.5C76.7,96.9 97.7,75.7 97.5,49.8C97.3,23.7 75.7,2.3 49.9,2.5" style="fill:rgb(99,168,184);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(1,0,0,1,462.499,242.853)">
+                <path d="M38,69C37,69.5 36.2,69 36.2,67.9L36.2,32.1C36.2,31 37,30.5 38,31L72,49C73,49.5 73,50.4 72,50.9L38,69Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>

public_html/index.html

@@ -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>

public_html/style.css

@@ -380,8 +380,8 @@ p {
 	--font-system: 'Source Sans Pro', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 	/* https://css-tricks.com/snippets/css/system-font-stack */
 	--text-color: #000;
-	--link-color: #03f;
-	--link-color-hover: #69f;
+	--link-color: #3b7885;
+	--link-color-hover: #63a8b8;
 	--button-color: #63a8b8;
 	--button-color-hover: #333;
 	--highlight-color: #a3d5d5;
@@ -463,7 +463,7 @@ body {
 }
 
 a {
-	text-decoration: none;
+	text-decoration: underline;
 	transition: all 0.2s ease-in-out;
 }
 
@@ -489,6 +489,14 @@ a {
 	margin: 1.5rem;
 }
 
+.whitebg {
+	color: var(--text-color);
+}
+
+.nowrap {
+	white-space: nowrap;
+}
+
 /* Mobile layout (default) - Elements stacked in desired order */
 #greeting {
 	width: 100%;
@@ -505,9 +513,14 @@ a {
 	order: 3;
 }
 
+#experiments {
+	width: 100%;
+	order: 3;
+}
+
 #findme {
 	width: 100%;
-	order: 4;
+	order: 99;
 }
 
 /* sidebar */
@@ -524,6 +537,7 @@ a {
 .sidebaritem a {
 	color: white;
 	display: block;
+	text-decoration: none;
 }
 
 .sidebaritem a,
@@ -634,14 +648,10 @@ a {
 /* content */
 
 .contentitem {
-	width: 495px;
 	color: white;
 	font-size: 1.125rem;
 	font-style: italic;
 	font-weight: 300;
-}
-
-.contentitem {
 	width: 100%;
 	margin: 0 0 3rem 0;
 }
@@ -675,10 +685,19 @@ section.invertedbox h2 em {
 	padding: 1.25rem;
 }
 
+.contentitem div.opaque article {
+	margin-bottom: 1.5rem;
+}
+
 .contentitem div.opaque h2 {
-	font-size: 1.6rem;
+	font-size: 1.3rem;
 	font-weight: 300;
 	margin-bottom: 1rem;
+	width: 100%;
+	position: relative;
+}
+.contentitem div.opaque h2 em {
+	font-weight: 500;
 }
 
 .contentitem div.opaque h2 span.halfbubble {
@@ -687,7 +706,7 @@ section.invertedbox h2 em {
 	border-bottom-right-radius: 11px;
 	border-top-right-radius: 11px;
 	display: inline-block;
-	margin: 0 0.7rem -0.125rem -1.25rem;
+	margin: 0 0.7rem -0.25rem -1.25rem;
 }
 
 .contentitem header .icon {
@@ -696,10 +715,53 @@ section.invertedbox h2 em {
 	margin-top: -1rem;
 }
 
-.contentitem#experiment header .icon {
+.contentitem#experiments header .icon {
 	margin-top: -2.5rem;
 }
 
+.paused-animation {
+	position: relative;
+	margin: 0.5em 0;
+	/* height: 7rem; */
+	cursor: pointer;
+}
+.paused-animation .play-btn {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(99,150,180,0.2);
+	background-image: url('img/play-btn.svg');
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: 4rem;
+	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
+}
+.paused-animation img {
+	display: block;
+	width: auto;
+	height: 100%;
+	margin: 0;
+}
+.paused-animation .anim {
+	display: none;
+}
+.paused-animation.active {
+	height: auto;
+}
+.paused-animation.active .poster-frame, .paused-animation.active .play-btn  {
+	display: none;
+}
+.paused-animation.active .anim {
+	display: block;
+}
+.watchface {
+	width: calc( ( 100% / 2 ) - 0.6rem );
+	margin: 0.325rem 0.3rem;
+	height: auto;
+	display: block;
+	float: left;
+}
+
 /* music */
 
 article.album {
@@ -836,8 +898,11 @@ article.album a:hover {
 	}
 
 	/* Right column */
-	#music {
+
+	.contentitem {
 		max-width: 495px;
+	}
+	#music {
 		flex: 1;
 		order: 2;
 	}
@@ -866,16 +931,16 @@ article.album a:hover {
 		height: 160px;
 	}
 
-	.contentitem#music {
+	.contentitem {
 		max-width: 500px;
 		min-width: 340px;
 		margin-top: 3rem;
 	}
-	
+
 	.sidebaritem {
 		margin-left: calc( ( 100% - 210px ) / 2 );
 	}
-	
+
 	.sidebaritem#greeting #icosahedron-container {
 		margin-left: 3.5rem;
 		margin-top: 1.5rem;
@@ -884,16 +949,16 @@ article.album a:hover {
 	.sidebaritem#greeting .line1 {
 		margin-left: 4rem;
 	}
-	
+
 	.sidebaritem#iam {
 		padding-left: 0.75rem;
 		margin-top: 1.75rem;
 	}
-	
+
 	.sidebaritem#iam .line2 {
 		padding-left: 0.25rem;
 	}
-	
+
 	.sidebaritem#iam .line3 {
 		padding-left: 0.25rem;
 	}
@@ -903,7 +968,7 @@ article.album a:hover {
 		margin-bottom: 2rem;
 		padding-left: 1rem;
 	}
-	
+
 	.sidebaritem#findme .line2, .sidebaritem#findme .line3 {
 		margin-top: 0.2em;
 	}