This commit is contained in:
267
frontend/app/components/parts/ContactLinks.vue
Normal file
267
frontend/app/components/parts/ContactLinks.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<script setup lang="ts">
|
||||
interface SocialLink {
|
||||
label: string;
|
||||
href: string;
|
||||
description: string;
|
||||
icon: (props: { size?: number }) => any;
|
||||
}
|
||||
|
||||
const IconMail = ({ size = 20 }: { size?: number }) => h('svg', {
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
width: size,
|
||||
height: size,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '2',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round'
|
||||
}, [
|
||||
h('rect', { x: '2', y: '4', width: '20', height: '16', rx: '2' }),
|
||||
h('path', { d: 'm22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7' })
|
||||
])
|
||||
|
||||
const IconGitea = ({ size = 20 }: { size?: number }) => h('img', {
|
||||
src: '/img/icons/gitea.svg',
|
||||
alt: 'Gitea',
|
||||
width: size,
|
||||
height: size,
|
||||
class: 'gitea-icon'
|
||||
})
|
||||
|
||||
const IconGitHub = ({ size = 20 }: { size?: number }) => h('svg', {
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
width: size,
|
||||
height: size,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'currentColor'
|
||||
}, [
|
||||
h('path', { d: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' })
|
||||
])
|
||||
|
||||
const IconLinkedin = ({ size = 20 }: { size?: number }) => h('svg', {
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
width: size,
|
||||
height: size,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'currentColor'
|
||||
}, [
|
||||
h('path', { d: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' })
|
||||
])
|
||||
|
||||
const IconInstagram = ({ size = 20 }: { size?: number }) => h('svg', {
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
width: size,
|
||||
height: size,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '2',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round'
|
||||
}, [
|
||||
h('rect', { x: '2', y: '2', width: '20', height: '20', rx: '5', ry: '5' }),
|
||||
h('path', { d: 'M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z' }),
|
||||
h('line', { x1: '17.5', y1: '6.5', x2: '17.51', y2: '6.5' })
|
||||
])
|
||||
|
||||
const localePath = useLocalePath()
|
||||
const { t } = useI18n()
|
||||
|
||||
const links: SocialLink[] = [
|
||||
{
|
||||
label: t('contact.email.label'),
|
||||
href: 'mailto:aranseraroig@gmail.com',
|
||||
description: t('contact.email.description'),
|
||||
icon: IconMail
|
||||
},
|
||||
{
|
||||
label: 'Gitea',
|
||||
href: 'https://git.aranroig.com/Syndria98',
|
||||
description: t('contact.gitea.description'),
|
||||
icon: IconGitea
|
||||
},
|
||||
{
|
||||
label: 'GitHub',
|
||||
href: 'https://github.com/BinarySandia04',
|
||||
description: 'BinarySandia04',
|
||||
icon: IconGitHub
|
||||
},
|
||||
{
|
||||
label: 'LinkedIn',
|
||||
href: 'https://www.linkedin.com/in/aran-roig/',
|
||||
description: 'aran-roig',
|
||||
icon: IconLinkedin
|
||||
},
|
||||
{
|
||||
label: 'Instagram',
|
||||
href: 'https://www.instagram.com/aran.roig/',
|
||||
description: t('contact.instagram.description'),
|
||||
icon: IconInstagram
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="contact-links">
|
||||
<a
|
||||
v-for="(link, index) in links"
|
||||
:key="index"
|
||||
:href="link.href"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link-card"
|
||||
>
|
||||
<div class="link-icon">
|
||||
<component :is="link.icon" />
|
||||
</div>
|
||||
<div class="link-content">
|
||||
<h3 class="link-label">{{ link.label }}</h3>
|
||||
<p class="link-desc">{{ link.description }}</p>
|
||||
</div>
|
||||
<span class="link-action">──▶</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gitea-icon {
|
||||
filter: invert(1) brightness(0.95);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.gitea-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
|
||||
.link-card {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--color-background-fore);
|
||||
border: 1px solid var(--color-border-color);
|
||||
position: relative;
|
||||
transition: all 0.1s steps(2, end);
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-hover);
|
||||
|
||||
.link-action {
|
||||
color: var(--color-link);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-icon,
|
||||
.link-content,
|
||||
.link-action,
|
||||
.link-label,
|
||||
.link-desc {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
color: var(--color-link);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.link-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.link-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.link-label {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-family: 'Hurmit', monospace;
|
||||
color: var(--color-text);
|
||||
font-weight: normal;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.link-desc {
|
||||
margin: 2px 0 0;
|
||||
font-size: 0.78rem;
|
||||
font-family: 'Hurmit', monospace;
|
||||
color: var(--color-text);
|
||||
opacity: 0.5;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.link-action {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-border-color);
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.1s steps(2, end);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.link-card {
|
||||
padding: 10px 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.link-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.link-label {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import TableHeader from '~/components/parts/TableHeader.vue';
|
||||
import FixedLayout from '~/components/layouts/FixedLayout.vue';
|
||||
import ContactLinks from '~/components/parts/ContactLinks.vue';
|
||||
import { useSeo } from '~/composables/seo';
|
||||
|
||||
const { get, post } = useApi();
|
||||
@@ -41,36 +42,34 @@ const { data: markdown } = await useAsyncData(`fixed`, async () =>
|
||||
|
||||
<FixedLayout>
|
||||
<Container>
|
||||
<h1>Contact Aran Roig</h1>
|
||||
<ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
|
||||
<h1>{{ $t('pages.contact_heading') }}</h1>
|
||||
<div v-if="markdown" class="contact-intro">
|
||||
<ContentRenderer :value="markdown"></ContentRenderer>
|
||||
</div>
|
||||
<ContactLinks />
|
||||
</Container>
|
||||
</FixedLayout>
|
||||
<Footer></Footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h2 {
|
||||
padding-left: 20px;
|
||||
margin-left: 0;
|
||||
.contact-intro {
|
||||
margin: 12px 0 4px;
|
||||
font-size: 0.92rem;
|
||||
color: var(--color-text);
|
||||
opacity: 0.75;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-left: 30px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.two-columns {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
h1 {
|
||||
position: relative;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
h2 {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-left: 18px;
|
||||
.contact-intro {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,6 +3,8 @@ import FixedLayout from '~/components/layouts/FixedLayout.vue';
|
||||
import TableHeader from '~/components/parts/TableHeader.vue';
|
||||
import ServerStatus from '~/components/parts/ServerStatus.vue';
|
||||
|
||||
import ContactLinks from '~/components/parts/ContactLinks.vue';
|
||||
|
||||
import { useSeo } from '~/composables/seo'
|
||||
|
||||
import Place from '~/components/widgets/Place.vue';
|
||||
@@ -270,6 +272,7 @@ const sectionTargets = {
|
||||
<Container>
|
||||
<h2 class="section-title">{{ t('pages.contact_heading') }}</h2>
|
||||
<ContentRenderer v-if="contactMarkdown" :value="contactMarkdown"></ContentRenderer>
|
||||
<ContactLinks />
|
||||
</Container>
|
||||
</section>
|
||||
</FixedLayout>
|
||||
|
||||
1
frontend/app/public/img/icons/gitea.svg
Normal file
1
frontend/app/public/img/icons/gitea.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gitea</title><path d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -45,6 +45,19 @@
|
||||
"show_more": "mostrar més...",
|
||||
"show_less": "mostrar menys"
|
||||
},
|
||||
"contact": {
|
||||
"email": {
|
||||
"label": "Correu",
|
||||
"description": "aranseraroig@gmail.com (Aviat tendré el meu propi)"
|
||||
},
|
||||
"gitea": {
|
||||
"label": "Gitea",
|
||||
"description": "git.aranroig.com (El meu servidor de git)"
|
||||
},
|
||||
"instagram": {
|
||||
"description": "Uns quants dibuixos els tinc allà"
|
||||
}
|
||||
},
|
||||
"prefooter": "Compilada des de la res at las 00:00:00",
|
||||
"footer": "(C) 2026 Aran Roig. Tots els drets no sé que."
|
||||
}
|
||||
@@ -45,6 +45,19 @@
|
||||
"show_more": "show more...",
|
||||
"show_less": "show less"
|
||||
},
|
||||
"contact": {
|
||||
"email": {
|
||||
"label": "Email",
|
||||
"description": "aranseraroig{'@'}gmail.com (Still pending to host my email)"
|
||||
},
|
||||
"gitea": {
|
||||
"label": "Gitea",
|
||||
"description": "git.aranroig.com (My self-hosted git server)"
|
||||
},
|
||||
"instagram": {
|
||||
"description": "Some of my drawings are there"
|
||||
}
|
||||
},
|
||||
"prefooter": "",
|
||||
"footer": "(C) 2026 Aran Roig. All rights whatever."
|
||||
}
|
||||
@@ -45,6 +45,19 @@
|
||||
"show_more": "mostrar más...",
|
||||
"show_less": "mostrar menos"
|
||||
},
|
||||
"contact": {
|
||||
"email": {
|
||||
"label": "Correo",
|
||||
"description": "aranseraroig@gmail.com (Pronto tendré mi propio correo)"
|
||||
},
|
||||
"gitea": {
|
||||
"label": "Gitea",
|
||||
"description": "git.aranroig.com (Mi server de git)"
|
||||
},
|
||||
"instagram": {
|
||||
"description": "Algunos dibujos míos están allí"
|
||||
}
|
||||
},
|
||||
"prefooter": "Compilada desde la nada a las 00:00:00",
|
||||
"footer": "(C) 2026 Aran Roig. Todos los derechos no se que."
|
||||
}
|
||||
1
frontend/public/img/icons/gitea.svg
Normal file
1
frontend/public/img/icons/gitea.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gitea</title><path d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
Reference in New Issue
Block a user