Work – Archive<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\" rel=\"preconnect\"\/>\n <link crossorigin=\"\" href=\"https:\/\/fonts.gstatic.com\" rel=\"preconnect\"\/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap\" rel=\"stylesheet\"\/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\" rel=\"stylesheet\"\/>\n <script id=\"tailwind-config\">\n tailwind.config = {\n darkMode: \"class\",\n theme: {\n extend: {\n \"colors\": {\n \"outline\": \"#7e7576\", \"surface-tint\": \"#5e5e5e\", \"primary\": \"#000000\",\n \"on-secondary-fixed-variant\": \"#454747\", \"secondary\": \"#5d5f5f\",\n \"on-primary-fixed\": \"#1b1b1b\", \"tertiary\": \"#000000\", \"inverse-primary\": \"#c6c6c6\",\n \"primary-fixed\": \"#e2e2e2\", \"on-primary-fixed-variant\": \"#474747\",\n \"on-tertiary-container\": \"#848484\", \"on-background\": \"#1a1c1c\",\n \"secondary-fixed\": \"#e2e2e2\", \"on-tertiary\": \"#ffffff\", \"on-primary-container\": \"#848484\",\n \"primary-fixed-dim\": \"#c6c6c6\", \"surface-container-highest\": \"#e2e2e2\",\n \"on-surface-variant\": \"#4c4546\", \"tertiary-container\": \"#1b1c1c\",\n \"surface-variant\": \"#e2e2e2\", \"secondary-fixed-dim\": \"#c6c6c7\",\n \"on-secondary\": \"#ffffff\", \"error\": \"#ba1a1a\", \"on-secondary-fixed\": \"#1a1c1c\",\n \"surface-container\": \"#eeeeee\", \"surface\": \"#f9f9f9\", \"surface-container-high\": \"#e8e8e8\",\n \"surface-bright\": \"#f9f9f9\", \"on-error\": \"#ffffff\", \"on-tertiary-fixed\": \"#1b1c1c\",\n \"outline-variant\": \"#cfc4c5\", \"error-container\": \"#ffdad6\", \"on-primary\": \"#ffffff\",\n \"surface-container-lowest\": \"#ffffff\", \"surface-container-low\": \"#f3f3f3\",\n \"on-error-container\": \"#93000a\", \"tertiary-fixed\": \"#e3e2e2\", \"secondary-container\": \"#dfe0e0\",\n \"on-surface\": \"#1a1c1c\", \"inverse-surface\": \"#2f3131\", \"primary-container\": \"#1b1b1b\",\n \"tertiary-fixed-dim\": \"#c7c6c6\", \"background\": \"#f9f9f9\", \"on-secondary-container\": \"#616363\",\n \"inverse-on-surface\": \"#f1f1f1\", \"on-tertiary-fixed-variant\": \"#464747\", \"surface-dim\": \"#dadada\"\n },\n \"borderRadius\": { \"DEFAULT\": \"0.25rem\", \"lg\": \"0.5rem\", \"xl\": \"0.75rem\", \"full\": \"9999px\" },\n \"spacing\": { \"grid-margin\": \"64px\", \"element-gap\": \"48px\", \"max-width\": \"1440px\", \"grid-gutter\": \"24px\", \"section-gap\": \"160px\" },\n \"fontFamily\": {\n \"headline-lg-mobile\": [\"Hanken Grotesk\"], \"nav-link\": [\"Hanken Grotesk\"],\n \"body-md\": [\"Hanken Grotesk\"], \"display-lg\": [\"Hanken Grotesk\"],\n \"headline-md\": [\"Hanken Grotesk\"], \"headline-lg\": [\"Hanken Grotesk\"],\n \"label-caps\": [\"Hanken Grotesk\"], \"body-lg\": [\"Hanken Grotesk\"]\n },\n \"fontSize\": {\n \"headline-lg-mobile\": [\"32px\", {\"lineHeight\": \"40px\", \"fontWeight\": \"400\"}],\n \"nav-link\": [\"14px\", {\"lineHeight\": \"20px\", \"letterSpacing\": \"0.1em\", \"fontWeight\": \"500\"}],\n \"body-md\": [\"16px\", {\"lineHeight\": \"28px\", \"fontWeight\": \"400\"}],\n \"display-lg\": [\"72px\", {\"lineHeight\": \"80px\", \"letterSpacing\": \"-0.02em\", \"fontWeight\": \"400\"}],\n \"headline-md\": [\"32px\", {\"lineHeight\": \"40px\", \"fontWeight\": \"400\"}],\n \"headline-lg\": [\"48px\", {\"lineHeight\": \"56px\", \"fontWeight\": \"400\"}],\n \"label-caps\": [\"12px\", {\"lineHeight\": \"16px\", \"letterSpacing\": \"0.15em\", \"fontWeight\": \"600\"}],\n \"body-lg\": [\"18px\", {\"lineHeight\": \"32px\", \"fontWeight\": \"400\"}]\n }\n }\n }\n }\n <\/script>\n <style>\n html, body { overflow-y: auto !important; height: auto !important; min-height: 100%; }\n body { background-color: #f9f9f9; font-family: 'Hanken Grotesk', sans-serif; }\n .section-line { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }\n .section-line::before { content: ''; display: block; height: 2px; width: 100px; background-color: black; }\n \n \/* \u903c\u771f\u9ed1\u80f6\u5531\u7247\u5149\u6cfd\u6548\u679c *\/\n .video-disc { \n width: 180px; \n height: 180px; \n border-radius: 50%; \n position: relative; \n display: flex; \n justify-content: center; \n align-items: center; \n background: \n radial-gradient(circle, transparent 24%, #121212 25%, #050505 35%, #1c1c1c 45%, #0d0d0d 55%, #181818 65%, #050505 75%, #1a1a1a 85%, #000000 95%),\n conic-gradient(from 120deg at 50% 50%, rgba(255,255,255,0.06) 0deg, transparent 90deg, rgba(255,255,255,0.06) 180deg, transparent 270deg, rgba(255,255,255,0.06) 360deg);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 0 12px rgba(255,255,255,0.08);\n border: 4px solid #111;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n \n \/* Spindle spindle hole inside *\/\n .video-disc::after { \n content: ''; \n width: 20px; \n height: 20px; \n background-color: #f9f9f9; \n border-radius: 50%; \n position: absolute; \n z-index: 15; \n box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 0 0 2px #000;\n }\n\n \/* Center label graphic *\/\n .video-disc-label {\n position: absolute;\n width: 66px;\n height: 66px;\n border-radius: 50%;\n background: linear-gradient(135deg, #e2e2e2 0%, #c6c6c6 100%);\n border: 2px solid #111;\n z-index: 5;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: inset 0 0 5px rgba(0,0,0,0.2);\n overflow: hidden;\n }\n\n \/* \u5531\u7247\u81ea\u8f6c\u52a8\u753b *\/\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n .video-disc-spin {\n animation: spin 10s linear infinite;\n }\n\n \/* \u9f20\u6807\u60ac\u505c\u5531\u7247\u7565\u5fae\u653e\u5927\u5e76\u589e\u52a0\u9634\u5f71 *\/\n .video-link:hover .video-disc {\n transform: scale(1.08);\n box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);\n }\n\n \/* \u4ec5\u5728\u767b\u5f55\u7ba1\u7406\u5458\u72b6\u6001\u4e0b\u751f\u6548\u7684\u7f16\u8f91\u72b6\u6001\u63d0\u793a *\/\n body.logged-in [contenteditable=\"true\"] {\n outline: none;\n padding: 2px 4px;\n transition: all 0.2s ease;\n }\n body.logged-in [contenteditable=\"true\"]:hover {\n background-color: rgba(0, 0, 0, 0.03);\n border-radius: 2px;\n cursor: text;\n }\n body.logged-in [contenteditable=\"true\"]:focus {\n background-color: rgba(0, 0, 0, 0.05);\n box-shadow: 0 0 0 1px #000000;\n border-radius: 2px;\n }\n <\/style>\n<\/head>\n<body class=\"bg-background text-on-background font-body-md antialiased selection:bg-primary selection:text-on-primary\">\n\n <main class=\"max-w-max-width mx-auto px-grid-margin py-12 md:py-24 flex flex-col gap-16 md:gap-24\">\n \n <section>\n <div class=\"section-line\">\n <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase\">Photo collection<\/h2>\n <\/div>\n <div class=\"flex flex-col md:flex-row items-center justify-center gap-grid-gutter relative w-full h-auto min-h-[500px]\">\n \n <div class=\"w-full md:w-1\/4 h-auto self-start md:mt-20 relative bg-surface-container-highest p-4 hidden md:block cursor-pointer hover:opacity-90 transition-opacity\" id=\"photo-thumb-left\" data-title=\"Architectural & landscape\">\n <div class=\"w-full aspect-[3\/4] bg-surface-container flex items-center justify-center border border-outline-variant overflow-hidden\">\n <img decoding=\"async\" id=\"img-thumb-left\" class=\"w-full h-full object-cover\" src=\"\" alt=\"Thumbnail Left\">\n <\/div>\n <\/div>\n\n \n <div class=\"w-full md:w-2\/5 relative z-10 transition-opacity duration-500 opacity-100\" id=\"photo-main-container\">\n <div class=\"bg-surface-container-high p-8 flex flex-col gap-6 relative shadow-sm\">\n <div class=\"w-full aspect-square bg-surface-container overflow-hidden relative md:-left-12 md:-top-12 border border-outline-variant flex items-center justify-center\" id=\"main-img-box\">\n <img decoding=\"async\" id=\"img-main\" class=\"w-full h-full object-cover\" src=\"\" alt=\"Main View\">\n <\/div>\n <div class=\"text-right md:-mt-10 self-end w-full md:w-3\/4\">\n <h3 contenteditable=\"true\" class=\"font-headline-md text-headline-md text-primary mb-1 tracking-tight\" id=\"main-title\">Portrait & Documentary<\/h3>\n <p contenteditable=\"true\" class=\"text-body-md text-secondary mb-4 italic font-medium tracking-wide\" id=\"main-subtitles\">Fleeting Realities<\/p>\n <p contenteditable=\"true\" class=\"font-body-md text-body-md text-on-surface-variant text-sm text-right leading-relaxed mb-6\" id=\"main-desc\">Capturing the unfiltered pulse of life through the lens of time. An intimate documentation of cultural landscapes, candid human emotions, and the cinematic narratives hidden within the ordinary streets.<\/p>\n <a href=\"https:\/\/northbound-auto.com\/photo-album\/\" class=\"inline-block bg-primary text-white px-8 py-3 font-label-caps text-label-caps uppercase hover:bg-secondary transition-all duration-300 shadow-lg text-center\">SEE MORE<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full md:w-1\/4 h-auto self-end md:mb-20 relative bg-[#f1eed9] p-4 hidden md:block cursor-pointer hover:opacity-90 transition-opacity\" id=\"photo-thumb-right\" data-title=\"Still life photography\">\n <div class=\"w-full aspect-square bg-surface-container flex items-center justify-center border border-outline-variant overflow-hidden\">\n <img decoding=\"async\" id=\"img-thumb-right\" class=\"w-full h-full object-cover\" src=\"\" alt=\"Thumbnail Right\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"w-full flex mt-12 justify-center items-center gap-4\">\n <button class=\"font-headline-md text-headline-md text-secondary hover:text-primary transition-colors cursor-pointer\" id=\"gallery-prev\"><<\/button>\n <p contenteditable=\"true\" class=\"font-label-caps text-secondary tracking-widest text-headline-md\" id=\"gallery-counter\"> 2 \/ 3<\/p>\n <button class=\"font-headline-md text-headline-md text-secondary hover:text-primary transition-colors cursor-pointer\" id=\"gallery-next\">><\/button>\n <\/div>\n <\/section>\n\n \n <section>\n <div class=\"section-line\">\n <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase\">Poster Making<\/h2>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-element-gap items-start\">\n \n \n <div class=\"flex flex-col items-center text-center w-full\">\n <div class=\"w-full max-w-[320px] mx-auto aspect-[3\/4] cursor-pointer overflow-hidden group poster-trigger flex items-center justify-center\" title=\"Click to view the original image.\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/poster1.png\" class=\"max-w-full max-h-full object-contain transition-transform duration-300 group-hover:scale-[1.02]\" alt=\"Psychology Infographic\" title=\"WORK\">\n <\/div>\n <h3 contenteditable=\"true\" class=\"font-headline-md text-base md:text-lg text-primary mt-6 tracking-wide font-medium\">\u300aPsychology Infographic\u300b<\/h3>\n <div class=\"w-12 h-[1.5px] bg-outline my-3 mx-auto\"><\/div>\n <p contenteditable=\"true\" class=\"font-body-md text-secondary text-sm leading-relaxed max-w-[320px] mx-auto px-4\">An infographic about how emotions affect work and study, combining relevant literature and data research.<\/p>\n <\/div>\n\n \n <div class=\"flex flex-col items-center text-center w-full\">\n <div class=\"w-full max-w-[320px] mx-auto aspect-[3\/4] cursor-pointer overflow-hidden group poster-trigger relative flex items-center justify-center\" title=\"Click to view the original image.\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/poster2.png\" class=\"max-w-full max-h-full object-contain transition-transform duration-300 group-hover:scale-[1.02]\" alt=\"Penang Infographic\" title=\"WORK\">\n <\/div>\n <h3 contenteditable=\"true\" class=\"font-headline-md text-base md:text-lg text-primary mt-6 tracking-wide font-medium\">\u300aPenang Infographic\u300b<\/h3>\n <div class=\"w-12 h-[1.5px] bg-outline my-3 mx-auto\"><\/div>\n <p contenteditable=\"true\" class=\"font-body-md text-secondary text-sm leading-relaxed max-w-[320px] mx-auto px-4\">An infographic clearly and concisely introduces the development of Penang’s historical buildings and culture.<\/p>\n <\/div>\n\n <\/div>\n <\/section>\n <section>\n <div class=\"section-line\">\n <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase\">Video disc<\/h2>\n <\/div>\n <div class=\"flex flex-wrap justify-center gap-12 md:gap-24 mt-12\">\n <div class=\"flex flex-col items-center gap-6\">\n <a href=\"#\" class=\"video-link block\" title=\"Click to play video\" data-index=\"0\">\n <div class=\"video-disc video-disc-spin\">\n <div class=\"video-disc-label relative\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video-\u5c01\u97621.jpg\" class=\"absolute inset-0 w-full h-full object-cover brightness-75\" alt=\"Video Cover 1\" title=\"WORK\">\n <span class=\"material-symbols-outlined text-white text-2xl relative z-10 drop-shadow-md\">play_arrow<\/span>\n <\/div>\n <\/div>\n <\/a>\n <span contenteditable=\"true\" class=\"border border-outline px-4 py-1 font-label-caps text-label-caps tracking-widest text-secondary text-[10px]\">Filipe Pinhas<\/span>\n <\/div>\n <div class=\"flex flex-col items-center gap-6\">\n <a href=\"#\" class=\"video-link block\" title=\"Click to play video\" data-index=\"1\">\n <div class=\"video-disc video-disc-spin\">\n <div class=\"video-disc-label relative\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video%E4%B8%B0%E9%9D%A22.jpeg\" class=\"absolute inset-0 w-full h-full object-cover brightness-75\" alt=\"Video Cover 2\" title=\"WORK\">\n <span class=\"material-symbols-outlined text-white text-2xl relative z-10 drop-shadow-md\">play_arrow<\/span>\n <\/div>\n <\/div>\n <\/a>\n <span contenteditable=\"true\" class=\"border border-outline px-4 py-1 font-label-caps text-label-caps tracking-widest text-secondary text-[10px]\">Roman Fox<\/span>\n <\/div>\n <div class=\"flex flex-col items-center gap-6\">\n <a href=\"#\" class=\"video-link block\" title=\"Click to play video\" data-index=\"2\">\n <div class=\"video-disc video-disc-spin\">\n <div class=\"video-disc-label relative\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video-\u5c01\u97623.jpeg\" class=\"absolute inset-0 w-full h-full object-cover brightness-75\" alt=\"Video Cover 3\" title=\"WORK\">\n <span class=\"material-symbols-outlined text-white text-2xl relative z-10 drop-shadow-md\">play_arrow<\/span>\n <\/div>\n <\/div>\n <\/a>\n <span contenteditable=\"true\" class=\"border border-outline px-4 py-1 font-label-caps text-label-caps tracking-widest text-secondary text-[10px]\">Drama and Stage<\/span>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <section>\n <div class=\"section-line\">\n <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase\">Professional Equipment<\/h2>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 items-center h-auto min-h-[400px]\">\n \n <div class=\"bg-surface-container w-full aspect-square border border-outline-variant\/30 self-end md:transform md:-translate-y-8 overflow-hidden shadow-sm\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/e1.jpeg\" class=\"w-full h-full object-cover\" alt=\"Equipment 1\" title=\"WORK\">\n <\/div>\n \n <div class=\"bg-surface-container w-full aspect-[4\/3] border border-outline-variant\/30 relative z-10 md:transform md:scale-110 shadow-sm overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/e3.jpeg\" class=\"w-full h-full object-cover\" alt=\"Equipment 2\" title=\"WORK\">\n <\/div>\n \n <div class=\"bg-surface-container w-full aspect-[3\/4] border border-outline-variant\/30 self-start md:transform md:translate-y-8 overflow-hidden shadow-sm\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/e2.jpeg\" class=\"w-full h-full object-cover\" alt=\"Equipment 3\" title=\"WORK\">\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <div id=\"video-modal\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-black\/80 opacity-0 pointer-events-none transition-opacity duration-300\">\n <div class=\"relative w-full max-w-4xl px-4 md:px-0\">\n <button id=\"modal-close\" class=\"absolute -top-12 right-4 md:right-0 text-white hover:text-gray-300 transition-colors flex items-center\">\n <span class=\"material-symbols-outlined text-3xl\">close<\/span>\n <\/button>\n <div class=\"bg-black aspect-video w-full rounded-lg overflow-hidden shadow-2xl border border-white\/10\">\n <video id=\"modal-video\" class=\"w-full h-full\" controls src=\"\">\n \u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 HTML5 \u89c6\u9891\u64ad\u653e\u3002\n <\/video>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"image-modal\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-black\/90 opacity-0 pointer-events-none transition-opacity duration-300\">\n <div class=\"relative max-w-5xl max-h-[90vh] px-4 flex flex-col items-center justify-center\">\n <button id=\"img-modal-close\" class=\"absolute -top-12 right-4 text-white hover:text-gray-300 transition-colors flex items-center\">\n <span class=\"material-symbols-outlined text-3xl\">close<\/span>\n <\/button>\n <img decoding=\"async\" id=\"modal-lightbox-img\" class=\"max-w-full max-h-[80vh] object-contain rounded shadow-2xl border border-white\/10\" src=\"\" alt=\"Full View\">\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ \u914d\u7f6e\u56fe\u7247\u4e0e\u63cf\u8ff0\u5185\u5bb9\n const contentMap = {\n 'Architectural & landscape': {\n title: 'Architectural & landscape',\n subtitles: 'Built vs. Born',\n desc: 'Stripping away the ephemeral to reveal the permanent. This collection examines the dramatic tension between man-made structural precision and the organic, sweeping geometry of the natural world.',\n img: 'https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/3.png'\n },\n 'Portrait & Documentary': {\n title: 'Portrait & Documentary',\n subtitles: 'Fleeting Realities',\n desc: 'Capturing the unfiltered pulse of life through the lens of time. An intimate documentation of cultural landscapes, candid human emotions, and the cinematic narratives hidden within the ordinary streets.',\n img: 'https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/f.png'\n },\n 'Still life photography': {\n title: 'Still life photography',\n subtitles: 'Forms of Solitude',\n desc: 'A visual exploration of inanimate presence, focusing on the subtle interplay of soft light, profound shadows, and deliberate compositions that elevate everyday objects into timeless monuments of silence.',\n img: 'https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/six.jpeg'\n }\n };\n\n let layoutState = ['Architectural & landscape', 'Portrait & Documentary', 'Still life photography'];\n let currentIndex = 2;\n\n const leftThumb = document.getElementById('photo-thumb-left');\n const rightThumb = document.getElementById('photo-thumb-right');\n const mainContainer = document.getElementById('photo-main-container');\n \n const mainTitle = document.getElementById('main-title');\n const mainSubTitles = document.getElementById('main-subtitles');\n const mainDesc = document.getElementById('main-desc');\n const galleryCounter = document.getElementById('gallery-counter');\n const galleryPrev = document.getElementById('gallery-prev');\n const galleryNext = document.getElementById('gallery-next');\n\n const imgMain = document.getElementById('img-main');\n const imgLeft = document.getElementById('img-thumb-left');\n const imgRight = document.getElementById('img-thumb-right');\n\n function renderState() {\n mainContainer.style.opacity = '0';\n setTimeout(() => {\n const currentMainKey = layoutState[1];\n const leftKey = layoutState[0];\n const rightKey = layoutState[2];\n\n const data = contentMap[currentMainKey];\n const leftData = contentMap[leftKey];\n const rightData = contentMap[rightKey];\n\n mainTitle.textContent = data.title;\n mainSubTitles.innerHTML = data.subtitles;\n mainDesc.textContent = data.desc;\n\n if (imgMain) imgMain.src = data.img;\n if (imgLeft) imgLeft.src = leftData.img;\n if (imgRight) imgRight.src = rightData.img;\n\n leftThumb.setAttribute('data-title', layoutState[0]);\n rightThumb.setAttribute('data-title', layoutState[2]);\n\n mainContainer.style.opacity = '1';\n }, 250);\n }\n\n function shiftLeft() {\n currentIndex = currentIndex === 1 ? 3 : currentIndex - 1;\n galleryCounter.textContent = ` ${currentIndex} \/ 3`;\n const last = layoutState.pop();\n layoutState.unshift(last);\n renderState();\n }\n\n function shiftRight() {\n currentIndex = currentIndex === 3 ? 1 : currentIndex + 1;\n galleryCounter.textContent = ` ${currentIndex} \/ 3`;\n const first = layoutState.shift();\n layoutState.push(first);\n renderState();\n }\n\n leftThumb?.addEventListener('click', shiftLeft);\n galleryPrev?.addEventListener('click', shiftLeft);\n\n rightThumb?.addEventListener('click', shiftRight);\n galleryNext?.addEventListener('click', shiftRight);\n\n renderState();\n\n \/\/ ------------------------------------------\n \/\/ \u89c6\u9891\u64ad\u653e\u5f39\u7a97\u63a7\u5236\u903b\u8f91\n \/\/ ------------------------------------------\n const videoUrls = [\n \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video1.mp4\", \n \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video2.mp4\", \n \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video3.mp4\" \n ];\n\n const videoModal = document.getElementById('video-modal');\n const modalVideo = document.getElementById('modal-video');\n const modalClose = document.getElementById('modal-close');\n const videoLinks = document.querySelectorAll('.video-link');\n\n videoLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n e.preventDefault();\n const index = parseInt(link.getAttribute('data-index'), 10);\n const videoSrc = videoUrls[index];\n \n if (videoSrc && videoModal && modalVideo) {\n modalVideo.src = videoSrc;\n videoModal.classList.remove('opacity-0', 'pointer-events-none');\n modalVideo.play();\n }\n });\n });\n\n function closeVideoModal() {\n if (videoModal && modalVideo) {\n videoModal.classList.add('opacity-0', 'pointer-events-none');\n modalVideo.pause();\n modalVideo.src = \"\"; \n }\n }\n\n modalClose?.addEventListener('click', closeVideoModal);\n videoModal?.addEventListener('click', (e) => {\n if (e.target === videoModal) {\n closeVideoModal();\n }\n });\n\n \/\/ ------------------------------------------\n \/\/ \u6d77\u62a5\u5927\u56fe\u706f\u7bb1\u5f39\u7a97\u63a7\u5236\u903b\u8f91\n \/\/ ------------------------------------------\n const imageModal = document.getElementById('image-modal');\n const modalLightboxImg = document.getElementById('modal-lightbox-img');\n const imgModalClose = document.getElementById('img-modal-close');\n const posterTriggers = document.querySelectorAll('.poster-trigger');\n\n posterTriggers.forEach(trigger => {\n trigger.addEventListener('click', () => {\n const img = trigger.querySelector('img');\n if (img && imageModal && modalLightboxImg) {\n modalLightboxImg.src = img.src;\n imageModal.classList.remove('opacity-0', 'pointer-events-none');\n }\n });\n });\n\n function closeImageModal() {\n if (imageModal) {\n imageModal.classList.add('opacity-0', 'pointer-events-none');\n }\n }\n\n imgModalClose?.addEventListener('click', closeImageModal);\n imageModal?.addEventListener('click', (e) => {\n if (e.target === imageModal) {\n closeImageModal();\n }\n });\n });\n\n document.addEventListener('DOMContentLoaded', () => {\n const isAdmin = document.body.classList.contains('logged-in');\n if (!isAdmin) {\n document.querySelectorAll('[contenteditable=\"true\"]').forEach(el => {\n el.removeAttribute('contenteditable');\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Work – Archive Photo collection Portrait & Documentary Fleeting Realities Capturing the unfiltered pulse of life through the lens of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"JINLEI","author_link":"https:\/\/northbound-auto.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Work – Archive Photo collection Portrait & Documentary Fleeting Realities Capturing the unfiltered pulse of life through the lens of […]","_links":{"self":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":13,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":157,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/157"}],"wp:attachment":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":16,"date":"2026-05-22T07:13:07","date_gmt":"2026-05-22T07:13:07","guid":{"rendered":"https:\/\/northbound-auto.com\/?page_id=16"},"modified":"2026-05-31T11:56:29","modified_gmt":"2026-05-31T11:56:29","slug":"elementor-16","status":"publish","type":"page","link":"https:\/\/northbound-auto.com\/?page_id=16","title":{"rendered":"WORK"},"content":{"rendered":"\n\n\n\n \n \n Work – Archive<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\" rel=\"preconnect\"\/>\n <link crossorigin=\"\" href=\"https:\/\/fonts.gstatic.com\" rel=\"preconnect\"\/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap\" rel=\"stylesheet\"\/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\" rel=\"stylesheet\"\/>\n <script id=\"tailwind-config\">\n tailwind.config = {\n darkMode: \"class\",\n theme: {\n extend: {\n \"colors\": {\n \"outline\": \"#7e7576\", \"surface-tint\": \"#5e5e5e\", \"primary\": \"#000000\",\n \"on-secondary-fixed-variant\": \"#454747\", \"secondary\": \"#5d5f5f\",\n \"on-primary-fixed\": \"#1b1b1b\", \"tertiary\": \"#000000\", \"inverse-primary\": \"#c6c6c6\",\n \"primary-fixed\": \"#e2e2e2\", \"on-primary-fixed-variant\": \"#474747\",\n \"on-tertiary-container\": \"#848484\", \"on-background\": \"#1a1c1c\",\n \"secondary-fixed\": \"#e2e2e2\", \"on-tertiary\": \"#ffffff\", \"on-primary-container\": \"#848484\",\n \"primary-fixed-dim\": \"#c6c6c6\", \"surface-container-highest\": \"#e2e2e2\",\n \"on-surface-variant\": \"#4c4546\", \"tertiary-container\": \"#1b1c1c\",\n \"surface-variant\": \"#e2e2e2\", \"secondary-fixed-dim\": \"#c6c6c7\",\n \"on-secondary\": \"#ffffff\", \"error\": \"#ba1a1a\", \"on-secondary-fixed\": \"#1a1c1c\",\n \"surface-container\": \"#eeeeee\", \"surface\": \"#f9f9f9\", \"surface-container-high\": \"#e8e8e8\",\n \"surface-bright\": \"#f9f9f9\", \"on-error\": \"#ffffff\", \"on-tertiary-fixed\": \"#1b1c1c\",\n \"outline-variant\": \"#cfc4c5\", \"error-container\": \"#ffdad6\", \"on-primary\": \"#ffffff\",\n \"surface-container-lowest\": \"#ffffff\", \"surface-container-low\": \"#f3f3f3\",\n \"on-error-container\": \"#93000a\", \"tertiary-fixed\": \"#e3e2e2\", \"secondary-container\": \"#dfe0e0\",\n \"on-surface\": \"#1a1c1c\", \"inverse-surface\": \"#2f3131\", \"primary-container\": \"#1b1b1b\",\n \"tertiary-fixed-dim\": \"#c7c6c6\", \"background\": \"#f9f9f9\", \"on-secondary-container\": \"#616363\",\n \"inverse-on-surface\": \"#f1f1f1\", \"on-tertiary-fixed-variant\": \"#464747\", \"surface-dim\": \"#dadada\"\n },\n \"borderRadius\": { \"DEFAULT\": \"0.25rem\", \"lg\": \"0.5rem\", \"xl\": \"0.75rem\", \"full\": \"9999px\" },\n \"spacing\": { \"grid-margin\": \"64px\", \"element-gap\": \"48px\", \"max-width\": \"1440px\", \"grid-gutter\": \"24px\", \"section-gap\": \"160px\" },\n \"fontFamily\": {\n \"headline-lg-mobile\": [\"Hanken Grotesk\"], \"nav-link\": [\"Hanken Grotesk\"],\n \"body-md\": [\"Hanken Grotesk\"], \"display-lg\": [\"Hanken Grotesk\"],\n \"headline-md\": [\"Hanken Grotesk\"], \"headline-lg\": [\"Hanken Grotesk\"],\n \"label-caps\": [\"Hanken Grotesk\"], \"body-lg\": [\"Hanken Grotesk\"]\n },\n \"fontSize\": {\n \"headline-lg-mobile\": [\"32px\", {\"lineHeight\": \"40px\", \"fontWeight\": \"400\"}],\n \"nav-link\": [\"14px\", {\"lineHeight\": \"20px\", \"letterSpacing\": \"0.1em\", \"fontWeight\": \"500\"}],\n \"body-md\": [\"16px\", {\"lineHeight\": \"28px\", \"fontWeight\": \"400\"}],\n \"display-lg\": [\"72px\", {\"lineHeight\": \"80px\", \"letterSpacing\": \"-0.02em\", \"fontWeight\": \"400\"}],\n \"headline-md\": [\"32px\", {\"lineHeight\": \"40px\", \"fontWeight\": \"400\"}],\n \"headline-lg\": [\"48px\", {\"lineHeight\": \"56px\", \"fontWeight\": \"400\"}],\n \"label-caps\": [\"12px\", {\"lineHeight\": \"16px\", \"letterSpacing\": \"0.15em\", \"fontWeight\": \"600\"}],\n \"body-lg\": [\"18px\", {\"lineHeight\": \"32px\", \"fontWeight\": \"400\"}]\n }\n }\n }\n }\n <\/script>\n <style>\n html, body { overflow-y: auto !important; height: auto !important; min-height: 100%; }\n body { background-color: #f9f9f9; font-family: 'Hanken Grotesk', sans-serif; }\n .section-line { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }\n .section-line::before { content: ''; display: block; height: 2px; width: 100px; background-color: black; }\n \n \/* \u903c\u771f\u9ed1\u80f6\u5531\u7247\u5149\u6cfd\u6548\u679c *\/\n .video-disc { \n width: 180px; \n height: 180px; \n border-radius: 50%; \n position: relative; \n display: flex; \n justify-content: center; \n align-items: center; \n background: \n radial-gradient(circle, transparent 24%, #121212 25%, #050505 35%, #1c1c1c 45%, #0d0d0d 55%, #181818 65%, #050505 75%, #1a1a1a 85%, #000000 95%),\n conic-gradient(from 120deg at 50% 50%, rgba(255,255,255,0.06) 0deg, transparent 90deg, rgba(255,255,255,0.06) 180deg, transparent 270deg, rgba(255,255,255,0.06) 360deg);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 0 12px rgba(255,255,255,0.08);\n border: 4px solid #111;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n \n \/* Spindle spindle hole inside *\/\n .video-disc::after { \n content: ''; \n width: 20px; \n height: 20px; \n background-color: #f9f9f9; \n border-radius: 50%; \n position: absolute; \n z-index: 15; \n box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 0 0 2px #000;\n }\n\n \/* Center label graphic *\/\n .video-disc-label {\n position: absolute;\n width: 66px;\n height: 66px;\n border-radius: 50%;\n background: linear-gradient(135deg, #e2e2e2 0%, #c6c6c6 100%);\n border: 2px solid #111;\n z-index: 5;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: inset 0 0 5px rgba(0,0,0,0.2);\n overflow: hidden;\n }\n\n \/* \u5531\u7247\u81ea\u8f6c\u52a8\u753b *\/\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n .video-disc-spin {\n animation: spin 10s linear infinite;\n }\n\n \/* \u9f20\u6807\u60ac\u505c\u5531\u7247\u7565\u5fae\u653e\u5927\u5e76\u589e\u52a0\u9634\u5f71 *\/\n .video-link:hover .video-disc {\n transform: scale(1.08);\n box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);\n }\n\n \/* \u4ec5\u5728\u767b\u5f55\u7ba1\u7406\u5458\u72b6\u6001\u4e0b\u751f\u6548\u7684\u7f16\u8f91\u72b6\u6001\u63d0\u793a *\/\n body.logged-in [contenteditable=\"true\"] {\n outline: none;\n padding: 2px 4px;\n transition: all 0.2s ease;\n }\n body.logged-in [contenteditable=\"true\"]:hover {\n background-color: rgba(0, 0, 0, 0.03);\n border-radius: 2px;\n cursor: text;\n }\n body.logged-in [contenteditable=\"true\"]:focus {\n background-color: rgba(0, 0, 0, 0.05);\n box-shadow: 0 0 0 1px #000000;\n border-radius: 2px;\n }\n <\/style>\n<\/head>\n<body class=\"bg-background text-on-background font-body-md antialiased selection:bg-primary selection:text-on-primary\">\n\n <main class=\"max-w-max-width mx-auto px-grid-margin py-12 md:py-24 flex flex-col gap-16 md:gap-24\">\n \n <section>\n <div class=\"section-line\">\n <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase\">Photo collection<\/h2>\n <\/div>\n <div class=\"flex flex-col md:flex-row items-center justify-center gap-grid-gutter relative w-full h-auto min-h-[500px]\">\n \n <div class=\"w-full md:w-1\/4 h-auto self-start md:mt-20 relative bg-surface-container-highest p-4 hidden md:block cursor-pointer hover:opacity-90 transition-opacity\" id=\"photo-thumb-left\" data-title=\"Architectural & landscape\">\n <div class=\"w-full aspect-[3\/4] bg-surface-container flex items-center justify-center border border-outline-variant overflow-hidden\">\n <img decoding=\"async\" id=\"img-thumb-left\" class=\"w-full h-full object-cover\" src=\"\" alt=\"Thumbnail Left\">\n <\/div>\n <\/div>\n\n \n <div class=\"w-full md:w-2\/5 relative z-10 transition-opacity duration-500 opacity-100\" id=\"photo-main-container\">\n <div class=\"bg-surface-container-high p-8 flex flex-col gap-6 relative shadow-sm\">\n <div class=\"w-full aspect-square bg-surface-container overflow-hidden relative md:-left-12 md:-top-12 border border-outline-variant flex items-center justify-center\" id=\"main-img-box\">\n <img decoding=\"async\" id=\"img-main\" class=\"w-full h-full object-cover\" src=\"\" alt=\"Main View\">\n <\/div>\n <div class=\"text-right md:-mt-10 self-end w-full md:w-3\/4\">\n <h3 contenteditable=\"true\" class=\"font-headline-md text-headline-md text-primary mb-1 tracking-tight\" id=\"main-title\">Portrait & Documentary<\/h3>\n <p contenteditable=\"true\" class=\"text-body-md text-secondary mb-4 italic font-medium tracking-wide\" id=\"main-subtitles\">Fleeting Realities<\/p>\n <p contenteditable=\"true\" class=\"font-body-md text-body-md text-on-surface-variant text-sm text-right leading-relaxed mb-6\" id=\"main-desc\">Capturing the unfiltered pulse of life through the lens of time. An intimate documentation of cultural landscapes, candid human emotions, and the cinematic narratives hidden within the ordinary streets.<\/p>\n <a href=\"https:\/\/northbound-auto.com\/photo-album\/\" class=\"inline-block bg-primary text-white px-8 py-3 font-label-caps text-label-caps uppercase hover:bg-secondary transition-all duration-300 shadow-lg text-center\">SEE MORE<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full md:w-1\/4 h-auto self-end md:mb-20 relative bg-[#f1eed9] p-4 hidden md:block cursor-pointer hover:opacity-90 transition-opacity\" id=\"photo-thumb-right\" data-title=\"Still life photography\">\n <div class=\"w-full aspect-square bg-surface-container flex items-center justify-center border border-outline-variant overflow-hidden\">\n <img decoding=\"async\" id=\"img-thumb-right\" class=\"w-full h-full object-cover\" src=\"\" alt=\"Thumbnail Right\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"w-full flex mt-12 justify-center items-center gap-4\">\n <button class=\"font-headline-md text-headline-md text-secondary hover:text-primary transition-colors cursor-pointer\" id=\"gallery-prev\"><<\/button>\n <p contenteditable=\"true\" class=\"font-label-caps text-secondary tracking-widest text-headline-md\" id=\"gallery-counter\"> 2 \/ 3<\/p>\n <button class=\"font-headline-md text-headline-md text-secondary hover:text-primary transition-colors cursor-pointer\" id=\"gallery-next\">><\/button>\n <\/div>\n <\/section>\n\n \n <section>\n <div class=\"section-line\">\n <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase\">Poster Making<\/h2>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-element-gap items-start\">\n \n \n <div class=\"flex flex-col items-center text-center w-full\">\n <div class=\"w-full max-w-[320px] mx-auto aspect-[3\/4] cursor-pointer overflow-hidden group poster-trigger flex items-center justify-center\" title=\"Click to view the original image.\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/poster1.png\" class=\"max-w-full max-h-full object-contain transition-transform duration-300 group-hover:scale-[1.02]\" alt=\"Psychology Infographic\" title=\"WORK\">\n <\/div>\n <h3 contenteditable=\"true\" class=\"font-headline-md text-base md:text-lg text-primary mt-6 tracking-wide font-medium\">\u300aPsychology Infographic\u300b<\/h3>\n <div class=\"w-12 h-[1.5px] bg-outline my-3 mx-auto\"><\/div>\n <p contenteditable=\"true\" class=\"font-body-md text-secondary text-sm leading-relaxed max-w-[320px] mx-auto px-4\">An infographic about how emotions affect work and study, combining relevant literature and data research.<\/p>\n <\/div>\n\n \n <div class=\"flex flex-col items-center text-center w-full\">\n <div class=\"w-full max-w-[320px] mx-auto aspect-[3\/4] cursor-pointer overflow-hidden group poster-trigger relative flex items-center justify-center\" title=\"Click to view the original image.\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/poster2.png\" class=\"max-w-full max-h-full object-contain transition-transform duration-300 group-hover:scale-[1.02]\" alt=\"Penang Infographic\" title=\"WORK\">\n <\/div>\n <h3 contenteditable=\"true\" class=\"font-headline-md text-base md:text-lg text-primary mt-6 tracking-wide font-medium\">\u300aPenang Infographic\u300b<\/h3>\n <div class=\"w-12 h-[1.5px] bg-outline my-3 mx-auto\"><\/div>\n <p contenteditable=\"true\" class=\"font-body-md text-secondary text-sm leading-relaxed max-w-[320px] mx-auto px-4\">An infographic clearly and concisely introduces the development of Penang’s historical buildings and culture.<\/p>\n <\/div>\n\n <\/div>\n <\/section>\n <section>\n <div class=\"section-line\">\n <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase\">Video disc<\/h2>\n <\/div>\n <div class=\"flex flex-wrap justify-center gap-12 md:gap-24 mt-12\">\n <div class=\"flex flex-col items-center gap-6\">\n <a href=\"#\" class=\"video-link block\" title=\"Click to play video\" data-index=\"0\">\n <div class=\"video-disc video-disc-spin\">\n <div class=\"video-disc-label relative\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video-\u5c01\u97621.jpg\" class=\"absolute inset-0 w-full h-full object-cover brightness-75\" alt=\"Video Cover 1\" title=\"WORK\">\n <span class=\"material-symbols-outlined text-white text-2xl relative z-10 drop-shadow-md\">play_arrow<\/span>\n <\/div>\n <\/div>\n <\/a>\n <span contenteditable=\"true\" class=\"border border-outline px-4 py-1 font-label-caps text-label-caps tracking-widest text-secondary text-[10px]\">Filipe Pinhas<\/span>\n <\/div>\n <div class=\"flex flex-col items-center gap-6\">\n <a href=\"#\" class=\"video-link block\" title=\"Click to play video\" data-index=\"1\">\n <div class=\"video-disc video-disc-spin\">\n <div class=\"video-disc-label relative\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video%E4%B8%B0%E9%9D%A22.jpeg\" class=\"absolute inset-0 w-full h-full object-cover brightness-75\" alt=\"Video Cover 2\" title=\"WORK\">\n <span class=\"material-symbols-outlined text-white text-2xl relative z-10 drop-shadow-md\">play_arrow<\/span>\n <\/div>\n <\/div>\n <\/a>\n <span contenteditable=\"true\" class=\"border border-outline px-4 py-1 font-label-caps text-label-caps tracking-widest text-secondary text-[10px]\">Roman Fox<\/span>\n <\/div>\n <div class=\"flex flex-col items-center gap-6\">\n <a href=\"#\" class=\"video-link block\" title=\"Click to play video\" data-index=\"2\">\n <div class=\"video-disc video-disc-spin\">\n <div class=\"video-disc-label relative\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video-\u5c01\u97623.jpeg\" class=\"absolute inset-0 w-full h-full object-cover brightness-75\" alt=\"Video Cover 3\" title=\"WORK\">\n <span class=\"material-symbols-outlined text-white text-2xl relative z-10 drop-shadow-md\">play_arrow<\/span>\n <\/div>\n <\/div>\n <\/a>\n <span contenteditable=\"true\" class=\"border border-outline px-4 py-1 font-label-caps text-label-caps tracking-widest text-secondary text-[10px]\">Drama and Stage<\/span>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <section>\n <div class=\"section-line\">\n <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase\">Professional Equipment<\/h2>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 items-center h-auto min-h-[400px]\">\n \n <div class=\"bg-surface-container w-full aspect-square border border-outline-variant\/30 self-end md:transform md:-translate-y-8 overflow-hidden shadow-sm\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/e1.jpeg\" class=\"w-full h-full object-cover\" alt=\"Equipment 1\" title=\"WORK\">\n <\/div>\n \n <div class=\"bg-surface-container w-full aspect-[4\/3] border border-outline-variant\/30 relative z-10 md:transform md:scale-110 shadow-sm overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/e3.jpeg\" class=\"w-full h-full object-cover\" alt=\"Equipment 2\" title=\"WORK\">\n <\/div>\n \n <div class=\"bg-surface-container w-full aspect-[3\/4] border border-outline-variant\/30 self-start md:transform md:translate-y-8 overflow-hidden shadow-sm\">\n <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/e2.jpeg\" class=\"w-full h-full object-cover\" alt=\"Equipment 3\" title=\"WORK\">\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <div id=\"video-modal\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-black\/80 opacity-0 pointer-events-none transition-opacity duration-300\">\n <div class=\"relative w-full max-w-4xl px-4 md:px-0\">\n <button id=\"modal-close\" class=\"absolute -top-12 right-4 md:right-0 text-white hover:text-gray-300 transition-colors flex items-center\">\n <span class=\"material-symbols-outlined text-3xl\">close<\/span>\n <\/button>\n <div class=\"bg-black aspect-video w-full rounded-lg overflow-hidden shadow-2xl border border-white\/10\">\n <video id=\"modal-video\" class=\"w-full h-full\" controls src=\"\">\n \u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 HTML5 \u89c6\u9891\u64ad\u653e\u3002\n <\/video>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"image-modal\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-black\/90 opacity-0 pointer-events-none transition-opacity duration-300\">\n <div class=\"relative max-w-5xl max-h-[90vh] px-4 flex flex-col items-center justify-center\">\n <button id=\"img-modal-close\" class=\"absolute -top-12 right-4 text-white hover:text-gray-300 transition-colors flex items-center\">\n <span class=\"material-symbols-outlined text-3xl\">close<\/span>\n <\/button>\n <img decoding=\"async\" id=\"modal-lightbox-img\" class=\"max-w-full max-h-[80vh] object-contain rounded shadow-2xl border border-white\/10\" src=\"\" alt=\"Full View\">\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ \u914d\u7f6e\u56fe\u7247\u4e0e\u63cf\u8ff0\u5185\u5bb9\n const contentMap = {\n 'Architectural & landscape': {\n title: 'Architectural & landscape',\n subtitles: 'Built vs. Born',\n desc: 'Stripping away the ephemeral to reveal the permanent. This collection examines the dramatic tension between man-made structural precision and the organic, sweeping geometry of the natural world.',\n img: 'https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/3.png'\n },\n 'Portrait & Documentary': {\n title: 'Portrait & Documentary',\n subtitles: 'Fleeting Realities',\n desc: 'Capturing the unfiltered pulse of life through the lens of time. An intimate documentation of cultural landscapes, candid human emotions, and the cinematic narratives hidden within the ordinary streets.',\n img: 'https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/f.png'\n },\n 'Still life photography': {\n title: 'Still life photography',\n subtitles: 'Forms of Solitude',\n desc: 'A visual exploration of inanimate presence, focusing on the subtle interplay of soft light, profound shadows, and deliberate compositions that elevate everyday objects into timeless monuments of silence.',\n img: 'https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/six.jpeg'\n }\n };\n\n let layoutState = ['Architectural & landscape', 'Portrait & Documentary', 'Still life photography'];\n let currentIndex = 2;\n\n const leftThumb = document.getElementById('photo-thumb-left');\n const rightThumb = document.getElementById('photo-thumb-right');\n const mainContainer = document.getElementById('photo-main-container');\n \n const mainTitle = document.getElementById('main-title');\n const mainSubTitles = document.getElementById('main-subtitles');\n const mainDesc = document.getElementById('main-desc');\n const galleryCounter = document.getElementById('gallery-counter');\n const galleryPrev = document.getElementById('gallery-prev');\n const galleryNext = document.getElementById('gallery-next');\n\n const imgMain = document.getElementById('img-main');\n const imgLeft = document.getElementById('img-thumb-left');\n const imgRight = document.getElementById('img-thumb-right');\n\n function renderState() {\n mainContainer.style.opacity = '0';\n setTimeout(() => {\n const currentMainKey = layoutState[1];\n const leftKey = layoutState[0];\n const rightKey = layoutState[2];\n\n const data = contentMap[currentMainKey];\n const leftData = contentMap[leftKey];\n const rightData = contentMap[rightKey];\n\n mainTitle.textContent = data.title;\n mainSubTitles.innerHTML = data.subtitles;\n mainDesc.textContent = data.desc;\n\n if (imgMain) imgMain.src = data.img;\n if (imgLeft) imgLeft.src = leftData.img;\n if (imgRight) imgRight.src = rightData.img;\n\n leftThumb.setAttribute('data-title', layoutState[0]);\n rightThumb.setAttribute('data-title', layoutState[2]);\n\n mainContainer.style.opacity = '1';\n }, 250);\n }\n\n function shiftLeft() {\n currentIndex = currentIndex === 1 ? 3 : currentIndex - 1;\n galleryCounter.textContent = ` ${currentIndex} \/ 3`;\n const last = layoutState.pop();\n layoutState.unshift(last);\n renderState();\n }\n\n function shiftRight() {\n currentIndex = currentIndex === 3 ? 1 : currentIndex + 1;\n galleryCounter.textContent = ` ${currentIndex} \/ 3`;\n const first = layoutState.shift();\n layoutState.push(first);\n renderState();\n }\n\n leftThumb?.addEventListener('click', shiftLeft);\n galleryPrev?.addEventListener('click', shiftLeft);\n\n rightThumb?.addEventListener('click', shiftRight);\n galleryNext?.addEventListener('click', shiftRight);\n\n renderState();\n\n \/\/ ------------------------------------------\n \/\/ \u89c6\u9891\u64ad\u653e\u5f39\u7a97\u63a7\u5236\u903b\u8f91\n \/\/ ------------------------------------------\n const videoUrls = [\n \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video1.mp4\", \n \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video2.mp4\", \n \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/video3.mp4\" \n ];\n\n const videoModal = document.getElementById('video-modal');\n const modalVideo = document.getElementById('modal-video');\n const modalClose = document.getElementById('modal-close');\n const videoLinks = document.querySelectorAll('.video-link');\n\n videoLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n e.preventDefault();\n const index = parseInt(link.getAttribute('data-index'), 10);\n const videoSrc = videoUrls[index];\n \n if (videoSrc && videoModal && modalVideo) {\n modalVideo.src = videoSrc;\n videoModal.classList.remove('opacity-0', 'pointer-events-none');\n modalVideo.play();\n }\n });\n });\n\n function closeVideoModal() {\n if (videoModal && modalVideo) {\n videoModal.classList.add('opacity-0', 'pointer-events-none');\n modalVideo.pause();\n modalVideo.src = \"\"; \n }\n }\n\n modalClose?.addEventListener('click', closeVideoModal);\n videoModal?.addEventListener('click', (e) => {\n if (e.target === videoModal) {\n closeVideoModal();\n }\n });\n\n \/\/ ------------------------------------------\n \/\/ \u6d77\u62a5\u5927\u56fe\u706f\u7bb1\u5f39\u7a97\u63a7\u5236\u903b\u8f91\n \/\/ ------------------------------------------\n const imageModal = document.getElementById('image-modal');\n const modalLightboxImg = document.getElementById('modal-lightbox-img');\n const imgModalClose = document.getElementById('img-modal-close');\n const posterTriggers = document.querySelectorAll('.poster-trigger');\n\n posterTriggers.forEach(trigger => {\n trigger.addEventListener('click', () => {\n const img = trigger.querySelector('img');\n if (img && imageModal && modalLightboxImg) {\n modalLightboxImg.src = img.src;\n imageModal.classList.remove('opacity-0', 'pointer-events-none');\n }\n });\n });\n\n function closeImageModal() {\n if (imageModal) {\n imageModal.classList.add('opacity-0', 'pointer-events-none');\n }\n }\n\n imgModalClose?.addEventListener('click', closeImageModal);\n imageModal?.addEventListener('click', (e) => {\n if (e.target === imageModal) {\n closeImageModal();\n }\n });\n });\n\n document.addEventListener('DOMContentLoaded', () => {\n const isAdmin = document.body.classList.contains('logged-in');\n if (!isAdmin) {\n document.querySelectorAll('[contenteditable=\"true\"]').forEach(el => {\n el.removeAttribute('contenteditable');\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Work – Archive Photo collection Portrait & Documentary Fleeting Realities Capturing the unfiltered pulse of life through the lens of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"JINLEI","author_link":"https:\/\/northbound-auto.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Work – Archive Photo collection Portrait & Documentary Fleeting Realities Capturing the unfiltered pulse of life through the lens of […]","_links":{"self":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":13,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":157,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/157"}],"wp:attachment":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}