HADAL - an interactive web platform for deep-sea expeditions
An interactive website for familiarizing users with the civil oceanic research program and submitting applications for deep-sea dives.
Main task: Visualization of physical conditions for diving to depths of up to 11,000 meters using interactive effects and simplifying the registration process for candidates for expeditions.
What has been implemented:
- Interactive telemetry of depth, pressure, temperature, and illumination that dynamically updates during scrolling.
- Gradient color scheme change of the interface from the surface zone to the deep-sea darkness using Tailwind CSS.
- "Marine snow" effect (drifting micro-particles) based on Framer Motion to simulate diving.
- Technical specifications block of the deep-sea vehicle DSV Erebus II in the form of a responsive grid.
- List of discovered deep-sea creatures with interactive micro-animations on hover.
- Cards for planned expeditions to the Mariana, Tonga, and Kermadec trenches with status indicators and available spots.
- Interactive form for submitting participation applications with event handler and feedback.
- Full responsiveness of the interface (mobile version of telemetry in the status bar, desktop version in the sidebar).
Technologies: React, TypeScript, TanStack Start, Framer Motion, Tailwind CSS, Radix UI, Lucide React, Bun
Main task: Visualization of physical conditions for diving to depths of up to 11,000 meters using interactive effects and simplifying the registration process for candidates for expeditions.
What has been implemented:
- Interactive telemetry of depth, pressure, temperature, and illumination that dynamically updates during scrolling.
- Gradient color scheme change of the interface from the surface zone to the deep-sea darkness using Tailwind CSS.
- "Marine snow" effect (drifting micro-particles) based on Framer Motion to simulate diving.
- Technical specifications block of the deep-sea vehicle DSV Erebus II in the form of a responsive grid.
- List of discovered deep-sea creatures with interactive micro-animations on hover.
- Cards for planned expeditions to the Mariana, Tonga, and Kermadec trenches with status indicators and available spots.
- Interactive form for submitting participation applications with event handler and feedback.
- Full responsiveness of the interface (mobile version of telemetry in the status bar, desktop version in the sidebar).
Technologies: React, TypeScript, TanStack Start, Framer Motion, Tailwind CSS, Radix UI, Lucide React, Bun
Lvov 
Available for hire
Offer work