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

Compare commits

base: alina:e507a0ed254b96c77a0f2c01d512e8f9beb7b6a7
Branches Tags
alina:main
alina:1.1 alina:1.0
..
compare: alina:main
Branches Tags
alina:main
alina:1.1 alina:1.0

8 Commits
e507a0ed25 ... main

Author SHA1 Message Date
Alina Marquardt
e91bd457b5 removed obsolete background wrap element 2025-05-30 23:28:08 +02:00
Alina Marquardt
6e4e54cb2d ios fixes for fixed backgrounds 2025-05-30 23:17:03 +02:00
Alina Marquardt
735cb3102d removed hover state from listen and buy buttons 2025-05-30 18:45:20 +02:00
Alina Marquardt
7ec3eb9abb added chromatic aberrations and new background size handling 2025-05-30 18:26:14 +02:00
Alina Marquardt
9957c0d5b8 structured glass effect for blurred parts 2025-05-30 17:19:20 +02:00
Alina Marquardt
5f29d9c2ba portfolio styling improvements 2025-05-21 20:16:40 +02:00
Alina Marquardt
022a6d78ee mobile menu spacing improvement 2025-05-21 15:38:42 +02:00
Alina Marquardt
1bf823acbc iframe scaling improvements for mobile 2025-05-21 15:35:59 +02:00
7 changed files with 60 additions and 35 deletions
Expand all files Collapse all files

15
public_html/functions.js
View File

@@ -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 // gif player
document.querySelectorAll('.paused-animation').forEach(el => { document.querySelectorAll('.paused-animation').forEach(el => {
el.addEventListener('click', () => { el.addEventListener('click', () => {

BIN
public_html/img/bg_blur.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 45 KiB

2
public_html/index.html
View File

@@ -25,8 +25,6 @@
<body> <body>
<div id="background_wrap"></div>
<div id="wrapper"> <div id="wrapper">
<header id="greeting" class="sidebaritem headlineshadow"> <header id="greeting" class="sidebaritem headlineshadow">
<div id="icosahedron-container"></div> <div id="icosahedron-container"></div>

6
public_html/portfolio.html
View File

@@ -23,8 +23,6 @@
<body> <body>
<div id="background_wrap"></div>
<div id="wrapper"> <div id="wrapper">
<header id="greeting" class="sidebaritem headlineshadow"> <header id="greeting" class="sidebaritem headlineshadow">
<div id="icosahedron-container"></div> <div id="icosahedron-container"></div>
@@ -61,11 +59,11 @@
<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>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> <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/_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 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> <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>
<article id="yana"> <article id="yana">
<h2><span class="halfbubble blurgreen"></span><em>yana</em> UX/UI and graphic design</h2> <h2><span class="halfbubble blurgreen"></span><em>yana</em> UX/UI and graphic design</h2>
<img class="watchface" 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" /> <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>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> <p>unfortunately there's not a lot to show as of yet. please stay tuned for more.</p>
</article> </article>

72
public_html/style.css
View File

@@ -406,6 +406,7 @@ a:hover {
} }
p { p {
font-size: 0.95em;
margin-bottom: 0.6em; margin-bottom: 0.6em;
} }
@@ -456,10 +457,24 @@ textarea:-moz-placeholder {
body { body {
background-color: black; 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-repeat: no-repeat;
background-position: top left; background-position: top left;
background-attachment: fixed; background-attachment: local;
pointer-events: none;
will-change: transform;
} }
.elementshadow { .elementshadow {
@@ -479,21 +494,6 @@ a {
transition: all 0.2s ease-in-out; 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 { #wrapper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -505,7 +505,6 @@ a {
white-space: nowrap; white-space: nowrap;
} }
/* Mobile layout (default) - Elements stacked in desired order */
#greeting { #greeting {
width: 100%; width: 100%;
order: 1; order: 1;
@@ -774,15 +773,25 @@ div.opaque h2 span.halfbubble {
display: block; display: block;
} }
.watchface { .watchface, .half-left, .half-right {
width: calc((100% / 2) - 0.6rem); width: calc((100% / 2) - 0.6rem);
margin: 0.325rem 0.3rem; margin: 0.325rem 0.3rem;
height: auto; height: auto;
display: block; display: block;
float: left; float: left;
} }
.half-right {
float: right;
}
.watchface-video { .watchface-video {
margin: 0.6rem 0; margin: 0.6rem 0;
width: 100%;
height: auto;
aspect-ratio: 1/1;
}
.yana-logo {
margin-top: -0.75rem;
} }
/* music */ /* music */
@@ -828,6 +837,7 @@ article.album .listenbuy {
opacity: 0; opacity: 0;
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
background-image: url('img/bg_blur.webp'); background-image: url('img/bg_blur.webp');
background-size: 1572px 803px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
transition: opacity 0.25s, margin 0.25s, height 0.25s; transition: opacity 0.25s, margin 0.25s, height 0.25s;
@@ -844,10 +854,6 @@ article.album a:hover .listenbuy {
opacity: 1; opacity: 1;
} }
article.album a .listenbuy:hover {
background-image: none;
}
img.albumcover { img.albumcover {
position: relative; position: relative;
width: auto; width: auto;
@@ -943,13 +949,17 @@ article.album a:hover {
.blurgreen { .blurgreen {
background-color: #1e3f2d; background-color: #1e3f2d;
color: white;
background-image: url('img/bg_blur.webp'); background-image: url('img/bg_blur.webp');
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; 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 /* Print styles
-------------------------------------------------------------------------------*/ -------------------------------------------------------------------------------*/
@media print {} @media print {}
@@ -1012,15 +1022,15 @@ article.album a:hover {
padding: 0 1em; padding: 0 1em;
} }
#background_wrap {
background-size: 100%;
}
article.album a .listenbuy { article.album a .listenbuy {
margin-top: 1em; margin-top: 1em;
opacity: 1; opacity: 1;
} }
article.album .listenbuy, .blurgreen, body::before {
background-size: 1179px 602px;
}
article.album a { article.album a {
height: 160px; height: 160px;
} }
@@ -1067,6 +1077,10 @@ article.album a:hover {
.sidebaritem#findme .line3 { .sidebaritem#findme .line3 {
margin-top: 0.2em; margin-top: 0.2em;
} }
.sidebaritem#findme .line4 {
margin-top: 0.4em;
}
} }
/* Media query for hoverless */ /* Media query for hoverless */

BIN
src/bg_blur.afphoto Normal file
View File

Binary file not shown.

BIN
src/bg_blur2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB