Website development for a design studio using 1C-Bitrix

Design Studio Website Development on 1C-Bitrix

Design studio website — showcase where every pixel works for reputation. Visitor decides on collaboration in 3–7 seconds browsing portfolio. If works load slow, animations stutter, filtering reloads whole page — studio loses client. 1C-Bitrix lets build technically sound site with interactive portfolio while keeping content management convenient for non-developer managers.

Portfolio Architecture on Info Blocks

Portfolio built on separate info block type "Projects". Each element contains properties:

• Project Type — reference binding (list): interior design, graphic design, web design, industrial design
• Client — string with CRM-contact binding option
• Year — numeric for chronological sort
• Cover — File property with auto-resizing via CFile::ResizeImageGet()
• Gallery — multiple File property for rich media (photos, video preview)
• Project Description — HTML editor for detailed case
• Tags — multiple reference binding for cross-filtering

Two-level info block sections: first level — design type, second — subcategories ("Interior → Residential", "Interior → Commercial").

Filtering Without Reload

Filtering by project type via AJAX component bitrix:catalog.section with disabled pagination. Category click sends request to ajax.php with filter params, component returns HTML fragment inserted in portfolio container.

Filter params via $arFilter:

• PROPERTY_TYPE — project type
• >=PROPERTY_YEAR / <=PROPERTY_YEAR — year range
• PROPERTY_TAGS — tags via logical OR

Caching configured at component level with tagged cache (cache_tag) bound to info block. On new project addition cache clears auto via OnAfterIBlockElementUpdate handler.

Deep-Dive: Portfolio with Animations and Interactive Elements

Portfolio visual presentation — key differentiator. Static card grid doesn't convey team skill level. Need masonry layout, smooth element appearance on scroll, CSS transitions on filtering. Everything works without FPS drops on mobile.

Masonry Grid on CSS Grid

Classic masonry on JavaScript (Masonry.js, Isotope) creates dependency and needs DOM recalc on change. Modern approach — CSS Grid with grid-template-rows: masonry (Firefox support) or column-count fallback.

For 1C-Bitrix this means template generates container with .portfolio-grid CSS class, styles define columnar layout:

• Desktop (1200px+): 3 columns with gap: 24px
• Tablet (768–1199px): 2 columns with gap: 16px
• Mobile (<768px): 1 column

Each card gets .portfolio-card class with break-inside: avoid to prevent breaks. Variable card height creates masonry effect.

IntersectionObserver for Element Appearance

Card appearance animation on scroll via IntersectionObserver, not scroll event tracking (blocks main thread). Algorithm:

1. All cards on load get .portfolio-card--hidden with opacity: 0 and transform: translateY(40px)
2. Observer with threshold: 0.15 and rootMargin: "0px 0px -50px 0px" tracks intersection
3. On viewport entry card gets .portfolio-card--visible, triggering CSS-transition: opacity 0.6s ease-out, transform 0.6s ease-out
4. transition-delay calculated dynamically: (index % columnsCount) * 0.1s — creates cascading left-to-right effect

Critically: Observer created once, after triggering for card call observer.unobserve(entry.target) — prevents recalc on back-scroll.

CSS Transitions on Filtering

Category change can't just replace HTML — user sees flicker. Transition happens in three phases:

1. Fade-Out: .portfolio-grid gets opacity: 0 via CSS-transition 200ms
2. Content Replacement: on transitionend event AJAX response HTML inserted in container
3. Fade-In: after DOM insert (via requestAnimationFrame for render guarantee) container returns opacity: 1

Additionally: on filtering URL updates via history.pushState() with param ?type=interior, allowing link sharing of filtered portfolio, correct back button.

Image Optimization

Rich-media portfolio requires image optimization. Template uses loading="lazy" for native lazy load, covers generated in three sizes via CFile::ResizeImageGet():

• Thumbnail (400×300): for portfolio grid
• Medium (800×600): for hover preview
• Full (1920×auto): for detail page

WebP generated via "Image Optimization" module or OnBeforeIBlockElementUpdate handler with GD/Imagick conversion.

Work Process: Timeline Component

"How We Work" section built on component displaying stages as vertical timeline. Data stored in separate "Stages" info block sorted by SORT field.

Design Team

"Team" section via "Employees" info block with portfolio binding via multiple element binding property. Designer card shows: photo, specialization, experience, Behance/Dribbble links, thumbnails of last 3 projects.

Design Blog and Trends

Blog — main SEO tool. "Articles" info block with SEO properties:

• META_TITLE, META_DESCRIPTION — standard info block SEO fields
• Canonical Link — String property, inserted in <link rel="canonical">
• Author — "Employees" binding for E-E-A-T signals
• Category — section binding: trends, cases, tools, inspiration

Articles use bitrix:news.detail component with template including Article micromarkup (Schema.org) and Open Graph for correct share display.

Brief Form with File Upload

Request form via "Web Forms" module with fields:

• Name, email, phone — mandatory with validation
• Project Type — dropdown synchronized with portfolio types
• Task Description — textarea with 2000 char limit
• File Upload — multiple File with limit: PDF, JPG, PNG, AI, PSD; up to 5 files, 20 MB each

Submitted request creates Bitrix24 CRM lead via REST API with attachments. Manager notified via Telegram webhook.

Technical Base

Site deployed on "Standard" or "Small Business" edition — depends on CRM integration need. Composite cache enabled for all public pages, excluding forms. CDN for static configured via Bitrix CDN module or external service (Cloudflare).