My Current Work

Portfolio

const items = [ {image: "assets/images/slideshow01-ceb73073.jpg"}, {image: "assets/images/slideshow01-388ac486.jpg"}, {image: "assets/images/slideshow01-1a43fb87.jpg"}, {image: "assets/images/slideshow01-ac35dcad.jpg"}, {image: "assets/images/slideshow01-d82c750b.jpg"}, {image: "assets/images/slideshow01-e733d580.jpg"}, {image: "assets/images/slideshow01-a66ca068.jpg"}, {image: "assets/images/slideshow01-88f1260d.jpg"}, {image: "assets/images/slideshow01-99e26b62.jpg"}, {image: "assets/images/slideshow01-2345f8aa.jpg"}, {image: "assets/images/slideshow01-dc395790.jpg"}, {image: "assets/images/slideshow01-fbe04381.jpg"}, {image: "assets/images/slideshow01-0ba5ccc3.jpg"}, {image: "assets/images/slideshow01-7d97b594.jpg"}, {image: "assets/images/slideshow01-2278c492.jpg"}, {image: "assets/images/slideshow01-a3c9ddec.jpg"}, {image: "assets/images/slideshow01-b5ef82d5.jpg"}, {image: "assets/images/slideshow01-3bb5c2cd.jpg"}, {image: "assets/images/slideshow01-258b3066.jpg"}, {image: "assets/images/slideshow01-27aa72b3.jpg"}, {image: "assets/images/slideshow01-3b899012.jpg"}, {image: "assets/images/slideshow01-c5bde567.jpg"}, {image: "assets/images/slideshow01-25232ab7.jpg"}, {image: "assets/images/slideshow01-7b10a4cd.jpg"}, {image: "assets/images/slideshow01-6d3484f7.jpg"}, {image: "assets/images/slideshow01-8cbf3872.jpg"}, {image: "assets/images/slideshow01-bbbb9603.jpg"}, {image: "assets/images/slideshow01-fb4bc997.jpg"}, {image: "assets/images/slideshow01-35cfcfdf.jpg"}, {image: "assets/images/slideshow01-2992e2f9.jpg"}, {image: "assets/images/slideshow01-9f048a63.jpg"}, {image: "assets/images/slideshow01-ae7e4c4b.jpg"}, {image: "assets/images/slideshow01-c429a4f6.jpg"}, {image: "assets/images/slideshow01-0fac5fc9.jpg"}, {image: "assets/images/slideshow01-c3b0b33b.jpg"}, {image: "assets/images/slideshow01-0e24fdd5.jpg"}, ]; const track = document.getElementById('track'); const dotsEl = document.getElementById('dots'); let current = 0; const total = items.length; let slideW = 0, sideW = 0; document.addEventListener('contextmenu', event => { if (event.target.tagName === 'IMG') { event.preventDefault(); } }); function buildSlides() { track.innerHTML = ''; items.forEach((item, i) => { const s = document.createElement('div'); s.className = 'slide'; const img = document.createElement('img'); img.src = item.image; img.className = 'carousel-items'; s.appendChild(img); s.onclick = () => { if (i !== current) goTo(i); }; track.appendChild(s); }); } function buildDots() { dotsEl.innerHTML = ''; items.forEach((_, i) => { const d = document.createElement('button'); d.className = 'dot' + (i === 0 ? ' active' : ''); d.setAttribute('aria-label', `Go to image ${i + 1}`); d.onclick = () => goTo(i); dotsEl.appendChild(d); }); } function layout() { const wrapW = document.getElementById('track-wrap').offsetWidth; const isMobile = window.innerWidth < 767; const activeRatio = isMobile ? 0.992 : 0.62; const sideRatio = isMobile ? 0.56 : 0.35; slideW = Math.round(wrapW * activeRatio); sideW = Math.round(wrapW * sideRatio); track.querySelectorAll('.slide').forEach((s, i) => { const isActive = i === current; s.style.width = (isActive ? slideW : sideW) + 'px'; s.style.height = (isActive ? Math.round(slideW * 0.6471) : Math.round(sideW * 0.6471)) + 'px'; s.className = 'slide ' + (isActive ? 'active' : 'side'); }); updateTransform(); } function updateTransform() { const wrapW = document.getElementById('track-wrap').offsetWidth; const gapPx = parseFloat(getComputedStyle(track).gap); let offset = 0; for (let i = 0; i < current; i++) { const w = i === current ? slideW : sideW; offset += w + gapPx; } const centerOffset = (wrapW - slideW) / 2; track.style.transform = `translateX(${centerOffset - offset}px)`; dotsEl.querySelectorAll('.dot').forEach((d, i) => d.classList.toggle('active', i === current)); } function goTo(n) { current = (n + total) % total; layout(); } buildSlides(); buildDots(); setTimeout(layout, 0); window.addEventListener('resize', layout); document.getElementById('prev').onclick = () => goTo(current - 1); document.getElementById('next').onclick = () => goTo(current + 1); let startX = 0; const stage = document.getElementById('stage'); stage.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, { passive: true }); stage.addEventListener('touchend', e => { const diff = startX - e.changedTouches[0].clientX; if (Math.abs(diff) > 40) goTo(current + (diff > 0 ? 1 : -1)); });

Demo Trailer

My Previous Works

function scrollUp(){ window.scrollTo({ top: 0, left: 0, behavior: "smooth", }); }

Previous Works

Classworks

function scrollUp(){ window.scrollTo({ top: 0, left: 0, behavior: "smooth", }); }

Mina Nguyen (Tran)

My name is Mina Nguyen Tran, I’m an illustrator and artist who creates engaging and vibrant artworks of characters and narrative illustrations, digitally, I work with shape-driven and painterly styles with colorful and ambitious compositions.I’m in my senior year at University of Kansas, majoring in Illustration and Animation.I’d love to travel more overseas and I love playing video games. I also really love Cardcaptor Sakura.

Hi! Feel free to email me for inquiries or get connected with me!