Phoebe Ly

˚⊹₊𓍊˙⋆𖡼𓋼.𓍊𖤣𖥧𓋼.𖡼⋆˙𓍊₊ ⊹˚

Durian Website

Our assignment was made up of 3 parts and we needed to achieve these elements:

  • Build a website from scratch with HTML and CSS code without bootstrapping
  • Include proper attribution and only use public domain data
  • Basic responsive web design for one page
  • Include SVG map with manually coded points
  • Include a web map using Leaflet

I decided to put more effort into these elements:

  • Flexbox and grid responsive design for all pages
  • Beautiful website design, better UI/UX
  • SVG animation with CSS and Javascript
  • Using geoJSON for points in web map and adding little interactivity with pop-up

I always have a lot of fun with front-end work!

Live site on netlify: Durian website

Home and Varieties page
Map page: We needed to manually code SVG points on a map
Leaflet map used for durian orchards based on OSM data
Durian seasons in different states of Malaysia
Viewing as iPhone 12 Pro in Chrome