Unverified Commit 223e8dea authored by berumuron's avatar berumuron
Browse files

Améliore le thème et la structure du blog

parent eb955e01
---
title: 2020
date: 2020-01-03 10:57
tags: featured
---
Mon année 2019 aura sans aucun doute été très riche sur le plan personnel.
......
---
title: 2021
date: 2021-01-16 19:11
tags: featured
---
L’année dernière, dans mon article « [2020](2020.html) », j’exprimais mon envie
......
Date: 2015-01-31 15:35
Title: FreshRSS un point zéro
Slug: freshrss-un-point-zero
Tags: php, freshrss
Tags: php, freshrss, featured
Summary: FreshRSS est le premier projet conséquent que j’ai porté. Initié en novembre 2012, la version 1.0 est sortie début 2015 seulement. J’annonçais peu après que je donnais les clés à la communauté pour reprendre le code [disponible sur GitHub](https://github.com/FreshRSS/FreshRSS). J’ai toutefois aujourd’hui toujours des idées pour l’améliorer.
Elle est là, enfin ! La version 1.0 de FreshRSS, meilleur agrégateur à auto-héberger au monde (du moins selon moi), est sortie.
......
......@@ -2,7 +2,7 @@
Date: 2018-05-01 16:00
Title: Ce qui nous pousse au Libre
Slug: ce-qui-nous-pousse-au-Libre
Tags: logiciel libre, réflexions
Tags: logiciel libre, réflexions, featured
Summary: Suite à la lecture d’un article de Maiwann sur comment réconcilier *designers* et logiciels libres, j’ai eu envie d’y répondre à travers une suite de plusieurs articles. Ce premier article revient sur mes motivations à faire du Libre en tant que développeur.
---
......
---
title: La low-tech existe-t-elle dans le numérique ?
date: 2020-03-08 10:30
tags: featured
---
Je développe une gêne croissante vis-à-vis de la notion de « _low-tech_ » en
......
---
title: Mon (futur) service de veille
date: 2019-07-12 11:30
tags: featured
---
J’ai [partagé](./questionnaire-agregateurs-dactualite.html) il y a quelque temps
......
---
title: null
blog: false
template: index
---
<main class="contenu-index">
<main class="contenu">
<div class="conteneur">
<section class="presentation" id="presentation">
<div class="presentation-bloc presentation-moi">
<h1>
Je suis Marien, ingénieur en informatique vivant à
Grenoble.
</h1>
</div>
<div class="presentation-bloc presentation-objectif">
<p>
Je me suis fixé comme objectif de <strong>réussir à vivre
correctement de ma propre activité liée au numérique</strong>.
Pour cela, je suis en train de créer <a
href="https://flus.fr">Flus</a>,
un portail de veille de l’actualité.
</p>
<p>
J’y tiens <a href="https://flus.fr/carnet/">un carnet</a>
dans lequel je consigne hebdomadairement des réflexions
liées à la mise en place du service.
</p>
</div>
</section>
<section class="competences" id="competences">
<h2>Ça m’intéresse</h2>
<div class="competences-liste">
<div class="competences-element competences-besoins-metiers">
<h3>Développer des logiciels simples, accessibles</h3>
<p>
Le développement est le cœur de mon métier. J’aime tout
particulièrement partir de zéro pour imaginer la
version la plus simple et accessible possible en termes
d’utilisabilité et de maintenance.
</p>
</div>
<div class="competences-element competences-developpement-logiciel">
<h3>Échanger au sein d’équipes pluri-disciplinaires</h3>
<p>
J’adore travailler avec des corps de métiers différents
du mien, en particulier quand ils ne sont pas liés à
l’informatique. Cela force à rester à l’écoute et
apprendre des autres tout en empruntant une direction
commune.
</p>
</div>
<div class="competences-element competences-partage-documentaire">
<h3>Imaginer un « autre » numérique</h3>
<p>
Je suis très sincèrement fatigué et exaspéré par le
monde que nous vendent les <a href="https://fr.wikipedia.org/wiki/GAFAM">GAFAM</a>.
Je suis persuadé que l’on peut imaginer et rendre
désirable un numérique plus sobre et humain, en tout
cas moins marchand.
</p>
</div>
</div>
</section>
<section class="contact" id="contact">
<p>Vous souhaitez me contacter ?</p>
<p>
<a class="appel-a-action" href="mailto:contact@marienfressinaud.fr">Envoyez-moi un courriel</a>
</p>
<p>
Vous pouvez aussi me suivre sur <a href="https://tutut.delire.party/@marien">Mastodon</a>
ou <a href="https://twitter.com/berumuron">Twitter</a>.
</p>
</section>
<section class="collectif" id="collectif">
<h2>Jouer collectif</h2>
<p>
La liste qui suit présente mes différents engagements actuels
au sein de collectifs. Si vous souhaitez plus de détails sur ce
qui m’occupe en ce moment, <a href="now.html">je maintiens une
page</a> à cet effet.
</p>
<div class="travail" id="framasoft">
<img class="travail-illustration" src="images/framasoft.png" alt="" />
<h3 class="travail-titre">Framasoft</h3>
<div class="travail-description">
<p>
J’ai rejoint l’association en 2015 lors du lancement de
la campagne <a href="https://degooglisons-internet.org/">Dégooglisons
Internet</a>. Le ton décalé de cette « bande de
potes » m’a séduit et j’y ai trouvé l’espace nécessaire
pour politiser ma vision d’un numérique positif et
accessible tout en ayant l’occasion de mettre en place
des actions concrètes.
</p>
<p>
<a href="https://framasoft.org">Accéder au site</a>
</p>
</div>
</div>
<div class="travail" id="sudweb">
<img class="travail-illustration" src="images/sudweb.png" alt="" />
<h3 class="travail-titre">Sud Web</h3>
<div class="travail-description">
<p>
J’ai rejoint l’organisation de Sud Web pour préparer
l’édition 2019. C’est l’esprit des participant·es qui
m’a convaincu qu’il s’agissait d’un évènement unique et
que c’était l’occasion de contribuer différemment. Il
s’agit d’une première expérience (positive !) de ce
type pour ma part.
</p>
<p>
<a href="https://sudweb.fr">Accéder au site</a>
</p>
</div>
</div>
<div class="travail" id="grenopolitains">
<img class="travail-illustration" src="images/grenopolitains.png" alt="" />
<h3 class="travail-titre">Grenopolitains</h3>
<div class="travail-description">
<p>
La plateforme des Grenopolitain·es est un espace de
démocratie participative qui souhaite faire émerger des
propositions pour la métropole grenobloise. J’ai
rapidement adhéré à l’esprit du projet, aligné avec
celui des « communs ». Le choix du logiciel (<a lang="es" href="https://decidim.org/">Decidim</a>)
a fini de me convaincre d’aider à mettre le site en
ligne.
</p>
<p>
<a href="https://grenopolitains.fr">Accéder au site</a>
</p>
</div>
</div>
</section>
<section class="projets" id="projets">
<h2>Des projets en veux-tu en voilà</h2>
<p>
Ce n’est pas vraiment un secret : j’ai tendance à redévelopper
dans mon coin des logiciels qui existent déjà ailleurs. Tant
pis, ça m’amuse et j’apprends des tas de choses au passage.
Petite sélection.
</p>
<div class="projets-liste">
<div class="projet">
<h3>FreshRSS</h3>
<p>
Sans doute mon projet le plus connu. Il s’agit d’un
agrégateur de flux <abbr>RSS</abbr> que j’ai commencé à
développer dans mon coin lorsque j’étais étudiant et qui a
acquis pas mal de visibilité et une communauté des plus
sympa ! J’essaye aujourd’hui d’en vivre à travers
<a href="https://flus.fr">mon service payant, Flus</a>.
</p>
<p>
<a href="https://freshrss.org">Accéder au site</a> – <a href="serie/freshrss.html">Lire la série</a>
</p>
</div>
<div class="projet">
<h3>Lessy</h3>
<p>
Lessy est un gestionnaire de temps, une sorte de
todo-list améliorée. J’ai mis plusieurs années avant
d’arriver à me lancer dans ce projet, mais il s’agit
sans doute aussi d’un des plus aboutis dans ma
réflexion. J’ai des tas d’idées pour continuer de
l’améliorer, mais je ne lui accorde pas assez de temps.
</p>
<p>
<a href="https://lessy.io">Accéder au site</a> – <a href="serie/lessy.html">Lire la série</a>
</p>
</div>
</div>
<div class="projets-liste">
<div class="projet">
<h3 lang="en">Boop!</h3>
<p>
Pour mon site, j’ai décidé de développer un générateur de
sites statiques taillé sur-mesure à mes besoins. Ça a donné
<em lang="en">Boop!</em> qui m’est aujourd’hui
indispensable. Ce n’est pas un projet très sérieux, mais
enfin il marche très bien.
</p>
<p>
<a href="https://framagit.org/marien.fressinaud/boop">Accéder au dépôt</a> – <a href="serie/le-boop-blog.html">Lire la série</a>
</p>
</div>
<div class="projet">
<h3 lang="en">BlueberryCamp</h3>
<p>
Il y a des tonnes de choses (des liens, du texte, des
mémos, des fichiers, etc.) que je ne sais jamais où ranger.
J’ai donc développé <em lang="en">BlueberryCamp</em> qui
est prévu pour stocker tout ça et permettre ensuite
d’organiser ce fatras de données.
</p>
<p>
<a href="https://framagit.org/marien.fressinaud/blueberrycamp">Accéder au dépôt</a>
</p>
</div>
<div class="projet">
<h3>Reflets</h3>
<p>
Développé pour Framasoft, l’idée derrière Reflets est
de mettre en avant les différents événements qui ont
marqué l’association pour obtenir une vue d’ensemble de
ce qu’il s’y passe. Il s’agit d’une première version
qui ne demande qu’à grandir.
</p>
<p>
<a href="https://framagit.org/marien.fressinaud/reflets">Accéder au dépôt</a>
</p>
</div>
</div>
</section>
<h1>Marien Fressinaud</h2>
<p>
Je suis ingénieur en informatique à Grenoble. J’aime concevoir et
développer des logiciels libres qui prennent soin de nous.
</p>
<p>
<strong>Je travaille actuellement sur <a href="https://flus.fr">Flus</a>,
un média social de veille.</strong>
</p>
<p>
Vous pouvez me contacter <a href="mailto:contact@marienfressinaud.fr">par
courriel</a>.
</p>
<hr />
<p>
<small><em>
<a href="blog.html">blog</a> · <a href="abonnement.html"><abbr>RSS</abbr></a> · <a href="mentions-legales.html">mentions légales</a>
</em></small>
</p>
</div>
</main>
......@@ -8,21 +8,15 @@ blog: true
<p>
Afin de suivre les publications <a href="blog.html">du blog</a>,
plusieurs flux Atom sont mis à disposition.
</p>
<p>
Les adresses qui suivent peuvent être copiées/collées directement dans
un agrégateur comme <a href="https://freshrss.org/">FreshRSS</a> (pour
en savoir plus, j’ai écrit <a href="serie/freshrss.html">une série
d’articles</a> qui relatent sa conception).
plusieurs flux sont mis à disposition. Les adresses qui suivent peuvent
être ajoutées dans un agrégateur de flux <abbr title="Really Simple Syndication">RSS</abbr>
comme <a href="https://freshrss.org/">FreshRSS</a>.
</p>
<h2>Liste des flux</h2>
<p>
Le flux principal : <a href="feeds/all.atom.xml">flux du blog</a>
(contenant l’ensemble des articles).
Flux des articles : <a href="feeds/all.atom.xml">flux du blog</a>
</p>
<p>
......@@ -38,25 +32,22 @@ blog: true
<li><a href="feeds/libres.atom.xml">Libres ?</a></li>
</ul>
<h2>Le saviez-vous ?</h2>
<p>
<i>
Note : la plupart des agrégateurs sont capables de trouver les flux
par eux-mêmes si vous leur donnez simplement l’<abbr>URL</abbr> de
la page sur laquelle vous vous trouvez.
</i>
Un flux <abbr>RSS</abbr> (ou flux Atom) est un fichier texte contenant
la liste des articles d’un blog, présentés dans un format particulier.
Ce fichier est déposé sur un serveur et peut être lu à intervales
réguliers par un programme qui agrége les articles de plusieurs flux.
L’utilisateur·ice d’un agrégateur de flux Atom et/ou <abbr>RSS</abbr>
est ainsi tenu au courant de la publication de nouveaux articles et
peut les lire directement depuis cet outil sans avoir à ouvrir tous les
sites qu’il ou elle souhaite suivre.
</p>
<h2>Le saviez-vous ?</h2>
<p>
Un flux Atom (ou flux <abbr title="Really Simple Syndication">RSS</abbr>)
est un fichier texte contenant la liste des articles d’un blog,
présentés dans un format particulier. Ce fichier est déposé sur un
serveur et peut être lu à intervales réguliers par un programme qui
agrége les articles de plusieurs flux. L’utilisateur·ice d’un
agrégateur de flux Atom et/ou <abbr>RSS</abbr> est ainsi tenu au
courant de la publication de nouveaux articles et peut les lire
directement depuis cet outil sans avoir à ouvrir tous les sites qu’il
ou elle souhaite suivre.
Note : la plupart des agrégateurs sont capables de trouver les flux
par eux-mêmes si vous leur donnez simplement l’<abbr>URL</abbr> de
la page sur laquelle vous vous trouvez.
</p>
</main>
......@@ -26,12 +26,9 @@ template: methodes
d’efforts pour être efficace ; ces méthodes ne dérogent pas à la règle.
</p>
<ul class="methodes">
<li class="methode"><a href="./cycles.html">Cycles de travail</a></li>
</ul>
<ul class="methodes">
<li class="methode"><a href="./pomodoro.html">Pomodoro</a></li>
<li class="methode"><a href="./pauses.html">Pauses</a></li>
<li class="methode"><a href="./retrospectives.html">Rétrospectives</a></li>
<ul>
<li><a href="./cycles.html">Cycles de travail</a></li>
<li><a href="./pomodoro.html">Pomodoro</a></li>
<li><a href="./pauses.html">Pauses</a></li>
<li><a href="./retrospectives.html">Rétrospectives</a></li>
</ul>
......@@ -26,6 +26,7 @@
--main-color: #2a2230;
--main-color-muted: #665e6c;
--secondary-color: #c02b43;
--secondary-color-shadow: #f7e4e8;
--link-color: #a6253a;
--contrast-color: #f8f6ff;
}
......@@ -37,6 +38,8 @@ body {
}
html {
height: 100%;
color: var(--main-color);
font-family: 'Source Serif Pro', serif;
font-size: 18px;
......@@ -180,11 +183,11 @@ pre code {
border: none;
}
.highlight pre {
pre.highlight {
background-color: #f8f8f8;
}
.highlight pre code {
pre.highlight code {
color: var(--main-color);
}
......@@ -258,12 +261,6 @@ a.appel-a-action:hover {
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 4rem;
background: linear-gradient(45deg, var(--secondary-color) 52vw,
var(--main-color) 52vw,
var(--main-color) calc(52vw + 2px),
transparent calc(52vw + 2px));
border-bottom: 4px solid var(--main-color);
}
.page > header .conteneur {
display: flex;
......@@ -272,14 +269,12 @@ a.appel-a-action:hover {
.page > header .conteneur .separateur {
flex-grow: 1;
}
.page > header a.accueil {
color: var(--contrast-color);
.page > header a {
color: var(--main-color);
font-size: 1.2rem;
text-decoration: none;
font-weight: bold;
}
.page > header a.active {
color: initial;
.page > header a.accueil {
font-weight: bold;
text-decoration: none;
}
......@@ -338,6 +333,9 @@ a.appel-a-action:hover {
padding-bottom: 4rem;
color: var(--contrast-color);
font-size: 0.9em;
text-align: center;
font-style: italic;
background-color: var(--secondary-color);
border-top: 4px solid var(--main-color);
......@@ -346,160 +344,34 @@ a.appel-a-action:hover {
.page > footer a {
color: var(--contrast-color);
}
.page > footer .conteneur {
display: flex;
flex-direction: column;
}
.page > footer .conteneur section {
margin-bottom: 2rem;
padding-left: .5rem;
padding-right: .5rem;
}
@media(min-width: 50rem) {
.page > footer .conteneur {
flex-direction: row;
}
.page > footer .conteneur section {
width: 33%;
}
.page > footer .conteneur .a-propos {
align-self: center;
}
}
/* Section page d'accueil */
@media(min-width: 70rem) {
.contenu-index h2 {
margin-bottom: 2rem;
text-align: center;
}
}
.contenu-index .presentation {
display: grid;
padding-top: 6rem;
padding-bottom: 6rem;
margin-top: -4rem;
}
.contenu-index .presentation-moi h1 {
font-size: 1rem;
line-height: 1.5rem;
}
@media(min-width: 70rem) {
.contenu-index .presentation {
padding-top: 8rem;
padding-bottom: 8rem;
grid-template-columns: 20rem 1fr;
}
.contenu-index .presentation-bloc {
padding-left: 2rem;
padding-right: 2rem;
}
.contenu-index .presentation-moi {
align-self: center;
}
}
.contenu-index .competences::before,
.contenu-index .competences::after {
display: block;
width: 50%;
border-top: 4px solid var(--secondary-color);
content: "";
}
.contenu-index .competences::before {
margin-bottom: 2rem;
}
.contenu-index .competences::after {
margin-top: 2rem;
}
.contenu-index .competences-element {
margin-bottom: 2rem;
}
.contenu-index .competences-element p {
font-size: .9rem;
}
@media(min-width: 70rem) {
.contenu-index .competences::before,
.contenu-index .competences::after {
width: 33%;
margin-right: auto;
margin-left: auto;
}
.contenu-index .competences-liste {
display: flex;
margin-top: 2rem;
margin-bottom: 2rem;
justify-content: space-between;
align-items: flex-start;
}
.contenu-index .competences-element {
width: 33%;
margin-bottom: 0;
}
.contenu-index .competences-element:nth-child(2) {
margin-left: 2rem;
margin-right: 2rem;
}
}
.contenu-index .contact {
padding-top: 6rem;
padding-bottom: 6rem;
text-align: center;
}
@media(min-width: 40rem) {
.contenu-index .contact {
padding-top: 8rem;
padding-bottom: 8rem;
}
}
.contenu-index .collectif {
margin-bottom: 5rem;
}
.contenu-index .travail {
display: grid;
margin-top: 3rem;
.page--index {
display: flex;
min-height: 100vh;
grid-template-columns: 25% 75%;
grid-template-rows: auto 1fr;
grid-template-areas:
"illustration title"
"illustration description";
flex-direction: column;
justify-content: center;
}
.contenu-index .travail-illustration {
padding-right: 1rem;