Utility Styling
Tận dụng Tailwind CSS để code gọn và dễ bảo trì.
Báo cáo project
Tea Station.
Landing page tĩnh quảng bá thương hiệu trà và cà phê cao cấp, tối ưu hóa hiển thị responsive và hiệu ứng tương tác tinh tế bằng Vanilla CSS.
1 thành viên (Cá nhân)HTML5Vanilla CSSTailwind CSSJavaScript
Cuộn xuống để khám phá
Chức năng chính
Tối ưu giao diện trên mobile, tablet và desktop.
Interactive Elements
Có hover effects, mobile menu và scroll animation mượt.
Product showcase
Trưng bày nhóm trà/cà phê bằng ảnh thật, layout rõ và CTA dễ nhìn.
Tabs/filter sản phẩm
JavaScript xử lý tab/filter để người xem duyệt sản phẩm gọn hơn.
Counter/stat section
Animated counter và progress bar tạo điểm nhấn cho số liệu thương hiệu.
Contact & brand trust
Khu vực liên hệ, đối tác và thông tin cửa hàng giúp landing page có mục tiêu chuyển đổi.
Netlify static deploy
Cấu hình Netlify cho static site, phù hợp scope landing page không cần backend.
Chức năng chính
Tối ưu giao diện trên mobile, tablet và desktop.
01
Utility Styling
Tận dụng Tailwind CSS để code gọn và dễ bảo trì.
02
Interactive Elements
Có hover effects, mobile menu và scroll animation mượt.
03
Product showcase
Trưng bày nhóm trà/cà phê bằng ảnh thật, layout rõ và CTA dễ nhìn.
04
Tabs/filter sản phẩm
JavaScript xử lý tab/filter để người xem duyệt sản phẩm gọn hơn.
05
Counter/stat section
Animated counter và progress bar tạo điểm nhấn cho số liệu thương hiệu.
06
Contact & brand trust
Khu vực liên hệ, đối tác và thông tin cửa hàng giúp landing page có mục tiêu chuyển đổi.
07
Netlify static deploy
Cấu hình Netlify cho static site, phù hợp scope landing page không cần backend.
Situation - Bối cảnh
Tea Station là project giúp tôi luyện HTML/CSS/JavaScript trước khi dùng framework phức tạp hơn.
Bối cảnh thương hiệu
Một landing page trà/cà phê cần tạo cảm giác cao cấp, dễ xem sản phẩm và có CTA liên hệ/mua hàng rõ.
Dữ liệu hình ảnh thật
Repo có nhiều asset về banner, sản phẩm, partner logo, video statement, stats background và icon liên hệ.
Không cần backend
Với scope landing page, tôi giữ dự án static và deploy bằng Netlify thay vì thêm backend không có giá trị.
Stack tối giản
HTML5, Vanilla CSS, Tailwind và JavaScript đủ để xử lý layout, responsive, tabs/filter, menu và animation.
Vai trò trong portfolio
Project này chứng minh nền tảng frontend: spacing, typography, responsive và asset handling.
Situation - Bối cảnh
Tea Station là project giúp tôi luyện HTML/CSS/JavaScript trước khi dùng framework phức tạp hơn.
01
Bối cảnh thương hiệu
Một landing page trà/cà phê cần tạo cảm giác cao cấp, dễ xem sản phẩm và có CTA liên hệ/mua hàng rõ.
02
Dữ liệu hình ảnh thật
Repo có nhiều asset về banner, sản phẩm, partner logo, video statement, stats background và icon liên hệ.
03
Không cần backend
Với scope landing page, tôi giữ dự án static và deploy bằng Netlify thay vì thêm backend không có giá trị.
04
Stack tối giản
HTML5, Vanilla CSS, Tailwind và JavaScript đủ để xử lý layout, responsive, tabs/filter, menu và animation.
05
Vai trò trong portfolio
Project này chứng minh nền tảng frontend: spacing, typography, responsive và asset handling.
Task - Nhiệm vụ
Người xem cần biết ngay thương hiệu bán gì, sản phẩm nào nổi bật, vì sao đáng tin và liên hệ ở đâu.
Nhiều asset dễ nặng
Trang dùng nhiều ảnh sản phẩm/banners nên cần cân bằng giữa hình ảnh đẹp và tốc độ tải.
Responsive không được vỡ
Các section hero, sản phẩm, stats, contact và footer phải giữ nhịp trên mobile, tablet và desktop.
Animation phải vừa đủ
Hover, counter, progress bar và scroll effect cần tăng cảm giác sống động nhưng không làm người xem mất tập trung.
Code thuần dễ rối
Không có component framework nên HTML/CSS/JS cần chia file và đặt class có kỷ luật để dễ sửa.
Không oversell scope
Đây là static frontend, nên portfolio cần nói đúng: mạnh ở UI/responsive/deploy, không nhận là e-commerce fullstack.
Task - Nhiệm vụ
Người xem cần biết ngay thương hiệu bán gì, sản phẩm nào nổi bật, vì sao đáng tin và liên hệ ở đâu.
01
Nhiều asset dễ nặng
Trang dùng nhiều ảnh sản phẩm/banners nên cần cân bằng giữa hình ảnh đẹp và tốc độ tải.
02
Responsive không được vỡ
Các section hero, sản phẩm, stats, contact và footer phải giữ nhịp trên mobile, tablet và desktop.
03
Animation phải vừa đủ
Hover, counter, progress bar và scroll effect cần tăng cảm giác sống động nhưng không làm người xem mất tập trung.
04
Code thuần dễ rối
Không có component framework nên HTML/CSS/JS cần chia file và đặt class có kỷ luật để dễ sửa.
05
Không oversell scope
Đây là static frontend, nên portfolio cần nói đúng: mạnh ở UI/responsive/deploy, không nhận là e-commerce fullstack.
Action - Quyết định & Thực thi
Tôi tổ chức hero, benefits, product showcase, about, stats, partner/contact và footer để người xem đi từ nhận biết tới hành động.
Dùng Tailwind có chọn lọc
Tôi kết hợp Tailwind utility với CSS riêng để giữ tốc độ dựng layout nhưng vẫn tùy chỉnh animation/responsive.
Thêm tương tác JS thuần
Tôi xử lý mobile nav, responsive tabs, filter và counter/progress bằng JavaScript/jQuery plugin ở đúng chỗ.
Quản lý asset sản phẩm
Tôi gom assets theo nhóm banner, product, partner logo và icon để việc bảo trì landing page rõ ràng hơn.
Cấu hình Netlify
Tôi thêm `netlify.toml` để deploy static site nhanh, đúng với phạm vi dự án không cần server.
Giữ visual hierarchy
Tôi ưu tiên ảnh lớn, CTA rõ và khoảng trắng vừa đủ để landing page không giống bài tập HTML dày chữ.
Action - Quyết định & Thực thi
Tôi tổ chức hero, benefits, product showcase, about, stats, partner/contact và footer để người xem đi từ nhận biết tới hành động.
01
Dùng Tailwind có chọn lọc
Tôi kết hợp Tailwind utility với CSS riêng để giữ tốc độ dựng layout nhưng vẫn tùy chỉnh animation/responsive.
02
Thêm tương tác JS thuần
Tôi xử lý mobile nav, responsive tabs, filter và counter/progress bằng JavaScript/jQuery plugin ở đúng chỗ.
03
Quản lý asset sản phẩm
Tôi gom assets theo nhóm banner, product, partner logo và icon để việc bảo trì landing page rõ ràng hơn.
04
Cấu hình Netlify
Tôi thêm `netlify.toml` để deploy static site nhanh, đúng với phạm vi dự án không cần server.
05
Giữ visual hierarchy
Tôi ưu tiên ảnh lớn, CTA rõ và khoảng trắng vừa đủ để landing page không giống bài tập HTML dày chữ.
Result - Kết quả đạt được
Dự án có trang chủ, products page, responsive nav, product sections, about/contact và animation nhẹ.
Bằng chứng frontend căn bản
Tea Station cho thấy tôi kiểm soát được HTML/CSS/JS thuần, không phụ thuộc hoàn toàn vào React.
Deploy đúng scope
Netlify config giúp dự án có câu chuyện deploy gọn và thực tế cho static website.
Limitation thật
Chưa có backend/cart thật, nên project nên được đặt là landing page thương hiệu, không phải hệ thống bán hàng.
Cầu nối kỹ năng
Project này làm nền cho các dự án sau khi tôi chuyển sang React/Node/Laravel nhưng vẫn giữ tư duy layout sạch.
Hướng phát triển
Có thể bổ sung Lighthouse audit, tối ưu ảnh WebP và form liên hệ gửi email thật nếu muốn nâng chất lượng production.
Tôi học được cách
Tôi học được cách chọn công nghệ vừa đủ: với landing page tĩnh, quan trọng nhất là layout, spacing, typography, responsive và deploy gọn.
Dự án này đặt
Dự án này đặt nền cho các project sau: khi làm app phức tạp hơn, tôi vẫn giữ thói quen chia section, kiểm soát hierarchy và tránh UI lộn xộn.
Result - Kết quả đạt được
Dự án có trang chủ, products page, responsive nav, product sections, about/contact và animation nhẹ.
01
Bằng chứng frontend căn bản
Tea Station cho thấy tôi kiểm soát được HTML/CSS/JS thuần, không phụ thuộc hoàn toàn vào React.
02
Deploy đúng scope
Netlify config giúp dự án có câu chuyện deploy gọn và thực tế cho static website.
03
Limitation thật
Chưa có backend/cart thật, nên project nên được đặt là landing page thương hiệu, không phải hệ thống bán hàng.
04
Cầu nối kỹ năng
Project này làm nền cho các dự án sau khi tôi chuyển sang React/Node/Laravel nhưng vẫn giữ tư duy layout sạch.
05
Hướng phát triển
Có thể bổ sung Lighthouse audit, tối ưu ảnh WebP và form liên hệ gửi email thật nếu muốn nâng chất lượng production.
06
Tôi học được cách
Tôi học được cách chọn công nghệ vừa đủ: với landing page tĩnh, quan trọng nhất là layout, spacing, typography, responsive và deploy gọn.
07
Dự án này đặt
Dự án này đặt nền cho các project sau: khi làm app phức tạp hơn, tôi vẫn giữ thói quen chia section, kiểm soát hierarchy và tránh UI lộn xộn.
Preview & Trải nghiệm thực tế
Mỗi màn hình đi kèm phần mô tả chi tiết để làm rõ luồng hoạt động và trải nghiệm người dùng thực tế.
Xem toàn màn hình
01
trang chủ
Ảnh này dùng làm bằng chứng cho flow Tea Station. Màn hình "trang chủ" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
02
section phân phối
Ảnh này dùng làm bằng chứng cho flow Tea Station. Màn hình "section phân phối" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
03
image
Ảnh này dùng làm bằng chứng cho flow Tea Station. Màn hình "image" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
04
image copy
Ảnh này dùng làm bằng chứng cho flow Tea Station. Màn hình "image copy" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
05
image copy 2
Ảnh này dùng làm bằng chứng cho flow Tea Station. Màn hình "image copy 2" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
06
image copy 3
Ảnh này dùng làm bằng chứng cho flow Tea Station. Màn hình "image copy 3" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
07
image copy 4
Ảnh này dùng làm bằng chứng cho flow Tea Station. Màn hình "image copy 4" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
08
image copy 5
Ảnh này dùng làm bằng chứng cho flow Tea Station. Màn hình "image copy 5" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
09
image copy 6
Ảnh này dùng làm bằng chứng cho flow Tea Station. Màn hình "image copy 6" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Mã nguồn & DemoTrải nghiệm dự án
Trải nghiệm dự án
Source Code & Demo
Xem toàn bộ mã nguồn trên GitHub hoặc mở bản demo hoạt động thực tế.
DỰ ÁN TIẾP THEO