Skip to content

Commit

Permalink
Ajout d'un premier billet technique
Browse files Browse the repository at this point in the history
  • Loading branch information
@GabrielGodefroy
GabrielGodefroy committed Jul 13, 2020
1 parent 2f72733 commit c1076be
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 70 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,6 @@ TODO:

* nettoyer les CSS/Javascript
* mettre du contenu dans tech.html
* header different dans galerie & tech...
* utiliser les mêmes fontes dans galerie & tech...
* galerie : key event + tactile
64 changes: 43 additions & 21 deletions src/tech-pourquoi.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="footer.css">
<style>
body {
margin: 40px auto;
max-width: 650px;
line-height: 1.6;
font-size: 18px;
color: #444;
padding: 0 10px;
text-align: justify;
}
</style>
<link rel="stylesheet" href="tech.css">
</head>

<header>
Expand All @@ -26,21 +16,53 @@
</ul>
</header>


<body>
<div class="body">
<h1> Un site sur la photographie, encore ? </h1>

Et bien oui, encore un site sur la photographie... Pourquoi ?
Comme l'a dit Cédric Villani (entre autres),
<a href=https://www.philomag.com/blogs/le-monde-de-petite-poucette/cedric-villani-la-meilleure-methode-pour-apprendre-un-sujet-cest">
enseigner, c'est la meilleure méthode pour apprendre</a>.
Alors ce site internet est tout d'abord pour moi. Il me sert de
carnet de notes. J'y prends le temps de partager ce que je fais
de mon appareil photographique.
<br>
Ce site est également pour toi, lecteur curieux. J'espère t'y communiquer
mon intérèt pour la photographie. Tu y trouveras principalement des descriptions
de (mes) méthodes de retouche numériques. J'utilise presque uniquement des logiciels
gratuits, qui sont souvent bien documentés en anglais. Sur ce site,
tu trouvera des transcriptions en français, qui pourront t'aider à
te lancer rapidement.

<h1> Une site web sur la photographie: pourquoi ? </h1>
<br>
Dans l'avenir j'espère couvrir notamment les thèmes et outils suivants :
<ul>
<li> des expositions longues, de jour et sans filtre (avec imagemagick) </li>
<li> des timelapses à envoyer sur whatsapp (ffmpeg) </li>
<li> réaliser son site web en HTML/CSS </li>
<li> utiliser darktable pour le post-processing </li>
<li> pourquoi j'utilise des logicies gratuits/open-sources </li>
<li> ... </li>
</ul>

TODO
Enfin, ce site web est pour nous ! Si tu souhaites collaborer, échanger,
poser tes questions où m'apporter ton expertises, n'hésites pas à me contacter
(via instagram, flickr, linkedin,...)
<br>


</div>
</body>

<footer>
<hr>
Gabriel Godefroy
<a href="https://www.instagram.com/gabrielisoninsta/"> <img src="logo/insta.png" alt="Instagram" /> </a>
<a href="https://www.flickr.com/photos/164376539@N03"> <img src="logo/flickr.png" alt="Flickr" /> </a>
<a href="https://gabrielgodefroy.github.io"> <img src="logo/homepage.png" alt="gabrielgodefroy.html"> </a>
</footer>
<footer>
<hr>
Gabriel Godefroy
<a href="https://www.instagram.com/gabrielisoninsta/"> <img src="logo/insta.png" alt="Instagram" /> </a>
<a href="https://www.flickr.com/photos/164376539@N03"> <img src="logo/flickr.png" alt="Flickr" /> </a>
<a href="https://gabrielgodefroy.github.io"> <img src="logo/homepage.png" alt="gabrielgodefroy.html"> </a>
</footer>


</html>
</html>
44 changes: 44 additions & 0 deletions src/tech.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
body,
html {
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
background-color: #fff;
overflow-x: hidden; //horizontal
}
.body {
line-height: 1.6;
font-size: 18px;
max-width: 650px;
margin: 40px auto;
color: #444;
text-align: justify;
}

.date {
color: rgb(119, 115, 115);
font-size: 16px;
position: absolute;
bottom:2px;
right:5px;
}

.lien {
text-decoration: none;
color: #444;
}

.linkbox {
position:relative;
padding:8px;
max-width:500px;
min-height:100px;
border:none;
background-color:#6666CC99;
}

br {
content: " ";
display: block;
margin: 15px 0;
}
94 changes: 45 additions & 49 deletions src/tech.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="footer.css">
<style>
body {
margin: 40px auto;
max-width: 650px;
line-height: 1.6;
font-size: 18px;
color: #444;
padding: 0 10px;
text-align: justify;
}
</style>
<link rel="stylesheet" href="tech.css">
</head>

<header>
Expand All @@ -28,45 +18,51 @@


<body>

<h1> Bonjour, ici ça parle technique...</h1>

Dans cet espace tech, je partage certaines astuces, sous la forme de petit tuto.
Ces astuces sont presque toujours inspirée par d'autres ressources issues d'internet.
Dans chaque tuto, je pointe vers les ressources utilisées
<a href="https://en.wikipedia.org/wiki/Standing_on_the_shoulders_of_giants"> (#surLesÉpaulesDeGéants)</a>.

<h3> Nouveau post :</h3>

<a href="tech-pourquoi.html" style="text-decoration: none; color: #444;">
<div style="padding:5px;max-width:500px;height:100px;border:none;background-color:#6666CC99;">
<h4 style=" margin: 0px; padding: 0px;">Une site web sur la photographie: pourquoi ? </h4>
[2020-0x-0x]
<div class="body">
<h1 style=" margin: 0"> Bonjour à toi, </h1>
<h2 style="margin:0"> ici on parle technique... </h2>
<br>
Dans ce premier post, ...
</div>
</a>

<h3> Anciens posts : </h3>

<h3> Comment mimer une exposition longue sans filtre ? </h3>

TODO

<h3> Post-processing avec des logiciels libres: pourquoi et comment? </h3>

TODO

<h3> Post-processing avec des logiciels libres: pourquoi et comment? </h3>

TODO


* Ce site web statique est l'occasion d'apprendre à utiliser HTML et CSS.
* Longue exposition - average
* Darktable


Dans cet espace tech, je partage certaines astuces, sous la forme de petit tuto ou de billet d'humeur.
Ces astuces sont presque toujours inspirée par d'autres ressources issues d'internet.
Dans chaque tuto, je pointe vers les ressources utilisées.
<a class="lien" href="https://en.wikipedia.org/wiki/Standing_on_the_shoulders_of_giants"> (#surLesÉpaulesDeGéants)</a>.

<h3> Nouveau post :</h3>

<a class="lien" href="tech-pourquoi.html">
<div class = "linkbox"">
<h4 style=" margin: 0px; padding: 0px;">Un site sur la photographie, encore ? </h4>
Comme l'a dit Cédric Villani, enseigner, c'est la meilleure méthode pour apprendre.
C'est également l'occasion d'apprendre à créer un site web.
<br>
<div class="date">(14 juillet 2020) </div>
</div>
</a>

<h3> Anciens posts : </h3>

Sois patients, il y a plus de posts à venir...
<!--
<h3> Comment mimer une exposition longue sans filtre ? </h3>
TODO
<h3> Post-processing avec des logiciels libres: pourquoi et comment? </h3>
TODO
<h3> Post-processing avec des logiciels libres: pourquoi et comment? </h3>
TODO
* Ce site web statique est l'occasion d'apprendre à utiliser HTML et CSS.
* Longue exposition - average
* Darktable
-->
</div>
</body>

<footer>
Expand Down

0 comments on commit c1076be

Please sign in to comment.