# In-Col Studio Website

> Creative studio website built with Kirby CMS, featuring portfolio projects, news articles, and interactive components.

## Architecture

This is a Kirby CMS (PHP-based) website with a custom JavaScript/CSS frontend. The site uses:
- Kirby CMS for content management and routing
- Tailwind CSS (v4) for styling
- Vanilla JavaScript for interactivity
- Modal-based navigation for articles and project details

## Key Features

- Portfolio/project showcase with filtering
- News/blog with pagination and load more
- Modal system for articles and project descriptions
- Custom video player with playback controls
- Responsive image rendering with modern formats
- Cookie consent popup
- SEO optimization with structured data

## File Structure

### Templates (PHP)
- `home.php` - Homepage with featured projects
- `work.php` - Portfolio page with project grid and filtering
- `project.php` - Individual project pages
- `news.php` - News listing page with pagination
- `article.php` - Individual article pages
- `error.php` - 404 error page
- `privacy-policy.php` - Privacy policy page

### Snippets (PHP)
- `header.php` - Site header with meta tags and SEO
- `nav.php` - Navigation with sidebar menu and modals
- `footer.php` - Site footer with contact info and links
- `blocks.php` - Block rendering system for content
- `render-image.php` - Image rendering with responsive srcsets
- `render-video.php` - Video rendering with optional controls
- `cookie-popup.php` - Cookie consent popup
- `news-items.php` - News item HTML rendering for AJAX
- `seo-structured-data.php` - JSON-LD structured data

### JavaScript
- `app.js` - Main application logic including:
  - Clock and date widgets
  - Menu toggle functionality
  - Modal system (articles and projects)
  - Video player controls
  - News pagination (load more)
  - Image lazy loading
  - Scroll locking utilities

### CSS
- `app.css` - Tailwind CSS with custom components:
  - Modal animations
  - Video player controls
  - Typography and prose styles
  - Responsive utilities

### Configuration
- `config.php` - Kirby routes and API endpoints

## Routing System

The site uses Kirby's routing system with custom routes:

### Page Routes
- `/` - Homepage
- `/work` - Portfolio listing
- `/work/category/{tag}` - Filtered portfolio by tag
- `/work/{slug}` - Individual project (if link_to = 'yes')
- `/news` - News listing
- `/news/{slug}` - Individual article (if link_to = 'internal')
- `/privacy-policy` - Privacy policy modal

### API Routes
- `/news/{pageNum}` - AJAX endpoint for pagination
- `/{path}.json` - JSON API for modal content

### Special Behaviors
- Projects with `link_to = 'no'` redirect to `/work`
- Articles with `link_to = 'external'` redirect to external URL
- Articles with `link_to = 'none'` redirect to `/news`
- Privacy policy opens as modal on homepage
- Internal articles open as modals on news page

## Content Types

### Projects
Fields:
- `headline` / `title` - Project name
- `subheadline` - Project tagline
- `sector_tags` - Industry sectors (comma-separated)
- `service_tags` - Service types (comma-separated)
- `link_to` - Controls linking behavior ('yes'/'no')
- `cover_type` - Cover media type ('cover_image'/'cover_video')
- `cover_image_file` - Cover image
- `cover_video_url` - Cover video URL
- `cover_poster_file` - Video poster image
- `hero_type` - Hero media type ('hero_image'/'hero_video')
- `hero_ratio` - Aspect ratio class
- `hero_video_controls` - Enable video controls
- `layout` - Content blocks
- `project_meta_title` - SEO title
- `project_meta_description` - SEO description
- `project_meta_keywords` - SEO keywords

### Articles
Fields:
- `headline` / `title` - Article title
- `description` - Article description
- `category` - Article category
- `date` - Publication date
- `link_to` - Link behavior ('internal'/'external'/'none')
- `external_link` - External URL (if applicable)
- `cover_type` - Cover media type
- `hero_type` - Hero media type
- `layout` - Content blocks
- `author` - Author user reference
- `article_meta_title` - SEO title
- `article_meta_description` - SEO description

## Modal System

The site uses two modal systems:

### Article Modal (`#model-wrapper`)
- Opens for internal articles
- Loads content via AJAX from `.json` endpoints
- Shows article with title, category, date, and content blocks
- Handles browser back button navigation

### Project Modal (`#project-wrapper`)
- Opens on project pages when clicking "About the project"
- Shows project description
- Only appears on individual project pages

## Video Player

Custom video player with optional controls:
- Play/pause functionality
- Mute/unmute controls
- Fullscreen support (desktop and iOS)
- Progress bar with seeking
- Time display
- Autoplay and loop options
- Poster image support

## Image Rendering

Responsive images with:
- Multiple breakpoints: 400, 560, 600, 834, 1040, 1120, 1200, 1680
- 2x retina support
- WebP and JPG formats
- Lazy loading
- Fade-in animation
- Proper `sizes` attribute

## SEO Features

- Comprehensive meta tags (Open Graph, Twitter Cards)
- JSON-LD structured data (Articles, Projects, Organization, Breadcrumbs)
- Dynamic meta titles and descriptions
- Canonical URLs
- Sitemap.xml generation
- Robots.txt with dynamic disallow rules
- Schema.org markup for content types

## Styling Conventions

### Tailwind Classes
- Custom breakpoints: `sm: 640px`, `md: 1080px`
- Max container width: `1728px`
- Common spacing: `gap-3`, `gap-y-12`, `mt-12`, `md:mt-16`
- Background blur: `backdrop-filter: blur(20px)`
- Border radius: `rounded-[3px]`, `rounded-[6px]`

### Typography
- Font: ABCRepro-Screen (custom font)
- Heading sizes: `text-[1.875rem]` to `text-[3.25rem]`
- Body: `text-[1rem]` / `text-[1.25rem]`
- Line heights: `leading-[1.2]` to `leading-[1.4]`
- Letter spacing: `tracking-[-0.01rem]` to `tracking-[-.02em]`

### Colors
- Black backgrounds: `#1a1a1a`, `#000000`
- Gray text: `#767676`, `#8c8c8c`
- White overlay: `rgba(88, 90, 90, 0.6)` with backdrop blur
- Border: `#E3E4E5`, `#333333` (dark mode)

## JavaScript Utilities

### Body Scroll Lock
```javascript
lockBodyScroll() // Prevents body scrolling
unlockBodyScroll() // Restores body scrolling
```

### Modal Management
- Checks if other modals are open before unlocking scroll
- Handles browser history with pushState/popState
- Resets scroll position when opening

### News Pagination
- Loads more articles via AJAX
- Updates DOM with new articles
- Hides button when no more pages

## Development Notes

### Common Patterns

**Iterating projects:**
```php
foreach (page('work')->children()->listed() as $project) {
    // $project has fields like headline, subheadline, sector_tags, etc.
}
```

**Rendering images:**
```php
<?php snippet('render-image', [
    'image' => $imageFile,
    'sizes' => '(min-width: 1728px) 1120px, 66vw',
    'class' => 'absolute inset-0 w-full h-full object-cover'
]) ?>
```

**Rendering videos:**
```php
<?php snippet('render-video', [
    'videoUrl' => $videoUrl,
    'posterImage' => $posterFile,
    'showControls' => true,
    'autoplay' => false
]) ?>
```

### Tag Filtering
Tags are normalized using `Str::slug()` for URLs and filtering. The system:
1. Collects all sector_tags and service_tags from projects
2. Converts to slugs for URL matching
3. Maintains original casing for display

### Content Blocks
Projects and articles use a flexible block system via `$page->layout()->toBlocks()`. Individual block snippets are rendered from `blocks/{type}.php`.

## Browser Compatibility

- Modern browsers (Chrome, Firefox, Safari, Edge)
- Mobile Safari (iOS)
- Responsive design (mobile-first)
- Progressive enhancement for video controls
- Fallback for non-JS users in article/policy pages

## Performance Optimizations

- Lazy loading images with fade-in
- Preconnect to CDN
- Font preloading
- Responsive images with optimal formats
- Efficient srcset generation
- Scroll event prevention for scrollable elements
- Minimal JavaScript dependencies

## Analytics

- Google Tag Manager (GTM-KJMS83GG)
- Data attributes for tracking:
  - `data-behavior="trackContact"`
  - `data-footer-action="{action}"`
  - `data-social-platform="{platform}"`

## Accessibility

- ARIA labels and roles
- Semantic HTML
- Keyboard navigation support
- Screen reader support
- Focus states on interactive elements
- Alt text for images
- Proper heading hierarchy

## Testing Checklist

When making changes, test:
- [ ] Modal opening/closing (articles and projects)
- [ ] Browser back button behavior
- [ ] Video player controls
- [ ] Image lazy loading
- [ ] News pagination
- [ ] Mobile menu
- [ ] Project filtering by tag
- [ ] External/internal article links
- [ ] Cookie popup dismiss
- [ ] Scroll locking with multiple modals
- [ ] SEO meta tags
- [ ] Structured data validation

## Known Behaviors

1. **Project Links**: Projects with `link_to = 'no'` are accessible to logged-in users but redirect guests to `/work`
2. **Article Types**: Articles can be internal (modal), external (redirect), or none (disabled)
3. **Modal Persistence**: Direct URLs to articles/policies open the modal automatically via data attributes
4. **Video Autoplay**: When controls are enabled, autoplay can be toggled; when disabled, autoplay is forced
5. **Tag Normalization**: Tags are case-insensitive in URLs but preserve original casing in display

## Contact & Links

- Email: info@in-col.com
- LinkedIn: https://www.linkedin.com/company/in-col
- Instagram: https://www.instagram.com/in_col_studio/

---

## Quick Reference

**Add a new project:**
1. Create page in Kirby panel under "work"
2. Set `link_to = 'yes'` to make it accessible
3. Add cover image/video and hero image/video
4. Add sector_tags and service_tags for filtering

**Add a new article:**
1. Create page in Kirby panel under "news"
2. Set `link_to = 'internal'` for modal display
3. Add cover image/video
4. Add content blocks via layout field

**Modify video player:**
Edit `render-video.php` snippet and corresponding JavaScript in `app.js` (VideoPlayer class)

**Change modal styles:**
Edit CSS in `app.css` under modal-related classes (`#model-wrapper`, `#project-wrapper`)

**Update SEO:**
Edit `header.php` for meta tags and `seo-structured-data.php` for JSON-LD