From f042247cbba85eed97d15a4f2417cf5416fe350c Mon Sep 17 00:00:00 2001 From: asus Date: Wed, 15 May 2024 15:49:48 +0200 Subject: [PATCH] animation mouse in css is working --- {styles/img => docs/banners}/banner_1.svg | 1 - {styles/img => docs/banners}/banner_2.svg | 1 - {styles/img => docs/banners}/banner_3.svg | 1 - {styles/img => docs/banners}/banner_4.svg | 0 {styles/img => docs/banners}/banner_5.svg | 0 .../hugo_lamy_cv.pdf | Bin docs/mouses/mouse_1/mouse_1_1.svg | 44 +++ index.html | 306 +----------------- styles/elements/banners.css | 12 +- styles/elements/mouses.css | 83 +++-- styles/elements/mouses/mouse_1.css | 72 +++++ styles/elements/mouses/mouse_2.css | 72 +++++ styles/elements/mouses/mouse_3.css | 64 ++++ styles/elements/mouses/mouse_4.css | 64 ++++ styles/style.css | 1 - 15 files changed, 374 insertions(+), 347 deletions(-) rename {styles/img => docs/banners}/banner_1.svg (99%) rename {styles/img => docs/banners}/banner_2.svg (99%) rename {styles/img => docs/banners}/banner_3.svg (99%) rename {styles/img => docs/banners}/banner_4.svg (100%) rename {styles/img => docs/banners}/banner_5.svg (100%) rename downloads/hugo_lamy_2023_cv.pdf => docs/hugo_lamy_cv.pdf (100%) create mode 100644 docs/mouses/mouse_1/mouse_1_1.svg create mode 100644 styles/elements/mouses/mouse_1.css create mode 100644 styles/elements/mouses/mouse_2.css create mode 100644 styles/elements/mouses/mouse_3.css create mode 100644 styles/elements/mouses/mouse_4.css diff --git a/styles/img/banner_1.svg b/docs/banners/banner_1.svg similarity index 99% rename from styles/img/banner_1.svg rename to docs/banners/banner_1.svg index 6733351..9d267a3 100644 --- a/styles/img/banner_1.svg +++ b/docs/banners/banner_1.svg @@ -29,4 +29,3 @@ - diff --git a/styles/img/banner_2.svg b/docs/banners/banner_2.svg similarity index 99% rename from styles/img/banner_2.svg rename to docs/banners/banner_2.svg index ea9d7c2..423d399 100644 --- a/styles/img/banner_2.svg +++ b/docs/banners/banner_2.svg @@ -32,4 +32,3 @@ - diff --git a/styles/img/banner_3.svg b/docs/banners/banner_3.svg similarity index 99% rename from styles/img/banner_3.svg rename to docs/banners/banner_3.svg index d539c53..ab3e068 100644 --- a/styles/img/banner_3.svg +++ b/docs/banners/banner_3.svg @@ -35,4 +35,3 @@ - diff --git a/styles/img/banner_4.svg b/docs/banners/banner_4.svg similarity index 100% rename from styles/img/banner_4.svg rename to docs/banners/banner_4.svg diff --git a/styles/img/banner_5.svg b/docs/banners/banner_5.svg similarity index 100% rename from styles/img/banner_5.svg rename to docs/banners/banner_5.svg diff --git a/downloads/hugo_lamy_2023_cv.pdf b/docs/hugo_lamy_cv.pdf similarity index 100% rename from downloads/hugo_lamy_2023_cv.pdf rename to docs/hugo_lamy_cv.pdf diff --git a/docs/mouses/mouse_1/mouse_1_1.svg b/docs/mouses/mouse_1/mouse_1_1.svg new file mode 100644 index 0000000..446a6b6 --- /dev/null +++ b/docs/mouses/mouse_1/mouse_1_1.svg @@ -0,0 +1,44 @@ + + + + + +  +    +       +        +           +        +      +     +     +      +         +         +      +      +    +    + + + + diff --git a/index.html b/index.html index 9631b9a..af5ed82 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,6 @@
- + + @@ -67,97 +68,18 @@

-

- +
+ @@ -202,80 +124,7 @@ - +
@@ -305,7 +154,7 @@ - +
@@ -451,72 +236,7 @@

hugogogo@protonmail.com

- +
diff --git a/styles/elements/banners.css b/styles/elements/banners.css index 08f2281..4f9aae2 100644 --- a/styles/elements/banners.css +++ b/styles/elements/banners.css @@ -4,7 +4,7 @@ --banner_height: var(--base_banner_height); /*default*/ height: min(26vw, var(--banner_height)); - background-image: url(../img/banner_1.svg); /*default*/ + background-image: url(../../docs/banners/banner_1.svg); /*default*/ background-size: contain; background-repeat: repeat; background-position-x: 0%; @@ -55,22 +55,22 @@ * */ .banner_size_1 { - background-image: url(../img/banner_1.svg); + background-image: url(../../docs/banners/banner_1.svg); --banner_height: calc(var(--base_banner_height) * 1); } .banner_size_2 { - background-image: url(../img/banner_2.svg); + background-image: url(../../docs/banners/banner_2.svg); --banner_height: calc(var(--base_banner_height) * 2); } .banner_size_3 { - background-image: url(../img/banner_3.svg); + background-image: url(../../docs/banners/banner_3.svg); --banner_height: calc(var(--base_banner_height) * 3); } .banner_size_4 { - background-image: url(../img/banner_4.svg); + background-image: url(../../docs/banners/banner_4.svg); --banner_height: calc(var(--base_banner_height) * 4); } .banner_size_5 { - background-image: url(../img/banner_5.svg); + background-image: url(../../docs/banners/banner_5.svg); --banner_height: calc(var(--base_banner_height) * 5); } diff --git a/styles/elements/mouses.css b/styles/elements/mouses.css index e098dc5..35550c4 100644 --- a/styles/elements/mouses.css +++ b/styles/elements/mouses.css @@ -1,53 +1,48 @@ +@import "./mouses/mouse_1.css"; +@import "./mouses/mouse_2.css"; +@import "./mouses/mouse_3.css"; +@import "./mouses/mouse_4.css"; .mouse { - position: relative; - margin: 20px 0px; -} -.frames_container { - display: grid; - grid-template-rows: 1fr; + margin: auto; width: fit-content; -} -pre.frame.hide { - display: none; -} -pre.frame { - position: relative; - justify-items: start; - align-items: end; - grid-column: 1; - grid-row: 1; + overflow: hidden; - opacity: 0; - --tframes: 2s; - animation-name: ascii_frame; - animation-iteration-count: infinite; - animation-duration: var(--tframes); - animation-timing-function: steps(3); - animation-direction: normal; -} + > div { + position: relative; + top: 0%; -pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);} -pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);} -pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);} + /* + * for pseudo elements ::before and ::after + * for some reason it does not work when applied to them directly + * if they are not position absolute + */ + white-space: pre; + line-height: 0.8; + font-size: 1.0rem; -@keyframes ascii_frame { - 0% {opacity: 1;} - 25% {opacity: 1;} - 25.1% {opacity: 0;} - 100% {opacity: 0;} -} + --tframes: 2s; + animation-name: mouse_move; + animation-iteration-count: infinite; + animation-duration: var(--tframes); + animation-direction: normal; + animation-timing-function: steps(1); + } + > div::before { + position: relative; + top: 0px; + left: 0px; + } -#mouse_1 { - place-self: center; + > div::after { + position: absolute; + top: 100%; + left: 0px; + } } -#mouse_2 { - left: 10%; +@keyframes mouse_move { + 0% {top: 0%;} + 25% {top: -100%;} + 50% {top: -200%;} + 75% {top: -300%;} } -#mouse_3 { - left: 60%; -} -#mouse_4 { - left: 20%; -} - diff --git a/styles/elements/mouses/mouse_1.css b/styles/elements/mouses/mouse_1.css new file mode 100644 index 0000000..bc1ce28 --- /dev/null +++ b/styles/elements/mouses/mouse_1.css @@ -0,0 +1,72 @@ +.mouse_1::before { + content:'\ +  \a +    \a +       \a +        \a +           \a +        \a +      \a +     \a +     \a +     \a +        \a +        \a +     \a +      \a +    \a +    \a +'; +} +.mouse_1::after { + content:'\ +  \a +   \a +      \a +        \a +         \a +        \a +       \a +      \a +     \a +      \a +         \a +         \a +      \a +      \a +    \a +    \a +  \a +   \a +      \a +        \a +         \a +        \a +       \a +      \a +     \a +      \a +         \a +         \a +      \a +      \a +    \a +    \a +  \a +    \a +       \a +        \a +           \a +        \a +      \a +     \a +     \a +     \a +        \a +        \a +     \a +      \a +    \a +    \a +'; +} diff --git a/styles/elements/mouses/mouse_2.css b/styles/elements/mouses/mouse_2.css new file mode 100644 index 0000000..c47c443 --- /dev/null +++ b/styles/elements/mouses/mouse_2.css @@ -0,0 +1,72 @@ +.mouse_2::before { + content:'\ +  \a +   \a +    \a +   \a +  \a +   \a +   \a +   \a +   \a +     \a +     \a +   \a +      \a +     \a +  \a +  \a +'; +} +.mouse_2::after { + content:'\ +   \a +    \a +    \a +   \a +  \a +   \a +   \a +   \a +   \a +     \a +     \a +   \a +     \a +     \a +  \a +  \a +   \a +   \a +    \a +   \a +  \a +   \a +   \a +   \a +   \a +     \a +     \a +   \a +     \a +     \a +   \a +  \a +  \a +   \a +    \a +   \a +  \a +   \a +   \a +   \a +   \a +     \a +     \a +   \a +      \a +    \a +  \a +  \a +'; +} diff --git a/styles/elements/mouses/mouse_3.css b/styles/elements/mouses/mouse_3.css new file mode 100644 index 0000000..db3b2ef --- /dev/null +++ b/styles/elements/mouses/mouse_3.css @@ -0,0 +1,64 @@ +.mouse_3::before { + content:'\ +  \a +  \a +   \a +    \a +  \a +    \a +    \a +     \a +     \a +    \a +    \a +     \a +    \a +   \a +'; +} +.mouse_3::after { + content:'\ +  \a +  \a +   \a +    \a +  \a +    \a +    \a +     \a +     \a +   \a +    \a +     \a +    \a +   \a +  \a +  \a +   \a +    \a +  \a +    \a +    \a +     \a +     \a +    \a +    \a +     \a +    \a +   \a + \a + \a +  \a +   \a +  \a +    \a +     \a +    \a +    \a +     \a +     \a +     \a +     \a +   \a +'; +} diff --git a/styles/elements/mouses/mouse_4.css b/styles/elements/mouses/mouse_4.css new file mode 100644 index 0000000..cad479e --- /dev/null +++ b/styles/elements/mouses/mouse_4.css @@ -0,0 +1,64 @@ +.mouse_4::before { + content:'\ +  \a +  \a +   \a +   \a +     \a +       \a +      \a +    \a +     \a +    \a +     \a +   \a +   \a +  \a +'; +} +.mouse_4::after { + content:'\ +  \a +  \a +   \a +   \a +     \a +      \a +      \a +     \a +     \a +    \a +     \a +   \a +  \a +  \a +  \a +  \a +   \a +    \a +     \a +      \a +       \a +     \a +     \a +    \a +     \a +   \a +  \a +  \a +  \a +  \a +   \a +    \a +     \a +       \a +       \a +    \a +     \a +    \a +     \a +   \a +   \a +  \a +'; +} diff --git a/styles/style.css b/styles/style.css index a6a825a..6bf9418 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,4 +1,3 @@ - :root { --base_font_size: 62.5%; }