Compare commits

..

3 Commits

9 changed files with 45 additions and 44 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 718 KiB

View File

@ -8,7 +8,7 @@ languageCode: fr-fr
languageName: Français languageName: Français
watch: true watch: true
paginate: 9 paginate: 9
title: Billets à la mer title: Le blog de Quentin (Chosto)
permalinks: permalinks:
# All pages under posts section will have this link structure # All pages under posts section will have this link structure
@ -21,6 +21,8 @@ markup:
renderer: renderer:
# Render newlines as <br> # Render newlines as <br>
hardWraps: true hardWraps: true
# Render HTML in MD files, necessary for superscript
unsafe: true
tableOfContents: tableOfContents:
endLevel: 3 endLevel: 3
ordered: false ordered: false

View File

@ -1,4 +1,4 @@
--- ---
title: Billets à la mer title: Mon carnet web
subtitle: Pensées d'un ingénieur qui voulait être humain subtitle: Quelques pensées à la mer cherchant chemin
--- ---

View File

@ -9,26 +9,26 @@ menu: end
Avant, j'avais les cheveux longs. Avant, j'avais les cheveux longs.
{{<figure src="/me.jpg" width="450px" title="Moi en plein ménage et en pleine forme">}} {{<figure src="/me.jpg" width="450px" title="Un lendemain de fête dans ma prime jeunesse">}}
Depuis que les golfes me gagnent, je les ai coupé et je ressemble à quelqu'un qui va pitcher une application basée sur la blockchain. Depuis que les golfes me gagnent, je m'amuse à faire plein de coupes rigolotes pour le plus grand plaisir de mon entourage.
Je m'appelle Quentin, j'ai 26 ans et j'ai fait des études d'informatique. L'informatique m'a fascinée étant petit. Elle me fascine toujours, mais dans la mesure où elle aide à construire des Communs émancipateurs. Car de l'eau a coulé sous les ponts, et [le capitalisme de surveillance, le technosolutionnisme et la gouvernance algorithmique](https://tube.picasoft.net/videos/watch/d3476d5d-2314-40e9-a971-88b4a71ba306) me donnent furieusement envie de changer de métier. En attendant, j'essaye de travailler sur des projets qui permettent aux gens de gagner en autonomie et de redécentraliser/reterritorialiser le numérique. Je m'appelle Quentin, j'ai 26 ans et j'ai fait des études d'informatique. L'informatique m'a fascinée étant petit. Je l'aime de moins en moins. Car de l'eau a coulé sous les ponts, et [le capitalisme de surveillance, le technosolutionnisme et la gouvernance algorithmique](https://tube.picasoft.net/videos/watch/d3476d5d-2314-40e9-a971-88b4a71ba306) me donnent furieusement envie de changer de métier. Je l'aime encore quand elle aide à construire des Communs émancipateurs. Alors, en attendant, j'essaye de travailler sur des projets qui redonnent de l'autonomie et qui redécentralisent/reterritorialisent le numérique.
J'ai beaucoup traîné chez [Picasoft](https://picasoft.net/), une association d'éducation populaire qui sensibilise les citoyen·ne·s aux enjeux du numérique et qui héberge des services web libres. N'hésitez pas à les contacter, iels sont chouettes. 😄 Je traîne par exemple chez [Picasoft](https://picasoft.net/), une association d'éducation populaire qui sensibilise les citoyen·ne·s aux enjeux du numérique et qui héberge des services web libres. N'hésitez pas à les contacter, iels sont chouettes. 😄
J'aime beaucoup la musique et je joue du piano. Il m'arrive d'essayer de jouer et composer des trucs que je mets sur [ma chaîne Funkwhale](https://music.chosto.me/@Chosto/) et mon [instance PeerTube](https://tube.chosto.me/). J'aime beaucoup la musique et je joue du piano. Il m'arrive d'essayer de jouer et composer des trucs que je mets sur [ma chaîne Funkwhale](https://music.chosto.me/@Chosto/) et mon [instance PeerTube](https://tube.chosto.me/).
J'aime la fête et les câlins consentis. J'aime les relations humaines dans leur diversité et les câlins consentis. J'en parlerai un jour tant c'est important pour moi (les relations).
Je voulais avoir un blog depuis longtemps mais je ne me sentais pas légitime. Mais comme on est sur le web et que je ne vole de temps à personne, et bien, pourquoi pas...? Je voulais avoir un blog depuis longtemps mais je ne me sentais pas légitime. Mais comme on est sur le web et que je ne vole de temps à personne, et bien, pourquoi pas ? Je rêve que tous les gens que j'aime aient leur petit coin de web à aller visiter de temps à autre 😚.
## Côté technique ## Côté technique
Je suis très mauvais en développement web, mais je voulais essayer de bricoler quelque chose sans utiliser un thème tout fait. Ce blog a donc été construit en utilisant [Hugo](https://gohugo.io/), un générateur de site web statique dont j'aime la syntaxe et la documentation. Le système de template est très élégant et permet de se passer des langages dynamiques, inutiles pour un blog. Je crois que pas mal de monde préfère Zola à Hugo, et c'est possible que ce soit moins alambiqué. Je suis très mauvais en développement web, mais je voulais essayer de bricoler quelque chose sans utiliser un thème tout fait. Ce blog a donc été construit en utilisant [Hugo](https://gohugo.io/), un générateur de site web statique dont j'aime la syntaxe et la documentation. Le système de template est très élégant et permet de se passer des langages dynamiques, inutiles pour un blog. Je crois que pas mal de monde préfère Zola à Hugo, et c'est possible que ce soit moins alambiqué.
Pour la mise en page, j'ai utilisé [Bulma](https://bulma.io) . Merci aux copain·e·s de [42l](https://42l.fr) de me l'avoir fait découvrir. C'est un framework CSS léger et sans une ligne de JavaScript, qui tire profit des `flexbox`. Son utilisation est extrêmement simple et je suis content du résultat. Pour la mise en page, j'ai utilisé [Bulma](https://bulma.io) . Merci aux copaines de [la Contre-Voie](https://lacontrevoie.fr/) de me l'avoir fait découvrir. C'est un framework CSS léger et sans une ligne de JavaScript, qui tire profit des `flexbox`. Son utilisation est extrêmement simple et je suis content du résultat.
Le site est hébergé sur un VPS loué chez Scaleway. Aucun cookie n'est déposé, aucune ligne de JavaScript n'est utilisée (sauf pour ouvrir le menu sur mobile : ami·e·s développeur·ses, aidez moi), et les adresses IP des visiteur·se·s ne sont pas conservées. Le site est hébergé sur un VPS loué chez Scaleway. Aucun cookie n'est déposé, aucune ligne de JavaScript n'est utilisée (sauf pour ouvrir le menu sur mobile : ami·es développeur·ses, aidez moi), et les adresses IP des visiteur·ses ne sont pas conservées.
J'ai encore du travail sur l'accessibilité et sur les flux RSS. J'ai encore du travail sur l'accessibilité.

View File

@ -3,7 +3,7 @@ title: Le dernier bus
date: 2021-12-10 date: 2021-12-10
categories: categories:
- Fiction - Fiction
summary: "Contrainte : ne pas être un gros techno-cynique 😛 (« zone d'inconfort »)." summary: "Nouvelle avec contrainte : ne pas être techno-cynique 😛 (« zone d'inconfort »)."
imgLicence: "« Steaming Water » by SidPix - CC BY 2.0" imgLicence: "« Steaming Water » by SidPix - CC BY 2.0"
intro: Le CID (Cercle des Ingénieurs Disparus) est une asso d'écriture plein de gens chouettes que j'ai rejointe ce semestre. Chaque semaine, on écrit des trucs ensemble. Je commence tout juste. J'adore lire ce qu'écrivent mes ami·es du CID, et j'aime l'idée d'avoir ce petit bout du web pour jeter des textes à la mer, alors j'ai décidé de les poster ici. Cette semaine, l'objectif était de sortir de sa « zone de confort », et j'ai donc eu pour contrainte de ne pas axer mon texte autour d'une critique de la technologie, puisque le peu de textes que j'ai écrits jusqu'à maintenant tournaient quand même pas mal autour de ce thème. intro: Le CID (Cercle des Ingénieurs Disparus) est une asso d'écriture plein de gens chouettes que j'ai rejointe ce semestre. Chaque semaine, on écrit des trucs ensemble. Je commence tout juste. J'adore lire ce qu'écrivent mes ami·es du CID, et j'aime l'idée d'avoir ce petit bout du web pour jeter des textes à la mer, alors j'ai décidé de les poster ici. Cette semaine, l'objectif était de sortir de sa « zone de confort », et j'ai donc eu pour contrainte de ne pas axer mon texte autour d'une critique de la technologie, puisque le peu de textes que j'ai écrits jusqu'à maintenant tournaient quand même pas mal autour de ce thème.
notoc: true notoc: true

View File

@ -37,8 +37,8 @@
{{ if .Params.Title }} {{ if .Params.Title }}
<div class="message is-info"> <div class="message is-info">
<div class="message-body content"> <div class="message-body content">
Le post que vous lisez fait partie du dossier « <a href="{{ .Permalink }}">{{ .Params.Title }}</a> ». Le Le billet que vous lisez fait partie du dossier « <a href="{{ .Permalink }}">{{ .Params.Title }}</a> ». Le
menu sur la gauche permet de naviguer entre ses billets. Bonne lecture ! 😄 menu sur la gauche permet de naviguer entre ses parties. Bonne lecture ! 😄
</div> </div>
</div> </div>
{{ end }} {{ end }}

View File

@ -16,6 +16,7 @@
{{ $image = . }} {{ $image = . }}
{{ end }} {{ end }}
{{ $image = $image.Resize "3000x" }} {{ $image = $image.Resize "3000x" }}
{{ $image := $image | images.Filter (images.GaussianBlur 7) }}
<!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system --> <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
<style> <style>
.has-bg-img { .has-bg-img {

View File

@ -3,8 +3,7 @@
<!-- Display background only for regular pages, or home --> <!-- Display background only for regular pages, or home -->
{{ $background := in "page home" .Kind }} {{ $background := in "page home" .Kind }}
<header> <header>
<section class='hero has-text-centered {{ if $background }}is-large is-info has-bg-img{{ end }}'> <section class='hero has-text-centered {{ if $background }}is-medium is-info has-bg-img{{ end }}'>
<div class="blur">
<div class="hero-head mx-5"> <div class="hero-head mx-5">
<div class="level mt-4"> <div class="level mt-4">
<div class="level-left"> <div class="level-left">
@ -19,17 +18,16 @@
{{ with .Params.categories }} {{ with .Params.categories }}
<div class="tags colums is-vcentered"> <div class="tags colums is-vcentered">
{{ range . }} {{ range . }}
<span class="tag is-info is-light is-large mr-4"><a href="{{ " categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span> <span class="tag is-info is-light is-large mr-4"><a
href="{{ " categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="hero-body {{ if not $background }}pb-0{{ end }} container has-text-centered"> <div class="hero-body {{ if not $background }}pb-0{{ end }} container has-text-centered">
<p class="title is-size-1-desktop is-size-3-mobile is-uppercase">{{ .Title }}</p> <p class="title is-size-1-desktop is-size-3-mobile">{{ .Title }}</p>
{{ with .Params.subtitle }} {{ with .Params.subtitle }}
<p class="mt-5 subtitle is-size-2-desktop is-size-5-mobile">{{ . }}</p> <p class="mt-5 subtitle is-size-2-desktop is-size-5-mobile">{{ . }}</p>
{{ end }} {{ end }}
@ -41,14 +39,17 @@
<div class="level-left"> <div class="level-left">
<div class="level-item has-text-left"> <div class="level-item has-text-left">
<time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}"> <time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
<p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">📅&nbsp;&nbsp;Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }}</strong></p> <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">📅&nbsp;&nbsp;Article publié le
<strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }}
{{ .Date.Year }}</strong></p>
</time> </time>
</div> </div>
</div> </div>
<div class="level-right"> <div class="level-right">
<div class="level-item has-text-right"> <div class="level-item has-text-right">
<div> <div>
<p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">🕑&nbsp;&nbsp;Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">🕑&nbsp;&nbsp;Environ
<strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture
</p> </p>
</div> </div>
</div> </div>

View File

@ -9,11 +9,6 @@
font-display: swap; font-display: swap;
} }
/* Make the parent background blur under this element */
.blur {
backdrop-filter: blur(3px);
}
/* Trick which changes nothing visually but makes the footnote anchors /* Trick which changes nothing visually but makes the footnote anchors
virtually 40% lower. Otherwise the fixed navbar is just above the virtually 40% lower. Otherwise the fixed navbar is just above the
footnote link when going back from the bottom. That way, either footnote link when going back from the bottom. That way, either
@ -46,10 +41,12 @@ p:not(.title, .subtitle) {
font-size: 1rem; font-size: 1rem;
} }
figcaption h4 { figcaption h4, figcaption p {
margin-top: 10px; margin-top: 10px;
font-size: 1rem !important; font-size: 1rem !important;
font-weight: 400 !important; font-weight: 400 !important;
font-style: normal;
line-height: 1.5 !important;
} }
figure img { figure img {