Wind Energy — Eco-friendly Wind Power Corporate Site
A six-page demo site for a fictional eco-friendly company called "Wind Energy." One main page and five subpages present the company, technology, projects, news, and inquiries through a cohesive corporate design system. Visit the live demo
Design system and motion
Typography, spacing, color, scroll-triggered animations (fadeInUp/fadeIn/slideInUp at 0.7s), and the header state transition (transparent over the hero, white on scroll) were formalized as reusable design tokens. A teal brand palette anchors content written specifically 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 make complex industrial content feel credible, clear, and approachable across every page. Explore the full experience on the deployed demo.
