Big City Life

Big City Life is a free, open-source photography portfolio template built with Astro 5.14.1, React 19.1.0, TypeScript, and Tailwind CSS 4.1.4. It uses MDX content collections to manage a photo gallery and blog, then statically generates a responsive portfolio site with interactive React components. The template was created by casset.cat, is licensed under the MIT License, and is deployed live at bigcity.casset.cat.

What is Big City Life?

Big City Life is a static site generator template for photographers, combining Astro's content collections with React components. It takes MDX files (with frontmatter for titles, descriptions, dates, and hero images) as input and outputs a complete portfolio website with a homepage, about page, blog section, and photo gallery. The project runs on Node.js 18+ and uses the pnpm package manager for development and builds.

Key Features

Big City Life's key features focus on MDX-based content, React components, and static-site performance.

• MDX content collections — Blog posts and gallery items are stored as .mdx files in src/content/blog/ and src/content/collection/, validated by Zod schemas, and automatically sorted by publication date.
• React interactive components — Includes a vertical carousel, a real-time search bar, a hamburger menu, and a responsive gallery grid, powered by React 19 and Framer Motion for animations.
• Tailwind CSS 4.1.4 — Utility-first styling with a mobile-first responsive design and adaptive layouts for different screens.
• Performance optimizations — Static generation pre-builds pages, images use WebP with lazy loading, and code splitting keeps the JavaScript bundle minimal.
• SEO-ready output — The build automatically generates a sitemap and RSS feed.
• Iconify integration — Vector icons are used throughout the UI for scalable, customizable icons.
• MIT licensed — The source is open for personal and commercial use.

Who is it for?

Big City Life is aimed at photographers, content creators, developers, and designers who want a modern static portfolio.

• Photographers — Publish a professional portfolio with a gallery and blog, updating content by editing MDX files.
• Content creators — Manage image collections and long-form posts without a database, using plain files in a Git workflow.
• Developers — Learn Astro's file-based routing, content collections, and hybrid static/React architecture by studying a complete, working example.
• Designers — Customize the Tailwind design system and component styles to match a personal brand.

What can you do with Big City Life?

With Big City Life you can run a photography portfolio, publish a blog, customize the design, and deploy to any static host.

• Portfolio showcase: Photographers can display work in a responsive gallery, with each piece having a title, description, date, and hero image.
• Blog publishing: Writers and photographers can add MDX posts that are automatically sorted by date and included in the RSS feed.
• Customization: Developers can extend the content schemas in content.config.ts or add new page templates in src/pages/.
• Deployment: The site builds to a static dist/ folder deployable to Cloudflare Pages, GitHub Pages, or any static host.

How does Big City Life work?

Big City Life works through a file-based workflow: edit MDX content files, run a build command, and deploy the output folder.

1. Install dependencies with pnpm i and run pnpm run dev for local development.
2. Create content by adding .mdx files to src/content/blog/ or src/content/collection/, each with frontmatter metadata.
3. Run pnpm run build to generate the static site.
4. Deploy the dist/ directory to a service like Cloudflare Pages.

Pros and cons

The template offers clear advantages in cost and performance, with some manual editing requirements.

• Pros: Free and MIT licensed; uses current versions (Astro 5, React 19, Tailwind 4); static generation yields fast loads; images are optimized to WebP with lazy loading; SEO sitemap and RSS are generated automatically.
• Cons: Content updates require manually editing MDX files in a code editor — there is no visual admin interface; you need Node.js 18+ and a package manager to run the project locally.

Pricing

The template is free. The repository metadata describes it as "a free Astro template" and it is released under the MIT License.

FAQ

Is Big City Life free?

Yes, Big City Life is completely free and open source. It is released under the MIT License, so you can use it for personal or commercial projects without licensing fees.

What versions of Astro, React, and Tailwind does it use?

The template uses Astro 5.14.1, React 19.1.0, and Tailwind CSS 4.1.4, along with TypeScript and Framer Motion.

How do I add a new photo to the gallery?

Create a new .mdx file in src/content/collection/ with frontmatter properties including title, description, pubDate, and an optional heroImage path to the image.

Can I deploy Big City Life to Cloudflare Pages?

Yes, the README provides deployment steps: after building with pnpm run build, run npx wrangler pages deploy dist --project-name=bigcity and check the Cloudflare Workers/Pages settings.

Does the template include a blog?

Yes, Big City Life includes a blog section with MDX posts. Posts are stored in src/content/blog/ and automatically sorted by publication date on the blog index page.