42 lines
1.6 KiB
Vue
42 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
useHead({
|
|
title: 'Ben Shiller',
|
|
meta: [
|
|
{ name: 'description', content: "Ben Shiller" }
|
|
],
|
|
})
|
|
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">
|
|
<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-xl lg:text-2xl w-64 lg:w-96">
|
|
Howdy! My name is Ben Shiller, and I am a Software Engineer passionate about building highly performant, resilient,
|
|
and maintainable software.
|
|
</p>
|
|
<div class="flex flex-row gap-4 place-content-start lg:place-content-center">
|
|
<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>
|
|
<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>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style> |