Use cdn for images

app.config.ts

@@ -0,0 +1,3 @@
+export default defineAppConfig({
+  cdnURL: "https://d3iqwa7wbnqnz1.cloudfront.net",
+})

nuxt.config.ts

@@ -5,3 +5,7 @@ export default defineNuxtConfig({
     '@nuxtjs/tailwindcss'
   ]
 })
+
+  // app: {
+  //   cdnURL: "https://d3iqwa7wbnqnz1.cloudfront.net"
+  // },

pages/Projects.vue

@@ -10,8 +10,16 @@
         and on my <a href="https://github.com/shillerben" class="text-turquoise">GitHub</a>.
       </p>
     </div>
+    <!-- <div>
+      <h1 class="text-white text-xl lg:text-3xl text-center">Reinforcement Learning with SuperTuxKart</h1>
+      <h1 class="text-white text-xl lg:text-3xl text-center">Battlesnake</h1>
+      <h1 class="text-white text-xl lg:text-3xl text-center">FilePlayer</h1>
+    </div> -->
   </div>
 </template>
 
-<style>
+<style scoped>
+/* h1 {
+  color: white;
+} */
 </style>

pages/index.vue

@@ -1,20 +1,30 @@
 <script setup lang="ts">
+useHead({
+  title: 'Ben Shiller',
+  meta: [
+    { name: 'description', content: "Ben Shiller's website" }
+  ],
+})
+const config = useAppConfig()
+const bg_img_style = ref("background-image: url(" + config.cdnURL + "/homepage-bg2-1080p.png)")
+const portrait_img = ref(`${config.cdnURL}/portrait.png`)
 </script>
 
 <template>
-  <div class="bg-black bg-cover bg-center bg-no-repeat bg-fixed" style="background-image: url(/homepage-bg2.png)">
+  <div id="background" class="bg-black bg-cover bg-center bg-no-repeat bg-fixed" :style="bg_img_style"> <!--style="background-image: url(https://d3iqwa7wbnqnz1.cloudfront.net/homepage-bg2-1080p.png);">-->
     <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"/>
+        <img :src="portrait_img" 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.
+            Welcome to my website! This is where I experiment with fun stuff and show off my computer.
+          </p>
+          <p class="text-center text-light-grey text-lg lg:text-xl w-56 lg:w-80 lg:ml-8">
+            7800X3D, RTX 3080, 32GB DDR5, custom water loop, lots of RGB
           </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>
@@ -30,9 +40,10 @@
   </div>
 </template>
 
-<style>
+<style scoped>
 /* body {
   background-image: url(/homepage-bg2.png);
+  background-image: url(bg_img);
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;