Các lập trình viên thường có thói quen xấu là xây dựng những "con dao đa năng" trong khi thứ họ thực sự cần chỉ là một lưỡi dao sắc bén. Chúng ta vội vàng tìm đến các framework frontend nặng nề trước khi viết dòng HTML đầu tiên. Chúng ta lắp thêm các thư viện hoạt ảnh, các công cụ quản lý trạng thái và các quy trình build mạnh mẽ đến mức có thể vận hành cả một công ty nhỏ. Sau đó, chúng ta tự hỏi tại sao các trang portfolio của mình mất tới ba giây để hiển thị, tại sao thanh điều hướng bị lỗi trên di động, và tại sao các nhà tuyển dụng lại rời đi trước khi kịp xem các dự án mà chúng ta đã dành hàng tháng trời để xây dựng.
Tôi đã chọn một con đường khác cho portfolio mới nhất của mình. Tôi rời xa hệ sinh thái của những phụ thuộc (dependencies) vô tận và xây dựng toàn bộ trang web bằng HTML ngữ nghĩa và CSS thuần khiết. Không framework JavaScript. Không các bước build. Không các công cụ hoạt ảnh của bên thứ ba. Chỉ sử dụng chính nền tảng trình duyệt, bố cục được xử lý bằng CSS Grid và Flexbox, cùng một triết lý thiết kế coi tốc độ và sự rõ ràng là những tính năng chính chứ không phải là yếu tố bổ sung sau cùng.
Kết quả là một trang web nhẹ, nhanh và chuyên nghiệp. Dưới đây là chính xác cách tôi đã thực hiện.
Bắt đầu với nền tảng
Hầu hết việc phức tạp hóa vấn đề đều bắt đầu từ nền tảng. Một portfolio không cần phải là một ứng dụng đơn trang (single-page application). Nó chỉ cần hiển thị các tác phẩm của bạn, cho mọi người biết cách liên hệ với bạn và không gây cản trở trải nghiệm. Tôi sử dụng HTML ngữ nghĩa vì trình duyệt đã biết cách hiển thị một thẻ nav, một article và một footer. Khi bạn sử dụng đúng phần tử cho đúng mục đích, bạn sẽ nhận được khả năng truy cập (accessibility), khả năng hiển thị trên công cụ tìm kiếm và tính năng phản hồi (responsive) gần như một cách miễn phí. Bạn cũng viết ít code hơn. Một thẻ div với năm thuộc tính ARIA chỉ là một sự bắt chước rườm rà của một thẻ button. Tôi đã tránh hoàn toàn điều đó.
Về bố cục, CSS Grid và Flexbox là quá đủ. Grid xử lý cấu trúc vĩ mô: các phần tổng thể của trang, thư viện dự án, sự căn chỉnh của các khối lớn. Flexbox quản lý các tương tác vi mô: các liên kết điều hướng bên trong thanh menu, căn giữa văn bản trong các thẻ card, đẩy footer xuống cuối khung hình. Cùng với nhau, chúng thay thế mọi lý do mà bạn có thể từng cần để nhập một framework lưới 12 cột vào năm 2018. Mã nguồn vẫn dễ đọc. Tệp CSS vẫn nhỏ gọn.
Màu sắc, Kiểu chữ và Sự tiết chế
Tôi muốn portfolio mang lại cảm giác bình yên ngay khi vừa tải xong. Phần nền sử dụng một tông màu sáng với các dải màu gradient tỏa tròn (radial gradients) tinh tế. Không có gì quá mạnh mẽ. Gradient có độ mờ (opacity) thấp, tạo ra một chiều sâu mềm mại giúp trang web không bị cảm giác phẳng mà không cần phải gây chú ý quá mức. Nó tải ngay lập tức vì đó là CSS thuần. Không có ảnh hero nào cần nén, không có các bản fallback WebP cần quản lý, không có các thư viện JavaScript lazy-loading nào cần cấu hình.
Typography (nghệ thuật chữ) tạo nên cá tính. Tôi đã kết hợp Outfit với Ovo. Outfit, một font sans-serif hình học, đảm nhận tất cả văn bản giao diện (UI): nhãn điều hướng, văn bản nút, nội dung chính, các chi tiết meta. Nó sắc nét trên màn hình và vẫn dễ đọc ở kích thước nhỏ. Ovo, một font serif có độ tương phản trung bình, dành cho các tiêu đề và tiêu đề chính. Sự kết hợp này mang lại cho trang web một cảm giác biên tập (editorial) tĩnh lặng. Nó trông như được thiết kế có chủ đích, chứ không phải là dùng một theme có sẵn. Quan trọng nhất, cả hai font chữ đều được tải từ một lần gọi duy nhất đến dịch vụ font hoặc các tệp tự lưu trữ (self-hosted). Không có sự thay đổi bố cục (layout shift), không có hiện tượng văn bản chưa định dạng (flash of unstyled text), không có việc chuyển đổi trọng số font bằng script sau khi render lần đầu.
Menu dạng viên nang nổi
Điều hướng là nơi các portfolio thường bị sụp đổ dưới sức nặng của chính chúng. Các menu lớp phủ toàn màn hình, các kịch bản hoạt ảnh xếp lớp, và các biểu tượng hamburger yêu cầu tới bốn mươi dòng JavaScript để chuyển đổi một class. Tôi không muốn bất kỳ điều nào trong số đó.
Tôi đã xây dựng một menu dạng viên nang (capsule menu) với hiệu ứng glassmorphism nổi. Đó là một container ngang duy nhất, bo tròn các cạnh, được đặt cố định (fixed) gần phía trên cùng của khung hình. Hiệu ứng glassmorphism đến từ màu nền bán trong suốt và thuộc tính backdrop-filter: blur(). Nó nổi trên nội dung mà không che khuất nó, cung cấp quyền truy cập tức thì vào mọi phần, và thu gọn một cách mượt mà trên các khung hình nhỏ hơn mà không cần thiết kế lại hoàn toàn. Hiệu ứng này trông hiện đại vì trình duyệt xử lý việc hợp nhất lớp (compositing), chứ không phải một thư viện canvas.