shillerben-nuxt/pages/index.vue

<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 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="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">
            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="border-white border-4 h-8 w-28">
              <div class="text-center">
                <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>
  </div>
</template>

<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;
  background-attachment: fixed;
  background-color: black;
} */
</style>