PetCha Official Website

Contributing to the entirety of PangCat's final capstone in college, this website was created to access and download the mobile application of the same name. It features information about our thesis, colorful graphics, and simple, yet, engaging web animations.

SKILLS

Web development and animation (using HTML, CSS, & JavaScript), Web design, Graphic Design, and Layout

TOOLBOX

Visual Studio Code, Figma, GitHub, & AniJS

Created as a complementary output to the research on 'Procrast-Innate: Behavioral Patterns and Procrastination Tendencies of Arts and Design Students During Online Classes,' PetCha by PangCat is a mobile app that aims to aid in procrastination tendencies and stimulate creativity among users.

To aid our solution, our team provided an informative website to navigate our Features, discuss about our Team and, about PetCha.

Homepage Design

The homepage emphasizes the app's functionalities and provides a link to download it. We opted for 2D illustrations as the primary design element of the website, seamlessly integrating them with the 3D isometric assets from the app to harmonize both visual components.

About Pages Design

The "About Us" page offers insights into our creators, features an infographic, and presents an overview of our research, complemented by engaging web animations triggered on scroll and hover.

The "How It Works" page offers video tutorials for navigating the mobile app.

Download Page Design

The download page offers information about the APK file, along with step-by-step instructions for installing it on an Android device. Users can also access and download previous versions of the app.

User-Friendly Additions

To improve usability and convenience for all visitors, I've incorporated several enhancements throughout the website.

Users can navigate effortlessly through the scroll-responsive navbar. It discreetly hides when scrolling down and reappears instantly with an upward scroll, ensuring easy access to site features at any point.

This website is mobile-responsive, ensuring an optimal viewing experience across all devices, including smartphones.