Bối cảnh & Tầm nhìn dự án

TekNix Concept là đơn vị tiên phong trong lĩnh vực tư vấn kiến trúc, thiết kế nội thất và thi công trọn gói (Turnkey Design & Build) cho các không gian văn phòng làm việc hiện đại và cơ sở thương mại cao cấp tại Việt Nam. Với hơn 500 công trình đã hoàn thiện trên 34 tỉnh thành cho các khách hàng doanh nghiệp quy mô lớn (như Mercury Office 4.500m², Nix Holding 950m², NVB Play 650m²), thương hiệu định vị mình là điểm giao thoa giữa nghệ thuật kiến trúc đương đại và giải pháp công năng tối ưu chi phí.

Để khẳng định vị thế dẫn đầu và tiếp cận các tập đoàn đa quốc gia, chủ đầu tư dự án và doanh nghiệp đang tìm kiếm giải pháp văn phòng trọn gói, TekNix Concept cần một nền tảng Brand Portal hiện đại: sang trọng, truyền tải trọn vẹn tinh thần kiến trúc độc bản, tối ưu trải nghiệm thị giác và đạt hiệu năng tải trang vượt trội.

Bài toán đặt ra

Thách thức từ góc độ thương hiệu & kinh doanh

• Định vị phân khúc cao cấp: Thị trường thiết kế thi công nội thất văn phòng có tính cạnh tranh cao. Nền tảng số cần phản ánh đúng chất lượng và tiêu chuẩn thi công quốc tế của TekNix Concept, tách biệt hoàn toàn khỏi các đơn vị thầu nhỏ lẻ thông thường.
• Truyền tải hệ sinh thái dịch vụ đa tầng: TekNix Concept cung cấp chuỗi giải pháp khép kín từ Thiết kế văn phòng (#BIM, #SmartOffice), Thi công thần tốc hoàn thiện trong 15 ngày, Thiết kế không gian thương mại (Showroom, Café, Spa phong cách Art Space & Net-Zero), đến các dịch vụ chuyên sâu (Cây xanh văn phòng, hạ tầng công nghệ). Giao diện cần bố cục khoa học để khách hàng dễ dàng nắm bắt dịch vụ phù hợp.
• Thúc đẩy chuyển đổi khách hàng tiềm năng: Mục tiêu then chốt là thu hút khách hàng đăng ký "Đặt lịch khảo sát 24h" và gửi yêu cầu tư vấn trực tiếp ngay khi đang duyệt dự án.
• Tiếp cận thị trường song ngữ: Đáp ứng nhu cầu tìm kiếm nhà thầu của cả doanh nghiệp trong nước và các tập đoàn quốc tế mở chi nhánh tại Việt Nam.

Trải nghiệm người dùng mong đợi

• Khách hàng doanh nghiệp (CEO, HR Director, Project Manager) cần duyệt nhanh thư viện hình ảnh thực tế, thông số quy mô diện tích và tiến độ hoàn thành của các dự án trước đây trong vòng dưới 60 giây.
• Trải nghiệm duyệt ảnh render sắc nét, video kiến trúc mượt mà trên smartphone mà không gặp hiện tượng giật lag, đơ cuộn hay tốn dung lượng 4G.

Mục tiêu & Tiêu chuẩn phát triển

• Giao diện High-End Editorial: Ngôn ngữ thiết kế tối giản, bảng màu thanh lịch, kết hợp nghệ thuật Typography tinh tế và các khối Bento tương tác hiện đại.
• Hiệu năng đỉnh cao theo chuẩn Core Web Vitals: Đạt điểm số tuyệt đối 99-100 trên Google Lighthouse, thời gian tải ảnh lớn (LCP) dưới 0.8s và chỉ số dịch chuyển layout (CLS) 0.00 dù chứa lượng lớn hình ảnh độ phân giải cao.
• Trải nghiệm cuộn tương tác 60 FPS: Triển khai cơ chế Sticky Stacking Service Cards và Dynamic Accordion mượt mà, thân thiện với thiết bị di động.
• Phễu tư vấn khảo sát 24h tinh gọn: Tối ưu hóa biểu mẫu liên hệ, tự động phân loại dịch vụ quan tâm và phản hồi tức thì.
• Kiến trúc đa ngôn ngữ & Chuẩn SEO Semantic: Tích hợp định tuyến song ngữ (/vi và /en) và dữ liệu có cấu trúc Schema.org JSON-LD (LocalBusiness, ArchitectureFirm, Portfolio).

Đội ngũ & Trách nhiệm triển khai

Quy mô nhóm dự án

• Product Owner / Domain Lead: Định hướng sản phẩm và chiến lược nội dung thương hiệu.
• UI/UX Visual Designer: Thiết kế Design System, layout typography và visual assets trên Figma.
• Lead Frontend Engineer (Tôi): Chịu trách nhiệm toàn bộ kiến trúc frontend, animation, tối ưu media và hiệu năng.
• Full-stack Developer / Infrastructure Engineer: Quản trị Headless CMS, API integration và CI/CD deployment.

Phạm vi phụ trách của tôi

• Frontend Architecture: Thiết lập nền tảng dự án trên Next.js App Router, cấu hình Tailwind CSS, Typography scale và Design Tokens.
• Interactive UI & Motion: Xây dựng hiệu ứng Sticky Stacking Service Accordion, Interactive Filterable Gallery, Client Feedback Switcher và Form động.
• Internationalization (i18n): Triển khai định tuyến song ngữ với next-intl, đảm bảo chuyển đổi ngôn ngữ tức thì và zero layout shift.
• Performance & Asset Pipeline: Thiết lập quy trình tối ưu hoá hình ảnh tự động (WebP/AVIF), font subsetting, preloading critical media và cấu hình Schema JSON-LD.

Giải pháp & Điểm nhấn tính năng

Trình diễn dịch vụ xếp tầng tương tác (Sticky Stacking Service Accordion)

Hệ thống trình diễn 4 trụ cột dịch vụ chính (Thiết kế văn phòng, Thi công trọn gói, Không gian thương mại, Dịch vụ mở rộng) theo cơ chế xếp chồng tương tác trên màn hình lớn và chuyển đổi sang dạng thẻ rút gọn thông minh trên thiết bị di động.

Thư viện dự án thực tế & Case Studies chi tiết

Trưng bày các công trình tiêu biểu (MERCURY 4.502 m², NIX HOLDING 952 m², NVB PLAY 652 m²) kèm đầy đủ dữ liệu minh bạch: loại hình dự án, tên chủ đầu tư, diện tích sàn và năm hoàn thành.

Phễu khảo sát 24h & Đặt lịch tư vấn nhanh

Biểu mẫu đặt lịch khảo sát hiện trường trong 24 giờ được thiết kế tinh gọn, tích hợp lựa chọn dịch vụ thông minh và trạng thái phản hồi theo thời gian thực.

Đánh giá thực tế từ đối tác doanh nghiệp

Khối feedback tương tác cho phép xem đánh giá chân thực từ các nhà sáng lập doanh nghiệp đối tác (MrKim SaiGon, Beep Cyber Workspace, Son Nguyen Building,...).

Cổng tin tức & Xu hướng kiến trúc

Khu vực chia sẻ bài viết chuyên sâu về vật liệu bền vững, xu hướng thiết kế văn phòng tối giản 2025, giải pháp Net-Zero và chuẩn xây dựng BIM.

Kiến trúc kỹ thuật & Công nghệ

• Framework: Next.js 15 App Router kết hợp Turbopack.
• Routing & i18n: next-intl với localized routing (/vi, /en) và subpath dictionary preloading.
• Styling: Tailwind CSS kết hợp CSS Custom Properties và Typography Scale độc bản.
• Media & Image Optimization: Next.js Image Optimization Pipeline, WebP/AVIF transformation, Blurhash placeholders.
• Headless CMS: EmDash Headless CMS quản lý nội dung đa ngôn ngữ và phân hệ dự án.
• Deployment & Edge Network: Vercel Global Edge Network với TTFB < 50ms.

Thử thách kỹ thuật & Cách giải quyết

Tối ưu hiệu năng Sticky Stacking Scroll & Chống giật khung hình trên Mobile

• Vấn đề: Hiệu ứng thẻ dịch vụ xếp chồng (Sticky Stacking) gây hiện tượng giật khung hình (frame drops dưới 35 FPS) và kích hoạt recalculate style liên tục khi người dùng cuộn trang trên điện thoại di động.
• Độ phức tạp: Cần giữ nguyên hiệu ứng thị giác phân tầng cao cấp trên desktop nhưng không được làm ảnh hưởng đến tính mượt mà của thao tác vuốt chạm trên màn hình cảm ứng nhỏ.
• Quá trình điều tra: Sử dụng Chrome DevTools Performance Profiler phát hiện việc lắng nghe sự kiện scroll bằng JavaScript kết hợp đọc kích thước bounding rect liên tục gây ra hiện tượng Forced Synchronous Layout và Layout Thrashing.
• Giải pháp áp dụng: Loại bỏ hoàn toàn scroll listener bằng JavaScript. Trên Desktop, chuyển sang sử dụng CSS position: sticky kết hợp transform: translate3d(0, 0, 0) để tận dụng khả năng tăng tốc phần cứng của GPU (Compositor Layer). Trên Mobile, tự động chuyển đổi sang dạng thẻ Accordion có thể đóng mở linh hoạt với CSS Transition thuần và thuộc tính WAI-ARIA aria-expanded.
• Hiện thực hóa: Áp dụng CSS contain: content lên từng section dịch vụ để cô lập vùng render, ngăn trình duyệt tính toán lại toàn bộ cây DOM khi mở rộng thẻ.
• Kết quả: FPS đạt mức 60 FPS ổn định trên tất cả các dòng smartphone; thời gian xử lý Main Thread trong quá trình cuộn giảm hơn 70%.

Tải và hiển thị khối lượng lớn ảnh kiến trúc chất lượng cao (Zero-CLS & Sub-second LCP)

• Vấn đề: Mỗi công trình kiến trúc chứa các tệp ảnh chụp thực tế dung lượng từ 3–6MB. Khi trang tải lần đầu, việc tải ảnh nặng làm chỉ số Largest Contentful Paint (LCP) tăng vọt lên hơn 3.6s, đồng thời gây giật layout (CLS > 0.18) khi ảnh hiển thị.
• Độ phức tạp: Đặc thù ngành kiến trúc nội thất đòi hỏi hình ảnh phải sắc nét và nguyên vẹn màu sắc, không thể nén mờ hoặc giảm kích thước quá mức.
• Quá trình điều tra: Phân tích Network Waterfall cho thấy tài nguyên hình ảnh Hero và Gallery được tải đồng thời không theo mức độ ưu tiên, làm nghẽn băng thông của các file CSS và JavaScript quan trọng.
• Giải pháp áp dụng: Triển khai chiến lược tối ưu hóa đa tầng:

1. Chỉ định fetchpriority="high" và priority={true} cho ảnh Hero Background duy nhất ở viewport đầu tiên.
2. Tự động chuyển đổi toàn bộ ảnh sang định dạng WebP/AVIF thông qua Edge Image Processing.
3. Cố định tỷ lệ khung hình aspect-ratio trên các thẻ chứa ảnh và áp dụng hiệu ứng chuyển tiếp từ Blurhash placeholder sang ảnh hoàn thiện.
4. Bật Lazy Loading theo cơ chế loading="lazy" kết hợp IntersectionObserver cho toàn bộ thư viện dự án bên dưới.

• Kết quả: Thời gian LCP giảm mạnh từ 3.6s xuống 0.7s; chỉ số CLS đạt mức lý tưởng 0.00; dung lượng truyền tải trang giảm 68%.

Những quyết định kỹ thuật cốt lõi

CSS Sticky thuần thay vì Thư viện Scroll Animation nặng

• Bối cảnh: Yêu cầu tạo trải nghiệm cuộn mượt mà và xếp tầng các khối dịch vụ.
• Lựa chọn: Xây dựng bằng CSS position: sticky và CSS Transitions thay vì sử dụng GSAP ScrollTrigger hoặc Locomotive Scroll.
• Đánh đổi & Hiệu quả: Mất thêm thời gian tinh chỉnh thủ công các breakpoint CSS, nhưng loại bỏ được hơn 160KB thư viện JavaScript bên thứ ba, hạn chế tối đa xung đột với cử chỉ cuộn gốc (native scroll) trên iOS Safari.

Static Generation kết hợp Incremental Cache Revalidation (ISR)

• Bối cảnh: Cần tốc độ phản hồi cực nhanh trên toàn cầu cho cả khách hàng Việt Nam và đối tác quốc tế, đồng thời cho phép cập nhật nội dung dự án từ CMS mà không cần build lại toàn bộ mã nguồn.
• Lựa chọn: Triển khai Next.js ISR với thời gian revalidate hợp lý kết hợp phân phối qua CDN Edge Caching.
• Kết quả: Thời gian phản hồi TTFB (Time to First Byte) trên toàn cầu chỉ còn 42ms; trang web luôn sẵn sàng tức thì dưới 0.1s.

Kết quả & Tác động thực tế

Tác động kinh doanh & Chuyển đổi

• Gia tăng tỷ lệ chuyển đổi: Số lượng khách hàng doanh nghiệp hoàn tất biểu mẫu đăng ký khảo sát 24h tăng 40% nhờ luồng tương tác tinh gọn và tốc độ tải trang nhanh.
• Nâng tầm thương hiệu: Giao diện chuẩn quốc tế giúp TekNix Concept củng cố niềm tin và ký kết thành công nhiều dự án thi công văn phòng cao cấp quy mô hàng nghìn mét vuông.

Đo lường kỹ thuật (Engineering Metrics)

• Google Lighthouse Performance: 99/100
• Accessibility: 100/100
• Best Practices: 100/100
• SEO: 100/100
• Largest Contentful Paint (LCP): 0.7s
• Cumulative Layout Shift (CLS): 0.00
• Global CDN TTFB: 42ms

Đúc kết & Hướng phát triển

• Bài học kinh nghiệm: Trong các sản phẩm web dành cho ngành sáng tạo và kiến trúc, trải nghiệm thị giác đỉnh cao phải luôn đi đôi với kỷ luật tối ưu hiệu năng kỹ thuật. Khai thác sức mạnh của CSS hiện đại thay vì lạm dụng thư viện JavaScript là chìa khóa để đạt được sự mượt mà bền vững.
• Kế hoạch tiếp theo: Nghiên cứu tích hợp mô hình trải nghiệm không gian 3D tương tác (Virtual Spatial Tour) và công cụ tính toán chi phí sơ bộ tự động (Interactive Budget Estimator) trong các phiên bản tiếp theo.