Personal_Website/resources/js/components/PageHeader.vue

58 lines
1.8 KiB
Vue

<template>
<div :class="{ 'home-header': isHome, 'header': !isHome }">
<div class="container">
<header>
<router-link class="brand" :to="{ name: 'index' }">
<img
class="brand-logo"
src="//via.placeholder.com/256"
alt="Brand Logo"
/>
<span class="brand-name">Daniel de Cloet</span>
</router-link>
<nav class="site-nav">
<site-nav></site-nav>
</nav>
</header>
<section class="hero" v-if="isHome">
<h1>I'm Daniel, junior software engineer</h1>
<p>
I am a student pursuing a Bachelor's in Computer Science,
with a software engineering specialization. <br/>
I have a love for discovering new technologies and
inventing unique solutions to complex problems.
</p>
</section>
</div>
<div class="wave" v-if="isHome">
<svg
preserveAspectRatio="none"
width="1440"
height="74"
viewBox="0 0 1440 74"
>
<path
d="M456.464 0.0433865C277.158 -1.70575 0 50.0141 0 50.0141V74H1440V50.0141C1440 50.0141 1320.4 31.1925 1243.09 27.0276C1099.33 19.2816 1019.08 53.1981 875.138 50.0141C710.527 46.3727 621.108 1.64949 456.464 0.0433865Z"
></path>
</svg>
</div>
</div>
</template>
<script>
import SiteNav from './SiteNav.vue';
export default {
components: {
SiteNav,
},
computed: {
isHome() {
return this.$route.name === 'index';
}
},
}
</script>