Project Overview and Role

This is the official portfolio site that introduces works by student creators enrolled at Comprehensive Academy Human Academy and promotes matching with companies. This site is not a one-year project; it is designed as a highly scalable platform intended for continuous operation in 2023, 2024, 2025, and beyond.

In this project, I was involved from technology selection, responsible for the foundational design of a WordPress custom theme considering scalability, building a modern development environment with Webpack and TypeScript, and general front-end development.

Technology Stack Adopted

• CMS: WordPress (6.8.2)
• Server-side: PHP (7.4.33)
• Front-end: TypeScript (ES2020 compatible), JavaScript (ES6+), jQuery
• Build Tools: Webpack 5, imagemin-webpack-plugin
• Styling: CSS3 (Managed by Year)
• Library: Lity (Lightbox function)
• Infrastructure: Docker (Development environment)
• Other: AJAX, WordPress Nonce, Contact Form 7, Google reCAPTCHA

I selected these technologies and built a development environment from scratch that meets high levels of development efficiency, maintainability, and site performance.

My Meticulous Design and Implementation

Design of "Year-Specific Asset Management System" Supporting Scalability

The biggest challenge in this project was the bloat and increasingly complex management of assets (CSS, JS, images) as the site aged (2023 version, 2024 version, 2025 version...).

To solve this problem, I designed and implemented a unique "year-specific asset management system" where WordPress's backend (PHP) and the front-end build process (Webpack) work in conjunction.

1. Directory Structure Design: I defined a strict directory structure where all assets are managed by year, such as src/css/2023/, src/css/2024/.
2. Automatic Template Detection: When year-specific page templates like page-archive2023.php or page-archive2024.php are loaded, WordPress automatically detects them.
3. Dynamic Asset Loading: I consolidated the logic in inc/asset-loader.php, and based on the detected year, I built a mechanism to dynamically load only the necessary CSS (e.g., /assets/css/2024/style.css).

This design allows for safe and efficient development and maintenance, even when adding features in the future (e.g., 2026 version), without affecting past versions.

Building a Modern Development Environment with Webpack and TypeScript

To maximize WordPress development productivity, I built a modern development environment that incorporates Webpack 5 and TypeScript.

• Fast Developer Experience (DX): I prepared the npm run dev:fast command, completing TypeScript and CSS compilation in just 1.7 seconds, and created a fast development environment with hot reloading (live reloading) enabled.
• Separation of Development and Production Modes: I implemented a feature to automatically switch paths with inc/asset-loader.php, so that when running npm run dev, the src/ directory is referenced, and for production builds, the assets/ directory is referenced. This allows developers to focus on coding without being aware of the build process.
• Automatic Optimization by Build Process: I integrated imagemin-webpack-plugin into Webpack and introduced a process that automatically compresses image resources by 66% when running npm run build. This prevents manual optimization errors by developers and consistently ensures site performance.
• Code Quality Assurance: By adopting TypeScript and ensuring type safety, I achieved a reduction in runtime errors and a maintainable codebase.

Enhancing UI/UX and Interactions for User Experience

To achieve the site's goal of "matching with creators," I focused on intuitive UI/UX implementation.

• Balancing Performance and UI: To display a large number of videos in a list, I adopted "Lity Lightbox," which initially displays only YouTube thumbnail images and loads the video itself only when clicked. This dramatically improved the initial display speed (LCP).
• Implementation of Asynchronous (AJAX) Functionality: To make it easier for company representatives to evaluate creators, I implemented an AJAX-based "Like function" using WordPress Nonce (security token). Furthermore, the "Category Filtering function" also operates quickly on the client side, providing a comfortable artwork search experience.
• Semantic Markup: I meticulously used HTML5 tags such as main, nav, section appropriately, ensuring structured markup with accessibility (a11y) and SEO in mind.