perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animation mouse in css is working

Browse Source
This commit is contained in:
asus
2024-05-15 15:49:48 +02:00
parent b517d26ece
commit f042247cbb
15 changed files with 374 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
styles/img/banner_1.svg → docs/banners/banner_1.svg
View File

@@ -29,4 +29,3 @@
<!-- Other SVG elements and attributes --> <!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

1
styles/img/banner_2.svg → docs/banners/banner_2.svg
View File

@@ -32,4 +32,3 @@
<!-- Other SVG elements and attributes --> <!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

1
styles/img/banner_3.svg → docs/banners/banner_3.svg
View File

@@ -35,4 +35,3 @@
<!-- Other SVG elements and attributes --> <!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

0
styles/img/banner_4.svg → docs/banners/banner_4.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

0
styles/img/banner_5.svg → docs/banners/banner_5.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

0
downloads/hugo_lamy_2023_cv.pdf → docs/hugo_lamy_cv.pdf
View File

44
docs/mouses/mouse_1/mouse_1_1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

306
index.html
View File

@@ -35,7 +35,6 @@
<body id="body"> <body id="body">
<main id="top"> <main id="top">
<nav> <nav>
<a href="#top">accueil</a> <a href="#top">accueil</a>
<a href="#projects">projets</a> <a href="#projects">projets</a>
@@ -44,6 +43,8 @@
</nav> </nav>
<!-- <!--
HERO SECTION HERO SECTION
--> -->
@@ -67,97 +68,18 @@
</h1> </h1>
<h1 aria-label="programmeur informatique" id="title" class="title"> <h1 aria-label="programmeur informatique" id="title" class="title">
<span aria-hidden="true" class="pre"> <span aria-hidden="true" class="pre">
                        
                                   
                          
                      
                    
</span>
<span aria-hidden="true" class="pre">
              
                  
                  
                   
               
</span> </span>
</h1> </h1>
</header> </header>
<div class="frames_container mouse" id="mouse_1" role="img" aria-label="mouse animated in ASCII art"> <div class="mouse"><div class="mouse_1"></div></div>
<pre class="frame f1" aria-hidden="true">
  
     
      
         
      
    
    
    
     
        
        
     
     
   
   
</pre>
<pre class="frame f2" aria-hidden="true">
 
    
      
       
      
     
     
    
     
        
        
     
     
   
   
</pre>
<pre class="frame f3" aria-hidden="true">
 
    
      
       
      
     
     
    
     
        
        
     
     
   
   
</pre>
<pre class="frame f4" aria-hidden="true">
  
     
      
         
      
    
    
    
     
        
        
     
     
   
   
</pre>
</div>
<div class="banner banner_size_5 banner_speed_30" aria-label="banner delimitation in ASCII art"></div> <div class="banner banner_size_5 banner_speed_30" aria-label="banner delimitation in ASCII art"></div>
</section> </section>
@@ -202,80 +124,7 @@
</figure> </figure>
</article> </article>
<div class="frames_container mouse" id="mouse_2" role="img" aria-label="mouse animated in ASCII art"> <div class="mouse"><div class="mouse_2"></div></div>
<pre class="frame f1" aria-hidden="true">
 
  
  
 

 
 
 
 
   
   
 
    
   
 
</pre>
<pre class="frame f2" aria-hidden="true">
 
  
  
 

 
 
 
 
   
   
 
    
   

</pre>
<pre class="frame f3" aria-hidden="true">
 
 
  
 

 
 
 
 
   
   
 
    
   
 
</pre>
<pre class="frame f4" aria-hidden="true">

 
  
 

 
 
 
 
   
   
 
    
   

</pre>
</div>
<div class="banner banner_size_3 banner_speed_20 banner_reverse" aria-label="banner delimitation in ASCII art"></div> <div class="banner banner_size_3 banner_speed_20 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
</section> </section>
@@ -305,7 +154,7 @@
</header> </header>
<article> <article>
<h2 id="cv_download"><a href="downloads/hugo_lamy_2023_cv.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">version pdf</a></h2> <h2 id="cv_download"><a href="docs/hugo_lamy_cv.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">version pdf</a></h2>
<details> <details>
<summary> <summary>
<h3>Outils informatiques</h3> <h3>Outils informatiques</h3>
@@ -366,71 +215,7 @@
</details> </details>
</article> </article>
<div class="frames_container mouse" id="mouse_3" role="img" aria-label="mouse animated in ASCII art"> <div class="mouse"><div class="mouse_3"></div></div>
<pre class="frame f1" aria-hidden="true">
 
  

  
  
   
   
  
  
   
  
 
</pre>
<pre class="frame f2" aria-hidden="true">
 
  

  
  
   
   
 
  
   
  
 
</pre>
<pre class="frame f3" aria-hidden="true">
 
  

  
  
   
   
  
  
   
  
 
</pre>
<pre class="frame f4" aria-hidden="true">

  
 
  
   
  
  
   
   
   
   
 
</pre>
</div>
<div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div> <div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
</section> </section>
@@ -451,72 +236,7 @@
<p>hugogogo@protonmail.com</p> <p>hugogogo@protonmail.com</p>
</article> </article>
<div class="frames_container mouse" id="mouse_4" role="img" aria-label="mouse animated in ASCII art"> <div class="mouse"><div class="mouse_4"></div></div>
<pre class="frame f1" aria-hidden="true">
 
 
   
     
     
   
   
  
   
  
 
</pre>
<pre class="frame f2" aria-hidden="true">
 
 
   
    
     
   
   
  
   
 
 
</pre>
<pre class="frame f3" aria-hidden="true">
 
  
   
    
     
   
   
  
   
 
 
</pre>
<pre class="frame f4" aria-hidden="true">
 
  
   
     
     
   
   
  
   
  
 
</pre>
</div>
</section> </section>

12
styles/elements/banners.css
View File

@@ -4,7 +4,7 @@
--banner_height: var(--base_banner_height); /*default*/ --banner_height: var(--base_banner_height); /*default*/
height: min(26vw, var(--banner_height)); 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-size: contain;
background-repeat: repeat; background-repeat: repeat;
background-position-x: 0%; background-position-x: 0%;
@@ -55,22 +55,22 @@
* *
*/ */
.banner_size_1 { .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_height: calc(var(--base_banner_height) * 1);
} }
.banner_size_2 { .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_height: calc(var(--base_banner_height) * 2);
} }
.banner_size_3 { .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_height: calc(var(--base_banner_height) * 3);
} }
.banner_size_4 { .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_height: calc(var(--base_banner_height) * 4);
} }
.banner_size_5 { .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); --banner_height: calc(var(--base_banner_height) * 5);
} }

83
styles/elements/mouses.css
View File

@@ -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 { .mouse {
position: relative; margin: auto;
margin: 20px 0px;
}
.frames_container {
display: grid;
grid-template-rows: 1fr;
width: fit-content; width: fit-content;
} overflow: hidden;
pre.frame.hide {
display: none;
}
pre.frame {
position: relative;
justify-items: start;
align-items: end;
grid-column: 1;
grid-row: 1;
opacity: 0; > div {
--tframes: 2s; position: relative;
animation-name: ascii_frame; top: 0%;
animation-iteration-count: infinite;
animation-duration: var(--tframes);
animation-timing-function: steps(3);
animation-direction: normal;
}
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);} /*
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);} * for pseudo elements ::before and ::after
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);} * 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 { --tframes: 2s;
0% {opacity: 1;} animation-name: mouse_move;
25% {opacity: 1;} animation-iteration-count: infinite;
25.1% {opacity: 0;} animation-duration: var(--tframes);
100% {opacity: 0;} animation-direction: normal;
} animation-timing-function: steps(1);
}
> div::before {
position: relative;
top: 0px;
left: 0px;
}
#mouse_1 { > div::after {
place-self: center; position: absolute;
top: 100%;
left: 0px;
}
} }
#mouse_2 { @keyframes mouse_move {
left: 10%; 0% {top: 0%;}
25% {top: -100%;}
50% {top: -200%;}
75% {top: -300%;}
} }
#mouse_3 {
left: 60%;
}
#mouse_4 {
left: 20%;
}

72
styles/elements/mouses/mouse_1.css Normal file
View File

@@ -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
';
}

72
styles/elements/mouses/mouse_2.css Normal file
View File

@@ -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
';
}

64
styles/elements/mouses/mouse_3.css Normal file
View File

@@ -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
';
}

64
styles/elements/mouses/mouse_4.css Normal file
View File

@@ -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
';
}

1
styles/style.css
View File

@@ -1,4 +1,3 @@
:root { :root {
--base_font_size: 62.5%; --base_font_size: 62.5%;
} }