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

Compare commits

base: perso:project_content
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:chrome_version
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

7 Commits
project_co ... chrome_ver

Author SHA1 Message Date
asus
e21e5b8938 changed svg files to work with older browsers for the pre white-space, using old xml:space instead 2024-05-27 15:42:56 +02:00
asus
680c5808a3 added break word on all letters for links 2024-05-27 14:23:09 +02:00
asus
8ac471331f css is now in old form 2024-05-27 14:18:48 +02:00
asus
04883ef891 renamed projects_square into projects 2024-05-27 14:10:19 +02:00
asus
8a69f25113 deleted old projects folder 2024-05-27 14:08:29 +02:00
asus
d60b3580c0 deleted unused svg mouse 2024-05-27 14:04:20 +02:00
asus
744c2aedcb mouses are now using transform instead of top to work on chrome 2024-05-27 14:00:55 +02:00
26 changed files with 198 additions and 237 deletions
Expand all files Collapse all files

10
docs/banners/banner_0.svg
View File

@@ -16,14 +16,16 @@
font-size: 1.5rem; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
white-space: pre; /*
* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
*
line-height: 0.8; line-height: 0.8;
white-space: pre;
*/
} }
</style> </style>
</defs> </defs>
<text x="0" y="0"> <text x="0" y="0">
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
</text> </text>
<!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

12
docs/banners/banner_00.svg
View File

@@ -16,15 +16,17 @@
font-size: 1.5rem; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
white-space: pre; /*
* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
*
line-height: 0.8; line-height: 0.8;
white-space: pre;
*/
} }
</style> </style>
</defs> </defs>
<text x="0" y="0"> <text x="0" y="0">
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
</text> </text>
<!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

14
docs/banners/banner_1.svg
View File

@@ -16,16 +16,18 @@
font-size: 1.5rem; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
white-space: pre; /*
* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
*
line-height: 0.8; line-height: 0.8;
white-space: pre;
*/
} }
</style> </style>
</defs> </defs>
<text x="0" y="0"> <text x="0" y="0">
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
</text> </text>
<!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

20
docs/banners/banner_2.svg
View File

@@ -16,19 +16,21 @@
font-size: 1.5rem; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
white-space: pre; /*
* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
*
line-height: 0.8; line-height: 0.8;
white-space: pre;
*/
} }
</style> </style>
</defs> </defs>
<text x="0" y="0"> <text x="0" y="0">
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
</text> </text>
<!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

26
docs/banners/banner_3.svg
View File

@@ -16,22 +16,24 @@
font-size: 1.5rem; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
white-space: pre; /*
* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
*
line-height: 0.8; line-height: 0.8;
white-space: pre;
*/
} }
</style> </style>
</defs> </defs>
<text x="0" y="0"> <text x="0" y="0">
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
</text> </text>
<!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

32
docs/banners/banner_4.svg
View File

@@ -16,25 +16,27 @@
font-size: 1.5rem; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
white-space: pre; /*
* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
*
line-height: 0.8; line-height: 0.8;
white-space: pre;
*/
} }
</style> </style>
</defs> </defs>
<text x="0" y="0"> <text x="0" y="0">
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
</text> </text>
<!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

38
docs/banners/banner_5.svg
View File

@@ -16,28 +16,30 @@
font-size: 1.5rem; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
white-space: pre; /*
* dont work in chrome so use 'tspan' with 'dy' and 'xml:space'
*
line-height: 0.8; line-height: 0.8;
white-space: pre;
*/
} }
</style> </style>
</defs> </defs>
<text x="0" y="0"> <text x="0" y="0">
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
  <tspan x="0" dy="0.8em" xml:space="preserve">  </tspan>
<tspan x="0" dy="0.8em" xml:space="preserve"></tspan>
</text> </text>
<!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

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

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

Before

Width:  |  Height:  |  Size: 6.9 KiB

BIN
docs/projects/cube3d_image.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 MiB

BIN
docs/projects/cube3d_raycasting.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

0
docs/projects_square/cube3d_tour_with_map_square.gif → docs/projects/cube3d_tour_with_map_square.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 MiB

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
docs/projects/fdf_demo.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 823 KiB

BIN
docs/projects/fdf_pyramide_2.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 MiB

0
docs/projects_square/fdf_pyramide_loop_square_2_light.gif → docs/projects/fdf_pyramide_loop_square_2_light.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.2 MiB

After

Width:  |  Height:  |  Size: 9.2 MiB

0
docs/projects_square/kosmopolit_square.gif → docs/projects/kosmopolit_square.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 938 KiB

After

Width:  |  Height:  |  Size: 938 KiB

BIN
docs/projects/ljdp_map_clusters.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 MiB

0
docs/projects_square/ljdp_map_clusters_square_light.gif → docs/projects/ljdp_map_clusters_square_light.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 MiB

After

Width:  |  Height:  |  Size: 5.3 MiB

BIN
docs/projects/ljdp_map_filters.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 855 KiB

16
index.html
View File

@@ -115,7 +115,7 @@
</ul> </ul>
</details> </details>
<div class="mouse"><div class="mouse_1 pre"></div></div> <div class="mouse"><div class="frames mouse_1 pre"></div></div>
<div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div> <div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div>
</section> </section>
@@ -129,7 +129,7 @@
PROJECTS PROJECTS
--> -->
<section id="projects" class="section"> <section id="projects" class="section">
<div class="mouse"><div class="mouse_3 pre"></div></div> <div class="mouse"><div class="frames mouse_3 pre"></div></div>
<header> <header>
<h1 aria-label="projets"> <h1 aria-label="projets">
@@ -153,7 +153,7 @@
<div class="projects_grid"> <div class="projects_grid">
<figure class="project"> <figure class="project">
<a href="https://bitbucket.org/hugogogo/int_04_fdf" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket"> <a href="https://bitbucket.org/hugogogo/int_04_fdf" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
<img src="./docs/projects_square/fdf_pyramide_loop_square_2_light.gif"/> <img src="./docs/projects/fdf_pyramide_loop_square_2_light.gif"/>
</a> </a>
<figcaption> <figcaption>
<p>programme qui creer une representation 3D filaire d'une carte avec des points a differentes altitudes</p> <p>programme qui creer une representation 3D filaire d'une carte avec des points a differentes altitudes</p>
@@ -163,7 +163,7 @@
<figure class="project"> <figure class="project">
<a href="https://bitbucket.org/hugogogo/int_10_cube3d" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket"> <a href="https://bitbucket.org/hugogogo/int_10_cube3d" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
<img src="./docs/projects_square/cube3d_tour_with_map_square.gif"/> <img src="./docs/projects/cube3d_tour_with_map_square.gif"/>
</a> </a>
<figcaption> <figcaption>
<p>mini jeu video utilisant le raycasting pour creer une impression de deplacement dans un environnement 3D</p> <p>mini jeu video utilisant le raycasting pour creer une impression de deplacement dans un environnement 3D</p>
@@ -173,7 +173,7 @@
<figure class="project"> <figure class="project">
<a href="https://bitbucket.org/hugogogo/2023_website_jipf" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket"> <a href="https://bitbucket.org/hugogogo/2023_website_jipf" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
<img src="./docs/projects_square/ljdp_map_clusters_square_light.gif"/> <img src="./docs/projects/ljdp_map_clusters_square_light.gif"/>
</a> </a>
<figcaption> <figcaption>
<p>plugin wordpress representant des evenements sur une carte avec des marqueurs et des filtres de tris</p> <p>plugin wordpress representant des evenements sur une carte avec des marqueurs et des filtres de tris</p>
@@ -183,7 +183,7 @@
<figure class="project"> <figure class="project">
<a href="https://bitbucket.org/hugogogo/2022_website_kosmopolit" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket"> <a href="https://bitbucket.org/hugogogo/2022_website_kosmopolit" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
<img src="./docs/projects_square/kosmopolit_square.gif"/> <img src="./docs/projects/kosmopolit_square.gif"/>
</a> </a>
<figcaption> <figcaption>
<p>site internet statique utilisant une structure uniquement en html et css</p> <p>site internet statique utilisant une structure uniquement en html et css</p>
@@ -212,7 +212,7 @@
</article> </article>
--> -->
<div class="mouse"><div class="mouse_2 pre"></div></div> <div class="mouse"><div class="frames mouse_2 pre"></div></div>
<div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div> <div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
</section> </section>
@@ -233,7 +233,7 @@
<p>hugogogo@protonmail.com</p> <p>hugogogo@protonmail.com</p>
</article> </article>
<div class="mouse"><div class="mouse_4 pre"></div></div> <div class="mouse"><div class="frames mouse_4 pre"></div></div>
</section> </section>

22
styles/elements/cv.css
View File

@@ -6,30 +6,32 @@
.cv { .cv {
display: flex; display: flex;
text-align: left; text-align: left;
summary { }
.cv summary {
position: relative; position: relative;
list-style-position: outside; list-style-position: outside;
list-style-type: "▸ "; list-style-type: "▸ ";
font-size: 1.8rem; font-size: 1.8rem;
margin: auto; margin: auto;
width: fit-content; width: fit-content;
.open { }
.cv summary .open {
display: none; display: none;
} }
.close { .cv summary .close {
display: inline; display: inline;
} }
}
&[open] summary { .cv[open] summary {
list-style-type: "▾ "; list-style-type: "▾ ";
.open { }
.cv[open] summary .open {
display: inline; display: inline;
} }
.close { .cv[open] summary .close {
display: none; display: none;
} }
}
> *:last-child { .cv > *:last-child {
margin-bottom: 100px; margin-bottom: 100px;
} }
}

10
styles/elements/hero.css
View File

@@ -9,13 +9,13 @@
grid-template-rows: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr;
*/ */
grid-template-rows: auto auto 1fr; grid-template-rows: auto auto 1fr;
.subtitle { }
#hero .subtitle {
text-align: center; text-align: center;
} }
.cv { #hero .cv {
#cv_download { }
#hero .cv #cv_download {
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
} }
}
}

1
styles/elements/infos.css
View File

@@ -1,4 +1,3 @@
#infos article { #infos article {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

45
styles/elements/mouses.css
View File

@@ -7,43 +7,30 @@
margin: auto; margin: auto;
width: fit-content; width: fit-content;
overflow: hidden; overflow: hidden;
> div {
position: relative;
top: 0%;
/*
* 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;
font-size: min(2.1vw, 1.0rem);
*/
--tframes: 2s;
animation-name: mouse_move;
animation-iteration-count: infinite;
animation-duration: var(--tframes);
animation-direction: normal;
animation-timing-function: steps(1);
} }
> div::before { .mouse .frames {
position: relative;
animation: mouse_move infinite 2s normal steps(4);
}
.mouse .frames::before {
position: relative; position: relative;
top: 0px; top: 0px;
left: 0px; left: 0px;
} }
.mouse .frames::after {
> div::after {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0px; left: 0px;
} }
}
/*
* using 'transform' instead of 'top', because 'top' needs
* the parent to have an explicit height
* but in this case its height is according to the children
*
*/
@keyframes mouse_move { @keyframes mouse_move {
0% {top: 0%;} 0% {transform: translateY(0%);}
25% {top: -100%;} 100% {transform: translateY(-400%);}
50% {top: -200%;}
75% {top: -300%;}
} }

15
styles/elements/projects.css
View File

@@ -2,20 +2,21 @@
header { header {
height: 300px; height: 300px;
} }
.projects_grid { }
#projects .projects_grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto)); grid-template-columns: repeat(auto-fit, minmax(200px, auto));
grid-template-columns: repeat(2, minmax(100px, auto)); grid-template-columns: repeat(2, minmax(100px, auto));
grid-template-columns: repeat(2, minmax(100px, 500px)); grid-template-columns: repeat(2, minmax(100px, 500px));
grid-gap: 20px; grid-gap: 20px;
figure { }
figcaption { #projects .projects_grid figure {
}
#projects .projects_grid figure figcaption {
text-align: left; text-align: left;
margin-bottom: 100px; margin-bottom: 100px;
} }
}
} #projects .mouse {
.mouse {
margin-top: 100px; margin-top: 100px;
} }
}

19
styles/sections.css
View File

@@ -9,31 +9,30 @@ section {
min-height: 100vh; min-height: 100vh;
justify-items: center; justify-items: center;
text-align: center; text-align: center;
}
header { section header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
place-content: center; place-content: center;
}
h1 { section header h1 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
}
article { section article {
text-align: left; text-align: left;
} }
> * { section > * {
grid-column: 2 / span 1; grid-column: 2 / span 1;
} }
> .grid_full_width { section > .grid_full_width {
grid-column: 1 / span 3; grid-column: 1 / span 3;
} }
.banner { section .banner {
overflow-x: hidden; overflow-x: hidden;
} }
}

3
styles/text.css
View File

@@ -55,3 +55,6 @@ h6 { margin: 10px 0px; font-size: 1.0rem; }
font-size: min(1.5vw, 0.7rem); font-size: min(1.5vw, 0.7rem);
} }
a {
word-break: break-all;
}