40 lines
1.5 KiB
Vue
40 lines
1.5 KiB
Vue
<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> |