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

Compare commits

base: perso:new_banner
Branches Tags
perso:master perso:cv_dev_content perso:language_by_sections perso:language perso:chrome_version perso:old_css perso:project_content perso:new_layout perso:mouses_in_css perso:new_banner perso:simple_html perso:ascii_css perso:html_framework
..
compare: perso:mouses_in_css
Branches Tags
perso:master perso:cv_dev_content perso:language_by_sections perso:language perso:chrome_version perso:old_css perso:project_content perso:new_layout perso:mouses_in_css perso:new_banner perso:simple_html perso:ascii_css perso:html_framework

4 Commits
new_banner ... mouses_in_

Author SHA1 Message Date
asus
f042247cbb animation mouse in css is working 2024-05-15 15:49:48 +02:00
asus
b517d26ece index modified for merge 2024-05-15 11:55:24 +02:00
asus
668aad3c59 merging conflict 2024-05-15 11:50:31 +02:00
asus
ac1d84fc9a reverted last 3 commits 2024-01-21 12:16:30 +01:00
21 changed files with 392 additions and 667 deletions
Expand all files Collapse all files

34
README.md
View File

File diff suppressed because one or more lines are too long

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

309
index.html
View File

@@ -35,16 +35,14 @@
<body id="body"> <body id="body">
<main id="top"> <main id="top">
<!--
NAV
<nav> <nav>
<a href="#top">accueil</a> <a href="#top">accueil</a>
<a href="#projects">projets</a> <a href="#projects">projets</a>
<a href="#cv">cv</a> <a href="#cv">cv</a>
<a href="#infos">contact</a> <a href="#infos">contact</a>
</nav> </nav>
-->
<!-- <!--
@@ -70,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>
@@ -205,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>
@@ -308,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>
@@ -369,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>
@@ -454,74 +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>
<div class="banner">
</div>
</section> </section>

263
notes.md
View File

File diff suppressed because one or more lines are too long

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);
} }

75
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; > div {
} position: relative;
pre.frame { top: 0%;
position: relative;
justify-items: start; /*
align-items: end; * for pseudo elements ::before and ::after
grid-column: 1; * for some reason it does not work when applied to them directly
grid-row: 1; * if they are not position absolute
*/
white-space: pre;
line-height: 0.8;
font-size: 1.0rem;
opacity: 0;
--tframes: 2s; --tframes: 2s;
animation-name: ascii_frame; animation-name: mouse_move;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-duration: var(--tframes); animation-duration: var(--tframes);
animation-timing-function: steps(3);
animation-direction: normal; animation-direction: normal;
animation-timing-function: steps(1);
}
> div::before {
position: relative;
top: 0px;
left: 0px;
} }
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);} > div::after {
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);} position: absolute;
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);} top: 100%;
left: 0px;
@keyframes ascii_frame {
0% {opacity: 1;}
25% {opacity: 1;}
25.1% {opacity: 0;}
100% {opacity: 0;}
} }
#mouse_1 {
place-self: center;
} }
#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
';
}

BIN
styles/fonts/notomono/NotoMono_6dots.woff
View File

Binary file not shown.

BIN
styles/fonts/notomono/NotoMono_6dotsNspace.woff
View File

Binary file not shown.

BIN
styles/fonts/notomono/NotoMono_e066.woff
View File

Binary file not shown.

5
styles/style.css
View File

@@ -1,5 +1,8 @@
:root { :root {
--base_font_size: 62.5%;
}
html {
font-size: var(--base_font_size);
} }
body, main { body, main {
overflow-x: clip; overflow-x: clip;

32
styles/text.css
View File

@@ -6,31 +6,17 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
html { body, pre {
font-size: 62.5%;
}
body * {
font-family: "notomono", monospace; font-family: "notomono", monospace;
font-size: 1.8rem; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
.pre, pre {
display: flex;
white-space: pre;
line-height: 0.8;
font-size: min(2.1vw, 1.0rem);
}
.pre_small {
font-size: min(1.5vw, 0.7rem);
}
/* /*
for screen larger than 500px
*/ */
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
body { html {
font-size: 1.5rem; font-size: calc(var(--base_font_size) * 1.2);
} }
} }
ul { ul {
@@ -71,3 +57,13 @@ h4 { margin: 20px 0px; font-size: 1.5rem; }
h5 { margin: 10px 0px; font-size: 1.25rem; } h5 { margin: 10px 0px; font-size: 1.25rem; }
h6 { margin: 10px 0px; font-size: 1.0rem; } h6 { margin: 10px 0px; font-size: 1.0rem; }
.pre, pre {
display: flex;
white-space: pre;
line-height: 0.8;
font-size: min(2.1vw, 1.0rem);
}
.pre_small {
font-size: min(1.5vw, 0.7rem);
}