Project Overview and Role

This is a project to create the official teaser website for the TV anime "Kaori-san Wants to Fight Even After Reincarnating," scheduled to air in 2026. The target audience includes original manga fans and anime fans seeking information about new anime. It required both rich visual expression to maximize the appeal of the work and high maintainability through a modern development environment.

In this project, I was consistently responsible for everything from infrastructure building to front-end development and WordPress custom theme design.

Adopted Technology Stack

For this project, the following technology stack was selected to maximize development experience, performance, and maintainability.

• Development Environment: Docker, Docker Compose
• Server: MariaDB, Apache (Docker container)
• CMS: WordPress (Custom Theme Development)
• Front-end: Vite, TypeScript, Sass (SCSS)
• Build/Quality Management: npm scripts, PostCSS, ESLint, PHP CodeSniffer

While being a WordPress development, we introduced HMR (Hot Module Replacement) with Vite and type safety with TypeScript, making full use of modern front-end development knowledge.

My Dedicated Design and Implementation

Portable Development Environment with Docker

docker-compose.yml was defined, and each version of MariaDB, Apache, PHP, and WordPress was strictly managed in containers. This eliminated environmental differences among team members and prevented "it doesn't work on my machine" issues, creating a portable and highly reproducible development environment.

Modern Development Experience with Vite + TypeScript

Vite was introduced for WordPress theme development. HMR (Hot Module Replacement) was achieved, reflecting Sass and TypeScript changes instantly in the browser, dramatically accelerating the development cycle. Additionally, all JavaScript was written in TypeScript to ensure type safety, maintaining a robust codebase with fewer runtime errors.

Robust Sass Design Based on PRECSS/BEM

Considering maintainability and reusability, the Sass directory structure was divided into foundation (foundation), layout (layout), components (general components), and project (page-specific). Naming conventions (PRECSS/BEM) like _c-title (component) and _l-container (layout) were thoroughly enforced to prevent style conflicts and achieve a predictable CSS design.

Thorough Commitment to UI/UX

As the official anime website, we focused on providing an experience that heightens user expectations.

• Opening Animation: op-animation.ts was implemented, adding rich effects where elements appear sequentially upon page loading. At the same time, FOUC (Flash of Unstyled Content) was strictly prevented to pursue a sophisticated first impression.
• Inertial Scrolling: inertia-scroll.ts implemented smooth and comfortable inertial scrolling for PC browsing. This created a tactile enjoyment of "touching" the site, enhancing immersion in its world.
• Smooth Scrolling: smooth-scroll.ts was introduced to make anchor link navigation within the page seamless.

Automated Build and Quality Management

npm scripts were set up to automate the workflow from development (npm run dev) to production build (npm run build) and delivery zip file generation (npm run deploy:zip). Additionally, ESLint and PHP CodeSniffer were introduced to establish a mechanism for consistently maintaining high code quality.