{"id":518,"date":"2026-08-28T03:48:38","date_gmt":"2026-08-28T03:48:38","guid":{"rendered":"https:\/\/twame.vn\/?page_id=518"},"modified":"2026-08-28T03:58:29","modified_gmt":"2026-08-28T03:58:29","slug":"518-2","status":"publish","type":"page","link":"https:\/\/twame.vn\/?page_id=518","title":{"rendered":"DeSignEr Profile"},"content":{"rendered":"\n<!-- =========================================================\n     BUTA \u2014 3D VISUAL DESIGNER PORTFOLIO\n     PREMIUM ANIMATION VERSION\n     NO HEADER \/ NO MENU \/ NO FOOTER\n========================================================= -->\n\n<section class=\"buta-portfolio\">\n\n  <!-- =====================================================\n       CUSTOM CURSOR\n  ====================================================== -->\n\n  <div class=\"buta-cursor\"><\/div>\n  <div class=\"buta-cursor-dot\"><\/div>\n\n\n  <!-- =====================================================\n       FLOATING SLIME\n  ====================================================== -->\n\n  <div class=\"slime-character\" aria-hidden=\"true\">\n\n    <div class=\"slime-shadow\"><\/div>\n\n    <div class=\"slime-body\">\n\n      <div class=\"slime-face\">\n\n        <span class=\"slime-eye left\"><\/span>\n        <span class=\"slime-eye right\"><\/span>\n\n        <span class=\"slime-mouth\"><\/span>\n\n      <\/div>\n\n      <div class=\"slime-highlight\"><\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       HERO\n  ====================================================== -->\n\n  <section class=\"buta-hero\">\n\n    <div class=\"hero-left reveal\">\n\n      <div class=\"hero-photo\">\n\n        <img decoding=\"async\"\n          src=\"profile.jpg\"\n          alt=\"Buta \u2014 3D Visual Designer\"\n        >\n\n        <div class=\"photo-label\">\n\n          <span>PORTRAIT \/ 01<\/span>\n\n          <span>2026<\/span>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <div class=\"hero-right\">\n\n      <div class=\"hero-topline reveal\">\n\n        <span>PORTFOLIO \/ 2026<\/span>\n\n        <span>3D VISUAL DESIGNER<\/span>\n\n      <\/div>\n\n\n\n      <div class=\"hero-main\">\n\n        <div class=\"hero-name reveal\">\n\n          <span>HELLO, I&#8217;M<\/span>\n\n          <h1>\n            BUTA<span>.<\/span>\n          <\/h1>\n\n        <\/div>\n\n\n\n        <div class=\"hero-title reveal\">\n\n          <h2>\n            3D VISUAL<br>\n            <i>DESIGNER<\/i>\n          <\/h2>\n\n          <p>\n            POSM \u00b7 RETAIL DISPLAY \u00b7 EVENT<br>\n            EXHIBITION \u00b7 PRODUCT VISUALIZATION\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n\n      <div class=\"hero-bottom reveal\">\n\n        <div class=\"experience\">\n\n          <strong>\n            07<span>+<\/span>\n          <\/strong>\n\n          <div>\n\n            <b>YEARS<\/b>\n\n            <small>\n              EXPERIENCE\n            <\/small>\n\n          <\/div>\n\n        <\/div>\n\n\n\n        <div class=\"hero-contact\">\n\n          <a href=\"tel:0389294638\">\n\n            <span>PHONE<\/span>\n\n            0389 294 638\n\n          <\/a>\n\n          <a href=\"mailto:yourmail@gmail.com\">\n\n            <span>EMAIL<\/span>\n\n            yourmail@gmail.com\n\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       ABOUT\n  ====================================================== -->\n\n  <section class=\"buta-intro\">\n\n    <div class=\"section-number reveal\">\n\n      01 \/ ABOUT\n\n    <\/div>\n\n\n\n    <div class=\"intro-content\">\n\n      <h2 class=\"reveal\">\n\n        I turn ideas into\n        <em>visual experiences.<\/em>\n\n      <\/h2>\n\n\n\n      <div class=\"intro-text reveal\">\n\n        <p>\n          3D Visual Designer with 7+ years of experience\n          in 3D modeling, visualization and commercial design.\n        <\/p>\n\n        <p>\n          Specialized in POSM, retail display, event,\n          exhibition and product visualization \u2014 from\n          initial concept to production-ready design.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       EXPERTISE\n  ====================================================== -->\n\n  <section class=\"buta-section\">\n\n    <div class=\"section-head reveal\">\n\n      <span>02 \/ EXPERTISE<\/span>\n\n      <span>WHAT I DO<\/span>\n\n    <\/div>\n\n\n\n    <div class=\"expertise-grid\">\n\n      <div class=\"expertise-card reveal\">\n\n        <div class=\"card-number\">01<\/div>\n\n        <h3>\n          POSM<br>\n          DESIGN\n        <\/h3>\n\n        <p>\n          Display Stand<br>\n          Counter Display<br>\n          Shelf Display<br>\n          Wobbler<br>\n          Product Stand\n        <\/p>\n\n      <\/div>\n\n\n\n      <div class=\"expertise-card reveal\">\n\n        <div class=\"card-number\">02<\/div>\n\n        <h3>\n          RETAIL<br>\n          DISPLAY\n        <\/h3>\n\n        <p>\n          Retail Fixtures<br>\n          Gondola Display<br>\n          Brand Corner<br>\n          Product Showcase\n        <\/p>\n\n      <\/div>\n\n\n\n      <div class=\"expertise-card reveal\">\n\n        <div class=\"card-number\">03<\/div>\n\n        <h3>\n          EVENT &#038;<br>\n          EXHIBITION\n        <\/h3>\n\n        <p>\n          Booth Design<br>\n          Stage<br>\n          Activation<br>\n          Backdrop<br>\n          Exhibition\n        <\/p>\n\n      <\/div>\n\n\n\n      <div class=\"expertise-card reveal\">\n\n        <div class=\"card-number\">04<\/div>\n\n        <h3>\n          PRODUCT<br>\n          VISUALIZATION\n        <\/h3>\n\n        <p>\n          3D Modeling<br>\n          Materials<br>\n          Lighting<br>\n          V-Ray Rendering\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       SELECTED WORKS\n  ====================================================== -->\n\n  <section class=\"buta-section works\">\n\n    <div class=\"section-head reveal\">\n\n      <span>03 \/ SELECTED WORKS<\/span>\n\n      <span>2020 \u2014 2026<\/span>\n\n    <\/div>\n\n\n\n    <!-- FILTER -->\n\n    <div class=\"portfolio-filter reveal\">\n\n      <button\n        class=\"filter active\"\n        data-filter=\"all\"\n      >\n        ALL\n      <\/button>\n\n      <button\n        class=\"filter\"\n        data-filter=\"posm\"\n      >\n        POSM\n      <\/button>\n\n      <button\n        class=\"filter\"\n        data-filter=\"display\"\n      >\n        DISPLAY\n      <\/button>\n\n      <button\n        class=\"filter\"\n        data-filter=\"event\"\n      >\n        EVENT\n      <\/button>\n\n      <button\n        class=\"filter\"\n        data-filter=\"product\"\n      >\n        PRODUCT\n      <\/button>\n\n    <\/div>\n\n\n\n    <!-- PROJECT GRID -->\n\n    <div class=\"project-grid\">\n\n\n      <!-- PROJECT 01 -->\n\n      <article\n        class=\"project reveal\"\n        data-category=\"posm\"\n        data-title=\"COSMETIC DISPLAY\"\n        data-info=\"POSM \/ 3D MODELING \/ V-RAY\"\n        data-image=\"project-01.jpg\"\n      >\n\n        <div class=\"project-image\">\n\n          <img decoding=\"async\"\n            src=\"project-01.jpg\"\n            alt=\"Cosmetic Display\"\n          >\n\n          <div class=\"project-overlay\">\n\n            <span>VIEW PROJECT<\/span>\n\n            <strong>\u2197<\/strong>\n\n          <\/div>\n\n        <\/div>\n\n\n\n        <div class=\"project-info\">\n\n          <div>\n\n            <small>01<\/small>\n\n            <h3>\n              Cosmetic Display\n            <\/h3>\n\n          <\/div>\n\n          <span>POSM<\/span>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- PROJECT 02 -->\n\n      <article\n        class=\"project reveal\"\n        data-category=\"display\"\n        data-title=\"RETAIL DISPLAY\"\n        data-info=\"RETAIL \/ 3D DESIGN \/ VISUALIZATION\"\n        data-image=\"project-02.jpg\"\n      >\n\n        <div class=\"project-image\">\n\n          <img decoding=\"async\"\n            src=\"project-02.jpg\"\n            alt=\"Retail Display\"\n          >\n\n          <div class=\"project-overlay\">\n\n            <span>VIEW PROJECT<\/span>\n\n            <strong>\u2197<\/strong>\n\n          <\/div>\n\n        <\/div>\n\n\n\n        <div class=\"project-info\">\n\n          <div>\n\n            <small>02<\/small>\n\n            <h3>\n              Retail Display\n            <\/h3>\n\n          <\/div>\n\n          <span>DISPLAY<\/span>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- PROJECT 03 -->\n\n      <article\n        class=\"project project-wide reveal\"\n        data-category=\"event\"\n        data-title=\"EVENT EXHIBITION BOOTH\"\n        data-info=\"EVENT \/ EXHIBITION \/ 3D VISUALIZATION\"\n        data-image=\"project-03.jpg\"\n      >\n\n        <div class=\"project-image\">\n\n          <img decoding=\"async\"\n            src=\"project-03.jpg\"\n            alt=\"Event Exhibition Booth\"\n          >\n\n          <div class=\"project-overlay\">\n\n            <span>VIEW PROJECT<\/span>\n\n            <strong>\u2197<\/strong>\n\n          <\/div>\n\n        <\/div>\n\n\n\n        <div class=\"project-info\">\n\n          <div>\n\n            <small>03<\/small>\n\n            <h3>\n              Event Exhibition Booth\n            <\/h3>\n\n          <\/div>\n\n          <span>EVENT<\/span>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- PROJECT 04 -->\n\n      <article\n        class=\"project reveal\"\n        data-category=\"product\"\n        data-title=\"PRODUCT VISUALIZATION\"\n        data-info=\"PRODUCT \/ MODELING \/ V-RAY\"\n        data-image=\"project-04.jpg\"\n      >\n\n        <div class=\"project-image\">\n\n          <img decoding=\"async\"\n            src=\"project-04.jpg\"\n            alt=\"Product Visualization\"\n          >\n\n          <div class=\"project-overlay\">\n\n            <span>VIEW PROJECT<\/span>\n\n            <strong>\u2197<\/strong>\n\n          <\/div>\n\n        <\/div>\n\n\n\n        <div class=\"project-info\">\n\n          <div>\n\n            <small>04<\/small>\n\n            <h3>\n              Product Visualization\n            <\/h3>\n\n          <\/div>\n\n          <span>PRODUCT<\/span>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- PROJECT 05 -->\n\n      <article\n        class=\"project reveal\"\n        data-category=\"posm\"\n        data-title=\"BRAND DISPLAY\"\n        data-info=\"POSM \/ BRANDING \/ 3D\"\n        data-image=\"project-05.jpg\"\n      >\n\n        <div class=\"project-image\">\n\n          <img decoding=\"async\"\n            src=\"project-05.jpg\"\n            alt=\"Brand Display\"\n          >\n\n          <div class=\"project-overlay\">\n\n            <span>VIEW PROJECT<\/span>\n\n            <strong>\u2197<\/strong>\n\n          <\/div>\n\n        <\/div>\n\n\n\n        <div class=\"project-info\">\n\n          <div>\n\n            <small>05<\/small>\n\n            <h3>\n              Brand Display\n            <\/h3>\n\n          <\/div>\n\n          <span>POSM<\/span>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- PROJECT 06 -->\n\n      <article\n        class=\"project project-wide reveal\"\n        data-category=\"event\"\n        data-title=\"BRAND ACTIVATION\"\n        data-info=\"EVENT \/ ACTIVATION \/ 3D\"\n        data-image=\"project-06.jpg\"\n      >\n\n        <div class=\"project-image\">\n\n          <img decoding=\"async\"\n            src=\"project-06.jpg\"\n            alt=\"Brand Activation\"\n          >\n\n          <div class=\"project-overlay\">\n\n            <span>VIEW PROJECT<\/span>\n\n            <strong>\u2197<\/strong>\n\n          <\/div>\n\n        <\/div>\n\n\n\n        <div class=\"project-info\">\n\n          <div>\n\n            <small>06<\/small>\n\n            <h3>\n              Brand Activation\n            <\/h3>\n\n          <\/div>\n\n          <span>EVENT<\/span>\n\n        <\/div>\n\n      <\/article>\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       PROCESS\n  ====================================================== -->\n\n  <section class=\"buta-section\">\n\n    <div class=\"section-head reveal\">\n\n      <span>04 \/ PROCESS<\/span>\n\n      <span>FROM IDEA TO REALITY<\/span>\n\n    <\/div>\n\n\n\n    <div class=\"process\">\n\n      <div class=\"reveal\">\n\n        <span>01<\/span>\n\n        <h3>BRIEF<\/h3>\n\n        <p>\n          Understand objectives,\n          brand and requirements.\n        <\/p>\n\n      <\/div>\n\n\n\n      <div class=\"reveal\">\n\n        <span>02<\/span>\n\n        <h3>CONCEPT<\/h3>\n\n        <p>\n          Develop creative direction\n          and visual language.\n        <\/p>\n\n      <\/div>\n\n\n\n      <div class=\"reveal\">\n\n        <span>03<\/span>\n\n        <h3>3D MODELING<\/h3>\n\n        <p>\n          Build accurate 3D models\n          and structure.\n        <\/p>\n\n      <\/div>\n\n\n\n      <div class=\"reveal\">\n\n        <span>04<\/span>\n\n        <h3>VISUALIZATION<\/h3>\n\n        <p>\n          Materials, lighting\n          and V-Ray rendering.\n        <\/p>\n\n      <\/div>\n\n\n\n      <div class=\"reveal\">\n\n        <span>05<\/span>\n\n        <h3>PRODUCTION<\/h3>\n\n        <p>\n          Prepare practical design\n          for fabrication.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       SOFTWARE\n  ====================================================== -->\n\n  <section class=\"buta-section\">\n\n    <div class=\"section-head reveal\">\n\n      <span>05 \/ TOOLS<\/span>\n\n      <span>SOFTWARE<\/span>\n\n    <\/div>\n\n\n\n    <div class=\"software\">\n\n      <div class=\"reveal\">\n\n        <strong>RHINO 3D<\/strong>\n\n        <span>\u2605\u2605\u2605\u2605\u2605<\/span>\n\n      <\/div>\n\n\n\n      <div class=\"reveal\">\n\n        <strong>V-RAY<\/strong>\n\n        <span>\u2605\u2605\u2605\u2605\u2605<\/span>\n\n      <\/div>\n\n\n\n      <div class=\"reveal\">\n\n        <strong>PHOTOSHOP<\/strong>\n\n        <span>\u2605\u2605\u2605\u2605\u2605<\/span>\n\n      <\/div>\n\n\n\n      <div class=\"reveal\">\n\n        <strong>ILLUSTRATOR<\/strong>\n\n        <span>\u2605\u2605\u2605\u2605\u2606<\/span>\n\n      <\/div>\n\n\n\n      <div class=\"reveal\">\n\n        <strong>AI TOOLS<\/strong>\n\n        <span>\u2605\u2605\u2605\u2605\u2606<\/span>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       FINAL CTA\n  ====================================================== -->\n\n  <section class=\"buta-final-cta\">\n\n    <div class=\"cta-eyebrow reveal\">\n\n      06 \/ AVAILABLE FOR NEW OPPORTUNITIES\n\n    <\/div>\n\n\n\n    <div class=\"cta-main\">\n\n      <h2 class=\"reveal\">\n\n        LOOKING FOR<br>\n\n        <span>YOUR NEXT<\/span><br>\n\n        <em>3D DESIGNER?<\/em>\n\n      <\/h2>\n\n\n\n      <div class=\"cta-copy reveal\">\n\n        <p>\n\n          If you&#8217;re looking for someone who can turn\n          ideas into compelling 3D visuals \u2014 from\n          concept and modeling to final visualization\n          and production \u2014 let&#8217;s talk.\n\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <!-- PHONE -->\n\n    <a\n      class=\"cta-phone magnetic reveal\"\n      href=\"tel:0389294638\"\n    >\n\n      <span class=\"phone-label\">\n        CALL ME\n      <\/span>\n\n      <strong>\n        0389 294 638\n      <\/strong>\n\n      <span class=\"phone-arrow\">\n        \u2197\n      <\/span>\n\n    <\/a>\n\n\n\n    <!-- THANK YOU -->\n\n    <div class=\"thank-you reveal\">\n\n      <div class=\"thank-line\"><\/div>\n\n      <h3>\n        THANK YOU\n      <\/h3>\n\n      <p>\n        Thank you for taking the time to view my portfolio.\n        I truly appreciate your consideration and hope\n        we have an opportunity to create something\n        great together.\n      <\/p>\n\n      <span>\n        \u2014 BUTA\n      <\/span>\n\n    <\/div>\n\n\n\n    <div class=\"final-meta\">\n\n      <span>\n        3D VISUAL DESIGNER\n      <\/span>\n\n      <span>\n        POSM \u00b7 EVENT \u00b7 EXHIBITION \u00b7 PRODUCT\n      <\/span>\n\n      <span>\n        \u00a9 2026 BUTA\n      <\/span>\n\n    <\/div>\n\n  <\/section>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     LIGHTBOX\n========================================================= -->\n\n<div class=\"buta-lightbox\">\n\n  <button class=\"lightbox-close\">\n    \u00d7\n  <\/button>\n\n  <div class=\"lightbox-inner\">\n\n    <img decoding=\"async\" src=\"\" alt=\"\">\n\n    <div>\n\n      <span class=\"lightbox-number\"><\/span>\n\n      <h2><\/h2>\n\n      <p><\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   ROOT\n========================================================= *\/\n\n.buta-portfolio {\n\n  --bg: #080808;\n  --white: #f4f4f0;\n  --muted: #858581;\n  --line: rgba(255,255,255,.13);\n\n  position: relative;\n\n  background: var(--bg);\n\n  color: var(--white);\n\n  font-family:\n    Inter,\n    Helvetica,\n    Arial,\n    sans-serif;\n\n  width: 100%;\n\n  overflow: hidden;\n\n  cursor: default;\n\n}\n\n.buta-portfolio *,\n.buta-portfolio *::before,\n.buta-portfolio *::after {\n\n  box-sizing: border-box;\n\n}\n\n.buta-portfolio img {\n\n  max-width: 100%;\n\n}\n\n.buta-portfolio a {\n\n  color: inherit;\n\n  text-decoration: none;\n\n}\n\n\n\n\/* =========================================================\n   CURSOR\n========================================================= *\/\n\n.buta-cursor {\n\n  position: fixed;\n\n  width: 42px;\n\n  height: 42px;\n\n  border: 1px solid rgba(255,255,255,.7);\n\n  border-radius: 50%;\n\n  pointer-events: none;\n\n  z-index: 999999;\n\n  transform:\n    translate(-50%,-50%);\n\n  transition:\n    width .3s ease,\n    height .3s ease,\n    background .3s ease;\n\n  mix-blend-mode: difference;\n\n}\n\n.buta-cursor-dot {\n\n  position: fixed;\n\n  width: 5px;\n\n  height: 5px;\n\n  background: white;\n\n  border-radius: 50%;\n\n  pointer-events: none;\n\n  z-index: 1000000;\n\n  transform:\n    translate(-50%,-50%);\n\n}\n\n.cursor-active .buta-cursor {\n\n  width: 70px;\n\n  height: 70px;\n\n  background: white;\n\n}\n\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n.buta-hero {\n\n  min-height: 100vh;\n\n  display: grid;\n\n  grid-template-columns:\n    38% 62%;\n\n  border-bottom:\n    1px solid var(--line);\n\n}\n\n.hero-left {\n\n  padding:\n    6vw;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  border-right:\n    1px solid var(--line);\n\n}\n\n.hero-photo {\n\n  width: 100%;\n\n  max-width: 460px;\n\n  position: relative;\n\n}\n\n.hero-photo::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: -12px;\n\n  border:\n    1px solid var(--line);\n\n  z-index: 0;\n\n  transition:\n    transform .7s cubic-bezier(.2,.7,.2,1);\n\n}\n\n.hero-photo:hover::before {\n\n  transform:\n    translate(8px,8px);\n\n}\n\n.hero-photo img {\n\n  width: 100%;\n\n  aspect-ratio:\n    4 \/ 5;\n\n  object-fit: cover;\n\n  display: block;\n\n  position: relative;\n\n  z-index: 1;\n\n  filter:\n    grayscale(100%);\n\n  transition:\n    filter .7s ease,\n    transform .7s ease;\n\n}\n\n.hero-photo:hover img {\n\n  filter:\n    grayscale(0);\n\n  transform:\n    scale(1.02);\n\n}\n\n.photo-label {\n\n  position: absolute;\n\n  z-index: 2;\n\n  left: 20px;\n\n  right: 20px;\n\n  bottom: 18px;\n\n  display: flex;\n\n  justify-content:\n    space-between;\n\n  color: white;\n\n  font-size: 9px;\n\n  letter-spacing: .15em;\n\n}\n\n\n\n.hero-right {\n\n  padding:\n    35px 5vw 45px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content:\n    space-between;\n\n}\n\n.hero-topline {\n\n  display: flex;\n\n  justify-content:\n    space-between;\n\n  color: var(--muted);\n\n  font-size: 9px;\n\n  letter-spacing: .18em;\n\n}\n\n.hero-main {\n\n  margin-top: auto;\n\n  margin-bottom: auto;\n\n}\n\n.hero-name > span {\n\n  color: var(--muted);\n\n  font-size: 11px;\n\n  letter-spacing: .2em;\n\n}\n\n.hero-name h1 {\n\n  margin:\n    10px 0 50px;\n\n  font-size:\n    clamp(70px,10vw,160px);\n\n  line-height: .75;\n\n  letter-spacing: -.08em;\n\n}\n\n.hero-name h1 span {\n\n  color: var(--muted);\n\n}\n\n.hero-title h2 {\n\n  margin: 0;\n\n  font-size:\n    clamp(45px,6vw,95px);\n\n  line-height: .84;\n\n  letter-spacing: -.065em;\n\n}\n\n.hero-title h2 i {\n\n  color: transparent;\n\n  -webkit-text-stroke:\n    1px rgba(255,255,255,.65);\n\n  font-style: normal;\n\n}\n\n.hero-title p {\n\n  margin-top: 35px;\n\n  color: var(--muted);\n\n  font-size: 10px;\n\n  line-height: 1.7;\n\n  letter-spacing: .12em;\n\n}\n\n.hero-bottom {\n\n  display: flex;\n\n  justify-content:\n    space-between;\n\n  align-items: end;\n\n  padding-top: 40px;\n\n  border-top:\n    1px solid var(--line);\n\n}\n\n.experience {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 15px;\n\n}\n\n.experience strong {\n\n  font-size: 65px;\n\n  line-height: .8;\n\n  letter-spacing: -.06em;\n\n}\n\n.experience strong span {\n\n  color: var(--muted);\n\n}\n\n.experience div {\n\n  display: flex;\n\n  flex-direction: column;\n\n}\n\n.experience b {\n\n  font-size: 10px;\n\n  letter-spacing: .15em;\n\n}\n\n.experience small {\n\n  color: var(--muted);\n\n  font-size: 8px;\n\n  letter-spacing: .15em;\n\n  margin-top: 4px;\n\n}\n\n.hero-contact {\n\n  display: flex;\n\n  gap: 45px;\n\n}\n\n.hero-contact a {\n\n  display: flex;\n\n  flex-direction: column;\n\n  font-size: 11px;\n\n  transition:\n    opacity .3s;\n\n}\n\n.hero-contact a:hover {\n\n  opacity: .55;\n\n}\n\n.hero-contact span {\n\n  color: var(--muted);\n\n  font-size: 8px;\n\n  letter-spacing: .15em;\n\n  margin-bottom: 6px;\n\n}\n\n\n\n\/* =========================================================\n   ABOUT\n========================================================= *\/\n\n.buta-intro {\n\n  display: grid;\n\n  grid-template-columns:\n    25% 75%;\n\n  padding:\n    130px 6vw;\n\n  border-bottom:\n    1px solid var(--line);\n\n}\n\n.section-number {\n\n  color: var(--muted);\n\n  font-size: 10px;\n\n  letter-spacing: .18em;\n\n}\n\n.intro-content {\n\n  max-width: 950px;\n\n}\n\n.intro-content h2 {\n\n  margin: 0;\n\n  font-size:\n    clamp(48px,6vw,90px);\n\n  line-height: .95;\n\n  letter-spacing: -.06em;\n\n}\n\n.intro-content h2 em {\n\n  color: var(--muted);\n\n  font-style: normal;\n\n}\n\n.intro-text {\n\n  margin-top: 60px;\n\n  max-width: 600px;\n\n}\n\n.intro-text p {\n\n  color: #a0a09b;\n\n  font-size: 14px;\n\n  line-height: 1.8;\n\n}\n\n\n\n\/* =========================================================\n   SECTION\n========================================================= *\/\n\n.buta-section {\n\n  padding:\n    110px 6vw;\n\n  border-bottom:\n    1px solid var(--line);\n\n}\n\n.section-head {\n\n  display: flex;\n\n  justify-content:\n    space-between;\n\n  margin-bottom: 55px;\n\n  color: var(--muted);\n\n  font-size: 9px;\n\n  letter-spacing: .18em;\n\n}\n\n\n\n\/* =========================================================\n   EXPERTISE\n========================================================= *\/\n\n.expertise-grid {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4,1fr);\n\n  border-top:\n    1px solid var(--line);\n\n  border-left:\n    1px solid var(--line);\n\n}\n\n.expertise-card {\n\n  min-height: 380px;\n\n  padding: 28px;\n\n  border-right:\n    1px solid var(--line);\n\n  border-bottom:\n    1px solid var(--line);\n\n  transition:\n    background .5s ease,\n    transform .5s ease;\n\n}\n\n.expertise-card:hover {\n\n  background: #111;\n\n  transform:\n    translateY(-6px);\n\n}\n\n.card-number {\n\n  color: var(--muted);\n\n  font-size: 9px;\n\n}\n\n.expertise-card h3 {\n\n  margin-top: 100px;\n\n  font-size: 28px;\n\n  line-height: .95;\n\n  letter-spacing: -.04em;\n\n}\n\n.expertise-card p {\n\n  color: var(--muted);\n\n  font-size: 10px;\n\n  line-height: 1.8;\n\n}\n\n\n\n\/* =========================================================\n   FILTER\n========================================================= *\/\n\n.portfolio-filter {\n\n  display: flex;\n\n  gap: 8px;\n\n  margin-bottom: 40px;\n\n  flex-wrap: wrap;\n\n}\n\n.filter {\n\n  background: transparent;\n\n  color: var(--muted);\n\n  border:\n    1px solid var(--line);\n\n  padding:\n    10px 16px;\n\n  font-size: 9px;\n\n  letter-spacing: .13em;\n\n  cursor: pointer;\n\n  transition:\n    .3s ease;\n\n}\n\n.filter:hover,\n.filter.active {\n\n  background:\n    var(--white);\n\n  color:\n    #090909;\n\n  border-color:\n    var(--white);\n\n}\n\n\n\n\/* =========================================================\n   PROJECT GRID\n========================================================= *\/\n\n.project-grid {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(2,1fr);\n\n  gap:\n    65px 30px;\n\n}\n\n.project {\n\n  cursor: pointer;\n\n}\n\n.project-wide {\n\n  grid-column:\n    span 2;\n\n}\n\n.project-image {\n\n  position: relative;\n\n  overflow: hidden;\n\n  background: #151515;\n\n  aspect-ratio:\n    4 \/ 3;\n\n}\n\n.project-wide .project-image {\n\n  aspect-ratio:\n    16 \/ 8;\n\n}\n\n.project-image img {\n\n  width: 100%;\n\n  height: 100%;\n\n  object-fit: cover;\n\n  display: block;\n\n  transition:\n    transform 1s cubic-bezier(.2,.7,.2,1);\n\n}\n\n.project:hover\n.project-image img {\n\n  transform:\n    scale(1.07);\n\n}\n\n.project-overlay {\n\n  position: absolute;\n\n  inset: 0;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 12px;\n\n  background:\n    rgba(0,0,0,.42);\n\n  opacity: 0;\n\n  transition:\n    opacity .45s ease;\n\n}\n\n.project:hover .project-overlay {\n\n  opacity: 1;\n\n}\n\n.project-overlay span {\n\n  font-size: 10px;\n\n  letter-spacing: .16em;\n\n}\n\n.project-overlay strong {\n\n  font-size: 20px;\n\n  font-weight: 300;\n\n}\n\n.project-info {\n\n  padding-top: 18px;\n\n  display: flex;\n\n  justify-content:\n    space-between;\n\n}\n\n.project-info small {\n\n  color: var(--muted);\n\n  font-size: 9px;\n\n}\n\n.project-info h3 {\n\n  margin:\n    6px 0 0;\n\n  font-size: 16px;\n\n  font-weight: 400;\n\n}\n\n.project-info > span {\n\n  color: var(--muted);\n\n  font-size: 9px;\n\n  letter-spacing: .13em;\n\n}\n\n.project.hidden {\n\n  display: none;\n\n}\n\n\n\n\/* =========================================================\n   PROCESS\n========================================================= *\/\n\n.process {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(5,1fr);\n\n  border-top:\n    1px solid var(--line);\n\n  border-left:\n    1px solid var(--line);\n\n}\n\n.process > div {\n\n  min-height: 270px;\n\n  padding: 25px;\n\n  border-right:\n    1px solid var(--line);\n\n  border-bottom:\n    1px solid var(--line);\n\n  transition:\n    background .4s;\n\n}\n\n.process > div:hover {\n\n  background: #111;\n\n}\n\n.process span {\n\n  color: var(--muted);\n\n  font-size: 9px;\n\n}\n\n.process h3 {\n\n  margin-top: 75px;\n\n  font-size: 17px;\n\n}\n\n.process p {\n\n  color: var(--muted);\n\n  font-size: 10px;\n\n  line-height: 1.7;\n\n}\n\n\n\n\/* =========================================================\n   SOFTWARE\n========================================================= *\/\n\n.software {\n\n  border-top:\n    1px solid var(--line);\n\n}\n\n.software > div {\n\n  display: flex;\n\n  justify-content:\n    space-between;\n\n  align-items: center;\n\n  padding:\n    23px 0;\n\n  border-bottom:\n    1px solid var(--line);\n\n  transition:\n    padding .4s;\n\n}\n\n.software > div:hover {\n\n  padding-left: 15px;\n\n}\n\n.software strong {\n\n  font-size:\n    clamp(24px,3vw,45px);\n\n  letter-spacing:\n    -.04em;\n\n}\n\n.software span {\n\n  color: var(--muted);\n\n  font-size: 10px;\n\n  letter-spacing: .15em;\n\n}\n\n\n\n\/* =========================================================\n   FINAL CTA\n========================================================= *\/\n\n.buta-final-cta {\n\n  min-height:\n    100vh;\n\n  padding:\n    130px 6vw 45px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content:\n    space-between;\n\n  position: relative;\n\n}\n\n.cta-eyebrow {\n\n  color: var(--muted);\n\n  font-size: 9px;\n\n  letter-spacing: .18em;\n\n}\n\n.cta-main {\n\n  display: grid;\n\n  grid-template-columns:\n    3fr 1fr;\n\n  align-items: end;\n\n  gap: 60px;\n\n}\n\n.cta-main h2 {\n\n  margin: 0;\n\n  font-size:\n    clamp(60px,9vw,150px);\n\n  line-height: .78;\n\n  letter-spacing:\n    -.075em;\n\n}\n\n.cta-main h2 span {\n\n  color: transparent;\n\n  -webkit-text-stroke:\n    1px rgba(255,255,255,.6);\n\n}\n\n.cta-main h2 em {\n\n  color: var(--white);\n\n  font-style: normal;\n\n}\n\n.cta-copy {\n\n  max-width: 330px;\n\n  padding-bottom: 8px;\n\n}\n\n.cta-copy p {\n\n  color: var(--muted);\n\n  font-size: 13px;\n\n  line-height: 1.8;\n\n}\n\n\n\n\/* PHONE *\/\n\n.cta-phone {\n\n  width: 100%;\n\n  border-top:\n    1px solid var(--white);\n\n  border-bottom:\n    1px solid var(--white);\n\n  padding:\n    27px 0;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 30px;\n\n  margin-top: 80px;\n\n  transition:\n    padding .5s ease;\n\n}\n\n.cta-phone:hover {\n\n  padding-left: 20px;\n\n  padding-right: 20px;\n\n}\n\n.phone-label {\n\n  color: var(--muted);\n\n  font-size: 9px;\n\n  letter-spacing: .18em;\n\n}\n\n.cta-phone strong {\n\n  font-size:\n    clamp(35px,5vw,75px);\n\n  line-height: 1;\n\n  letter-spacing:\n    -.05em;\n\n  font-weight: 400;\n\n}\n\n.phone-arrow {\n\n  margin-left: auto;\n\n  font-size: 40px;\n\n  font-weight: 200;\n\n  transition:\n    transform .4s;\n\n}\n\n.cta-phone:hover .phone-arrow {\n\n  transform:\n    translate(8px,-8px);\n\n}\n\n\n\n\/* THANK YOU *\/\n\n.thank-you {\n\n  max-width: 620px;\n\n  margin:\n    100px auto 70px;\n\n  text-align: center;\n\n}\n\n.thank-line {\n\n  width: 50px;\n\n  height: 1px;\n\n  background:\n    var(--muted);\n\n  margin:\n    0 auto 30px;\n\n}\n\n.thank-you h3 {\n\n  margin: 0 0 18px;\n\n  font-size: 11px;\n\n  letter-spacing: .2em;\n\n}\n\n.thank-you p {\n\n  color: var(--muted);\n\n  font-size: 12px;\n\n  line-height: 1.9;\n\n}\n\n.thank-you > span {\n\n  display: block;\n\n  margin-top: 20px;\n\n  color: var(--muted);\n\n  font-size: 9px;\n\n  letter-spacing: .15em;\n\n}\n\n.final-meta {\n\n  display: flex;\n\n  justify-content:\n    space-between;\n\n  border-top:\n    1px solid var(--line);\n\n  padding-top: 20px;\n\n  color: var(--muted);\n\n  font-size: 8px;\n\n  letter-spacing: .13em;\n\n}\n\n\n\n\/* =========================================================\n   SLIME CHARACTER\n========================================================= *\/\n\n.slime-character {\n\n  position: fixed;\n\n  right: 28px;\n\n  bottom: 25px;\n\n  width: 115px;\n\n  height: 105px;\n\n  z-index: 9000;\n\n  pointer-events: none;\n\n  transform:\n    translateY(0);\n\n  transition:\n    transform .15s ease-out;\n\n}\n\n\n\n\/* SHADOW *\/\n\n.slime-shadow {\n\n  position: absolute;\n\n  width: 85px;\n\n  height: 18px;\n\n  bottom: 3px;\n\n  left: 15px;\n\n  background:\n    rgba(0,0,0,.55);\n\n  border-radius: 50%;\n\n  filter:\n    blur(5px);\n\n  transform:\n    scaleX(1);\n\n  transition:\n    transform .2s ease;\n\n}\n\n\n\n\/* BODY *\/\n\n.slime-body {\n\n  position: absolute;\n\n  left: 10px;\n\n  bottom: 12px;\n\n  width: 95px;\n\n  height: 76px;\n\n  border-radius:\n    55% 55% 42% 42%\n    \/ 70% 70% 35% 35%;\n\n  background:\n    radial-gradient(\n      circle at 30% 22%,\n      #ffffff 0%,\n      rgba(255,255,255,.65) 5%,\n      transparent 13%\n    ),\n    radial-gradient(\n      circle at 35% 35%,\n      #9effca 0%,\n      #38d981 30%,\n      #12a85d 67%,\n      #087842 100%\n    );\n\n  box-shadow:\n    inset -15px -18px 20px rgba(0,0,0,.25),\n    inset 15px 12px 20px rgba(255,255,255,.25),\n    0 15px 30px rgba(0,0,0,.35);\n\n  animation:\n    slime-float 3.5s ease-in-out infinite;\n\n  transform-origin:\n    bottom center;\n\n}\n\n\n\n\/* TOP BLOB *\/\n\n.slime-body::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  width: 45px;\n\n  height: 28px;\n\n  left: 25px;\n\n  top: -10px;\n\n  background:\n    linear-gradient(\n      145deg,\n      #9effca,\n      #20bd70\n    );\n\n  border-radius:\n    70% 30% 60% 40%;\n\n  transform:\n    rotate(-8deg);\n\n  box-shadow:\n    inset 5px 4px 8px rgba(255,255,255,.25);\n\n}\n\n\n\n\/* FACE *\/\n\n.slime-face {\n\n  position: absolute;\n\n  inset: 0;\n\n}\n\n\n\n\/* EYES *\/\n\n.slime-eye {\n\n  position: absolute;\n\n  top: 35px;\n\n  width: 11px;\n\n  height: 15px;\n\n  background: #07130e;\n\n  border-radius: 50%;\n\n  box-shadow:\n    2px 2px 0 rgba(255,255,255,.15);\n\n}\n\n.slime-eye.left {\n\n  left: 28px;\n\n}\n\n.slime-eye.right {\n\n  right: 28px;\n\n}\n\n\n\n\/* MOUTH *\/\n\n.slime-mouth {\n\n  position: absolute;\n\n  left: 50%;\n\n  top: 51px;\n\n  width: 18px;\n\n  height: 8px;\n\n  transform:\n    translateX(-50%);\n\n  border-bottom:\n    2px solid #07130e;\n\n  border-radius:\n    0 0 50% 50%;\n\n}\n\n\n\n\/* HIGHLIGHT *\/\n\n.slime-highlight {\n\n  position: absolute;\n\n  width: 18px;\n\n  height: 8px;\n\n  left: 20px;\n\n  top: 18px;\n\n  background:\n    rgba(255,255,255,.8);\n\n  border-radius: 50%;\n\n  transform:\n    rotate(-25deg);\n\n  filter:\n    blur(1px);\n\n}\n\n\n\n\/* FLOAT *\/\n\n@keyframes slime-float {\n\n  0%,\n  100% {\n\n    transform:\n      translateY(0)\n      rotate(-2deg);\n\n  }\n\n  50% {\n\n    transform:\n      translateY(-9px)\n      rotate(2deg);\n\n  }\n\n}\n\n\n\n\/* SCROLL JUMP *\/\n\n.slime-character.slime-jump\n.slime-body {\n\n  animation:\n    slime-jump .65s cubic-bezier(.2,.8,.2,1);\n\n}\n\n.slime-character.slime-jump\n.slime-shadow {\n\n  animation:\n    slime-shadow .65s ease;\n\n}\n\n@keyframes slime-jump {\n\n  0% {\n\n    transform:\n      translateY(0)\n      scaleX(1)\n      scaleY(1);\n\n  }\n\n  15% {\n\n    transform:\n      translateY(5px)\n      scaleX(1.18)\n      scaleY(.82);\n\n  }\n\n  45% {\n\n    transform:\n      translateY(-45px)\n      scaleX(.9)\n      scaleY(1.1);\n\n  }\n\n  70% {\n\n    transform:\n      translateY(-20px)\n      scaleX(1.05)\n      scaleY(.95);\n\n  }\n\n  100% {\n\n    transform:\n      translateY(0)\n      scaleX(1)\n      scaleY(1);\n\n  }\n\n}\n\n@keyframes slime-shadow {\n\n  0%,\n  100% {\n\n    transform:\n      scaleX(1);\n\n  }\n\n  45% {\n\n    transform:\n      scaleX(.55);\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   LIGHTBOX\n========================================================= *\/\n\n.buta-lightbox {\n\n  position: fixed;\n\n  inset: 0;\n\n  z-index: 999999;\n\n  display: none;\n\n  align-items: center;\n\n  justify-content: center;\n\n  background:\n    rgba(0,0,0,.96);\n\n  padding: 5vw;\n\n}\n\n.buta-lightbox.active {\n\n  display: flex;\n\n}\n\n.lightbox-inner {\n\n  width:\n    min(1200px,100%);\n\n}\n\n.lightbox-inner img {\n\n  width: 100%;\n\n  max-height: 75vh;\n\n  object-fit: contain;\n\n}\n\n.lightbox-inner > div {\n\n  margin-top: 20px;\n\n}\n\n.lightbox-number {\n\n  color: var(--muted);\n\n  font-size: 9px;\n\n  letter-spacing: .15em;\n\n}\n\n.lightbox-inner h2 {\n\n  margin: 8px 0;\n\n  font-size: 30px;\n\n}\n\n.lightbox-inner p {\n\n  margin: 0;\n\n  color: var(--muted);\n\n  font-size: 11px;\n\n}\n\n.lightbox-close {\n\n  position: absolute;\n\n  top: 20px;\n\n  right: 30px;\n\n  border: none;\n\n  background: transparent;\n\n  color: white;\n\n  font-size: 45px;\n\n  cursor: pointer;\n\n}\n\n\n\n\/* =========================================================\n   SCROLL REVEAL\n========================================================= *\/\n\n.reveal {\n\n  opacity: 0;\n\n  transform:\n    translateY(35px);\n\n  transition:\n    opacity .9s cubic-bezier(.2,.7,.2,1),\n    transform .9s cubic-bezier(.2,.7,.2,1);\n\n}\n\n.reveal.visible {\n\n  opacity: 1;\n\n  transform:\n    translateY(0);\n\n}\n\n\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media(max-width:900px) {\n\n  .buta-hero {\n\n    grid-template-columns:\n      1fr;\n\n  }\n\n  .hero-left {\n\n    border-right: none;\n\n    border-bottom:\n      1px solid var(--line);\n\n    padding:\n      60px 20px;\n\n  }\n\n  .hero-photo {\n\n    max-width: 360px;\n\n  }\n\n  .hero-right {\n\n    padding:\n      35px 20px 45px;\n\n    min-height:\n      75vh;\n\n  }\n\n  .expertise-grid {\n\n    grid-template-columns:\n      repeat(2,1fr);\n\n  }\n\n  .process {\n\n    grid-template-columns:\n      repeat(2,1fr);\n\n  }\n\n  .buta-intro {\n\n    grid-template-columns:\n      1fr;\n\n    gap: 45px;\n\n  }\n\n  .cta-main {\n\n    grid-template-columns:\n      1fr;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:600px) {\n\n  .buta-cursor,\n  .buta-cursor-dot {\n\n    display: none;\n\n  }\n\n  .buta-hero {\n\n    min-height:\n      auto;\n\n  }\n\n  .hero-name h1 {\n\n    font-size:\n      25vw;\n\n  }\n\n  .hero-title h2 {\n\n    font-size:\n      14vw;\n\n  }\n\n  .hero-bottom {\n\n    flex-direction:\n      column;\n\n    align-items:\n      flex-start;\n\n    gap: 35px;\n\n  }\n\n  .hero-contact {\n\n    flex-direction:\n      column;\n\n    gap: 15px;\n\n  }\n\n  .buta-intro,\n  .buta-section {\n\n    padding:\n      75px 20px;\n\n  }\n\n  .expertise-grid {\n\n    grid-template-columns:\n      1fr;\n\n  }\n\n  .project-grid {\n\n    grid-template-columns:\n      1fr;\n\n    gap: 45px;\n\n  }\n\n  .project-wide {\n\n    grid-column:\n      span 1;\n\n  }\n\n  .project-wide .project-image {\n\n    aspect-ratio:\n      4 \/ 3;\n\n  }\n\n  .process {\n\n    grid-template-columns:\n      1fr;\n\n  }\n\n  .portfolio-filter {\n\n    overflow-x:\n      auto;\n\n    flex-wrap:\n      nowrap;\n\n  }\n\n  .filter {\n\n    white-space:\n      nowrap;\n\n  }\n\n  .buta-final-cta {\n\n    min-height:\n      auto;\n\n    padding:\n      100px 20px 30px;\n\n  }\n\n  .cta-main h2 {\n\n    font-size:\n      16vw;\n\n  }\n\n  .cta-phone {\n\n    flex-wrap:\n      wrap;\n\n    gap: 15px;\n\n    margin-top:\n      60px;\n\n  }\n\n  .cta-phone strong {\n\n    width:\n      100%;\n\n    font-size:\n      12vw;\n\n  }\n\n  .phone-arrow {\n\n    position:\n      absolute;\n\n    right: 0;\n\n  }\n\n  .thank-you {\n\n    margin:\n      80px auto 60px;\n\n  }\n\n  .final-meta {\n\n    flex-direction:\n      column;\n\n    gap: 10px;\n\n  }\n\n  .slime-character {\n\n    width: 85px;\n\n    height: 80px;\n\n    right: 8px;\n\n    bottom: 12px;\n\n    transform:\n      scale(.75);\n\n    transform-origin:\n      bottom right;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce) {\n\n  *,\n  *::before,\n  *::after {\n\n    animation-duration:\n      .01ms !important;\n\n    animation-iteration-count:\n      1 !important;\n\n    scroll-behavior:\n      auto !important;\n\n    transition-duration:\n      .01ms !important;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n\/* =========================================================\n   SCROLL REVEAL\n========================================================= *\/\n\nconst butaReveal =\n  document.querySelectorAll(\n    '.buta-portfolio .reveal'\n  );\n\n\nconst butaObserver =\n  new IntersectionObserver(\n\n    entries => {\n\n      entries.forEach(\n        entry => {\n\n          if (\n            entry.isIntersecting\n          ) {\n\n            entry.target.classList.add(\n              'visible'\n            );\n\n            butaObserver.unobserve(\n              entry.target\n            );\n\n          }\n\n        }\n      );\n\n    },\n\n    {\n      threshold: .12\n    }\n\n  );\n\n\nbutaReveal.forEach(\n  item =>\n    butaObserver.observe(item)\n);\n\n\n\n\/* =========================================================\n   PROJECT FILTER\n========================================================= *\/\n\nconst butaFilters =\n  document.querySelectorAll(\n    '.buta-portfolio .filter'\n  );\n\n\nconst butaProjects =\n  document.querySelectorAll(\n    '.buta-portfolio .project'\n  );\n\n\nbutaFilters.forEach(\n  filter => {\n\n    filter.addEventListener(\n      'click',\n      () => {\n\n        butaFilters.forEach(\n          item =>\n            item.classList.remove(\n              'active'\n            )\n        );\n\n        filter.classList.add(\n          'active'\n        );\n\n        const category =\n          filter.dataset.filter;\n\n\n        butaProjects.forEach(\n          project => {\n\n            if (\n              category === 'all' ||\n              project.dataset.category === category\n            ) {\n\n              project.classList.remove(\n                'hidden'\n              );\n\n              setTimeout(\n                () => {\n\n                  project.classList.add(\n                    'visible'\n                  );\n\n                },\n                50\n              );\n\n            } else {\n\n              project.classList.remove(\n                'visible'\n              );\n\n              project.classList.add(\n                'hidden'\n              );\n\n            }\n\n          }\n        );\n\n      }\n    );\n\n  }\n);\n\n\n\n\/* =========================================================\n   SLIME SCROLL JUMP\n========================================================= *\/\n\nconst slime =\n  document.querySelector(\n    '.slime-character'\n  );\n\n\nlet slimeTimeout;\n\nlet lastScroll =\n  window.scrollY;\n\n\nwindow.addEventListener(\n  'scroll',\n  () => {\n\n    const currentScroll =\n      window.scrollY;\n\n\n    \/* Jump *\/\n\n    slime.classList.remove(\n      'slime-jump'\n    );\n\n\n    void slime.offsetWidth;\n\n\n    slime.classList.add(\n      'slime-jump'\n    );\n\n\n    clearTimeout(\n      slimeTimeout\n    );\n\n\n    slimeTimeout =\n      setTimeout(\n        () => {\n\n          slime.classList.remove(\n            'slime-jump'\n          );\n\n        },\n        700\n      );\n\n\n    \/* Slight parallax *\/\n\n    const movement =\n      Math.min(\n        Math.max(\n          (currentScroll - lastScroll) * .35,\n          -18\n        ),\n        18\n      );\n\n\n    slime.style.marginTop =\n      movement + 'px';\n\n\n    lastScroll =\n      currentScroll;\n\n  },\n\n  {\n    passive: true\n  }\n);\n\n\n\n\/* =========================================================\n   CUSTOM CURSOR\n========================================================= *\/\n\nconst cursor =\n  document.querySelector(\n    '.buta-cursor'\n  );\n\nconst cursorDot =\n  document.querySelector(\n    '.buta-cursor-dot'\n  );\n\n\ndocument.addEventListener(\n  'mousemove',\n  event => {\n\n    cursor.style.left =\n      event.clientX + 'px';\n\n    cursor.style.top =\n      event.clientY + 'px';\n\n    cursorDot.style.left =\n      event.clientX + 'px';\n\n    cursorDot.style.top =\n      event.clientY + 'px';\n\n  }\n);\n\n\nconst interactive =\n  document.querySelectorAll(\n    'a, button, .project, .expertise-card'\n  );\n\n\ninteractive.forEach(\n  item => {\n\n    item.addEventListener(\n      'mouseenter',\n      () => {\n\n        document.body.classList.add(\n          'cursor-active'\n        );\n\n      }\n    );\n\n\n    item.addEventListener(\n      'mouseleave',\n      () => {\n\n        document.body.classList.remove(\n          'cursor-active'\n        );\n\n      }\n    );\n\n  }\n);\n\n\n\n\/* =========================================================\n   MAGNETIC CTA\n========================================================= *\/\n\nconst magnetic =\n  document.querySelector(\n    '.magnetic'\n  );\n\n\nif (magnetic) {\n\n  magnetic.addEventListener(\n    'mousemove',\n    event => {\n\n      const rect =\n        magnetic.getBoundingClientRect();\n\n      const x =\n        event.clientX -\n        rect.left -\n        rect.width \/ 2;\n\n      const y =\n        event.clientY -\n        rect.top -\n        rect.height \/ 2;\n\n\n      magnetic.style.transform =\n        `translate(${x * .025}px, ${y * .025}px)`;\n\n    }\n  );\n\n\n  magnetic.addEventListener(\n    'mouseleave',\n    () => {\n\n      magnetic.style.transform =\n        '';\n\n    }\n  );\n\n}\n\n\n\n\/* =========================================================\n   LIGHTBOX\n========================================================= *\/\n\nconst lightbox =\n  document.querySelector(\n    '.buta-lightbox'\n  );\n\nconst lightboxImage =\n  lightbox.querySelector(\n    'img'\n  );\n\nconst lightboxTitle =\n  lightbox.querySelector(\n    'h2'\n  );\n\nconst lightboxInfo =\n  lightbox.querySelector(\n    'p'\n  );\n\nconst lightboxNumber =\n  lightbox.querySelector(\n    '.lightbox-number'\n  );\n\nconst lightboxClose =\n  lightbox.querySelector(\n    '.lightbox-close'\n  );\n\n\nbutaProjects.forEach(\n  project => {\n\n    project.addEventListener(\n      'click',\n      () => {\n\n        lightboxImage.src =\n          project.dataset.image;\n\n        lightboxTitle.textContent =\n          project.dataset.title;\n\n        lightboxInfo.textContent =\n          project.dataset.info;\n\n        lightboxNumber.textContent =\n          project.querySelector(\n            'small'\n          ).textContent;\n\n\n        lightbox.classList.add(\n          'active'\n        );\n\n\n        document.body.style.overflow =\n          'hidden';\n\n      }\n    );\n\n  }\n);\n\n\n\nfunction closeButaLightbox() {\n\n  lightbox.classList.remove(\n    'active'\n  );\n\n  document.body.style.overflow =\n    '';\n\n}\n\n\nlightboxClose.addEventListener(\n  'click',\n  closeButaLightbox\n);\n\n\nlightbox.addEventListener(\n  'click',\n  event => {\n\n    if (\n      event.target === lightbox\n    ) {\n\n      closeButaLightbox();\n\n    }\n\n  }\n);\n\n\ndocument.addEventListener(\n  'keydown',\n  event => {\n\n    if (\n      event.key === 'Escape'\n    ) {\n\n      closeButaLightbox();\n\n    }\n\n  }\n);\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>PORTRAIT \/ 01 2026 PORTFOLIO \/ 2026 3D VISUAL DESIGNER HELLO, I&#8217;M BUTA. 3D VISUAL DESIGNER POSM \u00b7 RETAIL DISPLAY \u00b7 EVENT EXHIBITION \u00b7 PRODUCT VISUALIZATION 07+ YEARS EXPERIENCE PHONE 0389 294 638 EMAIL yourmail@gmail.com 01 \/ ABOUT I turn ideas into visual experiences. 3D Visual Designer with 7+ years of experience in 3D modeling, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-518","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/pages\/518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/twame.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=518"}],"version-history":[{"count":3,"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/pages\/518\/revisions"}],"predecessor-version":[{"id":522,"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/pages\/518\/revisions\/522"}],"wp:attachment":[{"href":"https:\/\/twame.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}