STREAM THE 1975 blinky

Resume

Projects

Trash

Blog

Download Portfolio

Art Gallery

About Me

Mobile Not Supported X_X

Hey hi. Sorry about this, but my website works best on desktop at the moment. You should view it there!

View Desktop Site Anyway (very unfinished)

Feel free to take a look at my PDF portfolio, or my social media!

Download PDF Portfolio

Contact Me

(Mobile version coming soon! For now, please visit on desktop.)

Welcome to My Website!

Hello!

I'm Ren and I'm a graphic designer/ illustrator/ general artist

Click around and learn more about me!

(I'm slowly adding onto this website :)

Also make sure to look for some secrets!!!

✩Latest project✩

Latest Project

Ren's Status

Senior Capstone INCOMMING!

Blog

Welcome to my blog!

Latest Post - March 2026

Working on this website has been so much fun! I've been adding new features and fixing bugs. Check back soon for more updates!

Coming Soon:

More blog posts
Project updates
Art process videos

Trash

The trash is empty!

Nothing to see here...

(Maybe check back later for deleted files?)

Resume

Experience

Graphic Design Intern | Museum of Humanity (April 2025 - August 2025)

Supports in the production of human interest stories through text and images as well as the production side of the museum's promotional events

Graphic Designer and Video Editor | Drexel Food Lab (May 2024 -Junly 2024 )

Designing promotional materials and created social media content focused on food preparation, storage, and related information.

Freelance Graphic Designer | (2020-present)

Working on commission based graphic design projects including but not limited to branding, logo design, motion graphics, and branding assets.

Social Media Intern | Maryvale Preparatory School (Sept 2021- June 2022)

Created content including social media posts and logos for Maryvale Preparatory School as an intern Created eye-catching graphics and sponsored posts for company Instagram page

Education

B.S. Graphic Design | Drexel University (2022-2026)

Minor in Visual Arts

Skills

Adobe Creative Cloud
Figma
Canva
Social Media (X (twitter), Instagram, TikTok, Pinterest)
Procreate
Blender
Affinity
DaVinci Resolve
Resolume Arena

Portfolio Gallery

Time Cycle

Date: December 2023

Time Cycle is a bicycle delivery service located in Philadelphia. This project included redesigning the original logo into a new pictorial logo, typographic logo, and initial logo. The final logo includes an image of a delivery man with a cap that is designed to represent a time meter. The final logo is made to give a sense of friendliness and trust.

All concepts herein are the intellectual property of students and are expressly designated for educational purposes, with no intended application or association with official companies

Eastern State Redesign

Date: December 2024

Eastern State Penitentiary is one of the most famous penitentiaries in the USA. The goal of the rebranding was to keep the message of social justice and prison reform, but add a modern twist with typography, colors, and new graphics. From conceptualizing the brand's personality to designing the color palette, merchandise, and slogan "Every cell tells a story," this project was a rewarding exploration of brand identity.

Project Video

Watch the project showcase

All concepts herein are the intellectual property of students and are expressly designated for educational purposes.

Eastern State Redesign

Date: November 2024

Adult Swim is an American adult-oriented television programming block.For this project, the goal was to make two bumpers and two logo animations for the brand. These animations were done using a combination of 3D animation, 2D animation, and motion graphics.

Project Video

Watch the project showcase

All concepts herein are the intellectual property of students and are expressly designated for educational purposes.

Eastern State Redesign

Date: June 2022

Everyanything is an animated music visualizer created for an online music festival, blending narrative storytelling with experimental motion design. Developed over one month, the project served as a technical exploration of After Effects and Blender, while advancing skills in 3D modeling, animation, and cinematography. The visualizer transforms audio into a dynamic, evolving journey—pushing creative boundaries between digital art and musical experience.

Project Video

Watch the project showcase

All concepts herein are the intellectual property of students and are expressly designated for educational purposes.

The Philadelphia Fringe Festival Poster Series

Date: November 2022

The Philadelphia Fringe Festival poster series was a project assigned for Typography II. The goal was to create a series of posters that were in the same style as each other, and to be able to display the text on the posters effectively and clearly by using hierarchy and sizing.

All concepts herein are the intellectual property of students and are expressly designated for educational purposes.

The Museum of Humanity

Date: July 2025

The Museum of Humanity (MOH), based in Zaandam, NL, is an organization dedicated to reconnecting people through portrait storytelling and shared narratives. For this assignment, the goal was to create stickers for their Humanity on the Move series, where they would visit schools to teach about their mission. These stickers were made to be given to children ages 13-16, and were inspired by fruit stickers..

Everlasting Album Art

Date: December 2024

Everlasting is a single by the music artist "kthnx!". The images below show the concept sketches along with the first test render for the cover. The art was made by using a combination of Adobe Photoshop and Blender. The process was done alongside Kthnx, and together we collaborated to make the album art for the single.

1 / 4

About Rennocence

Hello! I'm Ren and this is my portfolio website! I am a graphic designer/ illustrator/ visual artist based in Philadelphia PA! If you are intrested in hiring/ comissioning me please reach out to rensayan@proton.me !

Q&A

Who/ what is Rennocence?

★ It's me! Hiii! Its my brand!!

How did you make this website?

★ Mostly trial and error. It was a lot of searching online and trying to figure out how to make things look good. I'm not a web dev by any means lol.

Can I commission/ hire you?

★ Yes! Feel free to email me (that's be best way to reach out to me) at rensayan@proton.me for any commissions you want to do!

Are you active on social media?

★ Yes and no. I try to keep up with any DMs, but for the most part I am most active here, Bluesky, and Linkedin (is that even social media?). All my socials can be found on the homepage!

Where are you based?

★ Philadelphia, PA, USA!

Where do you get your assets?

★ Most of the gifs are from https://gifcities.org and tenor, links are in the code

Illustration Gallery

1 / 8

Live Chat

// Zoom Modal Functionality const zoomModal = document.getElementById("zoomModal"); const zoomedImage = document.getElementById("zoomedImage"); let isDragging = false; let startX = 0; let startY = 0; let translateX = 0; let translateY = 0; let scale = 1; let lastTap = 0; // Add zoom controls container const zoomControls = document.createElement('div'); zoomControls.innerHTML = `

`; zoomModal.appendChild(zoomControls); function openZoomModal(src, alt) { zoomModal.style.display = "flex"; zoomedImage.src = src; zoomedImage.alt = alt || "Zoomed image"; resetZoom(); // Add escape key listener document.addEventListener('keydown', handleEscapeKey); } function handleEscapeKey(e) { if (e.key === 'Escape') { closeZoomModal(); document.removeEventListener('keydown', handleEscapeKey); } } function closeZoomModal() { zoomModal.style.display = "none"; resetZoom(); document.removeEventListener('keydown', handleEscapeKey); } function zoomIn() { scale *= 1.2; updateZoomTransform(); } function zoomOut() { scale /= 1.2; if (scale < 0.5) scale = 0.5; // Minimum zoom updateZoomTransform(); } function resetZoom() { scale = 1; translateX = 0; translateY = 0; updateZoomTransform(); } function updateZoomTransform() { zoomedImage.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`; } // Mouse drag functionality zoomedImage.addEventListener("mousedown", (e) => { if (e.button !== 0) return; // Only left click isDragging = true; startX = e.clientX - translateX; startY = e.clientY - translateY; zoomedImage.style.cursor = "grabbing"; e.preventDefault(); }); document.addEventListener("mousemove", (e) => { if (!isDragging) return; translateX = e.clientX - startX; translateY = e.clientY - startY; // Add boundaries to prevent dragging too far const maxTranslate = 500 * scale; translateX = Math.min(Math.max(translateX, -maxTranslate), maxTranslate); translateY = Math.min(Math.max(translateY, -maxTranslate), maxTranslate); updateZoomTransform(); }); document.addEventListener("mouseup", () => { isDragging = false; zoomedImage.style.cursor = "grab"; }); // Double click to zoom in/out zoomedImage.addEventListener("dblclick", (e) => { e.preventDefault(); if (scale > 1.5) { resetZoom(); } else { scale = 2; updateZoomTransform(); } }); // Click on image toggles zoom (if not dragging) let clickTimer = null; zoomedImage.addEventListener("click", (e) => { if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; // Double click handled separately } else { clickTimer = setTimeout(() => { if (!isDragging) { // Single click on image does nothing special // (we want to allow dragging without accidentally zooming) } clickTimer = null; }, 250); } }); // Click outside image to close zoomModal.addEventListener("click", (e) => { if (e.target === zoomModal) { closeZoomModal(); } }); // Touch support for mobile zoomedImage.addEventListener("touchstart", (e) => { e.preventDefault(); const touch = e.touches[0]; isDragging = true; startX = touch.clientX - translateX; startY = touch.clientY - translateY; }, { passive: false }); document.addEventListener("touchmove", (e) => { if (!isDragging || e.touches.length > 1) return; e.preventDefault(); const touch = e.touches[0]; translateX = touch.clientX - startX; translateY = touch.clientY - startY; updateZoomTransform(); }, { passive: false }); document.addEventListener("touchend", () => { isDragging = false; }); // Pinch zoom support let initialDistance = 0; let initialScale = 1; zoomModal.addEventListener("touchstart", (e) => { if (e.touches.length === 2) { e.preventDefault(); initialDistance = getTouchDistance(e.touches); initialScale = scale; } }); zoomModal.addEventListener("touchmove", (e) => { if (e.touches.length === 2) { e.preventDefault(); const currentDistance = getTouchDistance(e.touches); const newScale = initialScale * (currentDistance / initialDistance); scale = Math.min(Math.max(newScale, 0.5), 5); updateZoomTransform(); } }); function getTouchDistance(touches) { const dx = touches[0].clientX - touches[1].clientX; const dy = touches[0].clientY - touches[1].clientY; return Math.sqrt(dx * dx + dy * dy); } // Mouse wheel zoom zoomModal.addEventListener("wheel", (e) => { e.preventDefault(); const delta = e.deltaY > 0 ? 0.9 : 1.1; scale *= delta; scale = Math.min(Math.max(scale, 0.5), 5); updateZoomTransform(); }, { passive: false }); // Make all portfolio images zoomable document.addEventListener('DOMContentLoaded', function() { // Add zoom capability to all images with class 'zoomable-image' const zoomableImages = document.querySelectorAll('.zoomable-image'); zoomableImages.forEach(img => { img.addEventListener('click', function() { openZoomModal(this.src, this.alt); }); }); // Also make the main gallery images zoomable const galleryImages = document.querySelectorAll('.carousel-slide img'); galleryImages.forEach(img => { img.classList.add('zoomable-image'); img.addEventListener('click', function() { openZoomModal(this.src, this.alt); }); }); }); // Desktop Buddy const buddyMessages = ["I'm Rennocence", "This is my website", "meow", "pls dont throw me :(", "I live on the internet", "3", "i am so smart lol"]; const defaultImage = "https://i.imgur.com/0ZUk1go.gif"; const clickedImage = "https://i.imgur.com/nrvJohc.png"; const buddy = document.getElementById('desktopBuddy'); const buddyImage = document.getElementById('buddyImage'); const messageElement = document.getElementById('buddyMessage'); const taskbar = document.querySelector('.taskbar'); let isDraggingBuddy = false; let buddyVelocityY = 0; let buddyGravity = 0.5; let buddyBounce = 0.7; let buddyFriction = 0.98; let buddyVelocityX = 0; let isFalling = false; let lastPosition = {x:0,y:0}; let lastTime = 0; let buddyOffsetX, buddyOffsetY; buddy.addEventListener('click', function(){ buddyImage.style.backgroundImage = `url('${clickedImage}')`; const randomMessage = buddyMessages[Math.floor(Math.random() * buddyMessages.length)]; messageElement.textContent = randomMessage; messageElement.style.display = 'block'; buddyImage.style.transform = 'scale(1.1)'; setTimeout(() => { buddyImage.style.transform = 'scale(1)'; buddyImage.style.backgroundImage = `url('${defaultImage}')`; }, 200); setTimeout(() => { messageElement.style.display = 'none'; }, 3000); }); buddy.addEventListener('mousedown', function(e) { buddyImage.style.backgroundImage = `url('${clickedImage}')`; isDraggingBuddy = true; isFalling = false; buddyOffsetX = e.clientX - buddy.getBoundingClientRect().left; buddyOffsetY = e.clientY - buddy.getBoundingClientRect().top; buddy.style.cursor = 'grabbing'; e.preventDefault(); lastPosition = { x: e.clientX, y: e.clientY }; lastTime = Date.now(); }); document.addEventListener('mousemove', function(e) { if (isDraggingBuddy) { const now = Date.now(); const deltaTime = now - lastTime; if (deltaTime > 0) { buddyVelocityX = (e.clientX - lastPosition.x) / deltaTime * 16; buddyVelocityY = (e.clientY - lastPosition.y) / deltaTime * 16; } buddy.style.left = (e.clientX - buddyOffsetX) + 'px'; buddy.style.top = (e.clientY - buddyOffsetY) + 'px'; buddy.style.right = 'auto'; buddy.style.bottom = 'auto'; lastPosition = { x: e.clientX, y: e.clientY }; lastTime = now; } }); document.addEventListener('mouseup', function() { if (isDraggingBuddy) { buddyImage.style.backgroundImage = `url('${defaultImage}')`; isDraggingBuddy = false; isFalling = true; buddy.style.cursor = 'pointer'; requestAnimationFrame(updatePhysics); } }); function updatePhysics(timestamp) { if (!isFalling) return; const buddyRect = buddy.getBoundingClientRect(); const taskbarRect = taskbar.getBoundingClientRect(); buddyVelocityY += buddyGravity; buddyVelocityX *= buddyFriction; const newTop = buddyRect.top + buddyVelocityY; if (newTop + buddyRect.height > taskbarRect.top) { buddy.style.top = (taskbarRect.top - buddyRect.height) + 'px'; buddyVelocityY = 0; buddyVelocityX = 0; isFalling = false; buddyImage.style.transform = 'scale(1.05)'; setTimeout(() => { buddyImage.style.transform = 'scale(1)'; }, 200); return; } const newLeft = buddyRect.left + buddyVelocityX; if (newLeft < 0) { buddy.style.left = '0px'; buddyVelocityX *= -buddyBounce; } else if (newLeft + buddyRect.width > window.innerWidth) { buddy.style.left = (window.innerWidth - buddyRect.width) + 'px'; buddyVelocityX *= -buddyBounce; } else { buddy.style.left = newLeft + 'px'; } buddy.style.top = newTop + 'px'; if (isFalling) { requestAnimationFrame(updatePhysics); } } function updateClock() { const clockElement = document.getElementById('clock'); if (!clockElement) return; const now = new Date(); const time = now.toLocaleTimeString(); clockElement.textContent = time; } function downloadPortfolio() { const pdfUrl = 'https://example.com/your-portfolio.pdf'; const link = document.createElement('a'); link.href = pdfUrl; link.download = 'Rennocence-Portfolio.pdf'; const buddyMessage = document.getElementById('buddyMessage'); buddyMessage.textContent = 'Downloading portfolio...'; buddyMessage.style.display = 'block'; document.body.appendChild(link); link.click(); document.body.removeChild(link); setTimeout(() => { buddyMessage.style.display = 'none'; }, 3000); } // Cat running animation const cat = document.getElementById('runningCat'); let isRunning = false; function makeCatRun() { if (isRunning) return; isRunning = true; const direction = Math.round(Math.random()); if (direction === 0) { cat.style.left = '-100px'; cat.style.transform = 'scaleX(-1)'; const startTime = performance.now(); const animationDuration = 2000; function animateRight(timestamp) { const elapsed = timestamp - startTime; const progress = Math.min(elapsed / animationDuration, 1); const easedProgress = 1 - Math.pow(1 - progress, 2); const newPosition = -100 + (window.innerWidth + 200) * easedProgress; cat.style.left = newPosition + 'px'; if (progress < 1) { requestAnimationFrame(animateRight); } else { isRunning = false; const nextRun = Math.random() * 15000 + 5000; setTimeout(makeCatRun, nextRun); } } requestAnimationFrame(animateRight); } else { cat.style.left = (window.innerWidth + 100) + 'px'; cat.style.transform = 'scaleX(1)'; const startTime = performance.now(); const animationDuration = 2000; function animateLeft(timestamp) { const elapsed = timestamp - startTime; const progress = Math.min(elapsed / animationDuration, 1); const easedProgress = 1 - Math.pow(1 - progress, 2); const newPosition = (window.innerWidth + 100) - (window.innerWidth + 200) * easedProgress; cat.style.left = newPosition + 'px'; if (progress < 1) { requestAnimationFrame(animateLeft); } else { isRunning = false; const nextRun = Math.random() * 15000 + 5000; setTimeout(makeCatRun, nextRun); } } requestAnimationFrame(animateLeft); } } makeCatRun(); window.addEventListener('resize', () => { if (!isRunning && (parseInt(cat.style.left) > window.innerWidth || parseInt(cat.style.left) < -100)) { cat.style.left = '-100px'; cat.style.transform = 'scaleX(1)'; } }); // Portfolio Carousel document.addEventListener('DOMContentLoaded', function() { const galleryWindow = document.getElementById('galleryWindow'); if (galleryWindow) { const track = galleryWindow.querySelector('.portfolio-carousel-track'); const slides = galleryWindow.querySelectorAll('.portfolio-slide'); const prevBtn = galleryWindow.querySelector('.portfolio-prev-btn'); const nextBtn = galleryWindow.querySelector('.portfolio-next-btn'); const indicator = galleryWindow.querySelector('.portfolio-indicator'); const thumbnails = galleryWindow.querySelectorAll('.portfolio-thumbnail'); let currentIndex = 0; const totalSlides = slides.length; function updatePortfolioCarousel() { if (track) track.style.transform = `translateX(-${currentIndex * 100}%)`; if (indicator) indicator.textContent = `${currentIndex + 1} / ${totalSlides}`; thumbnails.forEach((thumb, index) => { if (index === currentIndex) { thumb.style.borderColor = '#3a5488'; thumb.style.borderWidth = '3px'; } else { thumb.style.borderColor = '#808080'; thumb.style.borderWidth = '2px'; } }); } if (nextBtn) nextBtn.addEventListener('click', function() { currentIndex = (currentIndex + 1) % totalSlides; updatePortfolioCarousel(); }); if (prevBtn) prevBtn.addEventListener('click', function() { currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; updatePortfolioCarousel(); }); thumbnails.forEach((thumb, index) => { thumb.addEventListener('click', function() { currentIndex = index; updatePortfolioCarousel(); }); }); updatePortfolioCarousel(); } // Art Gallery Carousel const artWindow = document.getElementById('artWindow'); if (artWindow) { const track = artWindow.querySelector('.carousel-track'); const slides = artWindow.querySelectorAll('.carousel-slide'); const prevBtn = artWindow.querySelector('.prev-btn'); const nextBtn = artWindow.querySelector('.next-btn'); const indicator = artWindow.querySelector('.carousel-indicator'); const thumbnails = artWindow.querySelectorAll('.thumbnail'); let currentIndex = 0; const totalSlides = slides.length; function updateCarousel() { track.style.transform = `translateX(-${currentIndex * 100}%)`; if (indicator) indicator.textContent = `${currentIndex + 1} / ${totalSlides}`; thumbnails.forEach((thumb, index) => { if (index === currentIndex) { thumb.style.borderColor = '#3a5488'; thumb.style.borderWidth = '3px'; } else { thumb.style.borderColor = '#808080'; thumb.style.borderWidth = '2px'; } }); } if (nextBtn) nextBtn.addEventListener('click', function() { currentIndex = (currentIndex + 1) % totalSlides; updateCarousel(); }); if (prevBtn) prevBtn.addEventListener('click', function() { currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; updateCarousel(); }); thumbnails.forEach((thumb, index) => { thumb.addEventListener('click', function() { currentIndex = index; updateCarousel(); }); }); updateCarousel(); } }); // Image Zoom const zoomModal = document.getElementById("zoomModal"); const zoomedImage = document.getElementById("zoomedImage"); let isDragging = false; let startX = 0; let startY = 0; let translateX = 0; let translateY = 0; function openZoomModal(src){ zoomModal.style.display = "flex"; zoomedImage.src = src; translateX = 0; translateY = 0; zoomedImage.style.transform = `translate(0px,0px)`; } /* drag image */ zoomedImage.addEventListener("mousedown",(e)=>{ isDragging = true; startX = e.clientX - translateX; startY = e.clientY - translateY; zoomedImage.style.cursor = "grabbing"; }); document.addEventListener("mousemove",(e)=>{ if(!isDragging) return; translateX = e.clientX - startX; translateY = e.clientY - startY; zoomedImage.style.transform = `translate(${translateX}px, ${translateY}px)`; }); document.addEventListener("mouseup",()=>{ isDragging = false; zoomedImage.style.cursor = "grab"; }); /* click outside to close */ zoomModal.addEventListener("click",(e)=>{ if(e.target === zoomModal){ zoomModal.style.display = "none"; } });