Wind Energy — Eco-friendly Wind Power Corporate Site
A demo project that dissects the information architecture and motion of a real corporate site, then reinterprets it as the official homepage of a fictional eco-friendly wind-energy company, "Wind Energy" — six pages in total: one main page and five subpages. Visit the live demo
Design driven by reference analysis
We measured hycore.com section by section — typography (size, weight, color), spacing, scroll-triggered animations (fadeInUp/fadeIn/slideInUp at 0.7s), and the header state transition (transparent over the hero, white on scroll) — and turned them into design tokens. The teal brand color (#00BBB4) stays, while all content was rewritten for the wind-energy domain.
Main page
Eight sections: a two-slide crossfade hero with Ken Burns zoom, IntersectionObserver scroll reveals, core-value cards where a white panel floats alternately left and right over rounded imagery, hover-zoom solution and news cards, a text wordmark partner grid, and a recruit banner.
Five subpages
- Business — a horizontal accordion of key features that expands on click/hover (vertical stack on mobile), a dark stat band, and a spec table
- Technology — the site's only dark theme, with a canvas particle background, 01–03 technology cards, and an infinite marquee of certifications and patents
- Projects — category filter tabs that replay staggered animations on switch, plus a history timeline
- News — a board-style list with category tabs and pagination
- Contact — a validating form with inquiry-type chips, a three-part phone field, file attachment, and a privacy consent step
Tech stack
Next.js 16 (App Router) static export, React 19, a design system in a single global CSS file, and Pretendard Variable. Every photo is an original asset made with the local AI image-generation CLI (agy), and the site is deployed on Cloudflare Pages. Fully responsive across desktop and mobile, with prefers-reduced-motion support.
The goal was to reproduce the polish of a real corporate site while reinterpreting it for a new domain. Explore the full experience on the deployed demo.
