TP020

Ánh Sáng — Portfolio nhiếp ảnh

Portfolio cho nhiếp ảnh gia: trang chủ là bức tường ảnh vô tận kéo mọi hướng, mặt phẳng cong như ống kính mắt cá theo tốc độ kéo, tách màu RGB; bấm để mở ảnh toàn màn hình kèm EXIF.

Điểm nổi bật

Bức tường 99 khung ảnh lặp vô tận, kéo có quán tính, tự trôi khi nghỉ
Shader uốn cong + nghiêng + tách màu theo tốc độ; ảnh đang rê hiện màu, ảnh khác chìm
Lightbox FLIP từ đúng vị trí ảnh, EXIF, phím mũi tên
Vệt ảnh theo con trỏ, danh mục bộ ảnh đổi nền, dải phim cuộn ngang, giải thưởng, dịch vụ, email chữ nảy; song ngữ

Three.js
Motion
Lenis
Vite
GPT Image
Infinite canvas
Portfolio
Lightbox
AI photography

Trong gói tải về

Toàn bộ source code template (chạy bằng Vite, build ra web tĩnh — host ở bất kỳ đâu)
PROMPT.md — prompt để dựng lại / mở rộng trang bằng AI builder
README.md — hướng dẫn chạy & tuỳ biến (chính là nội dung bên dưới)

Portfolio cho nhiếp ảnh gia, studio, designer: trang chủ là bức tường ảnh vô tận kéo mọi hướng, cong như ống kính mắt cá theo tốc độ kéo, tách màu RGB; bấm để mở ảnh toàn màn hình kèm EXIF.

Chạy thử

Cần Node.js 18+.

npm install
npm run dev       # mở http://localhost:5173
npm run build     # xuất bản tĩnh vào dist/ — upload lên hosting bất kỳ

Mặc định trang mở tiếng Việt; thêm ?lang=en để mở tiếng Anh.

Cấu trúc

index.html            Khung trang (mọi section)
src/wall.js           Bức tường ảnh WebGL vô tận (kéo, quán tính, uốn cong, tách màu, chọn ảnh)
src/locales.js        TOÀN BỘ nội dung chữ (vi + en) — sửa ở đây
src/main.js           Ghép trang: preloader, cuộn, tương tác, form
src/style.css         Giao diện: biến màu/font ở `:root`, bố cục, responsive
src/fx.js + fx.css    Bộ motion: preloader, tách chữ, con trỏ, nút từ tính, marquee, đếm số, parallax, mở ảnh
src/smooth-scroll.js  Cuộn mượt (Lenis)
src/i18n.js           Chuyển ngôn ngữ (data-i18n)
public/images/        Ảnh webp (+ `*-depth.webp` = bản đồ độ sâu)
asset-prompts.json    Prompt tạo lại từng ảnh bằng AI
PROMPT.md             Prompt dựng lại trang bằng AI builder

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Chữ, giá, địa chỉ	`src/locales.js`
Màu nền / chữ / font	biến `:root` trong `src/style.css` + link Google Fonts trong `index.html`
Ảnh & EXIF	mảng `PHOTOS` trong `src/main.js` + `ph.<i>.t/p` trong locales
Bố cục tường ảnh	mảng `LAYOUT` (ảnh, x, y, rộng, cao) và `TILE_W/H` trong `src/wall.js`
Độ cong / tách màu	`uCurve`, `speed * 0.012` (vertex) và `uVelocity * 0.0035` (fragment) trong `src/wall.js`
Dải phim tác phẩm chọn lọc	mảng `FILM` trong `src/main.js`

Ảnh

Ảnh tạo bằng AI theo prompt trong asset-prompts.json. Thay bằng ảnh thật của bạn: giữ tên file, xuất .webp.

Ghi chú

Thương hiệu, số liệu và giá trong template là minh hoạ — hãy thay bằng nội dung của bạn.
Hiệu năng: WebGL tự giảm độ phân giải trên mobile và dừng render khi tab ẩn / khi khu vực 3D ra khỏi màn hình.
Thư viện: Three.js (MIT), Motion (MIT), Lenis (MIT), Vite (MIT). Font Google (OFL).