{"id":322,"date":"2025-07-05T14:16:13","date_gmt":"2025-07-05T14:16:13","guid":{"rendered":"https:\/\/wpriverthemes.com\/jayden\/?page_id=322"},"modified":"2026-03-21T09:29:47","modified_gmt":"2026-03-21T09:29:47","slug":"home-version-one-v6","status":"publish","type":"page","link":"https:\/\/dominhtunglam.com\/?page_id=322","title":{"rendered":"Works"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"322\" class=\"elementor elementor-322\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c040db e-con-full e-flex e-con e-parent\" data-id=\"9c040db\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e6d97e elementor-widget elementor-widget-html\" data-id=\"0e6d97e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  =============================================\n  TUNG LAM \u2013 SHOWCASE LIST (Blog Standard Style)\n  Elementor HTML Widget\n  Accent: #FB6704 | Font: Plus Jakarta Sans\n  =============================================\n  C\u00e1ch d\u00f9ng:\n  1. K\u00e9o widget \"HTML\" v\u00e0o trang Elementor\n  2. Paste to\u00e0n b\u1ed9 code n\u00e0y v\u00e0o\n  3. S\u1eeda data d\u1ef1 \u00e1n trong ph\u1ea7n JS (var projects = [...])\n  =============================================\n-->\n\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');\n\n  :root {\n    --bg:          transparent;\n    --surface:     rgba(255,255,255,0.05);\n    --border:      rgba(255,255,255,0.10);\n    --text:        #edebe6;\n    --muted:       rgba(237,235,230,0.45);\n    --accent:      #FB6704;\n    --accent-dim:  rgba(251,103,4,0.13);\n    --accent-glow: rgba(251,103,4,0.28);\n  }\n\n  #tl-blog-root * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  #tl-blog-root {\n    font-family: 'Plus Jakarta Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    padding: 60px 0 120px;\n  }\n\n  \/* \u2500\u2500 PAGE HERO \u2500\u2500 *\/\n  .tl-hero {\n    padding: 20px 60px 64px;\n    border-bottom: 1px solid var(--border);\n    position: relative;\n    overflow: hidden;\n  }\n\n  .tl-hero::before {\n    content: 'WORKS';\n    position: absolute;\n    right: 48px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 150px;\n    font-weight: 700;\n    letter-spacing: -0.06em;\n    color: rgba(255,255,255,0.025);\n    pointer-events: none;\n    user-select: none;\n    line-height: 1;\n  }\n\n  .tl-hero-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    color: var(--accent);\n    margin-bottom: 20px;\n  }\n  .tl-hero-tag::before {\n    content: '';\n    width: 28px;\n    height: 1.5px;\n    background: var(--accent);\n  }\n\n  .tl-hero-title {\n    font-size: clamp(36px, 4.5vw, 60px);\n    font-weight: 700;\n    line-height: 1.1;\n    letter-spacing: -0.03em;\n    color: var(--text);\n    max-width: 540px;\n    margin-bottom: 20px;\n  }\n  .tl-hero-title span {\n    color: var(--accent);\n  }\n\n  .tl-hero-sub {\n    font-size: 15px;\n    font-weight: 400;\n    color: var(--muted);\n    max-width: 400px;\n    line-height: 1.7;\n  }\n\n  \/* \u2500\u2500 LIST \u2500\u2500 *\/\n  .tl-list {\n    padding: 0 60px;\n  }\n\n  \/* top border on first item *\/\n  .tl-list > a:first-child {\n    border-top: 1px solid var(--border);\n  }\n\n  \/* Each row *\/\n  .tl-item {\n    display: grid;\n    grid-template-columns: 52px 190px 1fr auto;\n    align-items: center;\n    gap: 40px;\n    padding: 40px 0;\n    border-bottom: 1px solid var(--border);\n    text-decoration: none;\n    color: inherit;\n    position: relative;\n    transition: background 0.25s ease;\n    cursor: pointer;\n    opacity: 0;\n    transform: translateY(16px);\n    animation: tl-up 0.55s cubic-bezier(0.16,1,0.3,1) forwards;\n  }\n\n  .tl-item:nth-child(1)  { animation-delay: 0.04s; }\n  .tl-item:nth-child(2)  { animation-delay: 0.10s; }\n  .tl-item:nth-child(3)  { animation-delay: 0.16s; }\n  .tl-item:nth-child(4)  { animation-delay: 0.22s; }\n  .tl-item:nth-child(5)  { animation-delay: 0.28s; }\n  .tl-item:nth-child(6)  { animation-delay: 0.34s; }\n  .tl-item:nth-child(7)  { animation-delay: 0.40s; }\n  .tl-item:nth-child(8)  { animation-delay: 0.46s; }\n\n  @keyframes tl-up {\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  \/* Hover line accent *\/\n  .tl-item::before {\n    content: '';\n    position: absolute;\n    left: -60px;\n    top: 0; bottom: 0;\n    width: 3px;\n    background: var(--accent);\n    transform: scaleY(0);\n    transform-origin: bottom;\n    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);\n    border-radius: 0 2px 2px 0;\n  }\n  .tl-item:hover::before {\n    transform: scaleY(1);\n  }\n\n  \/* Index number *\/\n  .tl-item-num {\n    font-size: 12px;\n    font-weight: 500;\n    color: rgba(255,255,255,0.18);\n    letter-spacing: 0.04em;\n    transition: color 0.25s ease;\n    flex-shrink: 0;\n  }\n  .tl-item:hover .tl-item-num {\n    color: var(--accent);\n  }\n\n  \/* Category badge *\/\n  .tl-item-cat {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 24px;\n    border-radius: 100px;\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.10em;\n    text-transform: uppercase;\n    background: var(--surface);\n    border: 1px solid var(--border);\n    color: var(--muted);\n    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;\n    white-space: nowrap;\n  }\n  .tl-item:hover .tl-item-cat {\n    background: var(--accent-dim);\n    border-color: var(--accent-glow);\n    color: var(--accent);\n  }\n\n  \/* Title block *\/\n  .tl-item-body {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    min-width: 0;\n  }\n\n  .tl-item-title {\n    font-size: clamp(18px, 2vw, 24px);\n    font-weight: 600;\n    line-height: 1.25;\n    letter-spacing: -0.02em;\n    color: var(--text);\n    transition: color 0.2s ease;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .tl-item:hover .tl-item-title {\n    color: #fff;\n  }\n\n  .tl-item-desc {\n    font-size: 13px;\n    font-weight: 400;\n    color: var(--muted);\n    line-height: 1.5;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  \/* Right side: year + arrow *\/\n  .tl-item-right {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 16px;\n    flex-shrink: 0;\n  }\n\n  .tl-item-year {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--muted);\n    letter-spacing: 0.06em;\n  }\n\n  .tl-item-arrow {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    border: 1px solid var(--border);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;\n    flex-shrink: 0;\n  }\n  .tl-item:hover .tl-item-arrow {\n    background: var(--accent);\n    border-color: var(--accent);\n    transform: rotate(45deg);\n  }\n  .tl-item-arrow svg {\n    width: 17px;\n    height: 17px;\n    stroke: var(--muted);\n    fill: none;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: stroke 0.3s ease;\n  }\n  .tl-item:hover .tl-item-arrow svg {\n    stroke: #fff;\n  }\n\n  \/* \u2500\u2500 THUMBNAIL PREVIEW (popup on hover) \u2500\u2500 *\/\n  .tl-preview {\n    position: fixed;\n    pointer-events: none;\n    z-index: 9999;\n    width: 260px;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(251,103,4,0.2);\n    opacity: 0;\n    transform: scale(0.88) translateY(10px);\n    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);\n    top: 0; left: 0;\n  }\n  .tl-preview.visible {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  .tl-preview img {\n    width: 100%;\n    height: 160px;\n    object-fit: cover;\n    display: block;\n  }\n  .tl-preview-label {\n    background: var(--surface);\n    padding: 10px 14px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--accent);\n    border-top: 1px solid var(--border);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .tl-preview-label::before {\n    content: '';\n    width: 6px; height: 6px;\n    border-radius: 50%;\n    background: var(--accent);\n    flex-shrink: 0;\n  }\n\n  \/* \u2500\u2500 EMPTY \u2500\u2500 *\/\n  .tl-empty {\n    padding: 80px 64px;\n    font-size: 15px;\n    color: var(--muted);\n    text-align: center;\n  }\n\n  \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n  @media (max-width: 1024px) {\n    .tl-hero { padding: 16px 40px 52px; }\n    .tl-list { padding: 0 40px; }\n    .tl-item { grid-template-columns: 44px 160px 1fr auto; gap: 28px; padding: 36px 0; }\n    .tl-item::before { left: -40px; }\n  }\n\n  @media (max-width: 768px) {\n    .tl-hero { padding: 12px 28px 44px; }\n    .tl-hero::before { font-size: 100px; }\n    .tl-list { padding: 0 28px; }\n    .tl-item { grid-template-columns: 36px 130px 1fr auto; gap: 20px; padding: 32px 0; }\n    .tl-preview { display: none; }\n    .tl-item::before { left: -28px; }\n  }\n\n  @media (max-width: 580px) {\n    #tl-blog-root { padding: 32px 0 80px; }\n    .tl-hero { padding: 8px 20px 36px; }\n    .tl-hero::before { display: none; }\n    .tl-list { padding: 0 20px; }\n    .tl-item {\n      grid-template-columns: 1fr auto;\n      grid-template-rows: auto auto;\n      gap: 14px 16px;\n      padding: 28px 0;\n    }\n    .tl-item-num { display: none; }\n    .tl-item-cat { grid-column: 1; grid-row: 1; justify-self: start; }\n    .tl-item-body { grid-column: 1; grid-row: 2; }\n    .tl-item-right { grid-column: 2; grid-row: 1 \/ 3; justify-content: center; }\n    .tl-item::before { left: -20px; }\n    .tl-item-title { white-space: normal; }\n    .tl-item-desc { white-space: normal; }\n  }\n<\/style>\n\n<div id=\"tl-blog-root\">\n\n  <!-- HERO -->\n  <header class=\"tl-hero\">\n    <div class=\"tl-hero-tag\">Selected Works<\/div>\n    <h1 class=\"tl-hero-title\">Case Studies &amp;<br><span>Projects<\/span><\/h1>\n    <p class=\"tl-hero-sub\">A collection of UI\/UX design projects \u2014 from research to final product.<\/p>\n  <\/header>\n\n  <!-- LIST -->\n  <div class=\"tl-list\" id=\"tl-list\"><\/div>\n\n<\/div>\n\n<!-- Thumbnail preview tooltip -->\n<div class=\"tl-preview\" id=\"tl-preview\">\n  <img decoding=\"async\" id=\"tl-preview-img\" src=\"\" alt=\"\" \/>\n  <div class=\"tl-preview-label\" id=\"tl-preview-label\">View case study<\/div>\n<\/div>\n\n<script>\n(function () {\n\n  \/\/ =============================================\n  \/\/ \u270f\ufe0f  THAY \u0110\u1ed4I DATA D\u1ef0 \u00c1N C\u1ee6A B\u1ea0N T\u1ea0I \u0110\u00c2Y\n  \/\/ =============================================\n  var projects = [\n    {\n      name:   \"Vietnam Airlines Website\",\n      role:   \"Lead UI\/UX Designer\",\n      cat:    \"Web Design\",\n      year:   \"2025\",\n      link:   \"https:\/\/dominhtunglam.com\/?page_id=1743\",\n      image:  \"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/01\/MacBook-13-scaled.png\"\n    },\n    {\n      name:   \"HC Vietnam Website\",\n      role:   \"Lead UI\/UX Designer\",\n      cat:    \"UI\/UX\",\n      year:   \"2023\",\n      link:   \"https:\/\/dominhtunglam.com\/?page_id=2111\",\n      image:  \"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/01\/Handheld-iPad-1-scaled.png\"\n    },\n    {\n      name:   \"E-Recognition Platform Carlsberg\",\n      role:   \"Lead UI\/UX Designer\",\n      cat:    \"Product Design\",\n      year:   \"2022\",\n      link:   \"https:\/\/dominhtunglam.com\/?page_id=1956\",\n      image:  \"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/MOCKUP-2.jpg\"\n    },\n    \/\/ \u2500\u2500 Th\u00eam d\u1ef1 \u00e1n m\u1edbi t\u1ea1i \u0111\u00e2y \u2500\u2500\n    \/\/ {\n    \/\/   name:  \"T\u00ean d\u1ef1 \u00e1n\",\n    \/\/   role:  \"Vai tr\u00f2 c\u1ee7a b\u1ea1n\",\n    \/\/   cat:   \"Category\",\n    \/\/   year:  \"2024\",\n    \/\/   link:  \"https:\/\/link-case-study.com\",\n    \/\/   image: \"https:\/\/link-thumbnail.jpg\"\n    \/\/ },\n  ];\n  \/\/ =============================================\n\n  var list    = document.getElementById('tl-list');\n  var preview = document.getElementById('tl-preview');\n  var preImg  = document.getElementById('tl-preview-img');\n  var preLabel = document.getElementById('tl-preview-label');\n\n  if (!projects.length) {\n    list.innerHTML = '<div class=\"tl-empty\">No projects yet.<\/div>';\n    return;\n  }\n\n  projects.forEach(function (p, i) {\n    var a = document.createElement('a');\n    a.className = 'tl-item';\n    a.href = p.link || '#';\n    if (p.link) { a.target = '_blank'; a.rel = 'noopener'; }\n\n    a.innerHTML =\n      '<span class=\"tl-item-num\">' + (i < 9 ? '0' + (i + 1) : i + 1) + '<\/span>' +\n      '<span class=\"tl-item-cat\">' + p.cat + '<\/span>' +\n      '<div class=\"tl-item-body\">' +\n        '<div class=\"tl-item-title\">' + p.name + '<\/div>' +\n        '<div class=\"tl-item-desc\">' + p.role + '<\/div>' +\n      '<\/div>' +\n      '<div class=\"tl-item-right\">' +\n        '<span class=\"tl-item-year\">' + p.year + '<\/span>' +\n        '<span class=\"tl-item-arrow\">' +\n          '<svg viewBox=\"0 0 24 24\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>' +\n        '<\/span>' +\n      '<\/div>';\n\n    \/\/ Thumbnail preview on hover\n    if (p.image) {\n      a.addEventListener('mouseenter', function () {\n        preImg.src = p.image;\n        preLabel.textContent = p.name;\n        preview.classList.add('visible');\n      });\n      a.addEventListener('mouseleave', function () {\n        preview.classList.remove('visible');\n      });\n    }\n\n    list.appendChild(a);\n  });\n\n  \/\/ Follow cursor\n  document.addEventListener('mousemove', function (e) {\n    var x = e.clientX + 20;\n    var y = e.clientY - 80;\n    \/\/ keep inside viewport\n    if (x + 280 > window.innerWidth)  x = e.clientX - 280;\n    if (y + 180 > window.innerHeight) y = e.clientY - 190;\n    preview.style.left = x + 'px';\n    preview.style.top  = y + 'px';\n  });\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Selected Works Case Studies &amp;Projects A collection of UI\/UX design projects \u2014 from research to final product. View case study<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/simple-strings.php","meta":{"_acf_changed":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-322","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322"}],"version-history":[{"count":4,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/322\/revisions"}],"predecessor-version":[{"id":2132,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/322\/revisions\/2132"}],"wp:attachment":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}