Test project · 28 Mar 2023

mirfak - a digital-agency landing refactored from a static test task into a working site

• HTML
• SCSS
• Vanilla JS
• Splide
• Responsive
• Accessible

A Russian-language landing for a web studio (header, a hero with a Splide slider, a services accordion, a portfolio grid, a testimonials carousel, contacts and a request form) shipped as a static HTML/CSS/JS test task with real defects: both Splide sliders bound to the first slider's arrows so the second carousel was dead, the accordion was built from non-focusable divs and force-opened itself on scroll, every nav link pointed at '#', the contact form had no handler, the page declared lang=en on all-Russian content, there were no media queries at all, the copy was lorem ipsum with a mismatched 'Digital Qala' brand, and testimonial images were hotlinked over http. Rebuilt into a working site while keeping the existing visual identity. Bugs first: the slider init was rescoped per-root, the accordion became real aria-expanded buttons animated with a grid-template-rows height transition, the navigation was wired to anchor sections with scroll-padding for the fixed header, and the form got names, types and validation. Then the missing pieces: a Clients section (stats and a logo wall) and a Pricing section (three tiers), a request modal triggered by every CTA with client-side validation, a success state, focus trap, Escape and a fade-and-scale animation, a dynamic footer year, and a custom 'n' monogram favicon (SVG, PNG sizes, apple-touch, manifest). Placeholder text was replaced with believable Russian copy, a full 390-to-1440 responsive layer was added (burger menu, stacking grids, no horizontal overflow), accessibility was brought to a real floor (skip link, landmarks, focus-visible, accessible names, reduced-motion guards) and motion was boosted with scroll reveals and ease-out-expo micro-interactions. Static HTML + SCSS + vanilla JS with Splide, self-hosted on a Hetzner box behind Caddy.