pablo/portfolio-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: restructure project to classic MVC pattern

Browse Source
This commit is contained in:
Pablo de la Torre Jamardo
2025-09-09 19:57:43 +02:00
parent a28728af2a
commit 2a8d5d093c
58 changed files with 1601 additions and 1991 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/sections/ContactSection.vue
View File

@@ -1,3 +1,52 @@
<script lang="ts" setup>
import {ref} from 'vue'
import {Github, Globe, Linkedin, Mail, MapPin, Phone} from 'lucide-vue-next'
import type {Profile} from '@/domain/models/Profile'
defineProps<{
profile: Profile
}>()
const form = ref({
name: '',
email: '',
message: ''
})
const isSubmitting = ref(false)
function getSocialIcon(platform) {
const icons = {
github: Github,
linkedin: Linkedin,
portfolio: Globe
}
return icons[platform] || Globe
}
async function handleSubmit() {
isSubmitting.value = true
// Simulate form submission
await new Promise(resolve => setTimeout(resolve, 1000))
// Here you would typically send the form data to your backend
console.log('Form submitted:', form.value)
// Reset form
form.value = {
name: '',
email: '',
message: ''
}
isSubmitting.value = false
// Show success message (you could use a toast notification)
alert('¡Mensaje enviado correctamente! Te responderé pronto.')
}
</script>
<template>
<section id="contact" class="py-20 bg-white dark:bg-gray-800">
<div class="container mx-auto px-4">
@@ -25,19 +74,19 @@
</div>
<div>
<div class="font-semibold text-gray-900 dark:text-white">Email</div>
<a :href="`mailto:${personal.email}`" class="text-purple-600 hover:underline">
{{ personal.email }}
<a :href="`mailto:${profile?.email}`" class="text-purple-600 hover:underline">
{{ profile?.email }}
</a>
</div>
</div>
<div class="flex items-center space-x-4">
<div v-if="profile?.phone" class="flex items-center space-x-4">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
<Phone class="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div>
<div>
<div style="display:none">
<div class="font-semibold text-gray-900 dark:text-white">Teléfono</div>
<span class="text-gray-600 dark:text-gray-300">{{ personal.phone }}</span>
<span class="text-gray-600 dark:text-gray-300">{{ profile?.phone }}</span>
</div>
</div>
@@ -47,7 +96,7 @@
</div>
<div>
<div class="font-semibold text-gray-900 dark:text-white">Ubicación</div>
<span class="text-gray-600 dark:text-gray-300">{{ personal.location }}</span>
<span class="text-gray-600 dark:text-gray-300">{{ profile?.location }}</span>
</div>
</div>
</div>
@@ -55,25 +104,28 @@
<!-- Social Links -->
<div class="flex space-x-4">
<a
v-for="(url, platform) in personal.social"
:key="platform"
:href="url"
v-for="social in profile?.social"
:key="social.platform"
:href="social.url"
target="_blank"
class="w-12 h-12 bg-gray-100 dark:bg-gray-700 hover:bg-purple-100 dark:hover:bg-purple-900 rounded-full flex items-center justify-center transition-colors"
>
<component :is="getSocialIcon(platform)" class="w-6 h-6 text-gray-600 dark:text-gray-300" />
<component :is="getSocialIcon(social.platform)" class="w-6 h-6 text-gray-600 dark:text-gray-300"/>
</a>
</div>
</div>
<!-- Contact Form -->
<div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-8">
<p class="m-5">¡Hola! Por el momento mi servidor SMTP está de vacaciones 😅.</p>
<p class="m-5">Si quieres contactarme, envíame un correo electrónico directamente y prometo responderte
rápido.</p>
<form @submit.prevent="handleSubmit" class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Nombre
</label>
<input
<input disabled
v-model="form.name"
type="text"
required
@@ -85,7 +137,7 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Email
</label>
<input
<input disabled
v-model="form.email"
type="email"
required
@@ -97,7 +149,7 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Mensaje
</label>
<textarea
<textarea disabled
v-model="form.message"
rows="4"
required
@@ -107,7 +159,7 @@
<button
type="submit"
:disabled="isSubmitting"
:disabled="isSubmitting || 1===1"
class="w-full px-6 py-3 bg-purple-600 hover:bg-purple-700 disabled:opacity-50 text-white rounded-lg font-semibold transition-colors"
>
{{ isSubmitting ? 'Enviando...' : 'Enviar Mensaje' }}
@@ -120,51 +172,3 @@
</section>
</template>
<script setup>
import { ref } from 'vue'
import { Mail, Phone, MapPin, Github, Linkedin, Twitter, Globe } from 'lucide-vue-next'
defineProps({
personal: Object
})
const form = ref({
name: '',
email: '',
message: ''
})
const isSubmitting = ref(false)
function getSocialIcon(platform) {
const icons = {
github: Github,
linkedin: Linkedin,
twitter: Twitter,
portfolio: Globe
}
return icons[platform] || Globe
}
async function handleSubmit() {
isSubmitting.value = true
// Simulate form submission
await new Promise(resolve => setTimeout(resolve, 1000))
// Here you would typically send the form data to your backend
console.log('Form submitted:', form.value)
// Reset form
form.value = {
name: '',
email: '',
message: ''
}
isSubmitting.value = false
// Show success message (you could use a toast notification)
alert('¡Mensaje enviado correctamente! Te responderé pronto.')
}
</script>