An open API service indexing awesome lists of open source software.

https://github.com/miguelpadin/sila

Photography portfolio website for Sila Padín Studio — built with Astro and deployed on Vercel
https://github.com/miguelpadin/sila

astro javascript photography photography-website portfolio ssg vercel web-development

Last synced: 4 days ago
JSON representation

Photography portfolio website for Sila Padín Studio — built with Astro and deployed on Vercel

Awesome Lists containing this project

README

          

# Sila Padín Studio — Website

[![Astro](https://img.shields.io/badge/Astro-6.2.2-BC52EE?style=for-the-badge&logo=astro&logoColor=white)](https://astro.build) [![TypeScript](https://img.shields.io/badge/TypeScript-6.0.3-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org) [![Vercel](https://img.shields.io/badge/Vercel-deploy-000000?style=for-the-badge&logo=vercel&logoColor=white)](https://vercel.com)

Photography portfolio and brand website for [Sila Padín Studio](https://www.silapadin.com), a photographer based in Galicia, Spain, specialising in editorial, maternity, portrait, lifestyle, and wedding photography.

The site is built as a fast static experience with a strong editorial feel: image-led pages, service and portfolio routes, legal/privacy content, SEO metadata per page, accessible navigation patterns, and a consent-based analytics flow.

## Tech stack

- [Astro 6.2.2](https://astro.build) — static site generation, file-based routing, shared layouts, and componentized page structure.
- [TypeScript 6.0.3](https://www.typescriptlang.org) — type checking through `astro check` before production builds.
- Vanilla CSS — custom properties, responsive layouts, reduced-motion support, focus states, and project-wide styling in `src/styles/global.css`.
- Vanilla JavaScript — mobile navigation, reveal animations, portfolio filters, current-year rendering, and cookie consent handling in `public/main.js`.
- [Vercel](https://vercel.com) — static hosting for the generated `dist/` output, with the production domain redirect configured in `vercel.json`.
- Release automation — Release Please is configured for Conventional Commits, changelog updates, SemVer tags, and GitHub Releases.

## Project focus

- **SEO:** shared metadata in `BaseLayout`, canonical URLs, `hreflang`, robots directives, Google Search Console verification, Open Graph, Twitter cards, JSON-LD structured data, `sitemap.xml`, and `robots.txt`.
- **Accessibility:** Spanish document language, skip link, labelled navigation, `aria-current`, menu state with `aria-expanded`, visible focus styles, screen-reader-only status updates, live regions, and reduced-motion fallbacks.
- **Performance:** static output, WebP image assets, preconnected font origins, direct asset references, and HTML kept readable with `compressHTML: false`.
- **Privacy:** cookie banner with explicit accept/reject actions; Google Analytics loads only after consent is accepted.
- **Deployment:** Git-based auto-deploys are disabled in Vercel; pull requests get preview deployments, while production deploys only when Release Please creates a SemVer tag.

## Project structure

```
src/
components/ # Header, Footer, CookieBanner
layouts/ # BaseLayout (shared HTML shell, SEO meta tags)
pages/ # One .astro file per route
styles/ # global.css
public/
assets/ # Images (WebP), favicon, brand assets
sitemap.xml
robots.txt
```

## Development

```bash
pnpm install
pnpm dev # starts dev server at http://localhost:3000
pnpm build # production build → dist/
pnpm preview # preview the production build locally
```

## Pages

| Route | Description |
|-------|-------------|
| `/` | Home |
| `/portafolio.html` | Portfolio gallery |
| `/servicios.html` | Services |
| `/historias.html` | Stories / weddings |
| `/sobre-mi.html` | About |
| `/contacto.html` | Contact |
| `/aviso-legal.html` | Legal notice |
| `/politica-de-cookies.html` | Cookie policy |
| `/politica-de-privacidad.html` | Privacy policy |

## Deployment

Vercel Git auto-deploys are disabled through `vercel.json` so pushes to `main` do not publish production directly.

Production releases are handled by Release Please. When a release PR is merged, Release Please creates the GitHub Release and `vX.Y.Z` tag; the same workflow checks out that tag and deploys it to Vercel production.

Preview deployments run from GitHub Actions on pull requests targeting `main`. The preview workflow builds with Vercel CLI, deploys a non-production preview, and comments the preview URL back on the PR.

The deployment workflows require these GitHub Actions secrets:

- `VERCEL_TOKEN`
- `VERCEL_ORG_ID`
- `VERCEL_PROJECT_ID`

Optionally, `RELEASE_PLEASE_TOKEN` can be set to a GitHub personal access token if release PRs should trigger preview workflows and other checks created by GitHub Actions.

The domain `sila-fawn.vercel.app` redirects to `www.silapadin.com` via a 301 configured in `vercel.json`.