Swilsson
Category
PresentationTechnologies
Challenge
Create a portfolio WordPress website matching client’s design which included horizontal scrollable pages with multiple section types that can work together to create a block-like effect as more and more content was added to the page.
The sections will fit content such as text, image or video that should be easy to adjust and change order via a drag & drop system in the WordPress admin dashboard.
An important aspect for the client was having a working offline version of the site so he can give presentations if there are internet issues at the meeting he’s attending.
Solution
We created a WordPress website using a custom theme, relying on ACF (Advanced Custom Fields) extension to create the sections and the effects required to add the sections in the page, move them around.
For the offline version we implemented a PWA (progressive web application) that will cache the content of the site on the device, so the navigation of the site can continue even if the internet connection stops.
Key features
PWA
Using the PWA as a solution for the offline navigation of the site directly from the PWA cache on the deviceUnlimited section combos
The section can be combined in countless ways to generate the horizontal pageResponsive
The horizontal scroll adapts on different screen sizes and recalculates the sections size. It also transitions to vertical scrolling on mobile
Horizontal navigation
The website layout is created for horizontal scroll. All the content on the page is added from left to right making it easy to present visual information to visitors.
Unlimited section combos
Each page can be created using a large variety of block elements that are built to be interchangeable, not being affected by the position on the page.
Responsive
While the main focus of the website was to create a desktop experience for the user, allowing the client to present the projects, a responsive mobile version was also implemented that transitions from horizontal to vertical scrolling.
