Mon carnet ecrit

La grande histoire du carnet

introduction

Derrière les pages

Mes pages voyagent partout où l'esprit s'égare. Depuis des années, je recueille, j'enregistre et je veille sur des idées dispersées, des centaines de traces laissées au fil du temps.

Trop de pensées pour les contenir

Les pensées s'accumulent, jour après jour, sans jamais disparaître vraiment. Elles se superposent, se fragmentent, se transforment en bruits de fond. Avec le temps, elles alourdissent l'esprit, troublent l'attention et épuisent la clarté. Trouver un espace pour les déposer devient essentiel.

Mon but n'est pas de tout retenir, mais de faire de la place.

Je suis un carnet, créé pour donner une place aux pensées. J'accueille ce qui surgit, je garde ce qui insiste et je permets à certaines idées de disparaître en laissant une trace.

Notre approche

L'écriture en cours

J'interviens au cœur de l'accumulation mentale, là où les idées stagnent.

En recueillant ce flux quotidien sur papier, je transforme le trop-plein en traces lisibles et durables.

J'encourage également une pratique régulière de l'écriture pour prévenir la surcharge.

Intercepter les pensées

La majorité de la surcharge mentale provient d'idées quotidiennes non exprimées.

En les interceptant au moment où elles apparaissent, je limite l'accumulation et offre un espace clair pour les organiser ou les laisser partir.

Ouvre le carnet

Alléger l'esprit est un geste simple que chacun peut adopter. Que tu écrives beaucoup, parfois, ou presque jamais, chaque page compte. Prendre le temps de noter, c'est déjà faire de la place.

Écrire avec intention

Transformer certaines idées en projets, en listes ou en récits. Donner une forme à ce qui insistait.

Explorer le carnet

Revenir aux pages

Relire, raturer, abandonner. Voir comment les pensées évoluent avec le temps.

Explorer le carnet

Présences essentielles

Ce sont ces présences discrètes qui permettent aux pages de se remplir.

logo kia logo societé général logo governement of the Netherlands logo deloitte

Rien ne se remplit seul. Les pages avancent grâce à ce qui les entoure.

Témoignages

fleche vers le gauche fleche vers la droite

avis

Écrire ici m'a permis de poser des idées que je gardais en tête depuis trop longtemps.

Camille

avis

Ce carnet ne cherche pas à organiser à ma place. Il me laisse respirer.

Julien

avis

J'y reviens souvent sans savoir pourquoi, et je repars toujours plus léger.

Anaïs

avis

Ce n'est pas un outil de productivité, c'est un espace. Et ça change tout.

Thomas

avis

Certaines pages n'ont aucun sens. C'est justement pour ça que ça fonctionne.

Léa

avis

Je n'écris pas tous les jours, mais quand je le fais, c'est ici.

Martin

avis

Relire d'anciennes pages me rappelle que les idées évoluent, moi aussi.

Sarah

avis

Ce carnet accueille ce que je n'ose pas encore formuler clairement.

Noé

avis

J'ai arrêté de chercher à bien écrire. J'écris, simplement.

Pauline

avis

Il n'y a pas de pression ici. Juste des pages et du temps.

Hugo

avis

Certaines idées sont restées, d'autres sont parties. Les deux me vont.

Clara

avis

Écrire ici est devenu un réflexe quand tout se mélange dans ma tête.

Maxime

Pages du carnet

fleche vers le gauche

Pensées tard dans korl"ncjzdjpo)ocepkjnrkbvfe idcckhbfjecdisxla nuit

Ouvrir le carnet
fleche vers la droite

Présentation du projet

La consigne

Le projet consiste à analyser et reproduire le site The Ocean Cleanup afin de créer mon propre projet, intitulé Mon Carnet. L'objectif principal est de comprendre la structure du site original, sa navigation, ses animations et ses interactions, et d'adapter ces éléments à mon contenu personnel.

Site original

Le site original présente une navigation claire, des sous-menus déroulants, des images et vidéos intégrées, et des animations interactives.

Version desktop
Version mobile

Mon adaptation

Dans ma version du site, j'ai conservé plusieurs éléments clés.

  • Le menu interactif

    J'ai gardé la structure du menu principal avec ses sous-menus déroulants, tout en adaptant le contenu à mon projet "Mon Carnet".

  • Les images et vidéos intégrées :

    Placées pour illustrer les sections du carnet, avec des animations visibles même sans JavaScript.

  • Transitions visuelles :

    Hover, défilement et animations conservés pour améliorer la lisibilité et le plaisir de navigation.

Problèmes rencontrés et solutions

J'ai réalisé que, bien que le site soit très bien réalisé, quelques petits problèmes subsistent que j'ai essayé d'améliorer.

  • Navigation mobile :
    • Sans JavaScript, le menu n'est pas accessible. J'ai donc utilisé JavaScript uniquement pour dérouler le menu. J'ai fait en sorte que lorsque JavaScript est désactivé, les menus soient déroulés afin d'être sûr que ceux-ci soient accessibles pour tous.
    • Ensuite, j'ai fait en sorte que le menu se trouve sur une autre page pour éviter que sans JavaScript le menu burger ne soit pas cliquable.
    • Enfin, les premiers éléments du menu ne se déroulent pas comme on pourrait le penser intuitivement. Ça ramène sur une autre page. J'ai fait en sorte qu'il y ait une cohérence à ce niveau.
  • Affichage des images :
    • Les images associées aux textes dans la seconde partie ne s'affichent pas sans JS. J'ai donc fait en sorte que les animations soient visibles en CSS et que seul le changement d'image au scroll soit fait via JS.
  • Formulaire newsletter :
    • Sans JS, le formulaire d'accès à la newsletter ne s'affiche pas. Pour régler cela, j'ai réalisé l'animation sur le bouton submit avec CSS et fait en sorte que malgré tout le formulaire soit toujours visible.
  • Accessibilité et UX :
    • J'ai conservé les transitions et effets de survol visibles même sans JS pour le PC, afin que l'utilisateur comprenne la hiérarchie et la navigation.
Version desktop sans JavaScript.
Version mobile sans JavaScript.

Forces

Forces observables du site :

  • La navigation desktop claire et accessible sans JS.
  • Animations sur hover et transitions fluides des cartes et images.
  • Hero vidéo sticky et interactive selon scroll.
  • Cartes témoignages scrollables horizontalement via JS.
  • Typographie cohérente et lisible (style Montserrat).
  • Structure responsive, adaptée aux écrans PC et mobiles.
  • Organisation des contenus logique et intuitive.
  • Contraste global suffisant pour la plupart des éléments.

Limites

Limites observables :

  • Sans JavaScript, les menus mobiles et sous-menus sont inaccessibles.
  • Animations invisibles sans JS.
  • Certains éléments interactifs dépendent entièrement de JS.
  • Contraste faible sur hover "Learn more".
  • Newsletter inactive sans JS.
  • Adaptation mobile demande parfois plusieurs clics pour naviguer dans les sous-menus.