Vishnu Gupta Logo Image
Vishnu Gupta

Triptrekker

Triptrekker is a travel website aimed at travellers looking for a multitude of adventures in different cities.

Project Image

Project Overview

During the course of this project,

Created 3 different web pages from Wireframe layout using HTML and CSS Utilized Bootstrap extensively for responsive design Deployed the website to Netlify/Vercel

Added a navigation bar which collapses automatically on smaller devices to display a toggle icon Utilized CSS properties to add the hero image and align elements in it as per the design Implemented the cities grid section by using Bootstrap’s grid Improved the cities grid section by making images responsive and added effect on hovering over an image tile

Created a responsive grid of adventures using Bootstrap’s grid Made adventure type and price text on the cards responsive using Bootstrap’s flex containers Added proper spacing between the adventure’s grid using Bootstrap spacing shorthands Made the images to be responsive using Bootstrap’s responsive image classes

Came up with the page’s HTML layout from scratch Positioned images of varying sizes and set them to toggle visibility based on screen sizes Created the “Sold out” side section to be fixed on the screen even on scrolling

Deployed the QTripStatic website to Netlify using Netlify CLI commands

Tools Used

React.js
Event Handling
Forms
React Hooks
REST API
Error Handling
Redux
React Router
Conditional Rendering
Controlled Components
localStorage
Material UI
Keyword Search
Debouncing
Material UI Grid
HTML
CSS
JavaScript
SASS
GIT
CSS Flexbox
Responsive Design
CSS Positioning