PetSOS Landing Page
A responsive product website that introduces the PetSOS animal-rescue application through clear content, reusable sections, and purposeful motion.
1. Project Overview
I built this promotional site to give the PetSOS mobile project a focused web presence. It presents the application’s purpose and features in a format that is easy to scan on desktop, tablet, and mobile devices.
2. Problem and Objectives
The mobile application needed a public-facing explanation outside the app itself. The objective was to turn a complex rescue workflow into an approachable product story with direct calls to action and without losing the visual identity of PetSOS.
3. My Role and Contributions
I was the solo frontend developer. I structured the page, implemented reusable React components, wrote the responsive layouts, and added the motion and background interactions shown on the live site.
4. Technology Stack
- React and TypeScript: component-based implementation with typed application code.
- Tailwind CSS: responsive layout and visual styling.
- Framer Motion and GSAP: entry motion, interface feedback, and the interactive DotGrid treatment.
5. Key Features
- Responsive product sections designed for a range of screen sizes.
- Reusable UI components and consistent calls to action.
- Animated entrances, hover states, glass-style surfaces, and an interactive background.
6. Technical Implementation
The page is organized as reusable React sections, with Tailwind breakpoints controlling layout changes. Motion is used to reinforce the content hierarchy and interaction state rather than replacing the core product information.
7. Challenges and Solutions
The main documented implementation concern was balancing an animation-rich presentation with responsive content. I kept the content in normal document flow and applied motion as a progressive visual layer so the message remains readable across viewports.
8. Testing and Results
The site is deployed and available for direct review. The available repository material does not include formal usability scores or performance benchmarks, so none are claimed here.
9. What I Learned
This project strengthened my approach to translating a mobile product into a concise web narrative and to using animation without obscuring navigation, content, or calls to action.