47 lines
1 KiB
Vue
47 lines
1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
|
|
import laurelMark from "@/assets/brand/mark.svg";
|
|
import type { ComponentProps } from "@/data/portfolio";
|
|
|
|
const year = new Date().getFullYear();
|
|
|
|
const { portfolioData } = defineProps<ComponentProps>();
|
|
|
|
const name = computed(() => portfolioData?.name.toUpperCase());
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="port-footer">
|
|
<img :src="laurelMark" alt="" width="22" height="22" style="opacity: 0.45" />
|
|
<div class="port-footer-meta">
|
|
<span>{{ name }}</span>
|
|
<span>{{ year }}</span>
|
|
<span>NYCHTHEMERON</span>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.port-footer {
|
|
border-top: 1px solid var(--border-lo);
|
|
padding: 2.5rem 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.port-footer-meta {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.64rem;
|
|
color: var(--text-dim);
|
|
letter-spacing: 0.1em;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px 18px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|