Redo the home page

pages/About.vue

@@ -3,7 +3,6 @@
 
 <template>
   <div class="bg-charcoal min-h-max h-screen">
-    <!-- <div class="bg-dark-blue w-screen flex flex-col items-center gap-8"> -->
     <div class="bg-dark-green w-screen flex flex-col items-center gap-8">
       <div class="position-self-center my-4 text-white text-4xl lg:text-8xl text-center">Ben Shiller</div>
       <div class="justify-self-end flex flex-row gap-8 lg:gap-32">

pages/index.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="flex place-content-center h-screen w-screen">
+    <div class="flex flex-col lg:flex-row place-content-center gap-4 lg:gap-8">
+      <img src="/homepage-me.png" class="mx-auto lg:my-auto justify-self-center lg:justify-self-end w-64 h-64 lg:w-96 lg:h-96"/>
+      <div class="flex flex-col gap-4 place-content-center place-self-center lg:justify-self-start">
+        <p class="text-center text-white text-2xl lg:text-4xl w-64 lg:w-96">
+          Howdy! My name is Ben Shiller, and I am a software developer.
+        </p>
+        <div class="flex flex-row gap-4 place-content-start lg:place-content-center">
+          <!-- <a href="/projects" class="bg-white border-white h-8 w-28"> -->
+          <a href="/projects" class="border-white border-4 h-8 w-28">
+            <div class="text-center">
+              <!-- <div class="border-white border-4 text-black">Projects</div> -->
+              <div class="text-white">Projects</div>
+            </div>
+          </a>
+          <a href="/about" class="border-white border-4 h-8 w-28">
+            <div class="text-center">
+              <div class="text-white">About Me</div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+body {
+  background-image: url(/homepage-bg.png);
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-color: black;
+}
+</style>