Résumé
Lofi est une page web minimaliste qui permet de lancer une musique lofi tout en affichant un fond d’écran animé (type “wallpaper vidéo”). L’idée : obtenir une ambiance de travail/étude instantanée, sans dépendre d’une plateforme externe et sans abonnement.
Le site fournit aussi des fonctions “utilitaires” : affichage de l’heure, minuteur, réglage du volume, et changement de fond pour adapter l’ambiance.
Objectifs
- Autonomie : ne pas dépendre d’un service tiers, contrôler le contenu et la disponibilité.
- Simplicité : un site “one page”, facile à ouvrir, sans onboarding ni distractions.
- Expérience : un design très épuré, centré sur l’ambiance (fond + musique).
- Pratique : minuteur + volume + choix du fond pour un usage quotidien (étude / focus).
Fonctionnalités
Musique lofi
Lancement d’une playlist/stream lofi directement depuis la page, avec contrôle du volume.
- Bouton lecture / pause
- Réglage du volume
- Expérience sans pub / sans compte
Fond d’écran (ambiance)
Changement du fond (vidéo / wallpaper) via plusieurs ambiances lofi.
- Plusieurs fonds disponibles
- Ambiance visuelle “focus”
- Design volontairement épuré
Outils focus
Affichage de l’heure et minuteur intégré pour structurer une session de travail.
- Horloge en temps réel
- Minuteur/chronomètre
- Utilisable type “pomodoro”
Technique (HTML / CSS / JS)
Front
- HTML : structure simple, page directe, navigation minimale.
- CSS : style épuré, centrage sur l’ambiance, lisibilité.
- JavaScript : logique d’horloge, minuteur, player audio, switch de fond.
Choix d’architecture
- Projet volontairement léger (pas de framework) : rapide à charger et facile à maintenir.
- Code clair et modulaire : chaque fonctionnalité isolée (player, timer, wallpaper).
- Approche “outil du quotidien” : UX simple, actions accessibles en quelques clics.
Hébergement (auto-host via NGINX)
Le site est auto-hébergé sur mon infra, servi en statique via NGINX. L’objectif est de garder le contrôle sur la disponibilité, les performances et l’évolution du projet.
- Déploiement simple : fichiers statiques servis par NGINX.
- Maintenance : mise à jour rapide (remplacement des assets / versioning).
- Fiabilité : page légère, peu de dépendances → moins de points de rupture.
Le projet est utilisable directement en ligne : lofi.samuelvanderhoeven.fr.
Résultats
Expérience
Fluide
Dépendances
Très faibles
Objectif
Autonome
Ce projet m’a permis de consolider une approche “utile + simple” : un front léger, des features claires, et un déploiement maîtrisé en auto-hébergement.
Aperçus
Notes & évolutions
Le projet prévoit plusieurs pistes d’amélioration : enrichir l’ambiance, améliorer le responsive, et offrir plus de choix côté playlists/radios.
Évolutions prévues
- Ajout de bruits d’ambiance : pluie, feu de cheminée, bruit blanc, etc.
- Amélioration du responsive (mobile / tablette).
- Choix de playlist/radio directement depuis l’interface.
Ce que je referais différemment
- Structurer davantage les modules JS (timer/player/wallpaper) pour faciliter l’évolution.
- Ajouter un petit état “actif”/feedback UI (par ex. fond sélectionné, minuteur en cours).
- Prévoir une config simple (JSON) pour ajouter facilement fonds et sources audio.
Points clés du projet
- Projet front “léger” : efficacité, rapidité, maintenance.
- Auto-hébergement : maîtrise complète de l’accès et des ressources.
- Une expérience centrée sur l’usage : écouter, choisir une ambiance, lancer un timer.