96 lines
4.2 KiB
Vue
96 lines
4.2 KiB
Vue
<!-- eslint-disable vue/multi-word-component-names -->
|
|
<template>
|
|
<div class="h-full overflow-auto p-6">
|
|
<h1 class="text-3xl font-bold mb-6 text-[#000080] border-b-2 border-[#808080] pb-3">Contact Me</h1>
|
|
|
|
<p class="text-gray-700 mb-6 leading-relaxed">
|
|
I'd love to hear from you! Whether you have a question, want to collaborate, or just want to say hi,
|
|
feel free to reach out through any of the following channels.
|
|
</p>
|
|
|
|
<!-- Contact Cards -->
|
|
<div class="space-y-4">
|
|
<!-- Email Card -->
|
|
<a
|
|
href="mailto:tanner@teamhydra.dev"
|
|
class="contact-card bg-white border-2 border-[#808080] p-4 md:p-5 shadow-md flex items-start gap-3 md:gap-4 hover:border-[#000080] transition-colors group"
|
|
>
|
|
<div class="contact-icon bg-[#000080] border-2 border-[#808080] w-12 h-12 md:w-16 md:h-16 shrink-0 flex items-center justify-center group-hover:bg-[#1084d0] transition-colors">
|
|
<Mail :size="24" class="md:w-8 md:h-8" color="#ffffff" />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="text-lg md:text-xl font-bold text-[#000080] mb-1">Email</h3>
|
|
<p class="text-gray-600 text-xs md:text-sm mb-2">Best for professional inquiries and projects</p>
|
|
<p class="text-[#000080] font-mono text-sm md:text-lg break-all">tanner@teamhydra.dev</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Discord Card -->
|
|
<a
|
|
href="https://discord.gg/zira"
|
|
target="_blank"
|
|
class="contact-card bg-white border-2 border-[#808080] p-4 md:p-5 shadow-md flex items-start gap-3 md:gap-4 hover:border-[#000080] transition-colors group"
|
|
>
|
|
<div class="contact-icon bg-[#5865F2] border-2 border-[#808080] w-12 h-12 md:w-16 md:h-16 shrink-0 flex items-center justify-center group-hover:bg-[#4752C4] transition-colors">
|
|
<DiscordIcon :size="24" class="md:w-8 md:h-8" style="color: white" />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="text-lg md:text-xl font-bold text-[#000080] mb-1">Discord</h3>
|
|
<p class="text-gray-600 text-xs md:text-sm mb-2">Join the Discord server for casual conversations</p>
|
|
<p class="text-gray-700 text-sm md:text-base mb-1">
|
|
<span class="font-semibold">Username:</span> <span class="font-mono break-all">sticksdev</span>
|
|
</p>
|
|
<p class="text-gray-700 text-sm md:text-base">
|
|
<span class="font-semibold">Channel:</span> <span class="break-all">#other-support</span>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- GitHub Card -->
|
|
<a
|
|
href="https://github.com/SticksDev"
|
|
target="_blank"
|
|
class="contact-card bg-white border-2 border-[#808080] p-4 md:p-5 shadow-md flex items-start gap-3 md:gap-4 hover:border-[#000080] transition-colors group"
|
|
>
|
|
<div class="contact-icon bg-[#24292e] border-2 border-[#808080] w-12 h-12 md:w-16 md:h-16 shrink-0 flex items-center justify-center group-hover:bg-[#1a1e22] transition-colors text-white">
|
|
<GitHubIcon :size="24" class="md:w-8 md:h-8" style="color: white" />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="text-lg md:text-xl font-bold text-[#000080] mb-1">GitHub</h3>
|
|
<p class="text-gray-600 text-xs md:text-sm mb-2">Check out my projects and contributions</p>
|
|
<p class="text-[#000080] font-mono text-sm md:text-base break-all">@SticksDev</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Response Time Note -->
|
|
<div class="mt-6 bg-[#ffffcc] border-2 border-[#808080] p-4">
|
|
<p class="text-sm text-gray-700">
|
|
<Lightbulb :size="16" class="inline mr-1 text-yellow-600" />
|
|
<span class="font-bold">Note:</span> I typically respond within 24-48 hours. Looking forward to connecting with you!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Mail, Lightbulb } from 'lucide-vue-next'
|
|
import { GitHubIcon, DiscordIcon } from 'vue3-simple-icons'
|
|
</script>
|
|
|
|
<style scoped>
|
|
.contact-card {
|
|
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.contact-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.contact-icon {
|
|
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
</style>
|