5hraddha / from-portland-to-portland

From Portland to Portland is a static but responsive website about an exciting journey on bike from Portland, Maine to Portland, Oregon.

Project: From Portland to Portland

About the Project

From Portland to Portland is a static but responsive website about an exciting journey on bike from Portland, Maine to Portland, Oregon. You will pass through 12 beautiful states of the USA, covering a total of 3,600 miles, and accomplish 3 monumental missions in 22 days. The website gives a glimpse of 5 main states that you would pass through:

1. Maine
   With 30,843 square miles, Maine is the largest of the six New England states. It is the home to the very first European settlers on US territory in the era of Vikings and is also home to L.L. Bean, which is a great company to grab a super sturdy backpack from for your 3-month expedition.

2. New Hampshire
   There's no better place to lose yourself in nature than in springtime New Hampshire. As serene and beautiful as it was in the 1700s, this state is still much less traveled than its neighbors to the South.

3. New York
   Not only famous for “The Big Apple,” the state of NY also has several other reasons for going down in history. Since the late 1800s Schenectady, “The City that Lights and Hauls the World,” has been home to the world-famous General Electric Company.

4. Erie, PA
   Erie, Pennsylvania, not to be confused with the word “eerie,” although it can be from time to time, is another town worth passing through for several different reasons.

5. Ohio
   From the college capital of Columbus to the clean coastline of Cleveland, Ohio is a truly hidden gem. One of the country's largest and oldest roller coaster parks is waiting to ROCK your world in Sandusky, Ohio!

This exciting journey also covers the Historic Route 66 of USA. The highway, which became one of the most famous roads in the United States, originally ran from Chicago, Illinois, through Missouri, Kansas, Oklahoma, Texas, New Mexico, and Arizona before terminating in Santa Monica in Los Angeles County, California, covering a total of 2,448 miles (3,940 km). It holds a special place in American consciousness and evokes images of simpler times, mom and pop businesses, and the icons of a mobile nation on the road.

Technologies and Standards Used

The technologies that have been used are:

1. HTML (Hyper Text Markup Language)
2. CSS (Cascading Style Sheets)

There are various tools that have been used throughout the project design and development:

Tools	Usage
Figma	For referring to the product design specification
TinyPng	For JPEG/PNG Image Compression
SVGOMG	For refining and compressing SVGs

The main concepts that have been emphasized are:

1. Responsive Web Design

• The website has been developed following the desktop first approach.
• The website is designed to smoothly scale on:
  • 1280px and higher (standard laptops and beyond).
  • From 1024px to 1280px (from a tablet in landscape to a standard laptop).
  • From 768px to 1024px (from a tablet in portrait to a tablet in landscape).
  • From 425px to 768px (from a large smartphone to a tablet in portrait).
  • Up to 425px (mobile devices).

2. CSS Grid
3. CSS Flexbox
4. Optimising Fonts for Devices with Different Resolutions

• Text Smoothing
• Kerning
• Text Rendering

The website is using BEM — Block Element Modifier methodology to create reusable and understandable components in CSS. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast and it allows reuse of existing code without copying and pasting. We are also using Nested BEM File structure organization for CSS.

Product Specification Document

You can view the product specification document here.

Future Improvements

There are few improvements that I am looking to work upon:

1. Including a form in the webpage that allows users to submit a comment.
2. Implementing videos and iframes in the webpage.

Demo

Enjoy the live project