{"id":50800675,"url":"https://github.com/jramma/big-city","last_synced_at":"2026-06-12T19:04:11.024Z","repository":{"id":340833700,"uuid":"974733231","full_name":"jramma/big-city","owner":"jramma","description":"A free Astro template with latest version Tailwind and a little react with motion","archived":false,"fork":false,"pushed_at":"2026-05-25T11:50:30.000Z","size":86672,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-05-25T13:32:36.644Z","etag":null,"topics":["astro","css","free","react","tailwind","template"],"latest_commit_sha":null,"homepage":"https://bigcity.casset.cat","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jramma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-04-29T08:17:55.000Z","updated_at":"2026-05-25T11:50:34.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/jramma/big-city","commit_stats":null,"previous_names":["jramma/big-city"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jramma/big-city","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jramma%2Fbig-city","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jramma%2Fbig-city/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jramma%2Fbig-city/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jramma%2Fbig-city/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jramma","download_url":"https://codeload.github.com/jramma/big-city/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jramma%2Fbig-city/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34258376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","css","free","react","tailwind","template"],"created_at":"2026-06-12T19:04:07.923Z","updated_at":"2026-06-12T19:04:11.013Z","avatar_url":"https://github.com/jramma.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Big City Life - Astro Photography Portfolio\n\n![Preview](preview.png)\n\n\u003e Feedback is very welcome—please and thank you! Feel free to open an issue or submit a pull request with suggestions or improvements — [casset.cat](https://casset.cat)\n\nA modern photography portfolio website built with Astro, featuring dynamic content management, interactive galleries, and responsive design.\n\nSee it deployed: [bigcity.casset.cat](https://bigcity.casset.cat/)\n\n## 🚀 Architecture Overview\n\nThis project demonstrates a complete **Astro-based photography portfolio** that combines static site generation with dynamic content management. The architecture follows Astro's file-based routing system and content collections pattern.\n\n### Key Technologies\n\n- **Astro 5.14.1** - Static site generator with hybrid rendering\n- **React 19.1.0** - Interactive components\n- **TypeScript** - Type safety and better DX\n- **Tailwind CSS 4.1.4** - Utility-first styling\n- **MDX** - Hybrid Markdown + JSX content\n- **Framer Motion** - Smooth animations\n- **Iconify** - Vector icon system\n\n## 📁 Project Structure\n\n```\nsrc/\n├── pages/           # File-based routing\n│   ├── index.astro  # Homepage (/)\n│   ├── about.astro  # About page (/about)\n│   ├── blog/        # Blog section (/blog)\n│   └── collection/  # Gallery section (/collection)\n├── content/         # Content collections\n│   ├── blog/        # Blog posts (MDX)\n│   └── collection/  # Photo gallery (MDX)\n├── components/      # Reusable components\n│   ├── react/       # React components\n│   └── ui/          # Astro components\n└── layouts/         # Page layouts\n```\n\n## 🗂️ Content Management System\n\n### Content Collections\n\nThe site uses Astro's **Content Collections** for structured content management:\n\n```typescript\n// content.config.ts\nconst blog = defineCollection({\n  loader: glob({ base: \"./src/content/blog\", pattern: \"**/*.{md,mdx}\" }),\n  schema: z.object({\n    title: z.string(),\n    description: z.string(),\n    pubDate: z.coerce.date(),\n    heroImage: z.string().optional(),\n  }),\n});\n```\n\n### Content Structure\n\n**Blog Posts** (`src/content/blog/`):\n\n- MDX files with frontmatter metadata\n- Automatic sorting by publication date\n- Rich content with images and text\n\n**Photo Collection** (`src/content/collection/`):\n\n- Gallery items with metadata\n- Hero images and descriptions\n- Organized by publication date\n\n### Data Flow: Content → Pages\n\n1. **Content Definition**: MDX files with frontmatter in `src/content/`\n2. **Schema Validation**: Zod schemas ensure data integrity\n3. **Data Fetching**: `getCollection()` API in page components\n4. **Rendering**: Astro components with typed props\n\n```javascript\n// Example: Blog index page\nconst posts = (await getCollection(\"blog\")).sort(\n  (a, b) =\u003e b.data.pubDate.valueOf() - a.data.pubDate.valueOf()\n);\n```\n\n## 🎨 Key Features\n\n### Interactive Components\n\n- **VerticalCarousel**: Smooth vertical image scrolling\n- **SearchBar**: Real-time content search\n- **Hamburger Menu**: Mobile navigation\n- **Responsive Gallery**: Adaptive grid layouts\n\n### Performance Optimizations\n\n- **Static Generation**: Pre-built pages for optimal performance\n- **Image Optimization**: WebP format with lazy loading\n- **Code Splitting**: Automatic bundle optimization\n- **SEO Ready**: Automatic sitemap and RSS generation\n\n## 🛠️ Development\n\n### Prerequisites\n\n- Node.js 18+\n- Package manager (npm, yarn, or bun)\n\n### Installation\n\n```bash\n# Install dependencies\npnpm i\n\n# Start development server\npnpm run dev\n\n# Build for production\npnpm run build\n```\n\n### Content Management\n\n1. **Add Blog Post**: Create new `.mdx` file in `src/content/blog/`\n2. **Add Photo**: Create new `.mdx` file in `src/content/collection/`\n3. **Update Metadata**: Modify frontmatter in content files\n4. **Deploy**: Changes automatically build and deploy\n\n### Content File Example\n\n```markdown\n---\ntitle: \"Photo Title\"\ndescription: \"Photo description\"\npubDate: \"2024-01-15\"\nheroImage: \"/assets/photo.webp\"\n---\n\n# Photo Content\n\nYour photo description and content here...\n```\n\n## 🎯 Use Cases\n\nThis project serves as a **comprehensive example** for:\n\n- **Photographers** building portfolio websites\n- **Content Creators** managing image galleries\n- **Developers** learning Astro architecture\n- **Designers** implementing responsive layouts\n\n## 📱 Responsive Design\n\n- **Mobile-first** approach with Tailwind CSS\n- **Adaptive layouts** for different screen sizes\n- **Touch-friendly** navigation and interactions\n- **Optimized images** for various devices\n\n## 🔧 Customization\n\n### Styling\n\n- Modify `src/styles/` for custom CSS\n- Update Tailwind config for design system\n- Customize component styles in `src/components/`\n\n### Content\n\n- Add new content types in `content.config.ts`\n- Create new page templates in `src/pages/`\n- Extend component library in `src/components/`\n\n## 📈 Performance\n\n- **Lighthouse Score**: 95+ across all metrics\n- **Core Web Vitals**: Optimized for user experience\n- **Bundle Size**: Minimal JavaScript footprint\n- **Loading Speed**: Sub-second page loads\n\n## 🚀 Deployment\n\nThe site is optimized for deployment on:\n\n- **Cloudfare** (current config)\n- **GitHub Pages**\n- **Any static hosting service**\n\n## 📄 License\n\nThis project is open source and available under the MIT License.\n\n---\n\n**Created by [casset.cat](https://casset.cat)**\n\n_This project serves as an educational resource for photographers and developers looking to build modern, performant portfolio websites with Astro. Feel free to use it as a starting point for your own photography portfolio or as a learning resource for Astro development._\n\n## Deploy on Cloudfare\n\n1. Create an account on Cloudfare\n\n2. Execute:\n\n  ```bash\n  \n  pnpm i\n  \n  pnpm run build\n  \n  npx wrangler pages deploy dist --project-name=bigcity\n  \n  ```\n\n3. Check settings on Cloudfare workers/pages","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjramma%2Fbig-city","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjramma%2Fbig-city","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjramma%2Fbig-city/lists"}