Hi there! ๐ I'm Gunel (หถแตแแตหถ)๏พ๏พ. For this project, I wanted to create a digital space that feels as "breezy" and aesthetic as a real vacation, while maintaining high technical standards for performance and responsiveness. (*แตแดแต)โพโพ
๐ Take a look at the Live Demo!
Beyond just making things look pretty, I wanted to focus on precision. I spent a lot of time obsessing over how a layout should behave on high-end laptops vs. mobile phones. My goal was to create a seamless bridge between beautiful travel imagery and a functional, fast UI.
- Intelligent Navigation: The header isn't just sticky; itโs "smart." It transitions from transparent to solid as you scroll, ensuring the menu is always accessible without blocking the view.
- TripAdvisor Integration: I thought, "How can I make this useful?" So I linked every destination card directly to TripAdvisor. One click on the photo, and you're looking at real reviews and hidden gems.
- MacBook Optimized: I noticed layouts often clump in the center on larger screens, so I custom-tuned the breakpoints to ensure the content "breathes" perfectly on 13" and 14" displays.
- Clean Aesthetics: I used custom CSS transitions and hover effects to make the destination cards feel "interactive" and premium.
| Category | Details |
|---|---|
| Frontend Development | Modern HTML5 & Semantic Web: I prioritize SEO-friendly structures to make sure the destinations are easy to find. Advanced CSS3: I mastered Flexbox for this project to handle complex distribution of elements like the logo and nav-links. Retina-Ready Design: I spent hours testing specific media queries to ensure the site looks crisp on high-DPI Mac displays. |
| JavaScript & Logic | Vanilla JavaScript (ES6+): I used lightweight scripts for DOM Manipulation to handle the sticky header and mobile menu toggle. Performance over Bloat: I chose not to use heavy libraries, keeping the site's "Time to Interactive" as low as possible. |
The Challenge: Maintaining the "vibe" of the site when switching from a horizontal desktop view to a vertical mobile view. My Solution: I developed a mobile-first CSS architecture, ensuring that the package grid remains stable and the "Burger" menu provides an intuitive touch-screen experience.
The Challenge: I wanted to avoid creating 10 different sub-pages for each city while still providing value. My Solution: I integrated a deep-linking system to TripAdvisor. By wrapping thumbnails in SEO-optimized anchors, I turned a simple landing page into a functional travel portal.
- LinkedIn: Gunel Mammadzade
- Email: gunel1mammadzade@gmail.com
Built with ๐