Prehistory: we are currently rebuilding the old website https://tero.design - essentially creating a copy of the site with some improvements. The developer has completed most of the work but got stuck on one point and needs assistance to finish. I asked to describe the core issue and task, and below you can review this.
The interim version of the site is on the subdomain - https://app.tero.design
🧩 Task essence:
It is necessary to completely rebuild the logic for displaying content on a single project page — so that the gallery (grid) with images and videos displays correctly in a responsive masonry layout. Currently, the grid breaks, widths and heights are calculated incorrectly, there are cut-offs, overlaps, and visual bugs.
Examples of how it should look: https://tero.design/project/80 and https://tero.design/project/61
Current version: https://app.tero.design/project/80 and https://app.tero.design/project/61
📌 What is currently implemented:
Laravel 11 (PHP 8.2) + Blade template.
Content (videos, images, 3D tour, curtains) is passed to multimedia_grid (rows and cells).
In each row: calculation of total height based on content proportions (ratio), then distribution according to flex percentages.
There is custom JS for animation, curtain appearance, and handling.
The grid is rendered using HTML + CSS + JS, without third-party libraries (Masonry, Packery, etc. are not used).
❌ Problem:
Incorrect calculation of flex percentages. Some images/videos are cut off or stretched out of proportion.
Inconsistent row height. Sometimes content in a row is cut, sometimes it doesn’t fill the entire width.
Videos are narrow and tall — taking up too much width, breaking the grid.
Mobile version bugs with 100% width and auto height.
JS conflicts with lazyload and canvas curtain. Initialization is not always correct.
The cause is unknown: style conflicts, logic errors, or calculation mistakes in PHP/JS.
Element behavior is inconsistent: some rows are normal, others are completely broken.
There is custom frame-by-frame element appearance logic (showItemsSequentially), which may affect positioning.
✅ What needs to be done:
Rewrite the project grid to a true responsive masonry layout, considering all content types:
img — regular images.
video — video files (with loop, autoplay, muted).
vr — iframe 3D tour.
curtain — curtains (two images with canvas separator).
Fix width/height calculations on the PHP side (or abandon them in favor of JS if necessary).
Ensure correct responsive behavior on all devices (desktop, tablet, smartphone).
Provide stable appearance of all blocks, without jerks, lag, or lazyload bugs.
Optionally — you can use a masonry library: for example, Masonry.js, Packery, or CSS Grid/Flex with JavaScript calculations.
Move JS to a separate file, not inline.
💡 What might help:
Projects are loaded from the database via Laravel.
The project already uses Vue + ElementPlus (in admin panel), but on the front end, Blade.
All multimedia is in /public/multimedia/....
Proportions of content can be saved using getimagesize(), but if that doesn’t help — JS onload can be used for calculations.
🔐 Important:
It must be cross-browser compatible.
Mobile device support is mandatory.
Responsiveness (row height, column width) should be flexible but visually balanced.
Code must be clean, with comments.
🧾 What to provide:
Refactored Blade template for the project page.
Extracted styles and scripts (preferably — app.css, project.js).
Working masonry grid where:
no cut-off elements;
no overlaps;
curtains and videos work correctly;
mobile looks adequate.
🔧 Project technologies:
Laravel 11 (PHP 8.2)
Vue 3 (for admin panel)
Element Plus (UI)
Flysystem, VueFinder
Thank you for your attention. I look forward to your proposals regarding cost and implementation timeline for this task. If you have questions — feel free to contact me, I will try to respond quickly.
