Hsiang Architects

Visit Hsiang Architects Official Website ↗

A modern web redesign for HSIANG TEN CHUN ARCHITECTS. Guided by the core philosophy that “Architecture is a vessel for living, balancing rational structure with natural light and shadow,” the site blends fair-faced concrete aesthetics, architectural blueprint grids, and spatial craft into a high-performance digital gallery and commercial portal.

Core Features and Page Modules

• Homepage Business & Portfolio Hub: Bold hero visual, dynamic counters for 15+ years of experience and 113+ completed projects, 6 featured works, and AEO structured FAQs.
• 113-Project Portfolio Database: Archive of 113 architectural works across 7 categories (townhouses, residential towers, private villas, design proposals, public facilities, commercial offices, and boutique hotels). Features 7-category instant filtering, debounced search, technical specs, and a multi-image lightbox.
• Full Bilingual Internationalization: All 5 primary pages feature dedicated /en/ routes, URL parameter state synchronization, and seamless language switching.
• Design Philosophy & Team Roster: In-depth presentation of four core design principles (vessel for life, structural rationality, vernacular context, and meticulous detailing), along with professional credentials for principal architect Hsiang Ten-Chun and associate architect Hung Wei-Hsun.
• Inquiry & Consultation Pipeline: Turn-by-turn directions to the Shilin office, direct phone/fax dialing, operating hours, and a structured project inquiry form.

Technical Architecture & Extreme Performance

• Core Tech Stack: Vanilla JavaScript, Tailwind CSS CDN, GSAP 3 / ScrollTrigger, Cloudflare Pages, with Schema.org / llms.txt optimizations for SEO, GEO, and AEO.
• Zero-Overhead Pure Native Frontend: Built with modern native Vanilla JavaScript and Tailwind CSS CDN without a build-step bundler, achieving instant first-contentful paint.
• GSAP 3 Craft-Grade Motion Engine: Integrated GSAP and ScrollTrigger for buttery-smooth parallax scrolling, animated metric counters, interactive filtering, and image lightboxes.
• Cloudflare Pages Global Edge Hosting: Edge distribution with strict _headers security rules and long-term asset caching; maintains full backwards compatibility with legacy /archproject URLs via _redirects 301 rules.
• SEO / GEO / AEO Optimization:
  • 100% full Schema.org semantic structured markup coverage including ArchitecturalService, WebSite, BreadcrumbList, FAQPage, and CreativeWork.
  • Localized geotagging with Shilin, Taipei coordinates and physical entity metadata.
  • Standardized /llms.txt and /llms-full.txt knowledge files for accurate indexing by AI search engines (SearchGPT, ClaudeBot, PerplexityBot).
• GA4 Conversion Tracking: Custom analytics.js tracking module capturing lead submissions (generate_lead), project views (view_item), direct call clicks, and Google Maps interactions.