惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

S
SegmentFault 最新的问题
V
Visual Studio Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
量子位
月光博客
月光博客
阮一峰的网络日志
阮一峰的网络日志
T
Tailwind CSS Blog
GbyAI
GbyAI
爱范儿
爱范儿
Y
Y Combinator Blog
宝玉的分享
宝玉的分享
有赞技术团队
有赞技术团队
罗磊的独立博客
Recent Announcements
Recent Announcements
博客园 - 司徒正美
M
MIT News - Artificial intelligence
小众软件
小众软件
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
B
Blog RSS Feed
A
About on SuperTechFans
Hugging Face - Blog
Hugging Face - Blog
Apple Machine Learning Research
Apple Machine Learning Research
雷峰网
雷峰网

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Criei um site com música lo-fi, som de chuva e um mini ga...
Arthur Migue · 2026-05-14 · via DEV Community

Arthur Miguel

🌙 Nahauia: Meu cantinho para estudar e relaxar

Link direto: nahauia.ct.ws

🧠 A ideia

Eu percebi que passar muito tempo em redes sociais ou conteúdos muito rápidos não me ajudava a relaxar de verdade. Sentia falta de um lugar calmo, com pouca distração, sem anúncios e sem vídeos automáticos.

Foi assim que surgiu o Nahauia: um site com música lo-fi, som de chuva ambiente, um mini game de respiração e um visual escuro e aconchegante.

💡 O que o site oferece

  • 🎵 Música lo-fi com playlist própria (toca em sequência)
  • 🌧️ Chuva animada com intensidade que muda conforme o movimento do mouse
  • 🫁 Jogo da respiração (inspirar e expirar no ritmo)
  • Relâmpagos aleatórios (efeito visual imersivo)
  • 🔁 Contador de visitas únicas (com Firebase)
  • 📱 Responsivo – funciona bem no celular, tablet e PC
  • 🌙 Design escuro – confortável para longos períodos de uso

🛠️ Tecnologias utilizadas

  • HTML5 semântico
  • CSS3 (animações, flexbox, media queries, variáveis)
  • JavaScript puro (player de música, modal, lógica da respiração)
  • Firebase (Auth anônimo + Realtime Database para contador de visitas)
  • Havia um GIF de ambiente lo-fi que foi comprimido para manter o desempenho

📱 Responsividade

Uma das partes mais trabalhosas foi garantir que o site funcionasse bem em qualquer tamanho de tela. Usei media queries para ajustar posições, tamanhos de fonte e até esconder elementos menos essenciais em celulares muito pequenos.

Testei em resoluções desde 360px (celular antigo) até 4K.

🎯 O que aprendi com esse projeto

  • Firebase é surpreendentemente fácil de integrar para contadores e autenticação anônima.
  • Autoplay de áudio no navegador tem regras rígidas (é necessário o primeiro clique do usuário).
  • Animações CSS podem ser leves e bonitas se usadas com moderação.
  • Fazer um projeto real, publicar e receber feedback é mais valioso do que fazer 50 cursos.

🚀 Possíveis melhorias futuras

  • Playlist com mais músicas e um controle manual mais explícito
  • Modo "foco total" (esconder botões e deixar apenas música e chuva)
  • Versão PWA (para instalar como aplicativo)
  • Opção de tema claro (sim, mesmo o escuro sendo o padrão, tem quem prefira)

🙏 Agradecimento

Obrigado por visitar o projeto.

Se você testar e gostar, compartilhe com alguém que precisa de um ambiente calmo para estudar ou trabalhar.

Se tiver críticas ou sugestões, comente abaixo. Tô aberto a aprender mais.

Direto ao ponto: https://nahauia.ct.ws

🌙 Relaxe. Estude. Respire.