keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Update of all texts

Browse Source
This commit is contained in:
Théo Marchal 2021-02-16 00:10:40 +01:00
parent b7fa827d1c
commit f51ea1a530
7 changed files with 55 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
biographie.html
View File

@ -34,19 +34,23 @@
<article class="main">
<h1>Biographie</h1>
<p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vu le jour un matin de mars 1936 à Mouilly, un petit village isolé dans la forêt meusienne, au fond d'une vallée accrochée aux contreforts des Côtes de Meuse.</p>
<p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vu le jour un matin de mars 1936 à Mouilly, un petit village isolé dans la forêt meusienne, au fond d'une vallée accrochée aux contreforts des côtes de Meuse.</p>
<p>Comme l'écrit Ginou dans un texte sur sa jeunesse, &laquo;&#8239;je suis née un jour de mars 1936 dans un petit village de la Meuse, Mouilly, le berceau des parents de mon père&#8239;&raquo;. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, elle en garde des souvenirs très précis, même 75 ans après. Après avoir passé le Certificat d'Étude avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du village, dans un maison sur les berges du petit ruisseau qui serpente au fond de la vallée.</p>
<p>Dans ce petit village blottit dans la forêt domeniale des Eparges, elle passe beaucoup de temps dans la nature environante, accompagnant son père quand il allait dans les bois chercher des champignons ou bien pour aller jouer ou se promener avec ses copains et copines du village. Elle se souvient&#8239;: &laquo;&#8239;J'ai appris à les reconnaître, girolles, cèpes, cela me plaisait bien. J'ai toujours aimé la nature, les fleurs, les oiseaux, apercevoir une biche qui détale au détour d'un chemin&#8239;&raquo;. Où bien quand elle rendait visite à ses cousines à Saint Dié dans les Vosges, elle faisait de longues promenades autour de la ville. Cet amour de la nature se ressentira tout au long de son œuvre.</p>
<p>Comme l'écrit Ginou en 2016 dans un texte sur sa jeunesse, &laquo;&#8239;je suis née un jour de mars 1936 dans un petit village de la Meuse, Mouilly, le berceau des parents de mon père&#8239;&raquo;. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, elle en garde des souvenirs très précis, même 75 ans après. Après avoir passé le certificat d'études avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du village, dans une maison sur les berges du petit ruisseau qui serpente au fond de la vallée.</p>
<p>Comme Geneviève l'a elle même relaté dans un texte sur sa jeunesse, &#8239;&laquo;&#8239;depuis toute petite, j'aimais dessiner et colorier et puis l'institutrice nous a appris à peindre à la gouache. Elle aussi, comme mon père, encourageait mon don&#8239;&raquo;. C'est ainsi que Geneviève réalise ses premieres aquarelles.</p>
<p>Dans ce petit village blotti dans la forêt domaniale des Éparges, elle passe beaucoup de temps dans la nature environnante, accompagnant son père quand il allait dans les bois chercher des champignons ou bien pour aller jouer ou se promener avec ses copains et copines du village. Elle se souvient&#8239;: &laquo;&#8239;j'ai appris à les reconnaître, girolles, cèpes, cela me plaisait bien. J'ai toujours aimé la nature, les fleurs, les oiseaux, apercevoir une biche qui détale au détour d'un chemin&#8239;&raquo;. Quand elle rendait visite à ses cousines à Saint-Dié dans les Vosges, elle faisait de longues promenades autour de la ville. Cet amour de la nature se ressentira tout au long de son &oelig;uvre.</p>
<p>&laquo;&#8239;Et puis, un jour, j'ai rencontré une jeune femme qui peignait et qui m'a parlé de la peinture à l'huile. J'ai voulu essayer, c'est le voisin qui m'a rapporté de Metz mes premiers tubes de peinture et la palette (que j'ai toujours). J'ai aussi acheté quelques livrets traitant de la technique et je me suis lancée et j'ai progressé tout doucement. Et cette passion ne m'a jamais quittée&#8239;&raquo;. Ainsi est née Ginou !</p>
<p>Ginou a commencé très tôt à montrer un goût prononcé pour les arts graphiques. Comme Geneviève le relate elle-même&#8239;: &laquo;&#8239;depuis toute petite, j'aimais dessiner et colorier et puis l'institutrice nous a appris à peindre à la gouache. Elle aussi, comme mon père, encourageait mon don&#8239;&raquo;. C'est ainsi que Geneviève peint ses premières aquarelles. Elle réalise aussi de nombreux portraits au fusain d'artistes célébres des années 50 et 60&#8239;: Grace Kelly, Marlon Brando, Zsa Zsa Gabor, Humphrey Bogart, etc.</p>
<p>Ginou peindra ainsi 383 tableaux (huile sur toile, bois et carton), tous recencés dans un tout petit carnet à spirale ou elle notait leurs caractéristiques et leur acquereurs et destinataires. Ceux-ci sont maintenant en parti disséminé aux quatre coins de la France, peut-être de l'Europe, voir du monde&#8239;!</p>
<p>Ginou écrit ensuite&#8239;: &laquo;&#8239;et puis, un jour, j'ai rencontré une jeune femme qui peignait et qui m'a parlé de la peinture à l'huile. J'ai voulu essayer, c'est le voisin qui m'a rapporté de Metz mes premiers tubes de peinture et la palette (que j'ai toujours). J'ai aussi acheté quelques livrets traitant de la technique et je me suis lancée et j'ai progressé tout doucement. Et cette passion ne m'a jamais quitté.&#8239;&raquo; Ainsi est née Ginou&#8239;!</p>
<p>Curiosité de la vie, Ginou était en train de compléter la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017, laissant le numéro 383 inachevé.</p>
<p>Ginou peindra ainsi plus de 385 tableaux (huile sur toile, bois et carton), la grande majorité recensés dans un tout petit carnet où elle notait leurs caractéristiques, leurs acquéreurs et destinataires. Ces tableaux sont maintenant disséminés aux quatre coins de la France, voire du monde&#8239;!</p>
<p>Il ne faut pas oublier qu'elle n'aurait pas été Ginou sans le &laquo;&#8239;Jeannot&#8239;&raquo;, son mari. Le Jeannot a toujours accompagné cette passion, plus encore en retraite, en s'occupant de toute la logistique (trépieds, support, table, etc) lorsque Ginou s'est décidée à participer aux expositions de peinture et autres foires artisanales locales.</p>
<p>Curiosité de la vie, Ginou était en train de compléter la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017, laissant deux tableaux inachevés&#8239;: deux esquisses au fusain représentant une 54ème &laquo;&#8239;Vieille Église&#8239;&raquo; (Église romane de Dugny-sur-Meuse) et un paysage asiatique.</p>
<p class="signature">Pour en découvrir plus sur la vie de Ginou, visitez notre section <a href="divers.html">Divers</a>.</p>
<p><img src="images/genevievedugny.jpg" alt="Geneviève Marchal, Dugny"></p>
</article>

8
divers.html
View File

@ -42,7 +42,7 @@
<h2>Petit carnet</h2>
<p>Ce site est né grâce à ce petit carnet, qui contient quasiment l'intégralité des tableaux peint par Ginou. Il nous a permis de faire un index complet de ses &oelig;uvres à travers les années.<br>Il nous apprend par exemple que le tableau 33 et 49 ont par exemple été recouverts pour en faire d'autres.</p>
<p>Ce site est né grâce à ce petit carnet, qui contient quasiment l'intégralité des tableaux peint par Ginou (nous avons retrouvé quatre inédits). Il nous a permis de faire un index complet de ses &oelig;uvres à travers les années.</p>
<div class="gallery">
<a data-fancybox="divers" href="photos/divers/normal/carnet.png" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
@ -116,8 +116,8 @@
<p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en avons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p>
<div class="gallery">
<a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="todo">
<img src="photos/divers/mini/ainesdugny.jpg" alt="todo">
<a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse (20XX).">
<img src="photos/divers/mini/ainesdugny.jpg" alt="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse (20XX).">
</a>
</div>
@ -137,7 +137,7 @@
<p>
De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint un total de 383 tableaux.<br>
Parmi ceux-ci, elle a le plus souvent aimé travailler à la lumière printanière du mois de mai avec un total de 50 tableaux.<br>
Son année la plus active fut 1988 où elle réalisa 23 œuvres. Enfin, le format qu'elle privilégia fut le <em>55x46</em>, utilisé pour 53 toiles.
Son année la plus active fut 1988 où elle réalisa 23 &oelig;uvres. Enfin, le format qu'elle privilégia fut le <em>55x46</em>, utilisé pour 53 toiles.
</p>
<div id="stats">

16
explorer.html
View File

@ -41,11 +41,17 @@
<article class="explorer">
<h1>Explorer</h1>
<p class="intro">Cette section du site permet de générer une <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste (aussi visible sous le format d'une <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> galerie) en fonction de différents paramètres, listés ci-dessous. Il permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.<br>
En mode <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste, l'icône <img width="16.5rem" src="styles/icons/eye-black.svg" alt="&oelig;il"> &oelig;il permet de voir le tableau en grand ; en mode <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> galerie, il faut cliquer sur les tableaux.<br>
Une &#x2606; étoile vide dans la colonne photo signifie que nous n'avons pas de photo pour un tableau ; une &#x2605; étoile qu'elle est de mauvaise qualité ; deux &#x2605;&#x2605; étoiles qu'elle est acceptable ; et trois &#x2605;&#x2605;&#x2605; étoiles qu'elle est tout à fait satisfaisante.<br>
Le symbole <img width="5rem" src="styles/icons/exclamation-mark.svg" alt="double point d'exclamation"> dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.<br>
Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la <img width="12rem" src="styles/icons/triangle.svg" alt="flèche"> flèche pour la faire réapparaître.</p>
<div class="intro" style="text-align:justify;">
<p>Cette section permet de générer une <img width="14rem" src="styles/icons/list.svg" alt="liste"> <strong>liste</strong> (aussi visible sous la forme d'une <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> <strong>galerie</strong>) en fonction de différents paramètres, listés ci-dessous. Elle permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.</p>
<p>En mode <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste, l'<strong>icône <img width="16.5rem" src="styles/icons/eye-black.svg" alt="&oelig;il"> &oelig;il</strong> permet de voir le tableau en grand ; en mode <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> galerie, il faut <strong>cliquer sur les tableaux</strong>.</p>
<p>Dans la colonne photo, une &#x2606; <strong>étoile vide</strong> signifie que nous n'avons pas de photo pour un tableau ; une &#x2605; <strong>étoile</strong> qu'elle est de mauvaise qualité ; &#x2605;&#x2605; <strong>deux étoiles</strong> qu'elle est acceptable ; et &#x2605;&#x2605;&#x2605; <strong>trois étoiles</strong> qu'elle est tout à fait satisfaisante.</p>
<p>Le symbole <img width="5rem" src="styles/icons/exclamation-mark.svg" alt="double point d'exclamation"> dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.</p>
<p>Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la <img width="12rem" src="styles/icons/triangle.svg" alt="flèche"> <strong>flèche</strong> pour la faire réapparaître.</p>
</div>
<h2 class="active">Configuration&nbsp;</h2>
<form name="explorer" onsubmit="onSubmit();">

6
exposition.html
View File

@ -40,9 +40,13 @@
<article class="exposition">
<h1>Exposition</h1>
<p class="center">Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
<div class="intro center">
<p>Cette section présente une sélection de tableaux représentatifs de l'&oelig;uvre de Ginou. La section <a href="explorer.html">Explorer</a> permet de tous les consulter.</p>
<p>Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
</div>
<div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
<div class="gallery"></div>
<div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
</article>
</body>
</html>

8
index.html
View File

@ -33,13 +33,13 @@
<article class="main">
<h1>L'art de Ginou</h1>
<p>Ginou était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses œuvres, à travers la peinture à l’huile principalement, occasionnellement à l’aquarelle, mais aussi par le biais de la peinture sur soie ou bien encore dans les cahiers où elle écrivait des poèmes.</p>
<p>Ginou était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses &oelig;uvres, principalement à la <strong>peinture à l’huile</strong>, occasionnellement à l’<strong>aquarelle</strong>, mais aussi par le biais de la <strong>peinture sur soie</strong> et <strong>sur bois</strong> ou bien encore dans les cahiers où elle écrivait des <strong>poèmes illustrés</strong>.</p>
<p>Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux, en leur attribuant un numéro et un titre et reportait les dimensions et leur destinataires / acheteurs / commanditaires. Dans ce petit carnet, de 1958 à 2017, sont recensés 383 tableaux. Ginou a commencé à prendre en photos certains tableaux qu’elle peignait dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter cette base iconographique, nous avons repris en photo en haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site 261<!-- rendre cette valeur dynamique en fonction de la valeur des tableaux possédant une photo --> des 383 tableaux numérotés.</p>
<p>Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux, en leur attribuant un numéro et un titre et reportait les dimensions et leur destinataires / acheteurs / commanditaires. Dans ce petit carnet, <strong>de 1958 à 2017</strong>, sont référencés 383 tableaux. Cependant 2 tableaux (nº33 et nº49) ont été recouverts par Ginou elle-même. Nous avons aussi retrouvé 4 inédits. Ginou a commencé à prendre en photos certains tableaux qu’elle peignait dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter cette base iconographique, nous avons repris en photo en haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site <strong>248 des 385 tableaux recensés.</strong></p>
<p>Ce site est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son œuvre.</p>
<p>Ce site est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son &oelig;uvre.</p>
<p class="signature">Ses enfants et ses petits-enfants</p>
<p class="signature center">Ses enfants, Denis et Laurence, et ses petits-enfants, Théo, Chloé et Maxime</p>
<p><img src="images/ginoupainting.jpg" alt="Ginou peignant"></p>
</article>

10
informations.html
View File

@ -36,7 +36,7 @@
<h1>Informations</h1>
<h2>Contact</h2>
<p>Ce site dédié à la mémoire de Ginou n'est pas complet, et ne le sera peut-être malheureusement jamais. Cependant, si vous êtes en possession d'une de ses œuvres qui n'est pas répertorié ou dont la photo est manquante, vous pouvez nous contacter pour que nous puissions l'intégrer. Nous vous en serions extrêmement reconnaissants !</p>
<p>Ce site dédié à la mémoire de Ginou n'est pas complet, et ne le sera peut-être malheureusement jamais. Cependant, si vous êtes en possession d'une de ses &oelig;uvres qui n'est pas répertoriée ou dont la photo est manquante, vous pouvez nous contacter pour que nous puissions l'ajouter. Nous vous en serions extrêmement reconnaissants&#8239;!</p>
<p>Vous pouvez nous joindre en cliquant ici&#8239;: <a href="mailto:badmail" class="mail">nous contacter</a> (cela va devrait ouvrir votre client mail par défaut).</p>
@ -44,21 +44,21 @@
<p>Le site est constitué autour de deux rubriques majeures&#8239;: <em>Exposition</em> et <em>Explorer</em>.<br></p>
<h4>Exposition</h4>
<p>Cette rubrique se présente sous la forme d'une galerie qualitative. Seuls les tableaux dont nous possédons une photo de qualité un minimum correcte sont affichés. Ceci la rend incomplète, mais c'est le meilleur moyen de découvrir de manière agréable l'&oelig;uvre de Ginou. En cliquant sur la photo d'un tableau, une galerie interactive s'ouvre. Il est alors possible de se déplacer à l'intérieur (avec les flèches de son clavier ou en glissant sur l'écran de son téléphone) pour voir la photo du tableau en grand. En bas, se trouve un cartel avec les informations essentielles du tableau. En appuyant sur le <strong>&#8505;&#xFE0E;</strong> situé en haut à droite du cartel, on accède à une page incluant également les méta-données du tableau. Il est ainsi possible de voir la photo dans sa qualité maximale, par exemple.</p>
<p>Cette rubrique se présente sous la forme d'une galerie qualitative. Nous avons sélectionnés des tableaux représentatifs dont nous possédons une photo de qualité correcte. Ceci la rend incomplète, mais c'est le meilleur moyen de découvrir de manière agréable l'&oelig;uvre de Ginou. En cliquant sur la photo d'un tableau, une galerie interactive s'ouvre. Il est alors possible de se déplacer à l'intérieur (avec les flèches de son clavier ou en glissant son doigt sur l'écran de son téléphone) pour voir la photo du tableau en grand. En bas, se trouve un cartel avec les informations essentielles du tableau. En appuyant sur le <strong>&#8505;&#xFE0E;</strong> situé en haut à droite du cartel, on accède à une page incluant également les méta-données du tableau. Il est ainsi possible de voir la photo dans sa qualité maximale, par exemple, ou encore son thème, le lieu représenté, etc.</p>
<h4>Explorer</h4>
<p>Cette rubrique quant à elle est interactive et permet de visualiser l'entièreté des créations de Ginou. En effet, elle regorge d'options pour pouvoir choisir précisément les tableaux à afficher. Par exemple, tous les tableaux de chiens dont la photo est de bonne qualité réalisés un mois de février&#8239;: il suffit de sélectionner ces options et de cliquer sur le bouton <strong>Générer</strong>. Évidemment, il est possible qu'il n'en existe pas, ce qui sera alors indiqué.<br>
Le résultat affiché sera sous la forme d'un tableau, mais il est également possible de l'afficher de la même manière que dans la rubrique Exposition en cliquant sur le bouton en haut à droite (seulement, il risque d'y avoir un certain nombre de tableaux dont la photo est indisponible, en fonction des critères de sélection).</p>
Le résultat affiché sera sous la forme d'un tableau, mais il est également possible de l'afficher de la même manière que dans la rubrique Exposition en cliquant sur le bouton en haut à droite (seulement, il risque d'y avoir un certain nombre de tableaux dont la photo est indisponible, en fonction des critères de sélection, cela sera représenté par une image indiquant "Photo indisponible").</p>
<h4>Divers</h4>
<p>Cette page regroupe diverses photos et informations&#8239;: une vue de l'atelier que Ginou utilisait ses dernières années, des photos d'exposition, des coupures de presse, ainsi que des statistiques intéressante (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez du contenu intéressant, notamment pour les coupures de presse.</p>
<p>Cette page regroupe diverses photos et informations en complément de la biographie&#8239;: une vue de l'atelier que Ginou utilisait ses dernières années, des photos d'expositions, des coupures de presse, ainsi que des statistiques intéressante (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez du contenu pertinent, notamment pour les coupures de presse.</p>
<h2>Informations technique</h2>
<p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que des plugins <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a>, <a href="https://www.chartjs.org/">Chart.js</a> et <a href="https://pagination.js.org/">Pagination.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a>, <a href="https://github.com/kosbarts/Commissioner">Commissioner</a> et <a href="https://www.1001fonts.com/hot-august-night-font.html">Hot August Night</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p>
<p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p>
<p>Dernière mise à jour en février 2021.</p>
<p>Site réalisé par Denis et <a href="https://theo.marchal.dev">Théo Marchal</a> avec la participation de toute la famille. Dernière mise à jour en février 2021.</p>
</article>
</body>
</html>

23
styles/main.css
View File

@ -30,7 +30,7 @@ a {
text-decoration:none;
}
.center {
article .center {
text-align:center;
}
@ -173,6 +173,18 @@ article p {
font-family:'Commissioner', Helvetica;
}
article .intro {
width:75vw;
margin:auto;
margin-bottom:2rem;
line-height:1rem;
}
article .intro p {
margin-bottom:0.5rem;
margin-top:0;
}
article.main {
width:55vw;
text-align:justify;
@ -397,15 +409,8 @@ article.explorer .gallery {
text-align:center;
}
article.explorer p.intro {
width:75vw;
margin:auto;
margin-bottom:2rem;
text-align:justify;
}
@media only screen and (max-width:1200px) {
article.explorer p.intro {
article .intro {
width:90vw;
}
}