Design System
Tokens và components dùng trong portfolio. Mọi component nằm trong src/components/ds/.
Tokens — Colors
Hệ màu khai báo bằng CSS variables. Đổi một token, đổi toàn site.
Tokens — Radii & Shadows
Bo góc và đổ bóng nhất quán theo thang.
Typography
Font chính: Inter Tight — đậm, hiện đại, đọc tốt mọi cỡ.
Chips & Badges
Chip cho meta nhỏ. Revenue badge cho số liệu nổi bật.
Icon Tiles
Khối vuông bo tròn chứa icon — dùng cho service avatar, project icon.
Cards
Card mặc định có shadow nhẹ. Flat = chỉ border. Interactive = hover lift.
Card title
Soft shadow, white background, used for grouping content.
Border only
No shadow, 1px border. For dense layouts.
Hover me
Lifts on hover, deeper shadow. For clickable cards.
Inputs
Pill-shaped text input, select, attached email + button.
Tabs / Filter pills
Segmented control với count chip.
Area Chart
SVG area chart with smooth curves, y-axis labels, month labels. Gold gradient mặc định.
Screenshots
Mobile → row 4 ảnh portrait. Web/AI → slider 3 ảnh landscape (mũi tên + dots).
Project Card
Signature component: icon + name + platform links + summary + visuals.
Post Card
Variant của project card cho bài viết — icon + tiêu đề + excerpt + meta.
FAQ
Accordion với plus → x animation.
Social Row
Hàng icon button cho TikTok / YouTube / GitHub / LinkedIn / Email.