fraujulian/Personal-Portfolio-Website
1
0
Fork 0
Code Issues Pull Requests 7 Actions Projects Releases 2 Wiki Activity

feat: style

Browse Source
This commit is contained in:
fraujulian
2026-04-20 23:07:02 +02:00
parent a2a77d01a6
commit a33ba3e304
1 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.scss
+34 -14
View File
@@ -482,24 +482,44 @@ hr {
.about-scroll-anim-enabled.about-scroll-anim-ready .story-copy, .about-scroll-anim-enabled.about-scroll-anim-ready .story-copy,
.about-scroll-anim-enabled.about-scroll-anim-ready .story-detail { .about-scroll-anim-enabled.about-scroll-anim-ready .story-detail {
opacity: 1; opacity: 1;
transition: transform: translate3d(0, 0, 0);
opacity 520ms ease,
transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;
}
.about-scroll-anim-enabled.about-scroll-anim-ready .story-copy {
transform: translate3d(0, 10px, 0);
}
.about-scroll-anim-enabled.about-scroll-anim-ready .story-detail {
transform: translate3d(0, 10px, 0);
} }
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-copy, .about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-copy,
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-detail { .about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-detail {
opacity: 1; animation-duration: 680ms;
transform: translate3d(0, 0, 0); animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1);
}
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-copy {
animation-name: about-copy-reveal;
}
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-detail {
animation-name: about-detail-reveal;
}
@keyframes about-copy-reveal {
from {
opacity: 0.12;
transform: translate3d(-44px, 26px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes about-detail-reveal {
from {
opacity: 0.12;
transform: translate3d(44px, 26px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
} }
.story-copy p:first-child, .story-copy p:first-child,