BIKE-BITS CYCLING BLOG

Technologies

• HTML5
• CSS3 / SCSS
• JavaScript
• JavaScript ES6 modules
• Webpack

---

Mockup

See the mockups on Behance

---

Features

• home page with blog selection, gallery preview and contact
• about section
• blog section with cycling adventures from Croatia and Slovenia
• photo gallery
• product order section
• contact

---

Improvement ideas

• homepage
• about
• blog
• gallery
• order modal
• contact modal
• cookie element
• 404 page

---

Done

• Homepage Gallery Slider
• animate Blog Thumbnails
• parallax effect in the About section
• animate hero header
• connect LOGO & "bike-bits" with homepage URL

To Do

• fixed nav - remove when it reaches gallery

• modal with big picture when image clicked

• SCSS

• fill text content
  

• order form - opens when you click on a button somewhere in the gallery

• contact
  

---

Features to implement

• slider component

• responsive blog thumbnails

• smooth scroll

• reveal elements on scroll

• lazy loading images (blog)
  

• modal window when clicking on a photo in the gallery or on the screen (except the header photo)

• responsive search bar

• interactive map (blog)

• photo download disabled
  

• [] Responsiveness

---

Mockup

---

Try it

---

Resources

• Icon in search bar

• Smooth scroll
  

• Slider component - scroll gallery
  

• YT video to implement map
  

• Reveal elements on scroll
  

• Lazy loading images
  

• Sticky navigation
  
  

• Modal window
  

• Responsive design best practices
  

• Responsive search bar
  

• Animations for blog
  

• Ride with GPS (API)

---

Inspo:

• Bikepacking.com