<script setup lang="ts">
useSeoMeta({
  title: "Ben Shiller",
  ogTitle: "Ben Shiller",
  description: "Software Engineer passionate about high performance software",
  ogDescription: "Software Engineer passionate about high performance software",
})

const config = useAppConfig()
const bg_img_style = ref("background-image: url(" + config.cdnURL + "/homepage-bg2-1080p.png)")
const portrait_img = ref(`${config.cdnURL}/me_large_cropped_circle.png`)
</script>

<template>
  <div id="background" class="bg-black bg-cover bg-center bg-no-repeat bg-fixed" :style="bg_img_style">
    <div class="flex place-content-center h-screen w-screen bg-dark-blue/40">
      <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-32 h-32 lg:w-48 lg:h-48"/>
        <div class="flex flex-col gap-4 place-content-center place-self-center lg:justify-self-start">
          <p class="text-center text-white text-xl lg:text-2xl w-64 lg:w-96">
            Howdy! I'm Ben Shiller, a Software Engineer passionate about high-performance, resilient, and maintainable systems.
          </p>
          <div class="flex flex-row gap-4 place-self-center place-content-start lg:place-content-center">
            <LinkIconText img-src="/logos/linkedin.svg" link="https://www.linkedin.com/in/ben-shiller/">LinkedIn</LinkIconText>
            <LinkIconText img-src="/logos/github.svg" link="https://github.com/shillerben">GitHub</LinkIconText>
          </div>
          <!-- <div class="flex flex-row gap-4 place-content-start lg:place-content-center">
            <a href="/resume" class="border-white border-4 h-8 w-28">
              <div class="text-center">
                <div class="text-white">resume</div>
              </div>
            </a>
          </div> -->
        </div>
      </div>
    </div>
    <div class="bg-dark-blue/70 p-4">
      <div class="flex flex-col text-white mx-auto lg:w-1/2 content-center">
        <p class="text-l lg:text-2xl text-left py-2">
          It all started in my sophomore year of high school when my curiosity about how computers worked led me to Udacity.
          I enrolled in <i>Introduction to Programming</i> and wrote my first lines of Python. That course lit a spark, and
          soon I was experimenting on a Raspberry Pi blinking LEDs, modding Minecraft, and even synthesizing music. I
          loved seeing how code could bring hardware to life.
        </p>
        <p class="text-l lg:text-2xl text-left py-2">
          I went on to study Computer Engineering at Texas A&M University, where I gained a solid foundation in both Computer
          Science and Electrical Engineering. That's where I discovered the power of C++ and the thrill of having full control
          over a program.
        </p>
        <p class="text-l lg:text-2xl text-left py-2">
          I joined Innovative Signals Analysis after graduating and have spent the past five years developing
          event-driven microservices for high-performance, fault-tolerant systems, leveraging technologies
          such as Kubernetes, Python, C++, RabbitMQ, and S3.
        </p>
        <p class="text-l lg:text-2xl text-left py-2">
          Alongside my professional work, I earned an M.S. in Computer Science from the University of Texas at Austin.
          My graduate studies deepened my understanding of parallel computing, operating systems, and machine learning.
        </p>
        <p class="text-l lg:text-2xl text-left py-2">
          Today, I'm exploring Rust to build secure, efficient software that interacts closely with hardware.
        </p>
        <p class="text-l lg:text-2xl text-left py-2">
          I'm always eager to connect with fellow engineering enthusiasts! Explore my <a class="text-turquoise" href="https://github.com/shillerben">GitHub</a>
          or drop me a message via <a class="text-turquoise" href="https://www.linkedin.com/in/ben-shiller/">LinkedIn</a> to chat.
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>