3 thg 4, 2026

Khi Developer Chán Làm Portfolio Bình Thường

Cách mình xây một portfolio kiểu terminal tương tác bằng HTML, CSS và JavaScript thuần — với hệ thống file ảo, AI chat, game, đổi theme, và màu Catppuccin Mocha.

Dự án & nghề thủ công

Thẻ (6)

Mục lục

Lướt 10 cái portfolio thì 9 cái y chang nhau: hero section, vài cái card, form liên hệ. Ngáp. Mình muốn thứ gì đó thực sự đại diện cho bản thân — một developer ‘sống ảo’ trong terminal.

Thế là mình xây một terminal giả lập làm trang chủ portfolio. Khách truy cập có thể gõ các lệnh như ls, cd, cat, và tree để khám phá hệ thống file ảo và tìm hiểu về mình. Đơn giản nhưng chất.

Tech stack

Toàn bộ terminal chạy với zero dependencies — không React, không framework, chỉ có:

HTML cho cấu trúc
CSS với bảng màu Catppuccin Mocha
Vanilla JavaScript cho engine xử lý lệnh và hệ thống file ảo

Còn cái blog bạn đang đọc đây được build bằng framework tĩnh Astro, tức là cũng chỉ ra HTML tĩnh. Nhẹ tênh.

Tính năng chính

Hệ thống file ảo

Terminal có một hệ thống file giả lập với thư mục và file. Bạn có thể dùng ls để xem nội dung, cd để chuyển thư mục, và cat để đọc file — y hệt terminal thật. Prompt hiển thị [email protected]:~$ như một shell xịn.

.
├── home/
│   └── guest/
│       ├── about.md
│       ├── skills.md
│       └── contact.md
└── README.md

AI Chat

Gõ ask <câu hỏi> để chat với knowledge base tích hợp sẵn về mình — background, skills, projects, contact. Dùng fuzzy matching để trả lời câu hỏi tự nhiên, không cần gọi API nào cả.

Snake và Matrix

snake — chơi game rắn săn mồi ngay trong terminal
matrix — mưa ký tự xanh kiểu Matrix. Nhấn Esc hoặc q để thoát

Chuyển đổi theme

Hỗ trợ cả 4 flavor của Catppuccin với transition mượt mà:

Lệnh	Theme
`theme mocha`	Tối (mặc định)
`theme macchiato`	Tối ấm
`theme frappe`	Tối nhẹ
`theme latte`	Sáng

Autocomplete và history

Như terminal xịn — nhấn Tab tự hoàn thành lệnh với ghost text, phím lên/xuống để duyệt lịch sử lệnh.

Aliases tiện lợi

Shortcut cho các tra cứu hay dùng:

whois → đọc ~/about.md
skills → đọc ~/skills.md
contact → đọc ~/contact.md
sound on/off → bật/tắt âm thanh

Bubble chat góc dưới phải ở mọi trang — cùng fuzzy knowledge base với lệnh ask. Khách không cần gõ lệnh vẫn hỏi được.

Responsive design

Terminal tự adapt theo mọi màn hình:

Desktop: căn giữa, tối đa 860px, cao 85vh
Tablet: full-width, font nhỏ hơn chút
Điện thoại: prompt rút gọn, ASCII art ẩn, input 16px chống iOS zoom
Mobile nav bar: thanh điều hướng Terminal/Blog cố định ở dưới cùng

Số lượng particle cũng giảm trên thiết bị cảm ứng (25 vs 60) để chạy mượt trên máy yếu.

Bài học rút ra

Hạn chế tạo ra sáng tạo. Chỉ dùng vanilla JS buộc mình phải có kiến trúc code tốt hơn.
Portfolio chính là lời giới thiệu. Một cái portfolio terminal nói lên nhiều điều về một dev hơn bất kỳ đoạn “About Me” sáo rỗng nào.
Chi tiết nhỏ làm nên khác biệt. Con trỏ nhấp nháy, màu của prompt, hành vi của cd .. — những thứ nhỏ nhặt này làm cho trải nghiệm trở nên rất thật.

Sắp tới

Blog này sẽ là nơi mình chia sẻ suy nghĩ về AI agents, cloud architecture, cybersecurity, và engineering leadership. Nhớ hóng nhé.

Built with 🍎 by Táo