Daryaft

ViewPoint Section
Trails

Inspiration

Upon seeing 3D maps running in the browser, I thought it would be exciting to create something cool and interactive for the web.

What it does

This project is an interactive travel guide website for Mount Fuji. It allows users to explore the mountain's trails and surroundings using a 3D map. The map moves dynamically as users scroll, highlights trails on hover, and zooms in on specific trails as users navigate through the website. It also provides user reviews and ratings for trails using the Google Places API and suggests the best spots to view Mount Fuji.

How i built it

This project was built using Next.js 14 with TypeScript, along with additional libraries and tools such as:

ShadCN for UI components
Tailwind CSS for styling
Axios for API calls
Lenis for smooth scrolling
GSAP for animations

Challenges i ran into

The most challenging aspect was controlling the camera movements seamlessly. Implementing camera interactions for scroll, mouse movement, and section transitions without interruptions or conflicts required a lot of fine-tuning and troubleshooting.

Accomplishments that i'm proud of

I’m proud of how the design and animations turned out, perfectly reflecting the style and vibe of Mount Fuji and Japanese aesthetics. From the map colors to the smooth animations, everything aligns well with the theme.

What I learned

I learned a lot about the lifecycle of components, handling complex 3D interactions, and creating animations. Additionally, researching Mount Fuji and its trails gave me deeper insights into its geography and cultural significance.