Compare commits
11 Commits
| Author | SHA1 | Date |
|---|---|---|
 Alina Marquardt
|
e91bd457b5 | |
|
Alina Marquardt
|
6e4e54cb2d | |
|
Alina Marquardt
|
735cb3102d | |
|
Alina Marquardt
|
7ec3eb9abb | |
|
Alina Marquardt
|
9957c0d5b8 | |
|
Alina Marquardt
|
5f29d9c2ba | |
|
Alina Marquardt
|
022a6d78ee | |
|
Alina Marquardt
|
1bf823acbc | |
|
Alina Marquardt
|
e507a0ed25 | |
|
Alina Marquardt
|
d77058d573 | |
|
Alina Marquardt
|
761176bb98 |
manage-audio
public_html
|
|
@ -4,12 +4,11 @@
|
|||
pkgs.mkShell {
|
||||
buildInputs = [
|
||||
pkgs.nodejs
|
||||
pkgs.yarn # Optional, if you prefer yarn over npm
|
||||
pkgs.yarn
|
||||
];
|
||||
|
||||
shellHook = ''
|
||||
export NODE_PATH=$(pwd)/node_modules
|
||||
echo "Welcome to the audio uploader development shell!"
|
||||
echo "audio uploader development shell"
|
||||
'';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,18 @@
|
|||
// fix iOS fixed backgrounds in Safari versions past 2012
|
||||
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
|
||||
|
||||
if (isIOS) {
|
||||
window.addEventListener('scroll', () => {
|
||||
document.querySelectorAll('.blurgreen, .listenbuy').forEach(div => {
|
||||
const rect = div.getBoundingClientRect();
|
||||
const scrollOffsetY = rect.top * -1;
|
||||
const scrollOffsetX = rect.left * -1;
|
||||
div.style.backgroundAttachment = `scroll`;
|
||||
div.style.backgroundPosition = `${scrollOffsetX}px ${scrollOffsetY}px`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// gif player
|
||||
document.querySelectorAll('.paused-animation').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 45 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 58 KiB |
|
|
@ -25,8 +25,6 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="background_wrap"></div>
|
||||
|
||||
<div id="wrapper">
|
||||
<header id="greeting" class="sidebaritem headlineshadow">
|
||||
<div id="icosahedron-container"></div>
|
||||
|
|
@ -47,6 +45,7 @@
|
|||
<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>
|
||||
<li class="line4"><a href="portfolio.html">my portfolio ›</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head id="alinamarquardt-com">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>portfolio alina marquardt</title>
|
||||
|
||||
<meta name="description" content="portfolio" />
|
||||
<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="wrapper">
|
||||
<header id="greeting" class="sidebaritem headlineshadow">
|
||||
<div id="icosahedron-container"></div>
|
||||
<span class="line1 portfolio">welcome to</span>
|
||||
<span class="line2">the portfolio of</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">navigate</span>
|
||||
<ul>
|
||||
<li class="line2 bigline"><a href="/">back to <em>home</em></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="contentitem box maincontent" id="experiments">
|
||||
<header class="blurgreen headlineshadow">
|
||||
<h1><em>design & UX/UI</em> portfolio</h1>
|
||||
</header>
|
||||
<div class="opaque whitebg">
|
||||
<article id="disclaimer">
|
||||
<h2><span class="halfbubble blurgreen"></span><em>disclaimer</em> about NDAs</h2>
|
||||
<p>please note that nearly all of my professional work over the past 14 years has been conducted under strict non-disclosure agreements (NDAs). as a result, I am unable to share detailed work samples or projects from that period. the pieces shown here represent a very limited selection of my public-facing work and personal projects.</p>
|
||||
</article>
|
||||
<article id="watchfaces">
|
||||
<h2><span class="halfbubble blurgreen"></span><em>watchfaces</em> for smartwatches</h2>
|
||||
<p>between 2013 and 2020 I've created <a href="https://git.broken.graphics/explore/repos?q=watchface" target="_blank">serveral watchfaces</a> for all pebble smartwatch models as well as fitbit smartwatches.</p>
|
||||
<p>these watchfaces have been designed with usability concepts in mind respecting interaction capabilities and screen space constraints. that includes motion gestures, adaptive display of stats based on activity and deep configurability via the user's smartphone.</p>
|
||||
<iframe class="watchface-video" width="445" height="445" src="https://www.youtube.com/embed/_vG2ZFeQobg?si=Ys78wYEozPAy3eoC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
<iframe class="watchface-video" width="445" height="445" src="https://www.youtube.com/embed/EjgYxUxGvdI?si=eBT5P9vRsDyyNALU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</article>
|
||||
<article id="yana">
|
||||
<h2><span class="halfbubble blurgreen"></span><em>yana</em> UX/UI and graphic design</h2>
|
||||
<img class="half-right yana-logo" src="img/experiments/yana-logo-v2.svg" width="200" height="200" alt="blue food bowl icon with crossed chopsticks below it and a violet flame above" />
|
||||
<p>yana is a work-in-progress calorie and nutrition tracking application for android.</p>
|
||||
<p>unfortunately there's not a lot to show as of yet. please stay tuned for more.</p>
|
||||
</article>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -405,6 +405,11 @@ a:hover {
|
|||
color: var(--link-color-hover);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.95em;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
body,
|
||||
select,
|
||||
input,
|
||||
|
|
@ -452,10 +457,24 @@ textarea:-moz-placeholder {
|
|||
|
||||
body {
|
||||
background-color: black;
|
||||
/* background-image: url('img/bg.webp'); */
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: -1;
|
||||
background-image: url('img/bg.webp');
|
||||
background-size: 1572px 803px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top left;
|
||||
background-attachment: fixed;
|
||||
background-attachment: local;
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.elementshadow {
|
||||
|
|
@ -475,21 +494,6 @@ a {
|
|||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#background_wrap {
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url('img/bg.webp');
|
||||
background-repeat: no-repeat;
|
||||
background-position: top left;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Alternative solution without adding a container */
|
||||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -501,7 +505,6 @@ a {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Mobile layout (default) - Elements stacked in desired order */
|
||||
#greeting {
|
||||
width: 100%;
|
||||
order: 1;
|
||||
|
|
@ -644,7 +647,7 @@ a {
|
|||
margin-left: 1.7rem;
|
||||
}
|
||||
|
||||
.sidebaritem#findme span.line4 a {
|
||||
.sidebaritem#findme .line4 a {
|
||||
margin-left: 3.375rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
|
@ -770,13 +773,26 @@ div.opaque h2 span.halfbubble {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.watchface {
|
||||
.watchface, .half-left, .half-right {
|
||||
width: calc((100% / 2) - 0.6rem);
|
||||
margin: 0.325rem 0.3rem;
|
||||
height: auto;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.half-right {
|
||||
float: right;
|
||||
}
|
||||
.watchface-video {
|
||||
margin: 0.6rem 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
.yana-logo {
|
||||
margin-top: -0.75rem;
|
||||
}
|
||||
|
||||
/* music */
|
||||
|
||||
|
|
@ -821,6 +837,7 @@ article.album .listenbuy {
|
|||
opacity: 0;
|
||||
background-color: var(--button-color-hover);
|
||||
background-image: url('img/bg_blur.webp');
|
||||
background-size: 1572px 803px;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
transition: opacity 0.25s, margin 0.25s, height 0.25s;
|
||||
|
|
@ -837,10 +854,6 @@ article.album a:hover .listenbuy {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
article.album a .listenbuy:hover {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
img.albumcover {
|
||||
position: relative;
|
||||
width: auto;
|
||||
|
|
@ -936,13 +949,17 @@ article.album a:hover {
|
|||
|
||||
.blurgreen {
|
||||
background-color: #1e3f2d;
|
||||
color: white;
|
||||
background-image: url('img/bg_blur.webp');
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
color: white;
|
||||
background-size: 1572px 803px;
|
||||
border-top: 1px solid rgba(80,220,200,0.5);
|
||||
border-left: 1px solid rgba(80,220,200,0.25);
|
||||
border-bottom: 1px solid rgba(0,90,100,0.5);
|
||||
border-right: 1px solid rgba(0,90,100,0.25);
|
||||
}
|
||||
|
||||
|
||||
/* Print styles
|
||||
-------------------------------------------------------------------------------*/
|
||||
@media print {}
|
||||
|
|
@ -959,7 +976,6 @@ article.album a:hover {
|
|||
gap: 5rem;
|
||||
}
|
||||
|
||||
/* Create sidebars "column" */
|
||||
#greeting,
|
||||
#iam,
|
||||
#findme {
|
||||
|
|
@ -967,7 +983,6 @@ article.album a:hover {
|
|||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Stack the sidebar items vertically with margins */
|
||||
#greeting {
|
||||
order: 1;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -987,8 +1002,6 @@ article.album a:hover {
|
|||
margin-top: 2.8rem;
|
||||
}
|
||||
|
||||
/* Right column */
|
||||
|
||||
.contentitem {
|
||||
max-width: 495px;
|
||||
}
|
||||
|
|
@ -1009,15 +1022,15 @@ article.album a:hover {
|
|||
padding: 0 1em;
|
||||
}
|
||||
|
||||
#background_wrap {
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
article.album a .listenbuy {
|
||||
margin-top: 1em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
article.album .listenbuy, .blurgreen, body::before {
|
||||
background-size: 1179px 602px;
|
||||
}
|
||||
|
||||
article.album a {
|
||||
height: 160px;
|
||||
}
|
||||
|
|
@ -1037,7 +1050,7 @@ article.album a:hover {
|
|||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.sidebaritem#greeting .line1 {
|
||||
.sidebaritem#greeting .line1:not(.portfolio) {
|
||||
margin-left: 4rem;
|
||||
}
|
||||
|
||||
|
|
@ -1064,6 +1077,10 @@ article.album a:hover {
|
|||
.sidebaritem#findme .line3 {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
.sidebaritem#findme .line4 {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query for hoverless */
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Loading…
Reference in New Issue