Minh Pham: Case Study Portfolio Designer (Awwwards)

Có một áp lực rất đặc biệt khi xây website portfolio cho một designer mà toàn bộ danh tiếng của họ chính là chất lượng tay nghề. Minh Pham là một designer đa lĩnh vực đẳng cấp thế giới — Design Lead tại Fantasy, với các dự án cho Ford, UFC, Lincoln, Royal Caribbean và NFL — và portfolio của anh buộc phải là một tác phẩm xứng tầm portfolio, chứ không chỉ mô tả về nó. Case study portfolio Minh Pham này phân tích cách tôi xây trang đó với vai trò developer: từ brief, phần motion bằng GSAP, lớp Three.js/WebGL, đến phần engineering đã giúp nó đạt Awwwards Site of the Day với điểm developer 7.77.

Ai làm — và niềm tin đằng sau nó

Tôi là creative developer của dự án; Minh nắm phần thiết kế và định hướng. Sự phân vai này quan trọng hơn bình thường ở đây. Khi khách hàng chính là một designer hàng đầu, developer không ở đó để diễn giải lỏng lẻo — bạn ở đó để tái hiện ý đồ của người khác với độ trung thực 100%, rồi làm cho nó chuyển động.

Sau dự án, Minh gọi tôi là "một front-end developer phi thường" — tôi trích lại không phải để khoe, mà vì đó chính là tinh thần của case study này. Một designer khó tính đến vậy chỉ duyệt khi bản dựng khớp với tầm nhìn tới từng pixel. Để bạn hiểu vì sao tôi coi tiêu chuẩn đó là nghiêm túc: tôi đã có hơn 11 năm xây trải nghiệm đoạt giải cho khách hàng ở Na Uy, Đan Mạch, Thụy Điển, Malta, Đức và Việt Nam, là thành viên ban giám khảo Awwwards, và đã đạt nhiều giải Awwwards Site of the Day. Trên portfolio của chính một designer, bề dày đó là ranh giới giữa motion tôn vinh tác phẩm và motion lặng lẽ làm giảm giá trị của nó.

Brief: bản thân portfolio phải xứng tầm portfolio

Đây là cái bẫy đệ quy của bất kỳ website portfolio designer nào: trang web vừa là chiếc hộp chứa vừa là một hiện vật trưng bày. Một bản dựng phẳng, chung chung sẽ phản bội lại mọi điều mà tác phẩm tuyên bố. Nên tiêu chuẩn không phải "trình bày dự án cho rõ ràng" — mà là "làm cho trang web đủ tốt để xứng đáng nằm trong chính bộ dự án đó".

Ba ràng buộc định hình mọi quyết định:

• Độ trung thực là bất di bất dịch. Khoảng cách, thang chữ, easing, timing — mọi giá trị phải khớp đúng thiết kế của Minh. "Gần đúng" sẽ bị đọc như một sự xuống cấp trên trang của một designer.
• Motion chính là cá tính. Tay nghề của Minh trải khắp 3D, motion và product design. Trang phải toát lên cảm giác được-thiết-kế-trong-chuyển-động, không phải trang trí thêm sau.
• Hình ảnh tác phẩm phải nguyên bản. Case study của anh là hình ảnh. Không hiệu ứng nào được phép làm mềm, nén hay biến dạng ảnh gốc.

Phần craft: motion GSAP, Three.js và WebGL

Các phần đặc trưng đến từ ba lớp phối hợp với nhau — một hệ thống motion chạy bằng GSAP, các transition trang và ảnh được tính toán kỹ, và một lớp Three.js/WebGL cho những khoảnh khắc cần GPU thực sự. Đây là cách dựng từng phần.

Layout pixel-perfect, giữ vững trên mọi màn hình

"Trung thực với thiết kế" không thể nghĩa là pixel-perfect ở một breakpoint rồi vỡ ở mọi nơi khác. Cách đáng tin cậy để tôn trọng khoảng cách và thang chữ của một designer trên mọi viewport là dùng token động suy ra trực tiếp từ giá trị min/max của thiết kế, để nhịp điệu Minh đặt ra không bao giờ sụp giữa các breakpoint:

:root {
  /* clamp(min, fluid, max) — type động bám sát thiết kế 1:1 */
  --step-0: clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
  --step-1: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --display: clamp(3rem, 1.8rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
}

Đây là nửa "không hào nhoáng" của một trang đoạt giải: layout phải vô hình, để motion nhận hết sự chú ý. Phiên bản sâu hơn của kỷ luật này nằm trong bài cách làm portfolio đạt giải.

Một hệ thống motion GSAP, không phải animation rải rác

Một trang thiên về motion như vậy sẽ sụp đổ nếu mỗi reveal được tinh chỉnh riêng lẻ. Giải pháp là một ngôn ngữ motion dùng chung — một bộ ease và một thang duration nhất quán — chạy bằng GSAP và đồng bộ với cuộn mượt theo quán tính, để cả trang đọc như một bề mặt liền mạch:

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

// Một bộ "từ vựng" reveal, tái dùng khắp nơi — nhất quán = "được thiết kế", không phải "trang trí"
gsap.utils.toArray<HTMLElement>('[data-reveal]').forEach((el) => {
  gsap.from(el, {
    yPercent: 14,
    opacity: 0,
    ease: 'expo.out',
    duration: 1.1,
    scrollTrigger: { trigger: el, start: 'top 82%', once: true },
  })
})

Dùng một ease (expo.out) và một thang timing trên toàn site là thứ khiến motion trông như được dàn dựng có chủ đích. Cơ chế phía sau pin, scrub và parallax được trình bày trong bài hướng dẫn GSAP ScrollTrigger.

Transition Three.js / WebGL nâng tầm hình ảnh

Những khoảnh khắc cần GPU thực sự — các transition được cân nhắc kỹ giữa hình ảnh dự án — chạy bằng Three.js. Luật cứng là không bao giờ làm xuống cấp hình ảnh, nên phần shader diễn ra xung quanh tấm ảnh (một reveal kiểu displacement giữa hai texture độ phân giải đầy đủ) thay vì làm nát ảnh gốc. Fragment shader trộn giữa texture đi và texture đến, dịch chuyển UV theo một noise map để cú chuyển cảnh cảm giác vật lý thay vì chỉ là crossfade phẳng:

uniform sampler2D uFrom;
uniform sampler2D uTo;
uniform sampler2D uDisp;   // bản đồ displacement / noise
uniform float uProgress;   // 0 → 1, điều khiển bởi GSAP
varying vec2 vUv;

void main() {
  float d = texture2D(uDisp, vUv).r;
  vec2 fromUv = vUv + vec2(d * uProgress * 0.12, 0.0);
  vec2 toUv   = vUv - vec2(d * (1.0 - uProgress) * 0.12, 0.0);
  vec4 from = texture2D(uFrom, fromUv);
  vec4 to   = texture2D(uTo, toUv);
  gl_FragColor = mix(from, to, smoothstep(0.0, 1.0, uProgress));
}

GSAP điều khiển uProgress, nên cùng một ngôn ngữ easing chi phối DOM cũng chi phối shader — phần WebGL không bao giờ giống một hệ thống tách rời lắp thêm vào. Nếu bạn muốn xem cách dựng đầy đủ kỹ thuật này, hãy đọc bài hiệu ứng displacement ảnh WebGL khi hover. Hai thói quen hiệu năng giữ cho ảnh luôn nét: texture load ở độ phân giải đầy đủ với anisotropic filtering, và renderer giới hạn device pixel ratio ở mức 2 — vượt qua đó bạn trả cái giá fill-rate khổng lồ cho một khác biệt gần như không ai thấy được.

import * as THREE from 'three'

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

const tex = new THREE.TextureLoader().load('/work/ford.jpg', (t) => {
  t.colorSpace = THREE.SRGBColorSpace
  t.anisotropy = renderer.capabilities.getMaxAnisotropy() // giữ nét ở góc nghiêng
})

Giữ cho nó nhanh dưới tất cả lượng motion đó

Một giải thưởng không sống sót qua một cú cuộn giật. Kỷ luật hiệu năng quen thuộc nhưng nghiêm ngặt: chỉ animate transform và opacity để motion chạy trên GPU compositor; lazy-init scene WebGL và tạm dừng vòng render khi nó ra khỏi màn hình; và tôn trọng prefers-reduced-motion qua gsap.matchMedia() để trang vẫn dễ tiếp cận mà không phải tách codebase.

Kết quả: Awwwards Site of the Day

Ghi nhận	Đơn vị	Chi tiết
Site of the Day	Awwwards	Điểm developer 7.77
Điểm SOTD	Awwwards	7.37

Awwwards chấm thiết kế, khả năng dùng, sáng tạo và nội dung — một Site of the Day trên portfolio của chính một designer nghĩa là bản dựng được đọc như craft, không phải trang trí. Điểm developer 7.77 là con số tôi quan tâm nhất ở đây: đó là ban giám khảo ghi nhận riêng phần engineering — độ trung thực, hệ thống motion, và phần WebGL trụ vững dưới sự soi xét. Bạn có thể xem trực tiếp tại minhpham.design.

Case study này thực ra nói về điều gì

Bài học vượt ra ngoài một portfolio: khi khách hàng là một designer, việc của developer là độ trung thực cộng với sự sống — tái hiện tầm nhìn thật chính xác, rồi làm nó chuyển động ở 60fps mà không bao giờ làm xuống cấp tác phẩm. Đó cũng là playbook đằng sau mọi dự án đoạt giải trong kho dự án, từ website thương hiệu trải nghiệm tới portfolio chữ chuyển động. Nếu bạn là designer hay studio cần một người tái hiện trung thực một concept đẳng cấp Awwwards, đó chính là việc tôi làm.

FAQ

Portfolio Minh Pham được xây bằng gì?

Một hệ thống motion chạy bằng GSAP ở front-end với Three.js/WebGL cho các transition ảnh nặng, token thiết kế động cho layout pixel-perfect, và cuộn mượt theo quán tính — một stack được chọn để tái hiện tầm nhìn của designer với độ trung thực đầy đủ và vẫn nhanh.

Ai xây website Minh Pham?

Minh Pham nắm phần thiết kế và định hướng sáng tạo; Hon Tran (hontran.dev) là creative developer phụ trách bản dựng front-end, motion GSAP và engineering Three.js/WebGL.

Portfolio Minh Pham đã đạt giải gì?

Awwwards Site of the Day, với điểm developer 7.77 và điểm SOTD 7.37.

Làm sao để portfolio của một designer "trông như được thiết kế" thay vì trang trí?

Dựng một hệ thống motion dùng chung — một ease và một thang timing trên toàn site — suy ra layout từ token động để khoảng cách khớp thiết kế ở mọi breakpoint, và điều khiển cả DOM lẫn WebGL từ cùng một timeline GSAP để không phần nào trông như lắp thêm.

Cùng làm một sản phẩm xứng tầm giải thưởng

Nếu bạn là designer, thương hiệu hay agency cần một portfolio hoặc product site đẳng cấp Awwwards được xây với độ trung thực và chuyển động mà tác phẩm xứng đáng — đó chính là việc tôi làm với vai trò creative developer.

• Xem cách tôi làm việc và các gói hợp tác tại trang thuê dev.
• Khám phá thêm các dự án đã ship và đoạt giải trong kho dự án.
• Sẵn sàng trao đổi? Let's talk →

---

Viết bởi Hon Tran — creative developer, nhà sáng lập hontran.dev, và thành viên ban giám khảo Awwwards. Hơn 11 năm xây dựng trải nghiệm web đoạt giải, ưu tiên hiệu năng (GSAP, Three.js / WebGL, Next.js) cho khách hàng toàn cầu. Developer Việt Nam đầu tiên đoạt giải web quốc tế. hontran.dev · Behance.