Dark cinematic theme and editorial typography, with a masonry gallery and full-screen lightbox supporting keyboard ←/→/Esc and mobile swipe navigation
AstroPortfolio
Estudio-Template — Astro Portfolio Template
By Cluyverth
Estudio-Template is an Astro portfolio template for individual service providers such as photographers, designers, and architects, featuring a dark cinematic look and a masonry gallery, with content managed in Markdown and site data centralized in a single configuration file.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Author preview
Author-provided previewTop of page
Preview provided in the project README.
One original preview is available. Open the full image to inspect the design.
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-01View source
What stands out
A quick read of the recorded project description.
Scroll reveals, a slow film strip, stat counters, and a navigation bar that transitions from transparent to blurred, all based on transform/opacity and fully disableable via prefers-reduced-motion
Business data centralized in src/config/site.ts, with work, specialties, and reviews maintained as Markdown content collections, and reviews using a featured flag to control homepage display
SEO structures including JSON-LD (ProfessionalService, aggregateRating, Review, FAQPage), an automatic sitemap, and Open Graph
Built-in LGPD privacy policy page explaining that no data is automatically collected, there are no forms or tracking cookies, and including portrait use rights and revocable publication authorization
Repository includes a multi-stage Dockerfile that pins the Bun version and serves the static dist/ directory with Nginx after building
Template Details
Estudio-Template is a static portfolio template built around the idea of "show the work first, then talk conversion," suited to photographers, designers, architects, makeup artists, chefs, carpenters, and other professionals who take on work through personal craft. It presents work with a dark cinematic theme, editorial typography, and a masonry gallery, and provides a full-screen lightbox (supporting keyboard ←/→/Esc and mobile swipe navigation), scroll reveals, a slow film strip, stat counters, and a navigation bar that transitions from transparent to blurred; these effects are based on transform/opacity and can be fully disabled via prefers-reduced-motion.
On the content side, the template centralizes business data in src/config/site.ts (name, tagline, WhatsApp, address, business hours, Instagram, brand colors, stats, copy, quotes, and FAQ), while portfolio content lives in Markdown collections under src/content/: gallery (multiple photos per shoot, category, tags, year, location), specialties (title, icon, photo, description), and reviews (a featured flag determines which reviews appear on the homepage). The order of homepage sections is defined in src/pages/index.astro. The sample content comes from a photography studio, but the template itself is not limited to photography.
The site is 100% static output, with no database and no backend, and about 6 KB of browser-side JavaScript; it uses Astro content collections for content validation, Tailwind CSS to build a design system through CSS tokens, and self-hosts the Cormorant Garamond and Inter fonts via @fontsource. For SEO, it provides JSON-LD (configurable ProfessionalService, aggregateRating, Review, FAQPage), an automatic sitemap, and Open Graph. The privacy page is written in accordance with the LGPD, explaining that the site does not automatically collect data, has no forms or tracking cookies, that conversations take place in the client's own WhatsApp, and that photos and reviews are published only with consent and that authorization for portrait use can be revoked.
For deployment, the repository includes a multi-stage Dockerfile that pins the Bun version and, after building Astro, serves the static files from dist/ with Nginx, making it suitable for self-hosted environments such as Coolify; it can also be deployed through the usual static build workflows on Netlify, Vercel, and Cloudflare Pages. The sample photos come from Unsplash and must be replaced with the client's actual work, with portrait use authorization obtained.
AstroPortfolio
Is it right for your project?
Use Cases
- Building a booking-focused site for a photographer centered on showcasing work, organizing shoots by category such as weddings, portraits, headshots, and events
- Creating a branded portfolio for individual service providers such as designers, architects, makeup artists, chefs, or carpenters to deliver to clients
- Projects that need static hosting, no database or backend, and want content maintained by the client in Markdown
- Sites for the Brazilian market that need an LGPD privacy policy and portrait use authorization statements
- Portfolio sites that need structured SEO data (ProfessionalService, review aggregation, FAQ) to improve search presentation
Suitable For
- Professionals who take on work through personal craft and need to show work first, then guide inquiries
- Developers or small studios comfortable maintaining content in Markdown and a single configuration file
- Projects that prefer static output, no backend, and deployment to any static host or self-hosted VPS
- Brazilian local businesses that need built-in LGPD privacy statements and portrait authorization terms
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Run with Bun: bun install to install dependencies, bun run dev for local development (default http://localhost:4321), bun run build to generate the static site into dist/, and bun run preview to preview the build locally
- 2
Edit business information in src/config/site.ts, place work, specialties, and reviews in the Markdown collections under src/content/, and adjust homepage section order in src/pages/index.astro
- 3
When deploying to Coolify, select Public Repository and specify the Dockerfile build pack; after setting the domain, a Let's Encrypt certificate is issued automatically; for Netlify, Vercel, and Cloudflare Pages, use the build command bun run build and output directory dist
- 4
The sample photos come from Unsplash and must be replaced with the client's actual work, with portrait use authorization obtained; third-party assets such as fonts and icons must be checked against their respective licenses
- 5
The repository uses the MIT license; when distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope applies to that version's code and does not mean that external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercialize, and distribute this version's code for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The sample photos come from Unsplash and must be replaced with the client's actual work, with portrait use authorization obtained; third-party assets such as fonts and icons must be checked against their respective licenses.
- Site conversations take place through the client's own WhatsApp; photos and reviews are published only with consent, and authorization for portrait use can be revoked.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Fotos de exemplo do [Unsplash](https://unsplash.com) (licença livre para uso comercial). Substitua pelas fotos reais dos trabalhos do cliente, com autorização de uso de imagem.
Original README
https://github.com/Cluyverth/Estudio-Template/blob/main/LICENSEhttps://github.com/Cluyverth/Estudio-Template/blob/main/README.mdas conversas acontecem no WhatsApp do cliente, e fotos/depoimentos são publicados somente com consentimento, com direito de revogação do uso de imagem.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- Partly documented · 68 / 100
- Technologies
- Astro
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-08-08
- Screenshot last checked
- 2026-10-02
No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.
The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: b69b0522552ec388e1355ada13c6271988f05a26ee478b96096a72e25d2f079e
2026-10-02T16:18:56.042Z
Source file / repository# Estúdio
**Um site que expõe o seu trabalho, em vez de só empurrar o WhatsApp.**
Template de portfólio para profissionais que vivem do próprio talento: fotógrafos,
designers, arquitetos, maquiadores, chefs, marcenarias e qualquer negócio que venda
serviço com assinatura. Feito para ser entregue a clientes reais, com conteúdo
editável em Markdown e dados centralizados em um único arquivo.
[](https://astro.build)
[](https://tailwindcss.com)
[](https://bun.sh)
[](LICENSE)
## O que é
Enquanto o [Ofício](https://github.com/Cluyverth/Oficio-Template) converte direto para
o WhatsApp, o **Estúdio** foi desenhado para **expor primeiro, converter depois**: uma
experiência de galeria: tema escuro cinematográfico, tipografia editorial, galeria em
masonry com lightbox em tela cheia e animações sutis que valorizam o trabalho.
- **Para o cliente:** um portfólio chique que faz o visitante *sentir* a qualidade do
trabalho antes de qualquer conversa, com WhatsApp elegante quando a conversa for
acontecer.
- **Para o dev:** o mesmo codebase limpo e 100% estático do Ofício: sem banco, sem
backend, ~6 KB de JavaScript no navegador. Deploy em qualquer lugar.
## Screenshots
| Home | Galeria |
| --- | --- |
|  |  |
## O que o site entrega
- **Experiência de galeria**: hero em tela cheia com zoom lento (Ken Burns) e
parallax sutil; galeria em masonry com reveal em cascata; lightbox cinematográfico
com navegação por teclado (←/→/Esc), swipe no mobile e fade entre fotos.
- **Animações com classe**: reveals ao rolar, film-strip de fotos em movimento lento,
contadores de estatísticas, navbar transparente → sólida com blur. Tudo em
transform/opacity (GPU), ~6 KB de JS vanilla, e 100% desligado com
`prefers-reduced-motion`.
- **WhatsApp na medida certa**: botão no header, no CTA final e flutuante. Sem botão
de conversão em cima de cada foto: a arte é a conversão.
- **Galeria completa com filtros**: página com filtro por categoria (casamento,
ensaio, retrato, evento), várias fotos por ensaio e lightbox compartilhado.
- **Especialidades**: cards com foto, ícone e texto, editáveis em Markdown.
- **Depoimentos com curadoria**: a home mostra apenas as melhores avaliações
(flag `featured`), com nota média do Google.
- **Política de privacidade em conformidade com a LGPD**, incluindo o direito de
imagem (essencial para fotógrafos) e a autorização de divulgação revogável.
- **SEO estruturado**: JSON-LD com `ProfessionalService` (configurável),
`aggregateRating`, `Review` e `FAQPage`, sitemap automático, Open Graph.
- **Performance**: site 100% estático, imagens otimizadas pelo Astro, fontes
self-hosted (sem request a terceiros, sem cookies de rastreamento).
## Stack
| Camada | Escolha | Por quê |
| --- | --- | --- |
| Framework | **Astro 7** | Gera HTML estático com ~0 JS; content collections validam o conteúdo |
| Estilo | **Tailwind CSS 4** | Design system rápido e consistente via tokens CSS |
| Runtime | **Bun** | Instalação e build muito mais rápidos que npm |
| Fontes | **Cormorant Garamond + Inter** | Self-hosted via @fontsource; serifa editorial elegante + sans limpa |
| SEO | **@astrojs/sitemap** | sitemap.xml gerado no build |
## Como rodar
```sh
bun install
bun run dev # desenvolvimento em http://localhost:4321
bun run build # gera o site estático em dist/
bun run preview # serve o build localmente
```
## Personalização para um cliente (~30 minutos)
Tudo que muda de negócio para negócio está em 2 lugares:
1. **`src/config/site.ts`**: nome, tagline, WhatsApp, endereço, horário, Instagram,
cores da marca, estatísticas, textos, citação e FAQ. Um único arquivo.
2. **`src/content/`**: conteúdo em Markdown:
- `gallery/`: ensaios/trabalhos (várias fotos por ensaio, categoria, tags, ano,
local);
- `specialties/`: especialidades (título, ícone, foto, descrição);
- `reviews/`: avaliações (`featured: true` define o que aparece na home).
A ordem das seções da home é definida em `src/pages/index.astro`.
> O exemplo de conteúdo é de um estúdio de fotografia, mas o template não é só para
> fotógrafos: a marca, os textos e as coleções servem para qualquer profissional que
> venda serviço com portfólio.
## Estrutura
```
src/
├── config/site.ts ← dados do cliente (o que muda)
├── content.config.ts ← schemas das collections (validação)
├── content/ ← galeria, especialidades e avaliações (md + fotos)
├── lib/ ← helpers (WhatsApp, formatação)
├── components/
│ ├── ui/ ← Icon, Stars, SectionHeading, WhatsAppButton
│ ├── sections/ ← Hero, FilmStrip, Galeria, Especialidades,
│ │ Sobre, Depoimentos, Faq, Cta
│ ├── Lightbox.astro ← lightbox em tela cheia (compartilhado)
│ ├── Navbar.astro
│ ├── Footer.astro
│ ├── FloatingWhatsApp.astro ← botão fixo do WhatsApp
│ └── BackToTop.astro ← botão voltar ao topo
├── layouts/Base.astro ← head SEO + JSON-LD + motor de animações
└── pages/ ← index (home), galeria, privacidade e 404
```
## Deploy
### Coolify (VPS própria)
O repositório inclui um [`Dockerfile`](Dockerfile) multi-stage: ele fixa a versão do
Bun (1.3.14, a mesma do lockfile), roda o build do Astro e serve o resultado com
Nginx.
**Passo a passo (deploy público via Coolify):**
1. **Create New Resource** → **Public Repository** → cole a URL do repositório.
2. **Build Pack: Dockerfile**: o Coolify detecta o `Dockerfile` na raiz sozinho.
3. **Domain**: defina o domínio (ex.: `estudio.cluyverth.com`) e clique em **Deploy**.
O SSL via Let's Encrypt é emitido automaticamente.
A imagem final roda apenas o Nginx servindo o `dist/` (arquivos estáticos).
### Outros provedores
- **Netlify**: build `bun run build`, publish directory `dist`
- **Vercel**: framework preset Astro, output `dist`
- **Cloudflare Pages**: build `bun run build`, output `dist`
## LGPD
Política de privacidade pronta em `src/pages/privacidade.astro`: o site não coleta
dados automaticamente (sem formulários, sem cookies de rastreamento), as conversas
acontecem no WhatsApp do cliente, e fotos/depoimentos são publicados somente com
consentimento, com direito de revogação do uso de imagem.
## Créditos
Fotos de exemplo do [Unsplash](https://unsplash.com) (licença livre para uso
comercial). Substitua pelas fotos reais dos trabalhos do cliente, com autorização de
uso de imagem.
## Licença
[MIT](LICENSE) © 2026 Cluyverth Pereira
Explore similar templates
Compare previews and descriptions within the same stack and category.
astro-theme-cactus
Astro Cactus is an Astro-based blog and portfolio theme that uses Markdown/MDX content collections to manage posts, notes, and tags, with frontmatter type-checked by a schema.
Astro · Portfolio
astrofy
Astrofy is a free and open-source personal portfolio website template built with Astro and TailwindCSS, with built-in blog, CV timeline, project showcase, store, and RSS feed modules.
Astro · Portfolio
astro-nano
Astro Nano is a static, minimalist portfolio and blog template built with Astro, Tailwind, and TypeScript without frontend frameworks. It includes light/dark themes, animated UI, automatic sitemap and RSS feed generation, and Markdown/MDX support with component imports.
Astro · Portfolio
astro-erudite
astro-erudite is an opinionated, unstyled static blog template built with Astro and native CSS, with no UI or CSS framework and minimal dependencies.
Astro · Portfolio
astro-sphere
Astro Sphere is a static, minimalist portfolio and blog theme maintained by markhorn-dev, built mainly with Astro, Tailwind, and TypeScript, with a small amount of SolidJS for stateful components.
Astro · Portfolio
astro-micro
Astro Micro is a framework-free blog and portfolio theme for Astro, forked from Astro Nano. It adds Pagefind search and Giscus comments while retaining type safety, sitemap, RSS, Markdown and MDX support, and TailwindCSS with system, light, and dark themes.
Astro · Portfolio