VIVIDSOUL Inc.

Overview

I was responsible for coding and WordPress implementation for the corporate website of Vividsoul Inc.

Focus on Maintainability and Operations

Since this was a WordPress build, I implemented the project with easy-to-update custom field designs and structures, anticipating the operational phase and long-term maintenance needs.

Additionally, I focused on delivering well-organized code by separating template and function files, and adopting the FLOCSS methodology for CSS architecture to ensure the site remains manageable over time.

Commitment to Animation Implementation

For animation implementation, I paid careful attention to faithfully reproducing the designer's vision while ensuring smooth and engaging user interactions. Below are some specific highlights:

• Homepage Hero Section: The rainbow animation is achieved by dynamically moving masks. Through extensive testing and refinement, I adjusted the effect to naturally fade in and fade out from the edges, following the rainbow's shape to create seamless, organic movement.
• Homepage Recruit Section: I implemented a grid layout for photo placement, where each photo fades out and fades in at random intervals. While these involved detailed elements—such as applying blur effects during fade-out, managing animation timing, and fine-tuning easing—I carefully crafted each aspect to ensure natural behavior that complements the overall site atmosphere.
• Sticky Navigation on Subpages: The sticky navigation on subpages serves as anchor links to each section, with the current section indicator updating as users scroll. Additionally, since the menu color needed to change based on the background color, I implemented a system that dynamically switches between two values according to scroll position.
• Hover Effects: For hover animations, I focused on creating pleasant user experiences when the cursor enters and leaves elements. Rather than simply indicating the hover state, I crafted movements that naturally encourage users to click.