Fix/mobile banner width (#9)

* scale up svg and fix formatting to support new scale

On some browsers/devices the SVG in the banner was ignoring the w-screen directive and not filling the screen. I have scaled up the SVG to fix this issue. I also scaled up the entire SVG to look a bit better on all devices. I increased the negative y margin to support the larger size. This may need testing as this type of hard-coding tends to be fragile. Testing on 1080 monitor and multiple responsive settings. Should be tested to support 1440 as well, may need new media queries to support this screen size.

* minor about section tweaks

Change 'business network management' to 'search engine optimization', sort about section bullet points.

* fix unexpected line on mobile (again)

The styling to increase the SVG scale reintroduced the unexpected line between the main banner div and the SVG. Tweaked the margin on the SVG container div to fix line. Removed negative margine on SVG due to being redundant.

src/components/banner.tsx

@@ -15,7 +15,10 @@ export default function Banner() {
  </div>
  </div>
 
- <img src={bgImage.src} className="block w-screen select-none my-[-2px]" alt="Orange, curved background for website banner"/>
+ <div className=" w-screen h-20 overflow-x-hidden mt-[-2px] md:h-48">
+ <img src={bgImage.src} className="block scale-150 w-screen select-none" alt="Orange, curved background for website banner"/>
+ </div>
+
 
  </div>
  )

src/pages/home.tsx

@@ -15,7 +15,7 @@ const aboutHosting = {
  "Website Deployment", 
  "Docker", 
  "Kubernetes"
- ],
+ ].sort(),
  imgPath: hostingImg.src
 }
 
@@ -27,7 +27,7 @@ const aboutWebDev = {
  "Design", 
  "Management", 
  "Api Integrations"
- ],
+ ].sort(),
  imgPath: webDevImg.src
 }
 
@@ -37,9 +37,9 @@ const aboutOther = {
  need listed here, please feel free to reach out.`,
  listItems: [
  "Social Media Management",
- "Business Network Management",
+ "Search Engine Optimization",
  "3D Printing", 
- ],
+ ].sort(),
  imgPath: otherImg.src
 }