THOI.DEV~/profile
Resolving000%
← Products

Website Portfolio Kiến trúc & Nội thất Cao cấp

Một giải pháp website mang đậm ngôn ngữ kiến trúc Brutalism dành riêng cho các studio nội thất cao cấp. Sở hữu hiệu ứng tải trang kể chuyện, chiều sâu không gian (parallax) thực tế và sa bàn 3D tương tác mượt mà.

portfolio-interior
Khách hàng
MR THANG
Năm
2026
Vai trò
FULLSTACK / UI-UX Engineer

Bối cảnh: Các studio kiến trúc luôn cần một không gian kỹ thuật số có thể phản ánh đúng đẳng cấp thiết kế vật lý của họ. Đa số các trang web portfolio hiện nay khá "phẳng" và thiếu đi chiều sâu không gian đặc trưng của kiến trúc. Thách thức đặt ra là làm sao xây dựng một nền tảng hiệu suất cao, biến trình duyệt web thành một không gian đa chiều thực thụ.
Việc đã làm: Tôi đã phát triển một hệ thống Portfolio mang phong cách Brutalism bằng Next.js App Router và Tailwind CSS v4. Hành trình của người dùng được mở đầu bằng một màn hình chờ (Preloader) kể chuyện thông qua hiệu ứng vẽ nét mực SVG cực kỳ sang trọng. Để phá vỡ các layout phẳng thông thường, tôi áp dụng cấu trúc xếp chồng (sticky-stacking) kết hợp hiệu ứng Scroll-driven Animations thuần CSS gốc, tạo ra chiều sâu không gian thật (Parallax) mà vẫn giữ nguyên FPS ở mức tối đa. Ngoài ra, tôi còn xây dựng một module Sa bàn Axonometric tương tác, cho phép người dùng chuyển đổi mượt mà giữa bản vẽ kỹ thuật và ảnh render 3D để khám phá vi khí hậu của công trình.

Kết quả: Một "mặt tiền số" đẳng cấp thế giới giúp nâng tầm thương hiệu của studio. Các tương tác vi mô mượt mà (như nút bấm hiệu ứng chất lỏng tính toán bằng cubic-bezier) kết hợp cùng hiệu năng Core Web Vitals tối ưu đã mang lại một trải nghiệm lướt web vô cùng xa xỉ. Nền tảng này không chỉ là nơi lưu trữ hình ảnh, mà là sự giao thoa hoàn hảo giữa nghệ thuật lập trình và diễn họa kiến trúc.

Hình ảnh

  • portfolio-interior
Website Portfolio Kiến trúc & Nội thất Cao cấp — THOI.DEV