Selected Work
A curation of my work among various disciplines.
DIGITAL
MOTION & VIDEO
"I'm Great" Video
Originally created for an internal purpose, this video is now featured on a "Thank You" page after a student completes enrollment.
3D Dashboard
3D Animation
Shampoo Commercial
3D Animation, 3D Modeling
Day in the Life - Behavioral Health Technician
Video Editing, Videography, Motion Graphics
Project Details
Pipeline AZ is a partner with Pima Medical Institute. We offered to let them use the Tucson campus and resources (me) to film a promotional video for their Behavioral Health Technician career path. They had great talent to work with, Andrew, and the client was incredibly happy with the result. It is currently hosted on their website.
Sleepy Faces Animation
2D Animation
Dental Hygiene Month
2D Animation
WEB
Pima Medical Institute Online Page
Web Design (Elementor & WordPress), HTML, CSS, Javascript
Project Details
Emily, the online Marketing Manager at Pima Medical Institute, wanted a way to make this page stand out a little bit from the ground pages and make it seems more tech-forward. After brainstorming with her and doing some research, we decided on a video header with some static and motion text effects. I edited one the videos we had featuring an online student and turned it into a short slideshow of the mix of hands-on learning and home learning. Then I sized it to appropriately fit the header container. The transforming text was a challenge to code, but it finally got there and looks very smooth. The rest of the page is built to give some high-level information on being an online student, including a video that I shot and edited at the bottom to give the potential new student a warm welcome.
This Portfolio Website!
Web Design (Elementor & WordPress)
Project Details
As with every portfolio site, this one was a labor of love. I always learn new things when building a site from scratch, and this time was no different. Elementor has added a lot of new features just recently, such as their new atomic elements that are leaning towards the Figma workflow of utilizing components. It was great to get familiar with those, as they are only in their beta phase still. The site navigation is something that I always think should be custom. It exists everywhere on any multi-page website and really acts as the backbone of the site. It needs to be responsive, intuitive, and provide the user a nearly thoughtless experience to move through the site. Those specific code details can be found below. The rest of the site was built using Elementor elements and widgets, with one more exception that is noted below.
Hardcoded Menu Navigation (This Site)
Web Design, HTML, CSS, Javascript
Full Code
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"><nav class="zw-nav"> <!-- LOGO --> <a href="/" class="zw-logo"> ZW<span>.</span> </a> <!-- DESKTOP NAV --> <div class="zw-nav-links"> <a href="/" class="zw-nav-item zw-home-link"> <span>HOME</span> </a> <!-- PROJECTS DROPDOWN --> <div class="zw-dropdown"> <a href=" " class="zw-nav-item zw-dropdown-trigger"> <span>PROJECTS</span> <span class="zw-plus">+</span> </a> <div class="zw-dropdown-menu"> <a href="/teddy-bear-clinic"> TEDDY BEAR CLINIC CAMPAIGN </a> <a href="/bad-bobs"> BAD BOB’S YOUTUBE INTRO </a> <a href="/product-knowledge-videos"> PRODUCT KNOWLEDGE VIDEOS </a> <a href="/beauhaunt"> BEAUHAUNT LOGO ANIMATION </a> <a href="/program-pathway-posters"> PROGRAM PATHWAY POSTERS </a> <a href="/teacher-appreciation-week"> TEACHER APPRECIATION WEEK </a> </div> </div> <a href="/selected-work" class="zw-nav-item"> <span>SELECTED WORK</span> </a> <a href="#contact" class="zw-nav-item"> <span>CONTACT</span> </a></div> <!-- HAMBURGER --> <button class="zw-hamburger" aria-label="Menu Toggle"> <span></span> <span></span> <span></span> </button></nav><!-- MOBILE MENU --><div class="zw-mobile-menu"> <a href="/" class="zw-mobile-link"> HOME </a> <!-- MOBILE PROJECTS --> <div class="zw-mobile-projects"> <button class="zw-mobile-project-toggle"> <span>PROJECTS</span> <span class="zw-mobile-plus">+</span> </button> <div class="zw-mobile-submenu"> <a href="/teddy-bear-clinic"> TEDDY BEAR CLINIC CAMPAIGN </a> <a href="/bad-bobs"> BAD BOB’S YOUTUBE INTRO </a> <a href="/product-knowledge-videos"> PRODUCT KNOWLEDGE VIDEOS </a> <a href="/beauhaunt"> BEAUHAUNT LOGO ANIMATION </a> <a href="/program-pathway-posters"> PROGRAM PATHWAY POSTERS </a> <a href="/teacher-appreciation-week"> TEACHER APPRECIATION WEEK </a> </div> </div> <a href="/selected-work" class="zw-mobile-link"> SELECTED WORK </a> <a href="#contact" class="zw-mobile-link"> CONTACT </a></div><style>:root{ --accent:#cd62ff; --bg:#050505; --text:#ffffff; --muted:#8a8a8a; --transition:0.35s cubic-bezier(.77,0,.18,1);}body{ margin:0; background:var(--bg); font-family:'Montserrat', sans-serif;}/* =========================NAV WRAPPER========================= */.zw-nav{ position:fixed; top:0; left:0; width:100%; height:90px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; box-sizing:border-box; z-index:99999; background:rgba(5,5,5,.7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.05);}/* =================================PROJECTS DROPDOWN================================= */.zw-dropdown{ position:relative;}.zw-dropdown-trigger{ display:flex; align-items:center; gap:.5rem;}.zw-plus{ color:var(--accent); transition:var(--transition);}.zw-dropdown:hover .zw-plus{ transform:rotate(45deg);}.zw-dropdown-menu{ position:absolute; top:calc(100% + 20px); left:50%; transform: translateX(-50%) translateY(10px); min-width:300px; opacity:0; visibility:hidden; background:rgba(5,5,5,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:1rem; transition:var(--transition); z-index:10000;}.zw-dropdown:hover .zw-dropdown-menu{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0);}.zw-dropdown-menu a{ display:block; padding:.85rem 1rem; color:#fff; text-decoration:none; font-size:.7rem; font-weight:600; letter-spacing:.15em; border-radius:12px; transition:var(--transition);}.zw-dropdown-menu a:hover{ color:var(--accent); background: rgba(205,98,255,.08);}/* =========================LOGO========================= */.zw-logo{ position:relative; font-size:1.8rem; font-weight:700; letter-spacing:.08em; color:var(--text); text-decoration:none; transition:var(--transition);}.zw-logo span{ color:#cd62ff;}.zw-logo:hover{ transform:translateY(-2px);}/* =========================DESKTOP LINKS========================= */.zw-nav-links{ display:flex; gap:3rem; align-items:center;}.zw-nav-item{ position:relative; text-decoration:none; color:var(--text); font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; transition:var(--transition); padding:.4rem 0; overflow:hidden;}/* Hover Glow */.zw-nav-item:hover{ color:var(--accent);}/* Animated Underline */.zw-nav-item::after{ content:''; position:absolute; left:0; bottom:0; width:0%; height:2px; background:var(--accent); transition:var(--transition);}.zw-nav-item:hover::after{ width:100%;}/* =========================ACTIVE PAGE INDICATOR========================= */.zw-nav-item.active{ color:var(--accent);}.zw-nav-item.active::after{ width:100%;}/* Glow Dot */.zw-nav-item.active::before{ content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent);}/* =========================HAMBURGER========================= */.zw-hamburger{ width:50px; height:50px; display:none; flex-direction:column; justify-content:center; align-items:center; gap:6px; background:none; border:none; cursor:pointer;z-index:999999;position:relative;}.zw-hamburger span{ width:26px; height:2px; background:#fff; transition:var(--transition); transform-origin:center;}/* Animated State */.zw-hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); background:var(--accent);}.zw-hamburger.active span:nth-child(2){ opacity:0; transform:scaleX(0);}.zw-hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); background:var(--accent);}/* =========================MOBILE MENU========================= */.zw-mobile-menu{ position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(5,5,5,.98); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2.5rem; transform:translateY(-100%); transition:var(--transition); z-index:9998;}.zw-mobile-menu.active{ transform:translateY(0%);}/* Mobile Links */.zw-mobile-link{ position:relative; text-decoration:none; color:#fff; font-size:1.2rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; transition:var(--transition);}.zw-mobile-link:hover{ color:var(--accent); transform:translateY(-2px);}/* Active Mobile Link */.zw-mobile-link.active{ color:var(--accent);}.zw-mobile-link.active::after{ content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:40px; height:2px; background:var(--accent); box-shadow: 0 0 10px var(--accent);}/* =================================MOBILE PROJECTS================================= */.zw-mobile-projects{ display:flex; flex-direction:column; align-items:center;}.zw-mobile-project-toggle{ background:none; border:none; color:#fff; font-family:'Montserrat',sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; gap:.75rem;}.zw-mobile-plus{ color:var(--accent); transition:var(--transition);}.zw-mobile-projects.active .zw-mobile-plus{ transform:rotate(45deg);}.zw-mobile-submenu{ max-height:0; overflow:hidden; display:flex; flex-direction:column; gap:1rem; margin-top:0rem; transition:max-height .4s ease;}.zw-mobile-projects.active .zw-mobile-submenu{ max-height:500px;}.zw-mobile-submenu a{ color:#aaa; text-decoration:none; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; transition:var(--transition);}.zw-mobile-submenu a:hover{ color:var(--accent);}/* =========================RESPONSIVE========================= */@media(max-width:1024px){ .zw-nav{ height:80px; } .zw-nav-links{ display:none; } .zw-hamburger{ display:flex; }}@media(max-width:768px){ .zw-logo{ font-size:1.5rem; } .zw-mobile-link{ font-size:1rem; }}@media(max-width:480px){ .zw-nav{ padding:0 1.5rem; } .zw-mobile-link{ font-size:.95rem; letter-spacing:.14em; }}/* =========================REMOVE DEFAULT TAP/HOVER STATES========================= */.zw-hamburger,.zw-hamburger:hover,.zw-hamburger:focus,.zw-hamburger:active{ background:transparent !important; outline:none; box-shadow:none; -webkit-tap-highlight-color: transparent;}/* Prevent mobile blue/pink tap flash */button,a{ -webkit-tap-highlight-color: transparent;}.zw-mobile-project-toggle{ appearance:none; -webkit-appearance:none; font-family:'Montserrat',sans-serif !important; font-size:1rem !important; font-weight:700 !important; line-height:1 !important; color:#fff !important;}</style><script>document.addEventListener('DOMContentLoaded', () => { const hamburger = document.querySelector('.zw-hamburger'); const mobileMenu = document.querySelector('.zw-mobile-menu'); const mobileProjects = document.querySelector('.zw-mobile-projects'); const mobileProjectsToggle = document.querySelector('.zw-mobile-project-toggle'); // HAMBURGER if(hamburger && mobileMenu){ hamburger.addEventListener('click', () => { hamburger.classList.toggle('active'); mobileMenu.classList.toggle('active'); }); } // MOBILE PROJECTS if( mobileProjects && mobileProjectsToggle ){ mobileProjectsToggle.addEventListener( 'click', () => { mobileProjects.classList.toggle( 'active' ); } ); } // CLOSE MENU ON CLICK document .querySelectorAll('.zw-mobile-link') .forEach(link => { link.addEventListener('click', () => { hamburger?.classList.remove('active'); mobileMenu?.classList.remove('active'); }); }); // ACTIVE PAGE DETECTION const path = window.location.pathname; document .querySelectorAll( '.zw-nav-item, .zw-mobile-link' ) .forEach(link => { link.classList.remove('active'); }); if( path === '/' || path === '' ){ document .querySelector('.zw-home-link') ?.classList.add('active'); } else if( path.includes('selected-work') ){ document .querySelector('a[href="/selected-work"]') ?.classList.add('active'); } else if( path.includes('contact') ){ document .querySelector('a[href="#contact"]') ?.classList.add('active'); } else{ document .querySelector('.zw-dropdown-trigger') ?.classList.add('active'); }});</script>
Product Knowledge Video Slider (This Site)
HTML, CSS, Javascript
Full Code
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"><div class="zw-compare-container"> <!-- Labels --> <div class="zw-label zw-label-left"> </div> <div class="zw-label zw-label-right"> ENHANCED </div> <!-- Base Video --> <video class="zw-video-base" autoplay muted loop playsinlinepreload="auto"> <source src="https://zacharywilt.com/wp-content/uploads/2026/06/Comparison_Slider_After.mp4" type="video/mp4"> </video><div class="zw-label zw-label-original">ORIGINAL</div> <!-- Overlay Video --> <div class="zw-video-overlay"> <video class="zw-video-top" autoplay muted loop playsinlinepreload="auto"> <source src="https://zacharywilt.com/wp-content/uploads/2026/06/Comparison_Slider_Before.mp4" type="video/mp4"> </video><div class="zw-label zw-label-enhanced">ENHANCED</div> </div> <!-- Divider --> <div class="zw-slider-line"></div> <!-- Handle --> <div class="zw-slider-handle"></div> <!-- Slider --> <input type="range" min=".01" max="99.99" value="50" class="zw-slider"></div><style>/* =====================================PORTFOLIO VIDEO COMPARISON===================================== */.zw-compare-container{ --accent:#cd62ff; position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:24px; background:#050505; border:1px solid rgba(255,255,255,.06); box-shadow: 0 20px 60px rgba(0,0,0,.35); font-family:'Montserrat',sans-serif;}/* =====================================VIDEOS===================================== */.zw-video-base,.zw-video-top{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}.zw-video-overlay{ position:absolute; inset:0; overflow:hidden; clip-path:inset(0 50% 0 0);}/* Soft Transition Edge */.zw-video-overlay::after{ content:''; position:absolute; top:0; right:0; width:40px; height:100%; background: linear-gradient( to right, transparent, rgba(205,98,255,.10) ); pointer-events:none;}/* =====================================LABELS===================================== *//* =====================================DIVIDER===================================== */.zw-slider-line{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--accent); transform:translateX(-50%); box-shadow: 0 0 12px rgba(205,98,255,.5); z-index:5; pointer-events:none;}/* =====================================HANDLE===================================== */.zw-slider-handle{ position:absolute; top:50%; left:50%; width:32px; height:32px; border-radius:50%; background: rgba(5,5,5,.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border: 1px solid rgba(205,98,255,.35); box-shadow: 0 0 30px rgba(205,98,255,.15), 0 10px 30px rgba(0,0,0,.45); transform: translate(-50%,-50%); transition: transform .3s ease, box-shadow .3s ease; z-index:6; pointer-events:none;}/* Arrows */.zw-slider-handle::before{ content:'⟷'; position:absolute; top:40%; left:50%; transform: translate(-50%,-50%); color:var(--accent); font-size:1rem; font-weight:900;}.zw-compare-container:hover .zw-slider-handle{ transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 0 40px rgba(205,98,255,.25), 0 15px 40px rgba(0,0,0,.5);}/* =====================================SLIDER===================================== */.zw-slider{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:10;}/* =====================================MOBILE===================================== */@media(max-width:768px){ .zw-slider-handle{ width:28px; height:28px; } .zw-label{ font-size:.55rem; padding:8px 12px; }}</style><script>const compareContainer =document.querySelector('.zw-compare-container');const slider =compareContainer.querySelector('.zw-slider');const overlay =compareContainer.querySelector('.zw-video-overlay');const line =compareContainer.querySelector('.zw-slider-line');const handle =compareContainer.querySelector('.zw-slider-handle');function updateComparison(){ const value = slider.value; overlay.style.clipPath =`inset(0 ${100 - value}% 0 0)`; line.style.left = value + '%'; handle.style.left = value + '%';}slider.addEventListener( 'input', updateComparison);updateComparison();const baseVideo =document.querySelector('.zw-video-base');const topVideo =document.querySelector('.zw-video-top');setInterval(() => { if ( Math.abs( baseVideo.currentTime - topVideo.currentTime ) > 0.15 ) { topVideo.currentTime = baseVideo.currentTime; }}, 1000);</script>
PRESENTATION
High School PowerPoint Presentation Deck
Presentation Design
Please sign in to your Microsoft 365 account to view the presentation.
Project Details
I worked closely with the High School Admissions Manager at Pima Medical Institute to develop this PowerPoint presentation. They had been using a very dated-looking presentation, but wanted to modernize and freshen it up for the younger audience. Aside from giving it a visual overhaul, I embedded an energetic video showcasing the school's students at the beginning to get viewers excited about the information. Instead of the usual slide transitions, I opted to individually animate elements on each slide to bring the information on to the screen. I feel this added a fresh appearance to the animations and gave each slide a unique look.