Biojuve
Custom Wordpress Theme
Tools Used
Challenges
- Develop an interactive world map for the International page that displays Biojuve’s availability by country.
- Display products in a visually engaging and dynamic way.
- Highlight the night and day skin routines in a visually engaging way.
Solutions
- Built a custom SVG map with pins indicating regions where Biojuve is available. On hover, regions are highlighted, and clicking a region opens a popup showing the country and flag. On mobile, the map is responsive and transforms into an accordion layout while retaining interactivity. All countries and regions are managed in WordPress, with a dynamic backend for easy updates, and all logic was custom-built without plugins.
- Created a custom post type for products and implemented a smooth, interactive product carousel. The carousel highlights product imagery, descriptions, and routines, combining performance optimization with high-quality animation using GSAP.
- Developed an interactive routines page that clearly separates night and day routines, with smooth transitions, responsive layout, and subtle animations to guide the user through the steps of the skincare routine.
My Role
This project involved building a sleek, interactive WordPress website for Biojuve, a skin probiotic brand. The goal was to create a smooth, engaging experience that showcases Biojuve’s products and global availability while reflecting the brand’s modern, high-end aesthetic.
Key features include the interactive routines page, product carousels, and an interactive world map on the International page, highlighting the countries where Biojuve is available.
As the Front-End Developer, I translated Adobe XD designs into a custom WordPress theme using Advanced Custom Fields (ACF) for flexible content management. I ensured pixel-perfect responsiveness, strong accessibility following WCAG 2.0 standards, and performance optimization for a media-rich, interactive website. I implemented GSAP animations and interactive components, including the product carousel and the world map.
Custom logic was developed for all interactivity, with no plugins used, ensuring precise control over behavior and design. Google Analytics and SEO best practices were also integrated to support usability and visibility.