Sitio de AMAS gallery, espacio integral de arte contemporáneo (Punta del Este, Uruguay).
Concepto: entrás a una sala en penumbra y el color se enciende a medida que scrolleás. La estética se inspira en el lenguaje de María Freire —color, ritmo y forma; bandas, tótem, color sobre noche— sin reproducir ninguna de sus obras. Todas las composiciones del sitio son originales.
Es un sitio estático (HTML/CSS/JS, sin build). Tres formas:
- Doble clic en
index.html(se abre en el navegador). - Servidor local (recomendado, para que carguen bien fuentes y animaciones):
cd "AMAS gallery — sitio web" python3 -m http.server 8099 # luego abrí http://127.0.0.1:8099
- En vivo: ya está publicado (ver abajo).
Online: https://agustincf.github.io/amas-gallery/
Repo: https://github.com/agustincf/amas-gallery (rama main, Pages desde la raíz)
Es gratis y se sirve solo. Para actualizar el sitio tras cualquier cambio local:
cd "AMAS gallery — sitio web"
git add -A
git commit -m "descripción del cambio"
git pushEn ~1 minuto GitHub reconstruye y publica. (Si preferís sin terminal: GitHub Desktop hace lo mismo con botones.)
Dominio propio (opcional): si querés usar amasgallery.com.uy, en el repo → Settings →
Pages → Custom domain, y actualizá las 4 URLs absolutas del <head> de index.html
(canonical, og:url, og:image, twitter:image) al nuevo dominio.
Alternativa Vercel: también quedó listo para Vercel (vercel.json + .vercelignore).
npx vercel --prod desde la carpeta, o arrastrá la carpeta en vercel.com/new.
AMAS gallery — sitio web/
├── index.html · una sola página, 8 secciones (single-page + scroll)
├── styles.css · sistema de diseño (paleta, tipografía, ritmo de bandas)
├── main.js · menú móvil, "encendido" al scroll, scrollspy, formulario
├── vercel.json · config de deploy (headers, caché de assets)
├── .vercelignore · deja el README fuera del sitio publicado
├── README.md
└── assets/
├── favicon.svg · isotipo tótem (placeholder editable)
└── og-cover.png · imagen 1200×630 para redes (Open Graph)
- Single-page en HTML/CSS/JS vanilla, sin framework ni build. Es lo más liviano y mantenible para una galería, carga rápido y se hostea en cualquier lado.
- Hero "obra encendida": como en la portada del dossier, las bandas son un cuadro iluminado arriba (con su fulgor derramándose) y el texto vive debajo, sobre noche pura. La luz y la lectura nunca compiten — así el contraste es AA en todos los tamaños.
- Ritmo de salas: noche (hero, manifiesto, ejes, programa, espacio, equipo) → sala crema (Concepto: lectura larga, tinta sobre crema, como las páginas de lectura del dossier) → sala ladrillo (Contacto: "La invitación", la página roja del dossier).
- Nav fija con scrollspy: la sección visible se marca en el menú con el subrayado ámbar
(
aria-current). Las anclas aterrizan debajo del nav (scroll-padding-top). - Mejora progresiva: sin JavaScript el sitio se lee completo; el JS solo agrega el menú móvil, el "encendido" de las salas, el scrollspy y el envío del formulario.
- Tipografía por Google Fonts (CDN): Montserrat + Lato. Elegí el CDN por simplicidad y
velocidad. Si querés self-host (offline / privacidad), descargá los
.woff2aassets/fonts/y reemplazá el<link>de Google por un@font-faceenstyles.css.
Todo lo pendiente está marcado en pantalla con la etiqueta «por confirmar» y es fácil de reemplazar. El contenido de marca (manifiesto, ejes, indicadores, etc.) ya es el real, tomado del Dossier y el Esbozo del proyecto.
| Qué | Dónde | Cómo |
|---|---|---|
| Correo e Instagram | main.js, objeto CONTACTO (arriba de todo) |
Ya cargados: contacto@amasgallery.com.uy y @amasgallery. Para cambiarlos, editá ese objeto; los datos se actualizan en Contacto y el formulario abre el correo con el mensaje ya armado. |
| Formulario real | main.js |
Ya arma un mailto: al correo del proyecto. Para recibir los mensajes en un panel (sin depender del cliente de correo), conectá Formspree o Netlify Forms (agregá action y method="POST" al <form>). |
| Fotos del equipo | index.html, sección #equipo |
Hoy hay avatares con iniciales sobre color de paleta. Reemplazá cada <span class="persona__retrato"> por <img src="assets/equipo/nombre.jpg" alt="Retrato de …">. |
| Obras del programa | index.html, sección #programa |
Hoy hay composiciones abstractas originales (placeholder digno). Cuando haya obra real, reemplazá cada <svg> por una <img> y actualizá artista / título / técnica. |
| Isotipo definitivo | assets/favicon.svg y <symbol id="ico-totem"> en index.html |
El tótem actual (disco + cuerpo + vástago + base) es un placeholder. Cuando el equipo entregue el SVG final, reemplazalo. |
| Datos del espacio | sección #espacio |
Ubicación y apertura están como «tentativa / por confirmar». |
| Dominio (og:url) | index.html, metadatos |
Agregá <meta property="og:url" content="https://…"> cuando tengan dominio. |
- Contraste AA verificado por cálculo: texto largo siempre crema-sobre-noche, tinta-sobre-crema o crema-sobre-ladrillo; ámbar y periwinkle solo para acentos y líneas cortas (el tagline del hero arranca en 24px para que el ámbar califique como texto grande).
- Navegación por teclado, foco visible (contorno ámbar; crema sobre fondos ámbar), enlace
"saltar al contenido", landmarks semánticos y
aria-labelen las composiciones SVG. - Menú móvil (< 900px): overlay a pantalla completa (nunca un panel flotante con la página
congelada detrás). El wordmark y la X flotan por encima;
Escapecierra devolviendo el foco, y el resto de la página quedainertmientras el menú está abierto. prefers-reduced-motion: si el sistema pide menos movimiento, se desactivan animaciones y scroll suave, y todo el contenido se muestra de una.- Responsive mobile-first (menú hamburguesa < 900px), sin scroll horizontal.
title,meta description, Open Graph / Twitter Card y JSON-LD (ArtGallery) con el nombre completo del proyecto.lang="es-UY"(voseo).
Noche #17130F · Crema #F2F1EB · Humo #6E6156 · Ladrillo #AA2E27 · Terracota #C16628
· Ámbar #DCAA2E · Oliva #53682A · Violeta #5A4778 · Índigo #464893 · Azul noche
#1D3A6A · Periwinkle #B4C5E3.
Definida como variables CSS en :root (styles.css). Cambiá un color ahí y se propaga a
todo el sitio.
Diplomado en Gestión Cultural · 2026 — Sofía Barbat · Agustín Canosa · Verónica Ridelis · Micaela Wild.