https://github.com/glowiep/bp-site-mockup

This repository contains a responsive website mockup for busplanner.com
https://github.com/glowiep/bp-site-mockup

react-vite scss webdesign

Last synced: about 1 month ago
JSON representation

This repository contains a responsive website mockup for busplanner.com

• Host: GitHub
• URL: https://github.com/glowiep/bp-site-mockup
• Owner: glowiep
• Created: 2024-03-23T00:13:43.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-25T02:36:03.000Z (about 1 year ago)
• Last Synced: 2025-02-11T12:30:35.662Z (3 months ago)
• Topics: react-vite, scss, webdesign
• Language: JavaScript
• Homepage: https://glowiep.github.io/bp-site-mockup/
• Size: 2.35 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# BusPlanner Website Redesign Mockup 🚌

This repository contains a responsive website mockup for busplanner.com.

## Design Concept 💫

The mockup features a clean and minimalist design with a focus on user-friendly navigation, intuitive layout, and engaging visual elements.

!["BusPlanner site mockup landing page"](public/docs/4_landing.png)

## Process 💭

- The goals for this redesign were simple. Due to time limits, the focus was to create a single landing page for busplanner.com, which links to the existing pages. 

- No changes to the existing wording were made. The images were also sourced from the original page, and converted to SVG for this project.

- A good chunk of my time was spent on choosing the color that ensures a good contrast. I also referred to Adobe Color Wheel when making this decision.

- Majority of my time was also spent on responsive design for various screen sizes. 

- Given more time, other features that could have been included are:

  - A responsive navbar for mobile view.

  - Inlude more components of the original website.

  - Possibly more refactoring in the Sass files.

- Other than that, a bit of time was dedicated to this README, and deployment of this project to a live link.

## Technology Stack 🔧

- ReactJS (this project is built with Vite)

- Sass Styling

- MUI Library

## Learnings 🧠

- Setting up react-vite deployment to Github pages.

- Adding a custom hook to show and hide sections based on their visibility in the viewport.

## Sources 🪝

- BusPlanner Website - Images were downloaded from here

- Picsvg - JPEG to SVG converter




![Project hours logged](https://img.shields.io/badge/Project_Hours_Logged-22.0_h-blue)