Tổng Quan Hệ Thống Portfolio & Fashion CMS
1. Giới Thiệu & Triết Lý Thiết Kế
Website Portfolio của Trần Tú Linh (Stella Trần) được xây dựng như một ấn phẩm tạp chí thời trang trực tuyến đương đại, phục vụ công tác trưng bày các đồ án thiết kế, thể nghiệm phom dáng và nghiên cứu cấu trúc chất liệu:
- Chủ nhân: Trần Tú Linh (Stella Trần) — Fashion Stylist & Personal Styling Consultant.
- Tông màu chủ đạo:
#340505(Wild Cherry) kết hợp nền kem ấm#FDFBF7, viền#EADBDB. - Thông điệp nghệ thuật: "Thời trang là ngôn ngữ thị giác bộc lộ cá tính và chiều sâu cảm xúc. Tông đỏ mận (Wild Cherry) tượng trưng cho chiều sâu, ngọn lửa đam mê và vẻ đẹp bất biến."
mermaid
graph TD
User[Khách truy cập Web] -->|Xem Portfolio| Pages[Cloudflare Pages CDN]
Admin[Stylist Trần Tú Linh] -->|Đăng nhập PIN| Editor[Live In-Place Editor]
Editor -->|Gửi POST /api/save| Worker[Cloudflare Pages Functions]
Worker -->|Lưu JSON| KV[(Cloudflare KV Store)]
Worker -.->|Offline Fallback| Local[(data.json File)]
Pages -->|Tải trang tĩnh cực nhanh| User2. Các Phân Hệ Tính Năng Chính
| Phân hệ | Mô tả nghiệp vụ | Công nghệ thực thi |
|---|---|---|
| Hero & Hồ sơ Stylist | Giới thiệu họ tên, danh hiệu, chỉ số hoạt động (08+ BST, 06 năm sáng tạo, 100% độc bản). | HTML5, CSS Flexbox & CSS Grid |
| Tuyên ngôn nghệ thuật | Khắc họa quan điểm tạo hình và định hướng thời trang Avant-Garde. | Typography Inter / Playfair Display |
| Kinh nghiệm & Thành tích | Dòng thời gian các dự án: Giám khảo Pure Fashion, Stylist phim Lầu Xanh, GenViet Jeans... | Dynamic Rendering từ data.json / KV |
| Bộ sưu tập & Dự án | Gallery hình ảnh các bộ sưu tập thời trang cao cấp với bộ lọc phân loại chuyên nghiệp. | JavaScript Lightbox, Image Filter |
| Live In-Place Editor | Bật tắt chế độ chỉnh sửa trực tiếp trên giao diện dành cho Stylist thông qua mã PIN. | ContentEditable, REST API, Cloudflare KV |
| Liên hệ & Đặt lịch | Form gửi yêu cầu hợp tác và kết nối đa kênh mạng xã hội (Instagram, TikTok, Facebook). | Mailto API & Direct Links |
3. Kiến Trúc Lưu Trữ 3 Lớp Chịu Lỗi Cao
Để đảm bảo website không bao giờ bị gián đoạn hoạt động ngay cả khi dịch vụ Cloudflare KV gặp sự cố, hệ thống sử dụng kiến trúc lưu trữ 3 tầng phân cấp:
- Lớp 1 (Cloudflare KV Store): Cơ sở dữ liệu đám mây phân tán toàn cầu tại rìa mạng (Edge Network). Mọi chỉnh sửa từ Live Editor được lưu tức thì vào key
PORTFOLIO_DATA. - Lớp 2 (Cloudflare Functions API): Hàm Edge Worker trung gian điều phối xác thực mã PIN bảo mật, kiểm tra dữ liệu và giao tiếp an toàn với KV.
- Lớp 3 (Tệp tĩnh
data.json): Tệp dữ liệu cơ sở nằm sẵn trong thư mục mã nguồn. Nếu KV chưa được khởi tạo hoặc gặp sự cố, hệ thống tự động fallback đọc từdata.jsonvới độ trễ 0ms.