HalationStudio Portfolio

Mở index.html bằng trình soạn thảo: mọi chữ trên trang đều viết trực tiếp ở đây, nên công cụ tìm kiếm đọc được. File này gắn hai file nằm cạnh nó:

<link rel="stylesheet" href="studio-portfolio.css" />
<script src="studio-portfolio.js" defer></script>

• Dự án: mỗi dự án là một <li class="sp-work__item">, chép thêm để có thêm dự án. data-categories="branding motion" quyết định bộ lọc nào hiện nó (nút lọc dùng cùng tên trong data-filter).
• Ảnh: thay <div class="sp-art" data-art="…"> của dự án bằng <img class="sp-art" src="work/du-an.jpg" alt="…" />. Tám kiểu hình tạo sẵn là aurora, reel, field, kiln, vinyl, specimen, moon và peak.
• Số liệu: <span data-countup="140" data-suffix="+">140+</span> đếm lên tới data-countup (có thêm data-prefix, data-decimals). Giữ giá trị cuối cùng làm nội dung chữ.
• Tiêu đề: script tách <h1 data-split> thành từng chữ cái; bọc từ cần phát sáng trong <em>.

Script tự gắn mọi hành vi theo data attribute khi trang tải xong. Với phần HTML thêm vào sau, gọi StudioPortfolio.init(container); hàm này trả về một hàm để gỡ ra. Mã nguồn dễ đọc nằm trong src/ (src/core/ gồm mỗi hành vi một module nhỏ) nếu bạn muốn build lại.

Bản tải về là một dự án Vite + React 19 + TypeScript hoàn chỉnh:

npm install
npm run dev      # http://localhost:5173
npm run build    # file tĩnh trong dist/

• src/app/content.ts — mọi chữ, dự án, con số và đường link. Sửa ở đây là trang đổi theo.
• src/app/sections/ — mỗi phần của trang là một component; src/app/ui/ — các mảnh nhỏ dùng chung.
• src/core/ — hành vi (giao diện sáng/tối, menu, bộ lọc, đếm số, form…), cùng một mã với bản HTML, gắn vào qua hook useBehaviour.
• src/studio-portfolio.css — stylesheet duy nhất, dùng chung cho cả hai bản.

Khi không có action, form chỉ kiểm tra các ô rồi hiện lời cảm ơn, nên bản demo chạy được cả khi không có mạng. Để nhận tin nhắn, điền địa chỉ của một dịch vụ form — Formspree, Getform, Basin hoặc endpoint của bạn, miễn là nhận form POST và trả về mã 2xx:

<form class="sp-form" action="https://formspree.io/f/ma-form-cua-ban" method="post" novalidate …>

Với React, đặt action trong CONTACT ở content.ts. Dữ liệu được gửi dạng form data kèm Accept: application/json; nếu dịch vụ báo lỗi, người xem sẽ thấy lời nhắn mời thử lại hoặc gửi email trực tiếp. Ô ẩn _gotcha chặn các bot spam đơn giản (Formspree cũng đọc ô này).

Lời báo lỗi đặt ngay trên từng ô: data-error-required, data-error-short (cho minlength) và data-error-email.

Mọi thứ là custom property trên :root, ở đầu file studio-portfolio.css. Màu được viết dạng light-dark(sáng, tối), nên một dòng lo cho cả hai giao diện.

Biến	Đổi gì
--sp-bg, --sp-bg-raised, --sp-text, --sp-muted, --sp-line	Màu nền trang, nền ô nhập, màu chữ, đường kẻ mảnh
--sp-ember, --sp-violet, --sp-cyan	Màu quầng sáng: chữ nhấn, nguồn sáng, điểm nhấn
--sp-cta, --sp-cta-hover, --sp-on-cta	Nút chính và chữ trên nút
--sp-focus, --sp-danger, --sp-success	Viền focus, lỗi của form, chấm "đang nhận dự án"
--sp-glow-strength	Độ đậm của quầng sáng (đặt riêng cho từng giao diện)
--sp-font-display, --sp-font-body, --sp-font-accent, --sp-font-mono	Bốn vai trò chữ
--sp-display-stretch, --sp-display-weight	Độ rộng và độ đậm của chữ hiển thị
--sp-radius-lg, --sp-radius, --sp-radius-sm, --sp-max, --sp-gutter	Bo góc và bố cục
--sp-ease, --sp-letter-stagger, --sp-marquee-duration, --sp-reveal-duration	Chuyển động

Font: trang chỉ dùng font hệ thống nên không tải gì thêm. Muốn dùng font riêng, thêm @font-face (hoặc stylesheet của dịch vụ font) rồi đặt, ví dụ, --sp-font-display: "Font Cua Ban", sans-serif;.

Giao diện: data-theme="light" hoặc "dark" trên <html> cố định giao diện lúc đầu; không có thì theo hệ thống của người xem. Nút chuyển nhớ lựa chọn của người xem trong localStorage (studio-portfolio-theme).

Cả hai bản đều là file tĩnh: tải thư mục bản HTML, hoặc thư mục dist/ của bản React sau khi npm run build, lên Netlify, Vercel, Cloudflare Pages, GitHub Pages hay hosting bất kỳ.