Murad Library
Info
Murad LibraryREF-0353MD

50 sites feitos com Astro com pegada mais artesanal, elaborada e IndieWeb

Catalogued
Reading
14 min read

Curadoria refeita para evitar a lista preguiçosa de marcas grandes, SaaS genérico e showcase corporativo. O foco aqui é: site pessoal, portfolio autoral, experimento visual, blog técnico com personalidade, microprojeto, ferramenta pequena, estética handmade, cultura web e coisa com cara de internet feita por gente.

Observação honesta: a fonte principal foi o showcase oficial do Astro. Eu priorizei entradas menos óbvias e com maior potencial estético/autoral pelo título, proposta e tipo de projeto. Alguns sites podem ter mudado depois da submissão ao showcase.

Critério da curadoria

Entraram sites que parecem úteis como referência para um projeto tipo blog/site autoral com Craft CMS + Astro:

  • identidade visual própria;
  • sensação de “feito à mão”;
  • portfolio pessoal ou estúdio pequeno;
  • blog/lab técnico com personalidade;
  • microferramenta ou projeto estranho;
  • estética editorial, experimental, cultural, retro, brutalista ou IndieWeb;
  • sites que você pode estudar para roubar ideias de layout, navegação, tipografia, cards, microinterações e organização de conteúdo.

Ficaram de fora, de propósito:

  • marcas enormes;
  • bancos, seguradoras e SaaS genérico;
  • documentação técnica sem personalidade;
  • templates prontos;
  • landing pages plastificadas demais;
  • sites que parecem “startup #72834 com Tailwind”.

1. Eva Decker

  • URL: https://eva.town
  • Tipo: site pessoal / portfolio
  • Fonte Astro: https://astro.build/showcase/
  • Por que entrou: domínio e apresentação têm cara de espaço pessoal, não de landing page corporativa.
  • Ideia para roubar: transformar homepage em “cidade pessoal”, com navegação mais afetiva do que institucional.

2. Ahmad Shadeed

  • URL: https://ishadeed.com/
  • Tipo: blog técnico / laboratório de CSS
  • Fonte Astro: https://astro.build/showcase/2/
  • Por que entrou: referência forte de site pessoal técnico com muito conteúdo, personalidade e autoridade visual.
  • Ideia para roubar: artigos longos, diagramas próprios, estudos visuais e navegação limpa para conteúdo denso.

3. Nic Chan

4. Monica's Digital Playground

  • URL: https://aboutmonica.com/
  • Tipo: playground pessoal / portfolio
  • Fonte Astro: https://astro.build/showcase/2/
  • Por que entrou: o próprio conceito de “digital playground” já aponta para uma web menos engessada.
  • Ideia para roubar: pensar o site como mesa de experimentos, não como currículo online.

5. Hypertext TV

  • URL: https://hypertext.tv/
  • Tipo: projeto experimental / mídia web
  • Fonte Astro: https://astro.build/showcase/2/
  • Por que entrou: nome e proposta têm cara de experimento hipermídia, bom para referências de navegação não convencional.
  • Ideia para roubar: estrutura de conteúdo que parece canal, arquivo ou programação, não blog cronológico comum.

6. Anna Hsu

  • URL: https://annahsu.dev
  • Tipo: site pessoal / dev
  • Fonte Astro: https://astro.build/showcase/2/
  • Por que entrou: site individual, mais próximo do espírito IndieWeb do que de vitrine empresarial.
  • Ideia para roubar: homepage curta com sinais claros de autoria.

7. Coding in Public

  • URL: https://codinginpublic.dev/
  • Tipo: educação / conteúdo técnico autoral
  • Fonte Astro: https://astro.build/showcase/2/
  • Por que entrou: projeto de conteúdo com personalidade e proposta editorial clara.
  • Ideia para roubar: criar uma área de séries, aulas, notas e bastidores do processo.

8. Namesake

  • URL: https://namesake.fyi
  • Tipo: microprojeto / conceito
  • Fonte Astro: https://astro.build/showcase/2/
  • Por que entrou: parece um desses sites pequenos que existem porque alguém teve uma ideia específica — ótimo sinal.
  • Ideia para roubar: transformar uma ideia estreita em site inteiro, sem inflar escopo.

9. Elian Codes

  • URL: https://www.elian.codes
  • Tipo: site pessoal / dev blog
  • Fonte Astro: https://astro.build/showcase/2/
  • Por que entrou: site de desenvolvedor com foco em presença pessoal e conteúdo.
  • Ideia para roubar: combinar posts, talks, projetos e identidade visual sem cara de LinkedIn premium.

10. The Flag of London

  • URL: https://flag.london
  • Tipo: projeto cívico / visual / cultural
  • Fonte Astro: https://astro.build/showcase/2/
  • Por que entrou: tema específico, visual e cultural — bem mais interessante do que landing page genérica.
  • Ideia para roubar: criar páginas temáticas com forte iconografia e narrativa curta.

11. Michael Andreuzza

12. Okiki Ojo

  • URL: https://okikio.dev/
  • Tipo: site pessoal / desenvolvimento
  • Fonte Astro: https://astro.build/showcase/2/
  • Por que entrou: presença pessoal técnica, bom para estudar estrutura de dev site moderno sem perder personalidade.
  • Ideia para roubar: organizar projetos, experimentos e escrita em camadas simples.

13. R2D3

  • URL: https://r2d3.us/
  • Tipo: visualização de dados / narrativa interativa
  • Fonte Astro: https://astro.build/showcase/3/
  • Por que entrou: é uma referência forte para conteúdo elaborado, didático e visual.
  • Ideia para roubar: posts como ensaios interativos, não só texto com imagem.

14. Dave Holloway

  • URL: https://daveholloway.uk
  • Tipo: portfolio pessoal / designer e dev
  • Fonte Astro: https://astro.build/showcase/3/
  • Por que entrou: perfil de criativo independente, bom para referências de portfolio autoral.
  • Ideia para roubar: apresentar serviços e projetos sem perder tom pessoal.

15. Therese Adoremos

16. Tommy Parker

17. Unicorn Utterances

  • URL: https://unicorn-utterances.com/
  • Tipo: blog técnico comunitário/autoral
  • Fonte Astro: https://astro.build/showcase/3/
  • Por que entrou: nome, identidade e proposta fogem do comum; bom exemplo de publicação técnica com personalidade.
  • Ideia para roubar: taxonomia forte, conteúdo técnico e branding memorável.

18. Zulik

19. We Behind This

  • URL: https://webehindthis.com/
  • Tipo: estúdio / coletivo criativo
  • Fonte Astro: https://astro.build/showcase/3/
  • Por que entrou: nome e proposta sugerem direção visual mais autoral.
  • Ideia para roubar: usar linguagem de manifesto em vez de “soluções digitais para sua empresa”.

20. ET's studio

  • URL: https://web.erichandsen.dev/
  • Tipo: studio pessoal / experimento web
  • Fonte Astro: https://astro.build/showcase/3/
  • Por que entrou: tem cara de laboratório individual, não de site institucional.
  • Ideia para roubar: separar “studio” de “portfolio” e criar uma identidade própria para experimentos.

21. Tiken

  • URL: https://tiken.dev/
  • Tipo: site pessoal / frontend developer
  • Fonte Astro: https://astro.build/showcase/3/
  • Por que entrou: site pessoal enxuto, útil como referência de dev independente.
  • Ideia para roubar: apresentação direta com pequenos detalhes visuais.

22. Samuel Siau

23. shibes.lol

  • URL: https://shibes.lol/
  • Tipo: projeto divertido / micro-site
  • Fonte Astro: https://astro.build/showcase/4/
  • Por que entrou: domínio .lol e tema sugerem web lúdica, absurda, pequena e memorável.
  • Ideia para roubar: permitir que algumas páginas sejam simplesmente divertidas, sem justificar ROI.

24. Solid Toast

25. Candido Sales

26. creatures.dev

  • URL: https://creatures.dev
  • Tipo: comunidade / projeto dev
  • Fonte Astro: https://astro.build/showcase/4/
  • Por que entrou: nome excelente e com cara de comunidade pequena, divertida e visualmente marcante.
  • Ideia para roubar: criar uma comunidade com mascote/conceito forte.

27. CSS Daily

  • URL: https://cssdaily.dev/
  • Tipo: microprojeto de CSS / receita diária
  • Fonte Astro: https://astro.build/showcase/4/
  • Por que entrou: é exatamente o tipo de site pequeno e colecionável que a web precisa ter mais.
  • Ideia para roubar: publicar “uma coisa por dia” em formato curto, visual e colecionável.

28. DGM

  • URL: https://dgm.sh/home/
  • Tipo: app/projeto visual
  • Fonte Astro: https://astro.build/showcase/4/
  • Por que entrou: visualmente promissor e com energia de ferramenta pequena bem trabalhada.
  • Ideia para roubar: criar interface de produto sem cara de SaaS corporativo.

29. Edward Margallo

  • URL: https://edwardmargallo.com/
  • Tipo: portfolio de UI/UX e front-end
  • Fonte Astro: https://astro.build/showcase/4/
  • Por que entrou: perfil híbrido de design e código, boa referência para Craft + Astro bem acabado.
  • Ideia para roubar: misturar design system, estudos de caso e identidade pessoal.

30. Mattrbld

  • URL: https://mattrbld.com/
  • Tipo: CMS headless Git-based / projeto open source
  • Fonte Astro: https://astro.build/showcase/4/
  • Por que entrou: conversa diretamente com a ideia de CMS leve, conteúdo versionado e publicação artesanal.
  • Ideia para roubar: pensar CMS e conteúdo como arquivos versionáveis, não como painel inchado.

31. Rich Banks

  • URL: https://richbanks.co.uk
  • Tipo: independent web developer
  • Fonte Astro: https://astro.build/showcase/4/
  • Por que entrou: site de profissional independente, mais próximo da vibe “feito por alguém”.
  • Ideia para roubar: posicionamento pessoal sem excesso de firula corporativa.

32. Rody Davis

33. Flayks

  • URL: https://flayks.com
  • Tipo: art director / digital designer
  • Fonte Astro: https://astro.build/showcase/5/
  • Por que entrou: direção de arte e design digital — potencialmente uma das referências mais fortes da lista.
  • Ideia para roubar: ousar mais na home; portfolio de designer não precisa parecer template SaaS.

34. Angelika.me

35. Chimborazo

  • URL: https://chimborazo.netlify.app/
  • Tipo: projeto temático / geográfico / visual
  • Fonte Astro: https://astro.build/showcase/5/
  • Por que entrou: tema específico e quase poético — “ponto mais próximo do sol”. Isso é bom material editorial.
  • Ideia para roubar: páginas especiais para temas históricos, geográficos ou simbólicos.

36. Daniel Saunders

37. Goulven Clec'h

38. That LadyDev

39. Harry Atkins

40. Open Source Maintenance Fee

41. Web Components Toolkit

  • URL: https://wc-toolkit.com/
  • Tipo: ferramenta / documentação pequena
  • Fonte Astro: https://astro.build/showcase/5/
  • Por que entrou: ferramenta específica, boa para estudar documentação compacta e útil.
  • Ideia para roubar: página de ferramenta com exemplos vivos e docs curtas.

42. WaveMind

43. Mr VAST

  • URL: https://mrvast.com
  • Tipo: projeto/site autoral
  • Fonte Astro: https://astro.build/showcase/5/
  • Por que entrou: nome memorável, domínio curto, cara de projeto pessoal com voz própria.
  • Ideia para roubar: branding estranho o suficiente para ser lembrado.

44. Little Stack

  • URL: https://www.littlestack.com/
  • Tipo: livros / organização / microproduto
  • Fonte Astro: https://astro.build/showcase/5/
  • Por que entrou: tema de livros com proposta específica, muito alinhado com projetos editoriais e biblioteca.
  • Ideia para roubar: coleções de livros como pilhas, listas, prateleiras ou percursos.

45. Wildling

  • URL: https://www.wildling.ca/
  • Tipo: café/bar/local independente
  • Fonte Astro: https://astro.build/showcase/5/
  • Por que entrou: site de local físico pequeno, bom para referência de atmosfera e identidade.
  • Ideia para roubar: páginas com sensação de lugar — textura, mapa, horário, fotos, manifesto curto.

46. Catppuccin

  • URL: https://catppuccin.com/
  • Tipo: comunidade/tema visual open source
  • Fonte Astro: https://astro.build/showcase/5/
  • Por que entrou: identidade visual fortíssima, comunidade, documentação e estética própria.
  • Ideia para roubar: paleta como elemento central da marca; criar sistema visual reaproveitável.

47. 0No Co.

  • URL: https://0no.co/
  • Tipo: estúdio/projeto criativo
  • Fonte Astro: https://astro.build/showcase/6/
  • Por que entrou: nome e domínio indicam estética mais experimental.
  • Ideia para roubar: usar estranhamento controlado como identidade.

48. B1 French Cheat Sheet

  • URL: https://savoiretre.asmat.ca/
  • Tipo: material educativo / cheat sheet
  • Fonte Astro: https://astro.build/showcase/6/
  • Por que entrou: microconteúdo educacional com escopo claro — excelente referência para compêndios.
  • Ideia para roubar: transformar material de estudo em objeto web bonito e navegável.

49. Manz.dev

  • URL: https://manz.dev/
  • Tipo: professor/dev/streamer de código
  • Fonte Astro: https://astro.build/showcase/6/
  • Por que entrou: site pessoal de educador técnico, provavelmente rico em conteúdo e estrutura.
  • Ideia para roubar: site como ecossistema pessoal: cursos, artigos, vídeos, recursos e presença pública.

50. Playhead

  • URL: https://playheadapp.com
  • Tipo: app local-first de música
  • Fonte Astro: https://astro.build/showcase/6/
  • Por que entrou: produto pequeno com proposta local-first; mais interessante que SaaS genérico.
  • Ideia para roubar: explicar produto com linguagem simples e interface visual leve.

Extras fortes que também valem estudar

Se quiser expandir a pesquisa depois, estes ficaram de fora só para manter a lista em 50:

O que essa lista prova sobre Astro

A resposta curta: sim, dá para fazer coisa muito elaborada com Astro — mas o segredo não é Astro sozinho. O segredo é usar Astro como base leve para:

  • conteúdo editorial estruturado;
  • páginas especiais;
  • blogs com MD/MDX;
  • portfolios com direção de arte;
  • microferramentas;
  • arquivos pessoais;
  • projetos tipo zine;
  • guias, compêndios, coleções e bibliotecas digitais.

Para um projeto seu com Craft CMS, eu testaria este caminho:

Craft CMS 5
  -> conteúdo estruturado, categorias, campos, autores, imagens
  -> GraphQL ou API
Astro
  -> front editorial
  -> páginas estáticas quando possível
  -> componentes interativos só onde fizer sentido
CSS próprio
  -> sem depender 100% de Tailwind
  -> estética handmade/editorial

A armadilha: usar Astro e cair em template Tailwind genérico. A vantagem real aparece quando você usa Astro para construir um site com voz própria.

Did this resonate?

Related documents