davidbgk
/
larlet-fr-david
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
Quellcode durchsuchen

Setup a new cozy home

master
David Larlet vor 4 Jahren
Ursprung
1796d79bce
Commit
2d3bf324c3
Es konnte kein GPG-Schlüssel zu dieser Signatur gefunden werden
2 geänderte Dateien mit 70 neuen und 772 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 43
    730
      david/index.html
  2. 27
    42
      david/templates/profil.html

+ 43
- 730
david/index.html Datei anzeigen

@@ -1,751 +1,64 @@
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Introduction — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
<title>Accueil — David Larlet</title>
<!-- Lightest blank gif, avoids an extra query to the server. -->
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<!-- Thank you Florens! -->
<link rel="stylesheet" href="/static/david/css/style_2020-01-03.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" crossorigin>
<body class="remarkdown h1-underline h2-underline hr-center ul-star">

<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://larlet.fr/david/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
font-family: 'EquityTextB';
src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'EquityTextB';
src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'EquityTextB';
src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'ConcourseT3';
src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
/* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
font-family: "EquityTextB", Palatino, serif;
background-color: #f0f0ea;
color: #07486c;
font-kerning: normal;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizeLegibility;
font-variant-ligatures: common-ligatures contextual;
font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
font-family: 'TriplicateT4c', monospace;
}
em {
font-style: italic;
color: #323a45;
}
strong {
font-weight: bold;
color: black;
}
nav {
background-color: #323a45;
color: #f0f0ea;
display: flex;
justify-content: space-around;
padding: 1rem .5rem;
}
nav:last-child {
border-bottom: 1vh solid #2d7474;
}
nav a {
color: #f0f0ea;
}
nav abbr {
border-bottom: 1px dotted white;
}

h1 {
border-top: 1vh solid #2d7474;
border-bottom: .2vh dotted #2d7474;
background-color: #e3e1e1;
color: #323a45;
text-align: center;
padding: 5rem 0 4rem 0;
width: 100%;
font-family: 'ConcourseT3';
display: flex;
flex-direction: column;
}
h1.single {
padding-bottom: 10rem;
}
h1 span {
position: absolute;
top: 1vh;
left: 20%;
line-height: 0;
}
h1 span a {
line-height: 1.7;
padding: 1rem 1.2rem .6rem 1.2rem;
border-radius: 0 0 6% 6%;
background: #2d7474;
font-size: 1.3rem;
color: white;
text-decoration: none;
}
h2 {
margin: 4rem 0 1rem;
border-top: .2vh solid #2d7474;
padding-top: 1vh;
}
h3 {
text-align: center;
margin: 3rem 0 .75em;
}
hr {
height: .4rem;
width: .4rem;
border-radius: .4rem;
background: #07486c;
margin: 2.5rem auto;
}
time {
display: bloc;
margin-left: 0 !important;
}
ul, ol {
margin: 2rem;
}
ul {
list-style-type: square;
}
a {
text-decoration-skip-ink: auto;
text-decoration-thickness: 0.05em;
text-underline-offset: 0.09em;
}
article {
max-width: 50rem;
display: flex;
flex-direction: column;
margin: 2rem auto;
}
article.single {
border-top: .2vh dotted #2d7474;
margin: -6rem auto 1rem auto;
background: #f0f0ea;
padding: 2rem;
}
article p:last-child {
margin-bottom: 1rem;
}
p {
padding: 0 .5rem;
margin-left: 3rem;
}
p + p,
figure + p {
margin-top: 2rem;
}

blockquote {
background-color: #e3e1e1;
border-left: .5vw solid #2d7474;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
margin: 1.5rem;
}
blockquote cite {
font-style: italic;
}
blockquote p {
margin-left: 0;
}

figure {
border-top: .2vh solid #2d7474;
background-color: #e3e1e1;
text-align: center;
padding: 1.5rem 0;
margin: 1rem 0 0;
font-size: 1.5rem;
width: 100%;
}
figure img {
max-width: 250px;
max-height: 250px;
border: .5vw solid #323a45;
padding: 1px;
}
figcaption {
padding: 1rem;
line-height: 1.4;
}
aside {
display: flex;
flex-direction: column;
background-color: #e3e1e1;
padding: 1rem 0;
border-bottom: .2vh solid #07486c;
}
aside p {
max-width: 50rem;
margin: 0 auto;
}

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
font-size: 1rem;
line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
font-size: 1.9rem;
line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
font-size: 1.6rem;
line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
font-size: 1.35rem;
line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
/* The (100vw - 20rem) / (50 - 20) part
resolves to 0-1rem, depending on the
viewport width (between 20em and 50em). */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
margin-left: 0;
}
h1 {
font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
}
h2 {
font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
}
h3 {
font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
}
}
@media (min-width: 50em) {
/* The right part of the addition *must* be a
rem value. In this example we *could* change
the whole declaration to font-size:2.5rem,
but if our baseline value was not expressed
in rem we would have to use calc. */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
font-size: calc( 1rem + .6 * 1rem );
line-height: 1.5em;
}
p, li, pre, details {
margin-left: 3rem;
}
h1 {
font-size: calc( 1.9rem + 1.5 * 1rem );
line-height: 1.2em;
}
h2 {
font-size: calc( 1.5rem + 1.5 * 1rem );
line-height: 1.3em;
}
h3 {
font-size: calc( 1.35rem + 1.5 * 1rem );
line-height: 1.4em;
}
figure img {
max-width: 500px;
max-height: 500px;
}
}

figure.unsquared {
margin-bottom: 1.5rem;
}
figure.unsquared img {
height: inherit;
}



@media print {
body { font-size: 100%; }
a:after { content: " (" attr(href) ")"; }
a, a:link, a:visited, a:after {
text-decoration: underline;
text-shadow: none !important;
background-image: none !important;
background: white;
color: black;
}
abbr[title] { border-bottom: 0; }
abbr[title]:after { content: " (" attr(title) ")"; }
img { page-break-inside: avoid; }
@page { margin: 2cm .5cm; }
h1, h2, h3 { page-break-after: avoid; }
p3 { orphans: 3; widows: 3; }
img {
max-width: 250px !important;
max-height: 250px !important;
}
nav, aside { display: none; }
}
<article>
<h1>Bienvenue</h1>

ul.with_columns {
column-count: 1;
}
@media (min-width: 20em) {
ul.with_columns {
column-count: 2;
}
}
@media (min-width: 50em) {
ul.with_columns {
column-count: 3;
}
}
ul.with_two_columns {
column-count: 1;
}
@media (min-width: 20em) {
ul.with_two_columns {
column-count: 1;
}
}
@media (min-width: 50em) {
ul.with_two_columns {
column-count: 2;
}
}
<p>
Voici l’espace personnel de David Larlet sur le Web.
Il se veut modeste, accueillant et pérenne.
Il fixe mes pensées et parfois engage des échanges.
Je vous souhaite une jolie promenade.
</p>

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.gallery figure img {
margin-left: 1rem;
margin-right: 1rem;
}
.gallery figure figcaption {
font-family: 'ConcourseT3'
}
<p lang="en">
<em>
For an English profile, check out <a href="http://larlet.com">this page</a>.
</em>
</p>

footer {
font-family: 'ConcourseT3';
display: flex;
flex-direction: column;
border-top: 3px solid white;
padding: 4rem 0;
background-color: #07486c;
color: white;
}
footer > * {
max-width: 50rem;
margin: 0 auto;
}
footer a {
color: #f1c40f;
}
footer .avatar {
width: 200px;
height: 200px;
border-radius: 50%;
float: left;
-webkit-shape-outside: circle();
shape-outside: circle();
margin-right: 2rem;
padding: 2px 5px 5px 2px;
background: white;
border-left: 1px solid #f1c40f;
border-top: 1px solid #f1c40f;
border-right: 5px solid #f1c40f;
border-bottom: 5px solid #f1c40f;
}
</style>
<h2>Publication récentes</h2>

<h1>
<span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
Un espace d’échanges et de liens
</h1>

<article>
<h2>Vision</h2>
<ul>
<li><a href="/david/2020/01/03/">Briques</a></li>
</ul>

<p>Permettre au Web d’être un espace de reliance entre les savoirs, d’échanges entre les individus et de résilience des supports de connaissance.</p>

<h2>Mission</h2>
<h2>Publications anciennes</h2>

<p>Partager des réflexions et des liens de façon pérenne. Consigner le récit d’expériences personnelles afin d’inspirer de nouvelles actions. Explorer des territoires de publication et d’échanges.</p>
<ul>
<li><a href="/david/blog/">Blog</a> (2004-2019)</li>
<li><a href="/david/stream/">Stream</a> (2009-2019)</li>
</ul>

<h2>Objectifs</h2>

<ul>
<li>Publier <a href="/david/stream/2019/">hebdomadairement</a> sur des sujets plus ou moins techniques</li>
<li>Croiser des <a href="/david/blog/">réflexions</a> plus profondes de manière épisodique</li>
<li>Raconter des histoires (<a href="http://scopyleft.fr/">scopyleft</a>, <a href="/david/talks/" data-no-instant>conférences</a>, parentalité)</li>
<li>Partager des expériences (<a href="/david/bushcraft/">bushcraft</a>, <a href="/david/pro/enseignement/">enseignement</a>)</li>
<li>Papoter <a href="https://mastodon.social/@dav" title="Aller voir mes pouets sur mastodon" rel="me">à l’extérieur</a> aussi parce que des fois ça fait du bien 🤗</li>
</ul>
</article>
<aside>
<article>
<h2>Motivations actuelles</h2>
<h3>Créer des liens</h3>
<p>
Ce monde est un graphe orienté de relations, <em>comme le Web</em>. J’aime l’enrichir en tissant des liens et en faisant des rencontres. Ce n’est pas tant pour la beauté du réseau que pour la richesse des relations humaines que cela produit.
</p>
<h3>Échanger des savoirs</h3>
<p>
Savoir-faire, savoir-être, savoir-vivre. <em>Ensemble.</em> Co-construire un monde de saveurs fondées sur des savoirs. Savoir transmettre pour apprendre, savoir écouter pour s’enrichir. Respecter son prochain pour ses savoirs, ses expériences et ses cultures. Pour son énergie.
</p>
<h3>Partager des moments</h3>
<p>
Il y a des moments qui arrêtent le temps. <em>En toute simplicité.</em> Il faut savoir les déguster et les encourager. Ces instants suspendus sont l’un des moteurs de mon bonheur. Et si nous partagions un moment ensemble ?
</p>
</article>
</aside>
<nav id="jumpto"></nav>
<hr>

<nav>
<a href="/david/" title="Aller à l’accueil">🏠</a> •
<a href="/david/log/" title="Accès au flux RSS">🤖</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
<abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
</nav>

<footer>
<div>
<img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
<p>
Bonjour/Hi!
Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
</p>
<p>
Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
</p>
<p>
Les dernières publications hebdomadaires sont :
</p>
<ul class="with_columns">
<li>
<a href="/david/stream/2019/12/31/">Merci</a>
</li>
<li>
<a href="/david/stream/2019/12/27/">Intemporels</a>
</li>
<li>
<a href="/david/stream/2019/12/24/">Outils</a>
</li>
<li>
<a href="/david/stream/2019/12/17/">Origines</a>
</li>
<li>
<a href="/david/stream/2019/12/10/">Publier</a>
</li>
<li>
<a href="/david/stream/2019/12/03/">En forêt</a>
</li>
<li>
<a href="/david/stream/2019/11/26/">Ecocentric</a>
</li>
<li>
<a href="/david/stream/2019/11/19/">Se livrer</a>
</li>
<li>
<a href="/david/stream/2019/11/12/">Dépendances</a>
</li>
<li>
<a href="/david/stream/2019/11/05/">Positif</a>
</li>
<li>
<a href="/david/stream/2019/10/29/">Dettes</a>
</li>
<li>
<a href="/david/stream/2019/10/22/">Privilèges</a>
</li>
<li>
<a href="/david/stream/2019/10/15/">Discrétion</a>
</li>
<li>
<a href="/david/stream/2019/10/08/">Désespérance</a>
</li>
<li>
<a href="/david/stream/2019/10/01/">Présent</a>
</li>
<li>
<a href="/david/stream/2019/09/24/">Manifester</a>
</li>
<li>
<a href="/david/stream/2019/09/17/">Arpenter</a>
</li>
<li>
<a href="/david/stream/2019/09/10/">Nostalgie</a>
</li>
<li>
<a href="/david/stream/2019/09/03/">Déconstruire</a>
</li>
<li>
<a href="/david/stream/2019/08/27/">Documenter</a>
</li>
<li>
<a href="/david/stream/2019/08/20/">Frustration</a>
</li>
<li>
<a href="/david/stream/2019/08/13/">Holisme</a>
</li>
<li>
<a href="/david/stream/2019/08/06/">1%</a>
</li>
<li>
<a href="/david/stream/2019/07/30/">Exemplarité</a>
</li>
<li>
<a href="/david/stream/2019/07/23/">Timelines</a>
</li>
<li>
<a href="/david/stream/2019/07/16/">Écoute</a>
</li>
<li>
<a href="/david/stream/2019/07/02/">Anxiété</a>
</li>
<li>
<a href="/david/stream/2019/06/21/">À lier</a>
</li>
<li>
<a href="/david/stream/2019/06/14/">Pauvreté</a>
</li>
<li>
<a href="/david/stream/2019/06/07/">Amateur</a>
</li>
<li>
<a href="/david/stream/2019/05/31/">Pollution</a>
</li>
<li>
<a href="/david/stream/2019/05/24/">Apaisement</a>
</li>
<li>
<a href="/david/stream/2019/05/10/">Folie</a>
</li>
<li>
<a href="/david/stream/2019/05/03/">Sympathie</a>
</li>
<li>
<a href="/david/stream/2019/04/12/">Péremption</a>
</li>
<li>
<a href="/david/stream/2019/04/05/">Définitions</a>
</li>
<li>
<a href="/david/stream/2019/03/29/">Acceptation</a>
</li>
<li>
<a href="/david/stream/2019/03/22/">Dissonance</a>
</li>
<li>
<a href="/david/stream/2019/03/15/">Reconnaissance</a>
</li>
<li>
<a href="/david/stream/2019/03/08/">Lecture</a>
</li>
<li>
<a href="/david/stream/2019/03/01/">Journaux</a>
</li>
<li>
<a href="/david/stream/2019/02/22/">Écriture</a>
</li>
<li>
<a href="/david/stream/2019/02/15/">Kyriarchie</a>
</li>
<li>
<a href="/david/stream/2019/02/08/">Mots-serrures</a>
</li>
<li>
<a href="/david/stream/2019/02/01/">Sans voie</a>
</li>
<li>
<a href="/david/stream/2019/01/25/">Auto-diagnostic</a>
</li>
<li>
<a href="/david/stream/2019/01/18/">Agilité</a>
</li>
<li>
<a href="/david/stream/2019/01/11/">Métaphores</a>
</li>
<li>
<a href="/david/stream/2019/01/04/">Balbutiements</a>
</li>
</ul>
<p>
Voici quelques articles choisis :
<a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
<a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
<a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
<a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
<a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
<a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
<a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
<a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
<a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
<a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
<a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
<a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
<a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
<a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
<a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
</p>
<p>
On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
</p>
<p>
Je ne traque pas ta navigation mais mon
<abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
conserve des logs d’accès.
</p>
</div>
</footer>
<script type="text/javascript">
;(_ => {
const jumper = document.getElementById('jumper')
jumper.addEventListener('click', e => {
e.preventDefault()
const anchor = e.target.getAttribute('href')
const targetEl = document.getElementById(anchor.substring(1))
targetEl.scrollIntoView({behavior: 'smooth'})
})
})()
</script>
</body>
</html>

+ 27
- 42
david/templates/profil.html Datei anzeigen

@@ -1,50 +1,35 @@
{% extends "base_2019.html" %}
{% block title %}Introduction{% endblock %}
{% block extra_head %}
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://larlet.fr/david/">
{% endblock %}
{% extends "base_2020.html" %}
{% block lang %}fr{% endblock %}
{% block title %}Accueil{% endblock %}
{% block content %}
<h1>
<span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
Un espace d’échanges et de liens
</h1>

<article>
<h2>Vision</h2>
<h1>Bienvenue</h1>

<p>Permettre au Web d’être un espace de reliance entre les savoirs, d’échanges entre les individus et de résilience des supports de connaissance.</p>
<p>
Voici l’espace personnel de David Larlet sur le Web.
Il se veut modeste, accueillant et pérenne.
Il fixe mes pensées et parfois engage des échanges.
Je vous souhaite une jolie promenade.
</p>

<h2>Mission</h2>
<p lang="en">
<em>
For an English profile, check out <a href="http://larlet.com">this page</a>.
</em>
</p>

<p>Partager des réflexions et des liens de façon pérenne. Consigner le récit d’expériences personnelles afin d’inspirer de nouvelles actions. Explorer des territoires de publication et d’échanges.</p>
<h2>Publication récentes</h2>

<h2>Objectifs</h2>
{% for page in page_list %}
<ul>
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
</ul>
{% endfor %}

<ul>
<li>Publier <a href="/david/stream/2019/">hebdomadairement</a> sur des sujets plus ou moins techniques</li>
<li>Croiser des <a href="/david/blog/">réflexions</a> plus profondes de manière épisodique</li>
<li>Raconter des histoires (<a href="http://scopyleft.fr/">scopyleft</a>, <a href="/david/talks/" data-no-instant>conférences</a>, parentalité)</li>
<li>Partager des expériences (<a href="/david/bushcraft/">bushcraft</a>, <a href="/david/pro/enseignement/">enseignement</a>)</li>
<li>Papoter <a href="https://mastodon.social/@dav" title="Aller voir mes pouets sur mastodon" rel="me">à l’extérieur</a> aussi parce que des fois ça fait du bien 🤗</li>
</ul>
</article>
<aside>
<article>
<h2>Motivations actuelles</h2>
<h3>Créer des liens</h3>
<p>
Ce monde est un graphe orienté de relations, <em>comme le Web</em>. J’aime l’enrichir en tissant des liens et en faisant des rencontres. Ce n’est pas tant pour la beauté du réseau que pour la richesse des relations humaines que cela produit.
</p>
<h3>Échanger des savoirs</h3>
<p>
Savoir-faire, savoir-être, savoir-vivre. <em>Ensemble.</em> Co-construire un monde de saveurs fondées sur des savoirs. Savoir transmettre pour apprendre, savoir écouter pour s’enrichir. Respecter son prochain pour ses savoirs, ses expériences et ses cultures. Pour son énergie.
</p>
<h3>Partager des moments</h3>
<p>
Il y a des moments qui arrêtent le temps. <em>En toute simplicité.</em> Il faut savoir les déguster et les encourager. Ces instants suspendus sont l’un des moteurs de mon bonheur. Et si nous partagions un moment ensemble ?
</p>
</article>
</aside>
<nav id="jumpto"></nav>
<h2>Publications anciennes</h2>

<ul>
<li><a href="/david/blog/">Blog</a> (2004-2019)</li>
<li><a href="/david/stream/">Stream</a> (2009-2019)</li>
</ul>
{% endblock content %}

Verfassen Vorschau
Laden…
Abbrechen
Speichern