Oweb Solutions Website
Frontend of the company's own redesigned website in native JavaScript, featuring a menu that collapses into a vertical burger strip on scroll and a video banner with custom Swiper-based transitions.
About the project
I built the frontend of the Oweb Solutions redesign from the layout, with two non-trivial elements: a desktop menu that stays reachable without covering content, and a fullscreen video banner modeled on a competitor's React slider. Everything is written in native HTML, CSS, and JavaScript without a build step.
The problem
The desktop menu in the mockup was two-tiered and 130px tall, covering section titles on an animated site. The director wanted the menu always at hand and the info panel kept, which ruled out a thin sticky header. The director also asked for a banner on the level of a competitor's custom React slider, on a site that had no build tooling.
The solution
On scroll past a 150px threshold, the horizontal menu folds to the left and unfolds into a vertical strip with a burger that opens the mobile menu, with separate logic for widths up to 1270px. For the banner, I reproduced the competitor's timings and animation sequence from measurements. Swiper only holds the slides and handles the fade, while custom logic ties slide duration to video.duration, splits each transition into exit and entry phases, and cancels timers when a tab is clicked mid-animation.
Tech stack
Screenshots
Feedback
Tried this project or read the case study? I'd love to hear your thoughts.