John Whittington

Selected Work

Project

...

<div id="canvas-container" style="display: flex; justify-content: center; align-items: flex-start; padding: 0; position: relative; min-height: 100vh; background: #ffffff;">
        
        
        <div id="pdf-loader" style="position: absolute; top: 40%; text-align: center; z-index: 5;">
            <div style="width: 20px; height: 20px; border: 2px solid #f0f0f0; border-top: 2px solid #111; border-radius: 50%; display: inline-block; animation: bob-spin 0.6s linear infinite;"></div>
        </div>

<canvas id="pdf-render" style="width: 100%; display: none; transition: opacity 0.2s ease; opacity: 0; border: 1px solid #f0f0f0; box-shadow: 0 10px 30px rgba(0,0,0,0.03);"></canvas>
    </div>

<div style="position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 6px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 15px 35px rgba(0,0,0,0.1); z-index: 100;">
        
        <button id="prev-page" class="dock-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
        </button>
        
        <div style="margin: 0 15px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: #000; letter-spacing: 2px; text-align: center; cursor: default; min-width: 50px;">
            <span id="page-num">01</span><span style="opacity: 0.2; margin: 0 6px;">/</span><span id="page-count">--</span>
        </div>
        
        <button id="next-page" class="dock-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
        </button>
    </div>
</div>

const pdfjsLib = window['pdfjs-dist/build/pdf'];
    // Bob's Speed Trick: Higher concurrency for faster processing
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';

let pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        canvas = document.getElementById('pdf-render'),
        ctx = canvas.getContext('2d'),
        loader = document.getElementById('pdf-loader'),
        progressBar = document.getElementById('pdf-progress');

let nextPageObj = null;

function renderPage(num) {
        pageRendering = true;
        
        document.getElementById('page-num').textContent = num.toString().padStart(2, '0');
        progressBar.style.width = ((num / pdfDoc.numPages) * 100) + '%';

const getPagePromise = (num === pageNum + 1 && nextPageObj) ? Promise.resolve(nextPageObj) : pdfDoc.getPage(num);

getPagePromise.then(page => {
            const containerWidth = document.getElementById('jw-pdf-app').clientWidth;
            const viewportDefault = page.getViewport({scale: 1});
            
            // Bob's Math: 1.5 is the sweet spot for vector drawings to be fast but sharp
            const scale = Math.min(containerWidth / viewportDefault.width, 1.5);
            const viewport = page.getViewport({scale: scale});
            
            const pixelRatio = window.devicePixelRatio || 1;
            canvas.height = viewport.height * pixelRatio;
            canvas.width = viewport.width * pixelRatio;
            
            ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
            
            const renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                // BOB'S TURBO SETTINGS:
                intent: 'print',         // Usually faster for vector-heavy sets
                enableWebGL: true,       // Hardware acceleration
                renderInteractiveForms: false // Disable unnecessary overhead
            };

const renderTask = page.render(renderContext);
            renderTask.promise.then(() => {
                pageRendering = false;
                loader.style.display = 'none';
                canvas.style.display = 'block';
                
                // Use requestAnimationFrame for a buttery smooth fade-in
                requestAnimationFrame(() => {
                    canvas.style.opacity = '1';
                });

// Pre-Fetch next page logic
                if (num < pdfDoc.numPages) {
                    pdfDoc.getPage(num + 1).then(next => { nextPageObj = next; });
                }

if (pageNumPending !== null) {
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });
    }

function queueRenderPage(num) {
        canvas.style.opacity = '0.3'; 
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }

// High Speed Fetching & Chunking
    pdfjsLib.getDocument({
        url: url,
        rangeChunkSize: 65536, // Smaller chunks for quicker first paint
        disableAutoFetch: false,
        disableStream: false,
        withCredentials: false 
    }).promise.then(pdfDoc_ => {
        pdfDoc = pdfDoc_;
        document.getElementById('page-count').textContent = pdfDoc.numPages.toString().padStart(2, '0');
        renderPage(pageNum);
    }).catch(err => {
        document.getElementById('canvas-container').innerHTML = `<div style="padding-top:100px; color:#ccc; font-size:9px; letter-spacing:4px; font-weight:700;">FETCH_ERROR</div>`;
    });

document.getElementById('prev-page').addEventListener('click', () => {
        if (pageNum <= 1 || pageRendering) return;
        pageNum--;
        queueRenderPage(pageNum);
        window.scrollTo({top: document.getElementById('jw-pdf-app').offsetTop, behavior: 'smooth'});
    });

document.getElementById('next-page').addEventListener('click', () => {
        if (pageNum >= pdfDoc.numPages || pageRendering) return;
        pageNum++;
        queueRenderPage(pageNum);
        window.scrollTo({top: document.getElementById('jw-pdf-app').offsetTop, behavior: 'smooth'});
    });

let resizeTimer;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            if (pdfDoc && !pageRendering) renderPage(pageNum);
        }, 300);
    });
})();
</script>

Project

In-Line Brand Shop

...

<div class="jw-wrapper">
  
  
  <div class="jw-gallery" style="margin-bottom: 60px;">
    
    <div class="jw-gallery-col">
      <div class="jw-square-container">
        <div class="jw-hero-item-inner" style="overflow: hidden;">
          
          
          <div class="jw-html5-carousel">
            
            <img alt="Zevo In-Line Detail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcc-EzR2KRXbD-l9dJpt_COicGHE3KoDm0yom9mt_RiMM5sESviOhVDuMd9_5uS9dn2TknoMOlA2iXmda08XFEJ7-TTa0hDSOAMrUqQNTCvYgjpHOFk5-0Aho53W70g9XofaZ_8_V6OwWHMw6LYH8-EEO-NQh8D4LeODWHrsZBkDQlBDYZchamXR8fHCs/w640-h640/Zevo_InLine_Detail.jpg" />
          </div>

</div>
      </div>
    </div>

</div>

<div class="jw-grid">
    
    <div class="jw-meta">
      <h4>Project Details</h4>
      <span class="jw-label">Client</span>
      <div class="jw-value">Proctor&Gamble</div><br />
      <span class="jw-label">Workplace</span>
      <div class="jw-value">UPSHOT Agency</div><br />
      <span class="jw-label">Job Title</span>
      <div class="jw-value">Sr. Art Director / Environments</div><br />
      <span class="jw-label">Tools</span>
      <div class="jw-value">SketchUp Pro, Chaos V-Ray, Photoshop</div>
    </div>
    
    <div class="jw-content">
      <h2>Elevated In-Line Strategy</h2>
<p>Partnered with project art directors to develop an elevated in-line spatial strategy designed to showcase brand assets and communicate product benefits clearly at the point of purchase. Focused on creating a highly functional, visually engaging retail environment ready for national implementation.
</p>

<p>Explored multiple merchandising strategies in coordination with the 2D graphics team to improve shopper navigation and impact at the shelf. Developed various shelf-ready package concepts, with options on color hierarchy and messaging.
</p>
      <p>Executed all detailed 3D models of the product, shelving, and surrounding retail environment. Produced photorealistic renders and visualizations to test color options, ensuring a seamless translation of the brand’s visual identity into the physical shopping space.
</p>
    </div>
  </div>
  
</div>

Project

Big Box Endcap Activation

...

<div class="jw-wrapper">

<div class="jw-gallery" style="margin-bottom: 60px;">
        
        <div class="jw-gallery-col">
            <div class="jw-square-container">
                <div class="jw-hero-item-inner">
                    <img alt="Newell Close-up" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUuqepZBXYZiMlpVzbKKrqqCTP59sVB8uaN7sUQ9tYL26MVtcBn-DL4c5Z4Afl7bgiq0ny26Ti-FU8Z3HaF3jjAiXJSZ3gUIyGxAAdYLIvQ8iP_X5n8R0OVSADXfATb-6V1S_juRAZnwb4sb7pBHkj0IOlPqslWy3NKJlEW0qG82S_omdMfpOzwjbtyOw/s16000/NewellClose.png" />
                </div>
            </div>
        </div>
        
        <div class="jw-gallery-col">
            <div class="jw-square-container">
                <div class="jw-hero-item-inner">
                    <img alt="Newell Endcap" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-QhaRiK8QBV2ZSYI5Cyu4uuKqfcYpp1Dlr5s4OwjZo3iEnS-ELqLxLapmxkvZKRHWaEcqye4OT5tpZMkADe5TF0B3f4sLWaICGDoeMP1oryRk5ytGgkEuTxIO2TVIVD_C1LWAzc2XE_JewtjzgTx6gm1-m6A39TIYV6QTyIYCLX5E6zWXLlRHFVYQEY/s16000/NewellEndcap_100.png" />
                </div>
            </div>
        </div>
    </div>

<div class="jw-grid">
        
        <div class="jw-meta">
            <h4>Project Details</h4>
            <div class="jw-meta-item"><span class="jw-label">Client</span><span class="jw-value">Newell Brands</span></div>
            <div class="jw-meta-item"><span class="jw-label">Workplace</span><span class="jw-value">UPSHOT Agency</span></div>
            <div class="jw-meta-item"><span class="jw-label">Tools</span><span class="jw-value">SketchUp Pro, Chaos V-Ray, Photoshop</span></div>
        </div>

<div class="jw-content">
            <h2>Project Overview</h2>
            <p>
                Partnered with the creative team to translate the Newell Brands holiday strategy into high-fidelity retail visualizations. Focused on an endcap execution that showcased household essentials as the foundation for festive gifting and food storage. 
            </p>

<p>
                Visualized key shopper occasions centered around holiday prep and sharing. Executed renders featuring Rubbermaid TakeAlongs for cookie gifting, seasonal Target platters for entertaining, and Ball Jar Mugs as vessels for custom hot cocoa mixes. Maintained brand consistency across a diverse portfolio of products to create a unified, gift-ready presentation.
            </p>

<p>
                Managed all 3D modeling and photorealistic rendering for the project. Built detailed environmental assets and product models to bring the conceptual vision to life. Produced the final visual set used for retail sell-in and stakeholder alignment, ensuring every detail captured the warmth and utility of the holiday campaign.
            </p>
        </div>
    </div>

<div class="jw-gallery">
        
        <div class="jw-gallery-col">
            <div class="jw-square-container">
                <div class="jw-hero-item-inner">
                    <img alt="Newell Detail View" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCC9mTft4SZnrD1PtgSiYv6YhYvuavkb7pYQEYkrzUEIC39-XJAHjwnHqP40AT5hzLF1KDOVGdHIFch9OCaoqMMZwOssonOwGFUxaweHtSJohWEqJnddteIGUvbMdq_Nq_fJf_xLE0s9vaXwNrOoc2cKnnio3nYVmPxHzHL-CKUjG01_1C78pwAlRR_kg/s16000/Newell_View103.png" />
                </div>
            </div>
        </div>
        
        <div class="jw-gallery-col">
            <div class="jw-square-container">
                <div class="jw-hero-item-inner">
                    <img alt="Newell Shelf Detail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFrwwcRRUH-zL-Am9vqaBM4nr9M8UuNfJFfQDNZ_PGLSiwlOyPqub5dsa9-VQt13JaEBrRiAZ5zeN5Udk4DvFAGoYmG9wUN2rk9rj43flwkm2aUB8wcJwoKtd7V3ZmirFqZ6rByS7QribGH_nGRT1vUtvGRuqfI8VoiLxGczz07BOSrT8_05o6YCumSE/s16000/NewellEndcap_101.png" />
                </div>
            </div>
        </div>
        
        <div class="jw-gallery-col">
            <div class="jw-square-container">
                <div class="jw-hero-item-inner">
                    <img alt="Newell Product Focus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM8GdTht09dzHRsVG8B7sMnyh0KlWTQrQzAOK6xqYJDdNxd3DjnQdVm-q-MVSQ0gONBOvfZUrjd75u4ab_NdzgzUVkCpwrgNakD96DNvSunR8hmQuH99MD73kci7sPDvLL4HJSr0lTj-1An2yxLOUU-3QbsgDPZOaTAgnU3zc7DPxxc3RoIaIc3DDBSQI/s16000/NewellEndcap_105.png" />
                </div>
            </div>
        </div>
    </div>

</div>

Project

Aspirational Brand Experience

Project Details Client Constellation Brands Workplace Upshot A...

<style>
  /* Blogger Bob's Standard HTML5 Carousel Buttons */
  .jw-html5-carousel {
      width: 100%;
      height: 100%;
  }
  .jw-carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.9);
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      color: #111;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      z-index: 10;
      transition: all 0.2s;
  }
  .jw-carousel-btn:hover {
      background: #fff;
      transform: translateY(-50%) scale(1.1);
  }
  .jw-carousel-btn.jw-prev { left: 10px; }
  .jw-carousel-btn.jw-next { right: 10px; }
</style>

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 60px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsURuIiXdvKirHwi9HFBwVbkrJe6DWLIFRGgg2lDKGx7NsawQQLTLZYnIRpvvjbjMzIon7D0dMZFb8evyQwpn-hnZniXUxQCy-JuEt4zZgeg4H97jVAifus0vjKs0-YMaKbBWOml6yRrdYa_vzFaE3VhKvEXnWXucNNa2SvZISsSyzJEBCHRn2HwHOL3w/s16000/CoronaManCave03.webp" style="display: block; height: auto; object-fit: cover; width: 100%;" />
  </div>

<div class="jw-grid" style="margin-top: 0px;">
    
    <div class="jw-meta">
      <h4>Project Details</h4>
      <span class="jw-label">Client</span>
      <div class="jw-value">Constellation Brands</div><br />
      <span class="jw-label">Workplace</span>
      <div class="jw-value">Upshot Agency</div><br />
      <span class="jw-label">My Title</span>
      <div class="jw-value">Sr. Art Director / Environments</div><br />
       <span class="jw-label">Tools</span>
      <div class="jw-value">SketchUp Pro, SketchUp Layout Pro, Chaos V-Ray, Photoshop, Illustrator</div><br />
      <span class="jw-label">Project Work</span>
      <div class="jw-value">Creative Direction, 3D Modeling and Render Visualization.</div><br />
    </div>
    
   
    <div class="jw-content">
      <h2>Corona NFL Fan Cave</h2>
          
      <p>Tasked with conceptualizing and designing a fictional, highly aspirational Corona-branded "fan cave" for a national NFL season sweepstakes. </p>
      
      <p>The creative objective required balancing the high-energy excitement of a professional football game day with the relaxed, authentic beach lifestyle synonymous with the Corona brand.</p>
      
      <p>As the single 3D agency resource, provided all conceptual development, 3D modeling, and photorealistic rendering. Delivered high-fidelity visuals utilized across promotional touchpoints to drive overall brand engagement during the NFL season.</p>
    </div>

</div>

<script>
  document.querySelectorAll('.jw-html5-carousel').forEach(function(carousel) {
      var images = Array.from(carousel.querySelectorAll('img'));
      if(images.length <= 1) return; // Only make a carousel if there's more than 1 image!

// Setup the container
      carousel.style.position = 'relative';
      carousel.style.overflow = 'hidden';
      
      // Create the sliding track
      var track = document.createElement('div');
      track.style.display = 'flex';
      track.style.width = '100%';
      track.style.height = '100%';
      track.style.transition = 'transform 0.4s ease-in-out';
      
      images.forEach(function(img) {
          var slide = document.createElement('div');
          slide.style.flex = '0 0 100%';
          slide.style.width = '100%';
          slide.style.height = '100%';
          img.style.width = '100%';
          img.style.height = '100%';
          img.style.objectFit = 'cover';
          img.style.display = 'block';
          slide.appendChild(img);
          track.appendChild(slide);
      });
      
      carousel.innerHTML = ''; 
      carousel.appendChild(track);

// Create Buttons
      var prevBtn = document.createElement('button');
      prevBtn.innerHTML = '❮';
      prevBtn.className = 'jw-carousel-btn jw-prev';
      
      var nextBtn = document.createElement('button');
      nextBtn.innerHTML = '❯';
      nextBtn.className = 'jw-carousel-btn jw-next';

carousel.appendChild(prevBtn);
      carousel.appendChild(nextBtn);

// Sliding Logic
      var currentIndex = 0;
      
      function updateSlide() {
          track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
      }

prevBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
          updateSlide();
      });

nextBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
          updateSlide();
      });
  });
</script>

Project

Brand Integration

Project Details Client UPSHOT A...

<style>
  /* Blogger Bob's Standard HTML5 Carousel Buttons */
  .jw-html5-carousel {
      width: 100%;
      height: 100%;
      border: 1px solid #000;
      box-sizing: border-box;
  }
  .jw-carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.9);
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      color: #111;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      z-index: 10;
      transition: all 0.2s;
  }
  .jw-carousel-btn:hover {
      background: #fff;
      transform: translateY(-50%) scale(1.1);
  }
  .jw-carousel-btn.jw-prev { left: 10px; }
  .jw-carousel-btn.jw-next { right: 10px; }
  
  /* Video Post Styles */
  .custom-video-post {
    width: 100%;
    margin: 20px auto;
    display: block;
  }
  .custom-video-post video {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background: #000;
  }

/* Bob's Responsive Carousel Wrapper */
  .jw-carousel-wrapper {
    width: 100%;
    aspect-ratio: 17 / 11; /* Bob's Fix: Exact 11x17 landscape ratio */
    margin: 30px auto;
    position: relative;
    display: block;
    box-sizing: border-box;
  }
  
  /* Baseline image handling so JS doesn't conflict */
  .jw-html5-carousel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Bob's Fix: Never cut off edges */
    object-position: center !important; /* Bob's Fix: Guarantee dead-center placement */
    background-color: #ffffff !important;
    
    /* BOB'S THEME KILLER: Destroy any secret Blogger theme padding/borders */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

@media (max-width: 768px) {
    /* Bob's Full-Width Breakout Trick for Video */
    .custom-video-post {
      /* Safest mathematically perfect breakout */
      width: 100vw !important;
      max-width: 100vw !important;
      position: relative !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-top: 0;
    }
    .custom-video-post video {
      border-radius: 0; /* Remove rounded corners for edge-to-edge look */
    }

.jw-carousel-wrapper {
      /* Bob's padded breakout trick */
      aspect-ratio: 17 / 11 !important; /* Bob's Fix: Exact 11x17 landscape ratio on mobile too */
      width: calc(100vw - 40px) !important; /* Adds a 20px cushion on the left and right */
      max-width: 100vw !important;
      position: relative !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

.jw-carousel-btn {
      width: 44px; /* Keep large touch target for mobile fingers */
      height: 44px;
      font-size: 24px; /* Slightly larger arrow since there is no circle */
      background: transparent; /* Remove the bulky white background */
      box-shadow: none; /* Remove the button shadow */
      color: #111111; /* Bob's tweak: Dark arrows are easier to see on white architectural drawings! */
      text-shadow: 0 2px 4px rgba(255,255,255,0.8); /* Add white glow so they still pop on dark images */
    }
  }
</style>

<div class="jw-wrapper">
  
  
  <img alt="Project Thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggUqpc7lxLZZhDS0jne2RokAP75GiVwYx0I4QXO_nQNypyNegbRqAhK1UcFWYd2sqKQDq4FRze5OT8rF4zi_OEYagkB1c8gLWbxclhXjcLNa8BIMNjnAYLsQyBDCRP_yCMdzX7BnlMASfMiL1czBbFMfjgPLD01tzUv4VqCbJ64H80PjB8wa-xSAf5lyw/s16000/HappyHourBuffet.png" style="display: none;" />

<div class="custom-video-post" style="margin-bottom: 40px;">
    <video autoplay="" loop="" muted="" playsinline="">
      <source src="https://i.imgur.com/YoRSEpm.mp4" type="video/mp4"></source>
    </video>
  </div>

<div class="jw-grid" style="clear: both; display: flex; flex-wrap: wrap; font-family: Inter, "Segoe UI", Helvetica, Arial, sans-serif; gap: 40px; margin-bottom: 30px;">
    
    
    <div class="jw-meta" style="background-color: #f7f7f7; border-left: 4px solid rgb(0, 0, 0); box-sizing: border-box; flex: 1 1 250px; height: fit-content; max-width: 350px; padding: 30px;">
      <h4 style="color: #888888; font-size: 13px; font-weight: bold; letter-spacing: 1px; margin: 0px 0px 15px; text-transform: uppercase;">Project Details</h4>
      <hr style="border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 0px; border-top: 1px solid rgb(221, 221, 221); border: 0px; margin-bottom: 20px;" />
      
       <div style="margin-bottom: 20px;">
        <span class="jw-label" style="color: #555555; display: block; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; margin-bottom: 5px; text-transform: uppercase;">Client</span>
        <div class="jw-value" style="color: #444444; font-size: 14px;">UPSHOT Agency</div>
      </div>
      
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="color: #555555; display: block; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; margin-bottom: 5px; text-transform: uppercase;">Workplace</span>
        <div class="jw-value" style="color: #444444; font-size: 14px;">UPSHOT Agency</div>
      </div>

<div style="margin-bottom: 20px;">
        <span class="jw-label" style="color: #555555; display: block; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; margin-bottom: 5px; text-transform: uppercase;">Job Title</span>
        <div class="jw-value" style="color: #444444; font-size: 14px;">Sr. Art Director / Environments</div>
      </div>
    
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="color: #555555; display: block; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; margin-bottom: 5px; text-transform: uppercase;">Tools</span>
        <div class="jw-value" style="color: #444444; font-size: 14px;">SketchUp Pro, SketchUp Layout Pro, AutoCAD, Chaos V-Ray, Photoshop, Illustrator</div>
      </div>
      
       <div style="margin-bottom: 20px;">
        <span class="jw-label" style="color: #555555; display: block; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; margin-bottom: 5px; text-transform: uppercase;">Project Work</span>
        <div class="jw-value" style="color: #444444; font-size: 14px;">Environmental Graphic Design, Spatial Branding, Wayfinding, Specification of Finishes (Paint, Vinyl, Wallcoverings), Lighting/Projection Conceptualization, and Architectural Integration</div>
      </div>
    </div>

<div class="jw-content" style="flex: 2 1 400px;">
      <h2 style="color: #111111; font-size: 32px; font-weight: 300; letter-spacing: 2px; margin: 0px 0px 20px; text-transform: uppercase;">Workplace Refresh</h2>
      
      
     <p>Tasked with bringing the new Upshot brand assets to life within the physical workplace, a comprehensive environmental design strategy was developed. The project required translating 2D brand elements into an immersive 3D spatial experience to engage both employees and visitors across the agency's diverse work and communal areas.</p>

<p><strong>Immersive Entrance & Reception Experience:</strong> A dynamic first impression was engineered by applying double-sided, die-cut vinyl graphics to the curved glass at the front entrance. For the main reception wall, a striking dimensional logo was conceptualized using wall-mounted individual letters, featuring a dynamic "O" designed to be either illuminated or animated via projection.</p>

<p><strong>Large-Scale Environmental Typography:</strong> Core brand mantras were seamlessly integrated into the office architecture using bold, die-cut vinyl graphics and full-surface wallcoverings. Prominently featured messaging included "DO WHAT excites YOU" on the Corridor Brand Wall, and "we create brand excitement" across multiple touchpoints, including the Pantry Wall and the translucent panels at "The Source".</p>

<p><strong>Creative Lighting & Digital Integration:</strong> Physical and digital branding were merged by integrating a wall-mounted digital display into a structural column, surrounded by complementary graphics. Additionally, a dedicated "Projection Wall" was designed in the corridor, specifying new ellipsoidal lighting to cast dynamic colored shadows across the space.</p>

<p><strong>Thematic Communal Zones:</strong> Collaborative spaces such as the "Happy Hour" stage, the Servery, and "The Source" were activated with custom brand lockups (including specific "UPSHOT AGENCY" and "the source" designs) and large-scale printed graphics tailored to the unique function of each area.</p>

<p><strong>Strategic Material & Finish Planning:</strong> A unified paint and finish schedule was developed to serve as a clean canvas for the brand elements. This included a crisp white primary wall color (Benjamin Moore Super Spec Latex Eggshell in White) to make the graphics pop, paired with a secondary accent color to highlight specific architectural features like the wooden reception desk and the Corridor Trophy Wall shelving.</p>
    </div>
  </div>

<div class="jw-carousel-wrapper">
    <div class="jw-html5-carousel">
      
      <img alt="Project Shot 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlE8FpOOZHI3iDCDnZQ2CsvYN5MN-FgQ-QjUgf4wdeLA8wSUKkGmd05pfRDF4Hl-kAjs3fsQXG2xA_kcl1xl6ynydXrLMOrKwHsRGAdwNOvCiObIB9h1LcAa42lFXYXA2eo1IttjYwsx90eaWWG74-xHPWkd2gFCSjo_6EJD1FDbQ0HUP6bf6sOByjxkg/s16000/_00_CoverSheet_00.png" />
      
      <img alt="Project Shot 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHi4hpH8gfPdrmaHu6cMub9gpSl-KVXR8XR1WLvXduFp7x9-3mGtqmcgHcStej_RpfNVP_U0YBLZnpF7Aqw_iCjFJvqj8tio8_JGEpYz1a0TID-O28QhGUiljXBQSeMi37i_eAhyphenhyphenkoUGYSHk5efZUnRTjOp-n9JpXzTudGEOgWWLjwT5fwdOBLgxvU1qc/s16000/_01_AreasOfWork_01.png" />
      
      <img alt="Project Shot 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPgdM197H9AItmGhu8HcHVWEjIosJ-bo1-hV6TiLhQd_MeWzxg1nBqFK8I4IfG5tEYjyvjQgke0YRwzdaT217ixg4yE2_WFtrcaSfjwL56a8oMC4FfNexm-VGk0pZtM75efKJkpf1RNBpw1IBw_4kSv9tiOaOcJLBc8jkhrvLyib60eP2GcOyNXQ2Waho/s16000/_02_FinishPlan_02.png" />
      
      <img alt="Project Shot 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguAB75A2aeAb05L_dUXUtW-GPM6AACqFIxzqXAny5r73TK5mUiZChKJzWkafBA5sRv88bL9bg35-fZorIzjamanCac2IzqM7UWBCbFgmFTQeNPDekXyKqF2RsDO69XWIvWgh8X-6EyXMc0VxFcnisBoFpb5IWVSMbFRgN473Z14LfgfZ3yxMic62_zyEg/s16000/_03_Reception_03.png" />
      
      <img alt="Project Shot 5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNtuCg2axs3UdRUF51oa-RJtAiOskihld7CjUEZmvtqzxUyNK_JTOenMSdPBYyS3Hu3uaoRk2Y-0DnZnY7QRClPYAan5oLeWc8eXiApN8nZs-9k3HRYtI1MTQ0RPsUkjrORqdx6-fxxQFlrrpXgw6A9kC2JTfThUnUDdEz3r6l0MvU8tvl5dExbts7z18/s16000/_04_Reception_Elevations_04.png" />
      
      <img alt="Project Shot 6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JjBTxdTO4Epi42LcH7Wsvi3YK5kaOoXfEoPXkKZABkfzsJTr5n3Hg-TVLyC_f9zDdWoO8haDdVZpatHBrz1FB2wJ17XPsqKNOkLTmYU-DPPjLoesljqdKsPnobgvKK2mbtghXDq6OkwRbXh1jdX7MiwjRidBZ1gEessVgox3rBiMUIjyA1BJNibRNIM/s16000/_05_Receptioin%20Right_Elevations_05.png" />
      
      <img alt="Project Shot 7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMAmGKln7tZfZrycn45p1i_p7HAWw0SnCMeIXOBXE3j2r6rclSiOM7oEojsL3z7MAawSmbI4xzRG6JUejzP-fpBvJ-Q_e2M1n8SAoWAIGr9VYLiuYyfOdzbdKU9sHTDUP-moLbl-173iKf-WD_epEmO36mqFxjekoI8QaEX0tfgbS1ljPn3As8TVkiamQ/s16000/_06_ReceptionRearElevations_06.png" />
      
      <img alt="Project Shot 8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG48sBJ4f1_hYtVUo2Lc5o0kPTbgAUDvnuF1m6EQawAk70tsTlzmfL_l2MTd2Gy0RVlJhbCh88OuaQ3LEMe-WwaiJ_VggvC9nWxaDzfZi-UMh_hRb4YJveCJs-Sr6-BgW-yFVR1Jm-AyKXiptzPcZsZq9imJBCvx3gI8O7pzpdmNqMbGAygE6Nb_uX1ls/s16000/_07_ReceptionDesl_07.png" />
      
      <img alt="Project Shot 9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIdfTwaN9b8_as2qiNOrJCHCZH8SFBi8RSC8hx0EGE93hde81M0m8tsIms7FEd9xn9tOOjxWmuYVyB3nlCnXc8vdpwHCcVB3hz84HMyJ7kce89FO_MislsIXnMPZh578AfkJE1vUyp4DWYMKCqJ34njHYm31Fnm6zA_OsNwOQWnqzranzxMcLIrrzfRQo/s16000/_08_CorridorWall_08.png" />
      
      <img alt="Project Shot 10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh84Vox9v28N_9UJwPSXU-UlWATiUxcN7aTKHe1aoBy1OBoGgeBdwB6UeIYJP92NXOQNGF6XS2R9tricU3BOPnXu-v_7GijCd1KCb-SQaRP_yHxjEG8irzEn6uhy0uOowKnshA_wQlwP3omU-YqjDRU65ArpcsMIEruhzFeHZ-DD8gOPaceLLF_uAKgkkI/s16000/_09_CorridorColumn_09.png" />
      
      <img alt="Project Shot 11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ8NWQdohQzxq1-xHzeF0zI1ebijSQutUQzUgr4JEIjrutS8LMy1lgJ1iEVeHoPhR5XLxd0WseCnSM_IDOGzpkwG078vOn3NuY8SSuMwWuH5ZYe5QoLfndZkiH5sDT3P1hWUp_tBHn4gtx4whvsfBgGqMCVPZrx9hWgaKvFsikSujNkbuNFWi9hO9QI6E/s16000/_10_CorridorRear_10.png" />
      
      <img alt="Project Shot 12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUbQ-3UCPzisabpid6iQqFAjDkKbZKbO6T2k7BiUXQsAh-d5kV_h-ASncDgp6ASFVIEsXWgaAZDO1h6iTfzv85urlC7RYVSpzpi-aiu-uMgs2LsJRVNLdRTcGXi7J6Fhcmo_kK6K90g5KGN1vOX4rSrZ2IkOmufCowi3um4WPANMX7h2h3-wOAOnO1IWc/s16000/_11_CorridorRearB_11.png" />
      
      <img alt="Project Shot 13" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD3g8Oxl95aHinjd4FhtawEQVSPu3cD64eJrnIkYrdMlHQmTRayCM-hLf2Da-5UsMOwkJOVigGkU7PXF5Qy64qFNon8V5ulKYOuMDe7ugSnvx8IbikMTIY2onoWQQvgWRpQQ-J-m9UcV9O7FMWR9A-lupUKKPdaYqIZJTKjC5Qu50_F7PI1K4pkgSo6kE/s16000/_12_CorridorRearC_12.png" />
      
      <img alt="Project Shot 14" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOz9YIALP0qRapKyYO2DCVIymA65ggcM9yMguhFZm4kbAOGjhjwVQTNxAZsAIbn1Sh186wrhZy7mlfbtaBWOQSt8-sEXQYiA3L8v_DWhqPhm4zZtVSM_SBIjovj6Q0k9y4J1B2fxY1H9O5ZTd8-DqGf-RVWNGTet639wzceogYGehDC9ObTFtPQgjsjhA/s16000/_13_BuffetCorridor_13.png" />
      
      <img alt="Project Shot 15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcDBqRY7OSD9U2Sef2mJQFXsuA8WTovSDV9jAJsp9ZVthgrAOZb9JKXNLV4qzfPfhp1E0gTNa6xKqIoml0q8Hm5n-c4bBN2EvObsU2niHanb4F1SNsa7ctXzSfRYu3fQh0ZO8xGki3YqolNi2W-1kePtZ0Q4vqB-2bgPPr5u8D5ypxztDl0U2R4yOuiFU/s16000/_14_HappyHour_14.png" />
      
      <img alt="Project Shot 16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiihm5qnuty0-c_xj8082HxUf1pmG7jmGIV-AZbXacQXvZOZ6uT5gPrjq_9Ub22iFbmMeLiqJrKQGhpLcxakhmz-Rt3onlpjcTAORIHsv67yRhuI9P06yWiVJSUYoSdbnLXFmBuAPseLBFygYUu9-BTE1fyiKqcUgxVA4LXjtGgcPivuRjyNImcpi_n5aM/s16000/_15_BuffetCorridorB_15.png" />
    </div>
  </div>

// Setup the container
      carousel.style.position = 'relative';
      carousel.style.overflow = 'hidden';
      
      // Create the sliding track
      var track = document.createElement('div');
      track.style.display = 'flex';
      track.style.width = '100%';
      track.style.height = '100%';
      track.style.transition = 'transform 0.4s ease-in-out';
      
      images.forEach(function(img) {
          var slide = document.createElement('div');
          slide.style.flex = '0 0 100%';
          slide.style.width = '100%';
          slide.style.height = '100%';
          slide.style.boxSizing = 'border-box';
          img.style.width = '100%';
          img.style.height = '100%';
          img.style.display = 'block';
          slide.appendChild(img);
          track.appendChild(slide);
      });
      
      carousel.innerHTML = ''; 
      carousel.appendChild(track);

carousel.appendChild(prevBtn);
      carousel.appendChild(nextBtn);

// Sliding Logic
      var currentIndex = 0;
      
      function updateSlide() {
          track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
      }

prevBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
          updateSlide();
      });

Project

Cooking School

Project Details Client Knox Bread ...

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 40px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cDt4YwcKAC1LzkK-xH_q54KLQMPaSWHDHKrVyxWwdIqVm4KJZApoaLX0VWzk-l6vFsanr2pMim8VGp0N7LnZgEtvUpIgFsiAmaMXW4rK08lWVx0ypcPe867PkKsbBeYslLwLKCxQbihponAGlAS25GCruOu4QMbcbceupl82BVvuaD2MmKFkdtLWAZE/s16000/BN-CC%20Presentation-1.webp" style="display: block; height: auto; object-fit: cover; width: 100%; border: 1px solid #000; box-sizing: border-box;" />
  </div>

<div class="jw-grid" style="clear: both; display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 30px; font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;">
    
    
    <div class="jw-meta" style="flex: 1 1 250px; background-color: #f7f7f7; border-left: 4px solid #000; padding: 30px; box-sizing: border-box; height: fit-content; max-width: 350px;">
      <h4 style="margin: 0 0 15px 0; font-size: 13px; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: 1px;">Project Details</h4>
      <hr style="border: 0; border-top: 1px solid #ddd; margin-bottom: 20px;" />
      
       <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Client</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">Knox Bread</div>
      </div>
      
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Workplace</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">John Riley Design</div>
      </div>

<div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Role</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">Designer</div>
      </div>
    
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Tools</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">SketchUp Pro, SketchUp Layout Pro, AuotCAD, Chaos V-Ray, Photoshop, Illustrator</div>
      </div>
    </div>

<div class="jw-content" style="flex: 2 1 400px;">
      <h2 style="margin: 0 0 20px 0; font-size: 32px; font-weight: 300; color: #111; text-transform: uppercase; letter-spacing: 2px;">Comprehensive Design</h2>
      
      
      <p style="line-height: 1.6; margin-bottom: 25px; font-size: 18px; font-weight: 300; color: #444;">
        This project represented the second phase of growth for a neighborhood café and bakery, requiring a sophisticated balance of creative value engineering and technical planning. As the lead designer, I managed the end-to-end development process, serving as the bridge between the client’s operational needs and the final architectural design.
      </p>
      
      <p style="line-height: 1.6; margin-bottom: 25px; font-size: 18px; font-weight: 300; color: #444;">
        <strong style="font-weight: 700; color: #000;">Comprehensive Space Planning & Site Survey:</strong> Conducted a site survey to document existing conditions, followed by strategic space planning and programming to maximize flow, student capacity, and operational efficiency.
      </p>

<p style="line-height: 1.6; margin-bottom: 25px; font-size: 18px; font-weight: 300; color: #444;">
        <strong style="font-weight: 700; color: #000;">Detailed 3D Modeling & Visualization:</strong> Developed 3D models rendered visualizations for client alighment.
      </p>

<p style="line-height: 1.6; margin-bottom: 25px; font-size: 18px; font-weight: 300; color: #444;">
        <strong style="font-weight: 700; color: #000;">Fixture & Millwork Design:</strong> Custom-designed student and instructor work stations, work tables, carts, and perimeter fixtures for food washing, cooling, and baking. 
      </p>

</div>
  </div>
  
</div>

carousel.appendChild(prevBtn);
      carousel.appendChild(nextBtn);

// Sliding Logic
      var currentIndex = 0;
      
      function updateSlide() {
          track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
      }

prevBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
          updateSlide();
      });

Project

Custom Millwork and Fixtures

Project Details Client Strategic Hotels ...

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 60px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsf2OA7tmrPx2IiYhvnOgqUfk13U5xVSS7RrI-qxI8c1YQowQf2VbkMdesaSh-7bsRxfuNsM_2a-yRLdf4JqwQaxgEEaiuXISERK5AnBgCBwQ6CmGim-XJFpx9CUoL2uIJQFJTAo05U0a_oi85QFSka2i1HwrbidQriGJVhZL3Zskgmyf3J2q4gikkc8s/s16000/TheDelHeroImage.jpg" style="display: block; height: auto; object-fit: cover; width: 100%;" />
  </div>

<div class="jw-grid" style="clear: both; display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 30px; font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;">
    
    
    <div class="jw-meta" style="flex: 1 1 250px; background-color: #f7f7f7; border-left: 4px solid #000; padding: 30px; box-sizing: border-box; height: fit-content; max-width: 350px;">
      <h4 style="margin: 0 0 15px 0; font-size: 13px; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: 1px;">Project Details</h4>
      <hr style="border: 0; border-top: 1px solid #ddd; margin-bottom: 20px;" />
      
       <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Client</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">Strategic Hotels</div>
      </div>
      
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Workplace</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">Gensler</div>
      </div>

<div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Job Title</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">Designer</div>
      </div>
    
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Tools</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">AuotCAD</div>
      </div>
    </div>

<div class="jw-content">
      <h2>Technical Drawings and Details</h2>
      <p>Served as the technical design lead for the fixtuers and millwork design and detailing during the restoration and renovation of two distinct retail spaces within a historic hotel. Working under the direction of the principle designer and in close coordination with the third-party retail operator, I translated the overarching retail strategy into a highly functional environment.</p> 
      <p>A major focus of this project was engineering the custom millwork and fixtures to meet strict, high-volume visual merchandising guidelines and specific day-to-day operational requirements.</p>
      <p>Created millwork and fixture detailing documentation from design development through bidding, and final construction documents.</p>
    </div>
  </div>

<div class="jw-gallery">
    
    <div class="jw-gallery-col">
      <div class="jw-square-container">
        <div class="jw-hero-item-inner" style="overflow: hidden;">
          
          
          <div class="jw-html5-carousel">
            
            
            <img alt="Carousel 1A" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3RHxKZoXA3kn9FPzexY9X3ZLLtt1M2mFblELXohhNrR5D7RzIA9XY1Y9OUaj-2kJbDbi11ww14dTzwxvoyhqA42whmiRW0zkxJDtjRNCScJnpVTi0BoMlogaKnsV_bo341yFxWV4OBQntaqA20sA-O4NsTqKShkU-QxTh2K4ell3HZ4kEPBzvpp7VqZU/s16000/SignatureShop_17.jpg" />
            <img alt="Carousel 1B" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs5zPTYzC7DrfDFzlolEd7Q06vZjzsl0WX3-VfRjIO2bPVuKCzcatFOAermS6L9_kjiCFmfnCgpNDlskPxg17jG76y5kmiZaTXP_gZ_E-q21IgLSQmS_xRqj5nkKXIOiGz2AddGAxvJFP9aKs6nGaK1weDFieEoR9GCw_UEMhMvfvx_nD04aJOrbibXn8/s16000/SignatureShop_08.jpg" />
            <img alt="Carousel 1C" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoQNstaVVVPpMfc_N8BM7Zp6rPyDAovmCKRu42Kltb0_5WdqEYUBmJm7D-wvwYU_au-Qt3H48-BoY-wj2K58w7gq3e8XyijLB9PqZ08pccEZdMYTOy86Uyto7mM_6iOj4nFXOf-0DIx2xEMZM55GEw8E6MkMrqZkGiqMGRKZksZwAVQwnNTggu0hhlLdM/s1600/SignatureShop_07.jpg" />
            
            <img alt="Carousel 1D" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglVyvMgPrVsLSkImAdrn0NkPP9xCNbcWUvXhaHhFr-zRR4P87hyphenhyphenQvgwnYyN8oavwOk3HTtcoeChudvBDwR6wNuyZ0YwoDPkDaVFIP-Ij61m56TtcDX3hVrfxSa-Vs9eBpa_aHIvegq_yN0cCNMmDSVEIxZzdM27fNx02gPlUZQqgjT66tHGqOSHhpspbs/s16000/SignatureShop_09.jpg" />
          </div>

</div>
      </div>
    </div>
    
    <div class="jw-gallery-col">
      <div class="jw-square-container">
        <div class="jw-hero-item-inner" style="overflow: hidden;">
          
          
          <div class="jw-html5-carousel">
            
            <img alt="Carousel 2A" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hffocVRqnTWXfM31r-GN3kBI7Jv3tuWgeWs7aLrK8ac5EUTQ8jpurkXSm8sqQ2IWM056JFoKHJgtiY5yqz0aiYvf_aCLvtnfJOW0Dp4l_bKqNN-QO5BfrH1b0pU0-8v-bvfQACYoa50km1oisp16zQ2skivIbcOEx2KfLHyKt6w_LZhzMkuRQH6B3n4/s16000/SignatureShop_06.jpg" />
            <img alt="Carousel 2B" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr8mwIWFfHQkHDENWXFFLGD04aC7dRQGdX0xs6Xlrk2o5MGylG2tFE9o45lSFswyMWXk87fgtNphKETYx6MEqN65fSNDIVVbwyTMyzaMokmnTHW5OKXx2fqwIpqmQEH81QnYJnHMbV8P_9DbYgyc9L22ztNC37ztVgyPafOVLMgDJw_qPh3a-rR3ebWfE/s16000/SignatureShop_10.jpg" />
          </div>

</div>
      </div>
    </div>

</div>
  
</div>

carousel.appendChild(prevBtn);
      carousel.appendChild(nextBtn);

// Sliding Logic
      var currentIndex = 0;
      
      function updateSlide() {
          track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
      }

prevBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
          updateSlide();
      });

Project

Brand Shop In Shop

Project Details Client Private Workplace UPSHOT Agency ...

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 60px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzHA6cGWvdRm7WEUd_6UrAZPN02WnHRsaN1TKjz7BkP2hk5uusd-nBT_dRSWquunIlmWXdL-f8eFKwJPlZFS4l1eBV6lfMZMkkVkRqDRdT5ygVbJ-metm1I7iFJPH3kGDbcFHesNH2WlAVe2rEuuWCohQzsIH9oEpxYp8h84wocsW4i13QMW8iAad9UGM/s16000/MAXWELLShop.png" style="display: block; height: auto; object-fit: cover; width: 100%;" />
  </div>

<div class="jw-grid" style="margin-top: 0px;">
    
    <div class="jw-meta">
      <h4>Project Details</h4>
      <span class="jw-label">Client</span>
      <div class="jw-value">Private</div><br />
       <span class="jw-label">Workplace</span>
      <div class="jw-value">UPSHOT Agency</div><br />
      <span class="jw-label">Job Title</span>
      <div class="jw-value">Sr. Art Director / Environments</div><br />
       <span class="jw-label">Tools</span>
      <div class="jw-value">SketchUp Pro, SketchUp Layout Pro, Chaos V-Ray, Photoshop, Illustrator</div><br />
      <span class="jw-label">Project Work</span>
      <div class="jw-value">Creative Direction, 3D Modeling and Rendering Visualization, Art Integration, Art Director Coordination.</div><br />
    </div>
    
    <div class="jw-content">
      <h2>Immersive Brand Activation</h2>
           <p>Concepted a brand activation for a premium outdoor shoe and apparel label within a major sporting goods retailer.
</p>
 		<p>The branded selling environment was to also be a primary destination for the local hiking and biking communities.
</p>
     </div>
  </div>

</div>

carousel.appendChild(prevBtn);
      carousel.appendChild(nextBtn);

// Sliding Logic
      var currentIndex = 0;
      
      function updateSlide() {
          track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
      }

prevBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
          updateSlide();
      });

Project

Store Planning & Design

Project Details Workplace ULTA Beauty My Title Design Manager ...

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 60px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBf4v6Pqh0CWCIeOZHaaCXvR1joNaqE53iRZ0-VtbBg52sv1mGXABtz6Laj_ir6GxicUZ-CfEO1Ie2_BsCynfBHJak_VyxjevZcodZrp465_nlK3XxHiHij0w8XhhjSsirrQ6HJTRdyF7_7LVEo6uH1AX0wAQn8yI9cYvYxP8uENOH-rIx0vTvqn0uljA/s16000/ULTA_Storefront_New.jpg" style="width: 100%; height: auto; display: block; object-fit: cover;" />
  </div>

<div class="jw-grid" style="margin-top: 0;">
    
    <div class="jw-meta">
      <h4>Project Details</h4>
      <span class="jw-label">Workplace</span>
      <div class="jw-value">ULTA Beauty</div><br/>
      <span class="jw-label">My Title</span>
      <div class="jw-value">Design Manager</div><br/>
      <span class="jw-label">Tools</span>
      <div class="jw-value">SketchUp Pro, SketchUp Layout Pro, AutoCAD, Photoshop, Illustrator</div>
    </div>
    
    <div class="jw-content">
      <h2>Design Management</h2>
      <div style="margin-bottom: 20px;">
        <strong style="color: #111111;">Strategic Expansion:</strong> Directed the interior layout and exterior storefront design for 200+ new locations, adapting prototypes to meet specific site conditions, tenant guidelines, and local codes.
      </div>
      <div style="margin-bottom: 20px;">
        <strong style="color: #111111;">Concept Presentations:</strong> Presented architectural floor plans, merchandising strategies, and proposed storefront visuals to the CEO and executive team for the design and planning phase final sign off.
      </div>
      <div style="margin-bottom: 20px;">
        <strong style="color: #111111;">Essential Alignment:</strong> Engineered and populated a central database of 100,000+ physical store attributes across 1,000+ locations. This "single source of truth" synchronized the Operations, Marketing, Merchandising, and Construction departments, driving a consistent and successful in-store guest experience.
      </div>
    </div>
  </div>

<div class="jw-html5-carousel">
    
    <img alt="Project Shot 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXnpv82DVWvZoCgdxNRyqEWjay6HIN2CsASPFyVtQEe0kj5XBjxgXAwUooqpoJn7HdCgUaBEpFgiaHSFJ21B9sJQDxCMZ2TdtaM5Wwhwd54OaPg_x-nFy5P_svTJNJbTxhKjAOL9_M3MUEeHM7B4ZbOF9BNj4g_XaesfcwuVYeQvET9MHthUnKtB2gsLc/s16000/TX%20store%20shot.jpg" />
    <img alt="Project Shot 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjAwxzFNbxzdFzILguENkX_C59GILudtP6uzzCXYVidJ7FuzH8Xlt2BrsMueBqZhYIktWlmN7nSFSmSoNHOb77dH3ltpBcrXvWyTPkXhPyHHLX8OUTomjXS4_J29FXTFHwC3w1C5rzi4ER7fK9eito8nK6_kYnjU4cMkk_tRyr3uBcgxZAl3KTCCwBis/s16000/ULTA_Storefront_03.jpg" />
    <img alt="Project Shot 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFadsyHtuRURro85uMOuRjAnJITJccIstDVFKZCc-kUFg5unBNnmKpO_5-MLk2N9NUA_Lo5JqIJ64raxNSIfZvnA994CsoDvfPaR1kIDgPGpsf2-dxSwdXOj-kMIh7gkn7kZPBugysGkK-ea99UCy5UyUkPfXY-D1pzIsXcR-pvS7M1Y83lEfkmp6Ts-k/s16000/ULTA_Storefront_04.jpg" />
  </div>

</div>

<script>
  // Bob's Note: Moved script outside the wrapper for cleaner DOM execution.
  document.querySelectorAll('.jw-html5-carousel').forEach(function(carousel) {
      var images = Array.from(carousel.querySelectorAll('img'));
      if(images.length <= 1) return;
      
      carousel.style.position = 'relative';
      carousel.style.overflow = 'hidden';
      
      var track = document.createElement('div');
      track.style.display = 'flex';
      track.style.width = '100%';
      track.style.height = '100%';
      track.style.transition = 'transform 0.4s ease-in-out';
      
      images.forEach(function(img) {
          var slide = document.createElement('div');
          slide.style.flex = '0 0 100%';
          slide.style.width = '100%';
          slide.style.height = '100%';
          
          img.style.width = '100%';
          img.style.height = '100%';
          img.style.objectFit = 'cover';
          img.style.display = 'block';
          
          slide.appendChild(img);
          track.appendChild(slide);
      });
      
      carousel.innerHTML = ''; 
      carousel.appendChild(track);
      
      var prevBtn = document.createElement('button');
      prevBtn.innerHTML = '❮';
      prevBtn.className = 'jw-carousel-btn jw-prev';
      
      var nextBtn = document.createElement('button');
      nextBtn.innerHTML = '❯';
      nextBtn.className = 'jw-carousel-btn jw-next';
      
      carousel.appendChild(prevBtn);
      carousel.appendChild(nextBtn);
      
      var currentIndex = 0;
      
      function updateSlide() {
          track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
      }
      
      prevBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
          updateSlide();
      });
      
      nextBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
          updateSlide();
      });
  });
</script>

Project

Experiential Retail

Project Details Client Experience Enterprises Inc. ...

/* Bob's fix to ensure columns side-by-side on desktop */
  .jw-gallery {
      display: flex; 
      gap: 20px; 
      margin-bottom: 40px;
      clear: both;
  }
  .jw-gallery-col {
      flex: 1;
      min-width: 0;
  }
  @media (max-width: 768px) {
      .jw-gallery {
          flex-direction: column;
      }
  }

/* Bob's Blogger BR Nuke: Destroys invisible line breaks Blogger adds */
  .jw-wrapper > br, .jw-wrapper > p:empty, .jw-grid > br, .jw-gallery > br, .jw-gallery-col > br { display: none !important; margin: 0; padding: 0; }
</style>

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 40px;">
    <img alt="Raceline Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBs2vstAeShhgNtDvoalMtasBew4bSBdhBWDFFFxRYPPv1Z8mVq3V32oWaa_97V234Zr2sG5FwAGCYH_AfErb4xSRaLM-bbB4g_KL2Wh9Sf6GnRIGIzGK6vPpvabcXtlPS75Trfs52PP_-h8Z26GVHhThDUbwKwlqHEIvGLt8rB3Dy37YSBl4VU-X2SYc/s16000/Raceline02.jpg" style="display: block; height: auto; object-fit: cover; width: 100%; border: 1px solid #000; box-sizing: border-box;" />
  </div>

<div class="jw-grid" style="clear: both; display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;">
    
    
    <div class="jw-meta" style="flex: 1 1 250px; background-color: #f7f7f7; border-left: 4px solid #000; padding: 30px; box-sizing: border-box; height: fit-content; max-width: 350px;">
      <h4 style="margin: 0 0 15px 0; font-size: 13px; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: 1px;">Project Details</h4>
      <hr style="border: 0; border-top: 1px solid #ddd; margin-bottom: 20px;" />
      
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Client</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">Experience Enterprises Inc.</div>
      </div>
      
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Workplace</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">Gensler</div>
      </div>

<div>
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Project Work</span>
        <div class="jw-value" style="font-size: 14px; color: #444; line-height: 1.5;">Concept & branding development, 3D visualization, fixture design, store design development, construction documentation, construction administration, visual merchandising</div>
      </div>
    </div>

<div class="jw-content" style="flex: 2 1 400px;">
      <h2 style="margin: 0 0 20px 0; font-size: 32px; font-weight: 300; color: #111; text-transform: uppercase; letter-spacing: 2px;">Brand Creation</h2>
      
      <p style="line-height: 1.6; margin-bottom: 25px; font-size: 18px; font-weight: 300; color: #444;">
        New brand and experiential retail concept allowing guests to design, build, and race remote-controlled vehicles on large indoor tracks, similar to the "Build-A-Bear" business model.
      </p>
    </div>
  </div>

<div style="margin-bottom: 40px;">
    <img alt="Raceline Secondary Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6gs3TGus_Boz8e_6a0RO268vD8m51aHUVhsBcyANVbhWHSjYQGsgn8qpjne5Bw-khf3LrLcAwweR_M9hCqGnYCFL-SxwmkK5weyYzYyhYT8jVepEgJVXilCtsQpbWyzLvNxYz3O49aYh9jdVlcY1QRgEeSOrkQFYIsjvQtfr3bBY3T2JdiEY2NJibZM/s16000/Raceline01.jpg" style="display: block; height: auto; object-fit: cover; width: 100%; border: 1px solid #000; box-sizing: border-box;" />
  </div>
  
</div>

carousel.appendChild(prevBtn);
      carousel.appendChild(nextBtn);

// Sliding Logic
      var currentIndex = 0;
      
      function updateSlide() {
          track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
      }

prevBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
          updateSlide();
      });

Project

Food & Beverage

Project Details Client Knox Bread ...

<style>
  /* Blogger Bob's Standard HTML5 Carousel Buttons */
  .jw-html5-carousel {
      width: 100%;
      /* Bob's Trick: Added an aspect ratio so the carousel doesn't collapse to 0px height */
      aspect-ratio: 7 / 5; 
      margin-bottom: 40px;
      border: 1px solid #000; /* Bob's Edit: Added a 1pt black line outline */
  }
  .jw-carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.9);
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      color: #111;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      z-index: 10;
      transition: all 0.2s;
  }
  .jw-carousel-btn:hover {
      background: #fff;
      transform: translateY(-50%) scale(1.1);
  }
  .jw-carousel-btn.jw-prev { left: 10px; }
  .jw-carousel-btn.jw-next { right: 10px; }
  
  /* Bob's fix to ensure columns side-by-side on desktop */
  .jw-gallery {
      display: flex; 
      gap: 20px; 
      margin-bottom: 40px; /* Reduced from 60px for tighter fit */
      clear: both;
  }
  .jw-gallery-col {
      flex: 1;
      min-width: 0;
  }
  @media (max-width: 768px) {
      .jw-gallery {
          flex-direction: column;
      }
  }

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 40px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrAKvOMjFzQmzdGKjulAor0ECrQ0eJD7iwW96Y46tzdULqZuk54_sOG20_aeUvYwZtokbq097GdoJ8HthPaFdHezFIAwNUhB8AjGuH8pWW0TrOFI67-D3gC0QQMTBki_3jVRQimUFCjy1YfJhEsgDhyZ6JfLr_Etmy5URBmVCncvwLqw1ASBBmwb12n7U/s16000/BN_01.jpg" style="display: block; height: auto; max-width: 100%; object-fit: cover; width: 100%; border: 1px solid #000; box-sizing: border-box;" />
  </div>

<div class="jw-grid" style="clear: both; display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;">
    
    
    <div class="jw-meta" style="flex: 1 1 250px; background-color: #f7f7f7; border-left: 4px solid #000; padding: 30px; box-sizing: border-box; height: fit-content; max-width: 350px;">
      <h4 style="margin: 0 0 15px 0; font-size: 13px; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: 1px;">Project Details</h4>
      <hr style="border: 0; border-top: 1px solid #ddd; margin-bottom: 20px;" />
      
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Client</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">Knox Bread</div>
      </div>
      
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Workplace</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">John Riley Design</div>
      </div>

<div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Job Title</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">Designer</div>
      </div>
    
      <div style="margin-bottom: 20px;">
        <span class="jw-label" style="display: block; font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px;">Tools</span>
        <div class="jw-value" style="font-size: 14px; color: #444;">SketchUp Pro, SketchUp Layout Pro, AuotCAD, Chaos V-Ray, Photoshop, Illustrator</div>
      </div>
      
    </div>

<p style="line-height: 1.6; margin-bottom: 25px; font-size: 18px; font-weight: 300; color: #444;">
        <strong style="font-weight: 700; color: #000;">Comprehensive Space Planning & Site Surveys:</strong> Conducted site survey to document existing conditions followed by strategic space planning and spatial programing.
      </p>

<p style="line-height: 1.6; margin-bottom: 25px; font-size: 18px; font-weight: 300; color: #444;">
        <strong style="font-weight: 700; color: #000;">Flow Optimization:</strong> Configured costumer flow and path-to-purchase to reduce bottlenecks during peak morning hours.
      </p>

<p style="line-height: 1.6; margin-bottom: 25px; font-size: 18px; font-weight: 300; color: #444;">
        <strong style="font-weight: 700; color: #000;">Detailed 3D Modeling & Visualization:</strong> Developed 3D models visualizations instrumental in aligning the client with the final design.
      </p>

<p style="line-height: 1.6; margin-bottom: 25px; font-size: 18px; font-weight: 300; color: #444;">
        <strong style="font-weight: 700; color: #000;">Fixture & Millwork Design:</strong> Custom-designed retail fixtures and service counters tailored to the bakery’s specific merchandising and budget requirements, focusing on both product visibility and durability in a high-traffic environment.
      </p>

<p style="line-height: 1.6; margin-bottom: 25px; font-size: 18px; font-weight: 300; color: #444;">
        <strong style="font-weight: 700; color: #000;">Technical Coordination & Documentation:</strong> Produced a full Design Development (DD) package for seamless hand-off to the Architect of Record.</p>
    </div>     
        
   
  <div style="margin-bottom: 40px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPK3i3sFTKc8fgrhQ2fDxxKucpTa7gr45mW1I7Cx30dT4USAw1JIAMQvXH3s4tD9qHEaikzT0hhd_14jc3CrzxLSI8blDD0VE6Mz23WNFix2QgbM7oF6cZBlF87aluxZQyxEBeTcu2hv2FFFnhNve31DiQX9bsrwkkFbSYILBEyIGKsQ3eknyadOgTmFI/s16000/BN_02.jpg" style="display: block; height: auto; max-width: 100%; object-fit: cover; width: 100%; border: 1px solid #000; box-sizing: border-box;" />
  </div>

Project

Retail Rollout

Project Details Workplace Gensler Job Title Design...

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 60px;">
    
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRtxiKOUubpHwBHMjXDaP3ehWKAZ7Uf10AUkeqdpko7L3xNHI6nFMsZLcaUNt1_R0oQqHnun1tVxMuf1fU6UsHvDk4zY0GHO-I1qpXdLOS_WWoYwPw5z47Y3Zg4AVQNuRy7H3hWWYBWT8Pweh5rYIilErWmEmGFuvSiiMn5BJ5ktyoMo2a8bn_-Zjj2Uk/s16000/Brands%20copy_02.webp" style="display: block; height: auto; object-fit: cover; width: 100%; border: 1px solid black; box-sizing: border-box;" />
  </div>

<div style="align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 1.5em;">
    <div>
      <strong>Gap Inc</strong><br />
      <span style="display: block; padding-left: 20px;">Gap</span>
      <span style="display: block; padding-left: 20px;">Banana Republic</span>
      <span style="display: block; padding-left: 20px;">Old Navy</span>
    </div>
    <div style="white-space: nowrap;">6,000-18,000 sf</div>
  </div>

<div style="align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 1.5em;">
    <div>
    <strong>Bank of America</strong><br />
       <span style="display: block; padding-left: 20px;">Retail Banking Facilities</span>
    <span style="display: block; padding-left: 20px;">ATM Facilities</span>
  </div>
  <div style="white-space: nowrap;">1,000-4,500 sf</div>
   </div>
  <div style="align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 1.5em;">
    <div>
      <strong>Raceline Motorworks</strong><br />
      <span style="display: block; padding-left: 20px;">Multiple Locations</span>
    </div>
    <div style="white-space: nowrap;">4,500-5,000 sf</div>
  </div>

<div style="align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 1.5em;">
    <div>
      <strong>Strategic Hotels</strong><br />
      <span style="display: block; padding-left: 20px;">Retail Boutiques, Multiple Concepts and Locations</span>
    </div>
    <div style="white-space: nowrap;">1,000-2,500 sf</div>
  </div>
  
 <div style="align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 1.5em;">
    <div>
      <strong>Victoria's Secret Pink</strong><br />
      <span style="display: block; padding-left: 20px;">Retail Boutiques, Multiple Locations</span>
    </div>
    <div style="white-space: nowrap;">500-1,000 sf</div>
  </div>

<div style="align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 1.5em;">
    <div>
      <strong>Armani Collezioni</strong><br />
      <span style="display: block; padding-left: 20px;">Retail Department Store Boutiques, Multiple Locations</span>
    </div>
    <div style="white-space: nowrap;">1,000-2,000 sf</div>
  </div>
  
</div>
  
</div>

carousel.appendChild(prevBtn);
      carousel.appendChild(nextBtn);

// Sliding Logic
      var currentIndex = 0;
      
      function updateSlide() {
          track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
      }

prevBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
          updateSlide();
      });

Project

Scenic Design

Project Details Client KVT Theater Job Title Scenic Designer ...

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 60px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi25nuSUZOLe9JoJIwb-vIFqTEytLA6ijL973pTNGn0pAAWFCvMkqS7Tp2cAy8bTY2NDRhGLYeJJ9FABl4V7Ha1nUJ6-Je-S0241hFc1AAWO4BsoSw3sp44tsyZM-lGmzF-R6O4hKDtPxI7ksU6iQEwvIPrpyT-XsKg-Idu4UyrnqNGWz4Wl_Ospsiqtxg/s16000/KVT_HeroImage_00.jpg" style="display: block; height: auto; object-fit: cover; width: 100%;" />
  </div>

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 60px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbsu_jGGLAA0FXGNmydYEhCTIjNt_7GNC1lpiW4uVUbB4HhfoRlUXG2bdWukbone_EXJA2tyc05v_XZhyphenhyphenmZIB9apLXREr-lpya8KQSxnkQZ66kgjoXLgnQPGojWmmnEGCesxBL_IeKy4jYeUmy3zuzwd33cLioRGf7QNR6utAYwEohfvwrHuf8XMNEC0/s16000/01-Godspell.jpg" style="display: block; height: auto; object-fit: cover; width: 100%;" />
  </div>

<div style="margin-bottom: 60px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGDOCw67hgOJX8IdDSEEoT2uk1ZEdTYYfHCpJqYFTDpJyETnXo-Z3D5bAwSRJ7sUUlOt1hfoOXA8Kydiq4G0-xolbIaSe2Zy0NUZ-3KPLaqrTbiXQ1Cmcb94BX7j05l68IIlbLAJ9TvJdXa01AnbkNCaS3HL_HPxn6YHitFlGQmSc96ZnzXuQb5Oxym8/s16000/09-Godspell.jpg" style="display: block; height: auto; object-fit: cover; width: 100%;" />
  </div>

</div>

carousel.appendChild(prevBtn);
      carousel.appendChild(nextBtn);

// Sliding Logic
      var currentIndex = 0;
      
      function updateSlide() {
          track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
      }

prevBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
          updateSlide();
      });

Project

Brand Partnership

Project Details Client Scotts Miracle-Gro Workplace UPSHOT Ag...

<div class="jw-wrapper">
  
  
  <div style="margin-bottom: 60px;">
    
    <img alt="Hero Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxns5W_k45CnRKl_rZMc51sgCs0YdgmLy3m1Ni4OLaf48K__7dzcD1AvRKpFcd6PyNFiUlsVZmv51mH_YAFqqk6csGps26odmA7jGCPgem6QXMVivf-wpBpVToTnwv-A9DhfJ9TdRyVRpKgc3-IzqbAq1pdpMs3ut-a-DOPG1g6H8-GUsaNafqxvJy2U/s16000/SMG_WE_HeroFinal_alt.jpg" style="display: block; height: auto; object-fit: cover; width: 100%;" />
  </div>

<div class="jw-grid" style="margin-top: 0px;">
    
    <div class="jw-meta">
      <h4>Project Details</h4>
      <span class="jw-label">Client</span>
      <div class="jw-value">Scotts Miracle-Gro</div><br />
       <span class="jw-label">Workplace</span>
      <div class="jw-value">UPSHOT Agency</div><br />
      <span class="jw-label">My Title</span>
      <div class="jw-value">Sr. Art Director / Environments</div><br />
      <span class="jw-label">Project Work</span>
      <div class="jw-value">Creative Direction, 3D Modeling and Render Visualization, Art Integration, Art Director Coordination.</div><br />
      <span class="jw-label">Tools</span>
      <div class="jw-value">SketchUp Pro, Chaos V-Ray, Photoshop</div><br />
    </div>
    
    <div class="jw-content">
      <h2>Scotts Miracle-Gro + West Elm</h2>
      <p>A proposal to complete the West Elm indoor plant category by merchandising SMG soil and plant food alongside existing planters and starter plants. 
Developed spatial models and cross-merchandising visuals to validate how utilitarian gardening products could coexist seamlessly within West Elm's elevated store environment.
</p>
     </div>
  </div>

</div>
      </div>
    </div>
    
    <div class="jw-gallery-col">
      <div class="jw-square-container">
        <div class="jw-hero-item-inner" style="overflow: hidden;">
          
          
          <div class="jw-html5-carousel">
            
            <img alt="Carousel 2A" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwNFDZUl9mXG7C2MMWxZirZsJAz-Tw9gmG9PXRcncKe44rUw_r4BrVxlw0WBMVqDbHWh0B-WsHflXoRJE3yS-vIXyf2RAPtJkBbukZno9yHhV4eombZLWsNvdMsOMYnUPtbWqvqnhcvyzX5cuiSd51z5ngDcW1oT9Bh300g-fhc2cLKnczRx4LVJT-A6k/w640-h640/SMGandWE_final2602.jpg" />
            <img alt="Carousel 2B" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0tniBUXveuzvo8dcnVg4GV9Ie7qwM-FghofYSiqNLnOx-m1F8DCvi_zjdJKoSbUXge96N-4LiWvT0Y6lpxXYhzxtfXd6S0Bx28X0_oI2xFE01r-c2M0JTf_vrzRtfZ6mDZPUOGUnQVR2vpMal8qnllaDdvjDdDbCH3qIEq4-Se5fP-me-iqt0pViK1sQ/w640-h640/Terrarium.jpg" />
           
          </div>

</div>
      </div>
    </div>

</div>
  
</div>

carousel.appendChild(prevBtn);
      carousel.appendChild(nextBtn);

// Sliding Logic
      var currentIndex = 0;
      
      function updateSlide() {
          track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
      }

prevBtn.addEventListener('click', function(e) {
          e.preventDefault();
          currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
          updateSlide();
      });

John Whittington

PROFESSIONAL PROFILE

Where it began...

Today...

Professional Expertise

Consumer
Experience

3D Modeling
& Visualization

Retail Design
& Visual Merchandising

Experiential Activation
& Shopper Marketing

TECHNICAL TOOLS

Selected Work

In-Line Brand Shop

Big Box Endcap Activation

Aspirational Brand Experience

Brand Integration

Cooking School

Custom Millwork and Fixtures

Brand Shop In Shop

Store Planning & Design

Experiential Retail

Food & Beverage

Retail Rollout

Scenic Design

Brand Partnership

Professional History

Upshot Agency

Ulta Beauty

Gensler

FREELANCE WORK

Education & Accreditations

Bachelor of Science

Bachelor of Science

LEED Accredited Professional

Get in Touch

Call

Email

Connect

Resume

John Whittington

PROFESSIONAL PROFILE

Where it began...

Today...

Professional Expertise

ConsumerExperience

3D Modeling& Visualization

Retail Design& Visual Merchandising

Experiential Activation& Shopper Marketing

TECHNICAL TOOLS

Selected Work

Professional History

Upshot Agency

Ulta Beauty

Gensler

FREELANCE WORK

Education & Accreditations

Bachelor of Science

Bachelor of Science

LEED Accredited Professional

Get in Touch

Call

Email

Connect

Resume

Consumer
Experience

3D Modeling
& Visualization

Retail Design
& Visual Merchandising

Experiential Activation
& Shopper Marketing