Cách Làm Portfolio Đạt Giải (Chuẩn Awwwards)

Ai từng lướt một trang Site of the Day trên Awwwards cũng có chung một câu hỏi: làm sao để làm được một trang như vậy? Sự thật là một portfolio đạt giải không phải là template mua sẵn hay một đống animation chắp vá — nó là một ý tưởng duy nhất, được thực thi đủ tinh tế để vượt qua hội đồng 18+ giám khảo chấm trên bốn tiêu chí. Bài này là playbook tôi thực sự dùng để làm portfolio đạt giải Awwwards: giám khảo thưởng cho điều gì, stack Next.js + GSAP + WebGL đứng sau chuyển động, quy trình, những lỗi âm thầm kéo điểm xuống, và cách nộp bài chính xác.

Tôi viết với tư cách người làm nghề. Tôi là Hon Tran — creative developer và thành viên ban giám khảo Awwwards, lập trình viên Việt Nam đầu tiên thắng một giải web quốc tế, hai lần đạt Awwwards Independent of the Year. Nên đây không phải đoán từ ảnh chụp màn hình — đây là cách chấm điểm nhìn từ bên trong hội đồng.

"Đạt giải" thực chất nghĩa là gì (cách chấm điểm)

Trước khi viết một dòng code, hãy hiểu cách một trang được chấm. Trên Awwwards, bài đã duyệt được gửi tới tối thiểu 18 giám khảo, chấm trên bốn tiêu chí có trọng số:

Tiêu chí	Trọng số	Thực chất đo điều gì
Design	40%	Thẩm mỹ: typography, bố cục, màu sắc, art direction
Usability	30%	Người mới có điều hướng được, tải nhanh, không bị lạc
Creativity	20%	Độ độc đáo của ý tưởng và thực thi — đã thấy ở đâu chưa
Content	10%	Chất lượng và mức độ liên quan của tác phẩm trưng bày

Ba điểm xa giá trị trung bình nhất sẽ bị loại để chống ngoại lệ, vòng bình chọn kéo dài ~5 ngày, 6.5+ được Honorable Mention, và điểm cao nhất giành Site of the Day. (Nguồn: hệ thống đánh giá của Awwwards.)

Bài học ít người nhận ra: Design + Usability chiếm 70% tổng điểm. Người mới hay dồn hết vào Creativity — một chiêu WebGL hoành tráng — rồi thua ở phần căn bản. Một trang đột phá nhưng tải mất năm giây hoặc rối điều hướng sẽ thấp điểm hơn một trang sạch, nhanh, typography đẹp dù tham vọng khiêm tốn. Làm chắc phần nền trước; dùng "ngân sách sáng tạo" ở chỗ sinh lời nhất.

Bước 1 — Ý tưởng trước, code sau

Mọi dự án đạt giải tôi từng làm đều bắt đầu bằng một câu, không phải file Figma. "Một portfolio cho cảm giác như lật một cuốn monograph in." "Một trang agency sự kiện nơi mỗi section là một sân khấu." Ý tưởng là sợi chỉ xuyên suốt khiến art direction, chuyển động và nội dung trở nên tất yếu chứ không phải trang trí.

Hỏi ba câu:

• Ý tưởng cốt lõi là gì? Nếu không nói được trong một câu, giám khảo sẽ không cảm được.
• Khoảnh khắc đắt giá là gì? Mọi trang đáng nhớ đều có một tương tác người ta chụp lại — hero reveal, transition displacement, một chuỗi điều khiển bằng scroll. Thiết kế phần còn lại để bảo vệ khoảnh khắc đó.
• Cắt được gì? Sự tiết chế đọc ra như sự tự tin. Giám khảo thưởng một ý tưởng hoàn hảo hơn năm ý tưởng giành nhau.

Bước 2 — Stack thắng giải

Không có một "stack Awwwards" duy nhất, nhưng các trang đạt giải tụ lại quanh vài công cụ vì chúng đạt điểm cân bằng giữa hiệu năng và khả năng kiểm soát. Stack của tôi, cũng là thứ đứng sau hầu hết SOTD gần đây tôi làm:

• Next.js (App Router) — routing, tối ưu ảnh, SSR/ISR cho first paint nhanh và SEO.
• Lenis — smooth scroll chuẩn hóa mà mọi thứ khác móc vào.
• GSAP + ScrollTrigger — engine chuyển động: pin, scrub, parallax, timeline.
• React Three Fiber / three.js + GLSL — WebGL cho transition displacement, particle, và 3D khi nó xứng đáng.

Quyết định kiến trúc quan trọng nhất là chạy một vòng lặp animation duy nhất. Đừng để Lenis, GSAP và render WebGL mỗi cái tự chạy requestAnimationFrame riêng — đồng bộ chúng để vị trí scroll, tween DOM và uniform của shader cùng cập nhật trên một nhịp:

import Lenis from "lenis";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const lenis = new Lenis({ duration: 1.1, smoothWheel: true });

// Cho Lenis chạy theo ticker của GSAP — một đồng hồ cho cả trang
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

Chỉ riêng thay đổi này là khác biệt giữa mượt và giật trên một trang nặng chuyển động. Xem hướng dẫn đầy đủ ở bài cuộn mượt trong Next.js với GSAP và Lenis.

Bước 3 — Chuyển động ghi điểm, không gây nhiễu

Usability chiếm 30% tổng điểm, nên chuyển động phải phục vụ điều hướng chứ không chống lại nó. Những pattern giám khảo luôn đánh giá cao:

• Scroll như lời kể — pin một section và scrub một chuỗi để người dùng kiểm soát nhịp. Đây là chỗ ScrollTrigger phát huy; tôi mổ xẻ kỹ thuật này ở bài GSAP ScrollTrigger: pin, scrub & parallax.
• Transition có chủ đích — một hiệu ứng displacement WebGL khi hover ảnh hoặc chuyển giữa các dự án đọc ra như sự tinh xảo. Làm tốt thì là khoảnh khắc đắt giá; làm thừa thì là tạp âm.
• Micro-interaction — nút nam châm, con trỏ tùy biến, reveal chữ so le. Rẻ để làm nhưng nâng cảm giác tinh tế lên rất nhiều.

Một timeline scrub tái sử dụng trông như sau:

gsap.to(".hero__title", {
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    end: "+=100%",
    pin: true,
    scrub: 1, // gắn tiến trình vào scroll, có 1s bám theo mượt
  },
  yPercent: -40,
  opacity: 0.2,
  ease: "none",
});

Luôn đặt chuyển động trang trí sau prefers-reduced-motion — vừa là điểm cộng accessibility vừa là tín hiệu usability mà giám khảo để ý.

const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!reduced) initScrollAnimations();

Bước 4 — Hiệu năng là tiêu chí chấm điểm, không phải việc vặt

Đây là chỗ phần lớn portfolio tham vọng mất giải. Một hero WebGL tụt xuống 20fps trên laptop tầm trung đọc ra như hỏng với giám khảo, dù khung hình tĩnh có đẹp đến đâu. Hãy coi hiệu năng là một phần của thiết kế:

• Tính ngân sách main thread. Chỉ animate transform và opacity — chúng không đụng layout/paint. Đừng bao giờ animate width, top hay box-shadow theo scroll.
• Khởi tạo WebGL lười. Mount scene three.js chỉ khi vào viewport (IntersectionObserver) và tạm dừng vòng render khi ra khỏi màn hình.
• Giới hạn pixel ratio. renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) — render 3x trên điện thoại đốt GPU mà không thấy đẹp hơn.
• Ship ít JS hơn. Dynamic-import các module nặng; giữ tương tác đầu tiên nhanh. Hướng tới LCP dưới 2.5s kể cả khi nhiều chuyển động.

Một trang giữ 60fps trên điện thoại 5 triệu sẽ hơn điểm một trang đẹp hơn nhưng giật. Giám khảo duyệt bằng thiết bị thật.

Bước 5 — Bản thân tác phẩm (content, 10% nhưng quyết định)

Ba case study xuất sắc thắng mười hai thumbnail. Với mỗi dự án: nêu vấn đề, vai trò của bạn, phần craft và kết quả. Viết nội dung thật — giám khảo có đọc. Một archive cô đọng cũng giúp bạn kể câu chuyện mạch lạc; muốn xem tôi dựng một case study sâu thế nào, đọc case study website sự kiện đoạt giải Iventions.

Những lỗi âm thầm giết điểm

• Animation không có thứ bậc — mọi thứ đều động nên không gì quan trọng. Chuyển động phải dẫn mắt.
• Bỏ quên mobile. Lượng lớn lưu lượng giám khảo (và PRO user) là mobile. Một kiệt tác chỉ chạy desktop mà layout điện thoại vỡ thì trần là Honorable Mention.
• Tải chậm ngụy trang thành "intro". Loader 6 giây không phải art direction; đó là điểm trừ usability.
• Ý tưởng ăn theo. Bắt chước trend năm nay (cái gallery scroll ngang ai cũng làm) kéo tụt điểm Creativity. Độc đáo mới là cốt lõi.
• Không có sàn accessibility. Thiếu focus state, không có nhánh reduced-motion, tương phản kém — những điều nhỏ giám khảo đọc ra là cẩu thả.

Cách nộp bài lên Awwwards

1. Có tài khoản PRO và nộp URL production live (không phải staging).
2. Chọn đúng category và điền credit — designer, developer, studio. Quan trọng cho giải developer/jury.
3. Nộp đầu tuần để cửa sổ bình chọn 5 ngày nhận đủ lưu lượng.
4. Đảm bảo hoàn hảo trong ngày nộp — giám khảo chấm trang live, nên deploy bản cuối trước khi nộp, không phải trong lúc bình chọn.
5. Sẵn sàng đội nhóm và liên hệ PRO. Điểm giám khảo mạnh cộng 10+ phiếu PRO user có thể chốt SOTD ngay trong ngày.

Muốn đặt làm thay vì tự làm?

Làm một trang đạt giải là khoản đầu tư thời gian nghiêm túc — nhiều tuần cho chuyển động, WebGL và tối ưu hiệu năng trên nền thiết kế. Nếu bạn muốn bỏ qua đường cong học và ship thẳng thứ đủ sức tranh giải, đó chính là việc tôi làm cho các studio và thương hiệu. Xem dịch vụ của tôi hoặc lướt kho dự án để cảm nhận đẳng cấp. Muốn hiểu rõ vai trò này hơn, đọc creative developer là gì và khi nào bạn cần.

FAQ

Làm một portfolio đạt giải mất bao lâu?

Thực tế khoảng 4–8 tuần tập trung cho một developer làm một mình: chừng một tuần cho ý tưởng và định hướng thiết kế, hai đến bốn tuần build và chuyển động, một tuần cuối cho hiệu năng, hoàn thiện và QA đa thiết bị. Tuần hoàn thiện là bắt buộc — đó là nơi Honorable Mention trở thành Site of the Day.

Có cần WebGL mới thắng giải không?

Không. Rất nhiều SOTD thuần CSS và GSAP với typography và chuyển động xuất sắc. WebGL giúp bạn nổi bật ở Creativity, nhưng chỉ sinh lời nếu phục vụ ý tưởng và giữ 60fps. Một trang 2D hoàn hảo luôn thắng một trang 3D giật.

Honorable Mention và Site of the Day khác nhau thế nào?

Cả hai đến từ cùng một vòng chấm của giám khảo. Điểm 6.5+ được Honorable Mention; Site of the Day về tay bài điểm cao nhất trong ngày. Khoảng cách gần như luôn nằm ở độ hoàn thiện usability và hiệu năng, không phải độ sáng tạo thô.

Trang portfolio có thắng giải được không hay chỉ dự án khách hàng?

Portfolio tự khởi xướng thắng giải thường xuyên — trang của chính bạn là minh chứng thuần khiết nhất cho tay nghề, không bị ràng buộc khách hàng. Nó thường là tác phẩm mạnh nhất trong hồ sơ một creative developer.