Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/lgomegarc/mi-portfolio/llms.txt

Use this file to discover all available pages before exploring further.

The Contact section (ContactSection.svelte) provides two ways to reach Leila: a direct contact info panel on the left, and a live EmailJS-powered contact form on the right. Messages are sent directly from the browser — no backend server required.

​
Contact Info Panel

The left panel displays three contact details and embeds the <SocialLinks /> component for GitHub, LinkedIn, and CV download links. 
const contactInfo = [
  { icon: '✉️', label: 'Email',     value: 'leilagomezgarcia@gmail.com'  },
  { icon: '📞', label: 'Teléfono', value: '+34 722 76 44 83'             },
  { icon: '📍', label: 'Ubicación', value: 'Remoto / Pontevedra, España' },
];
Each entry renders as a row with a large emoji icon on the left and a label + value pair on the right.

​
EmailJS Configuration

The component uses three EmailJS credentials to authenticate and route outgoing messages: 
const serviceID  = 'service_iqfu8xj';
const templateID = 'template_gcnd671';
const publicKey  = 'd0tRwp_1AOxLyJWbS';
  • serviceID — identifies the connected email service (e.g., Gmail, Outlook) configured in your EmailJS dashboard
  • templateID — specifies which EmailJS template to populate with the submitted form data
  • publicKey — the public API key that authorises client-side sends from your EmailJS account
These credentials are currently hardcoded. For a forked or production deployment, move them to environment variables (e.g., VITE_EMAILJS_SERVICE_ID) and load via import.meta.env.

​
Form Fields

The contact form exposes three required fields:
FieldInput TypeName AttributeRequired
Full nametextnameYes
Email addressemailemailYes
Messagetextarea (4 rows)messageYes
All three fields are bound by their HTML name attribute, which EmailJS uses to match values to template variables (e.g., {{name}}, {{email}}, {{message}}).

​
Form Submission Flow

1

Form submitted

The user submits the form. The handleSubmit(event) handler fires, calls event.preventDefault() to suppress the native browser submit, and sets isSubmitting = true — disabling the submit button and showing “Enviando…” text.
2

EmailJS send called

emailjs.send(serviceID, templateID, { name, email, message }, publicKey) is called with the three form field values extracted from event.target.
3

Success path

On a successful send, the Svelte writable store statusMessage is set to '✅ ¡Mensaje enviado correctamente!' and form.reset() clears all fields.
4

Error path

If the send throws, the catch block sets statusMessage to '❌ Error al enviar el mensaje. Intenta de nuevo.' and logs the error to the console.
5

Cleanup

The finally block resets isSubmitting = false regardless of outcome, re-enabling the submit button.

​
handleSubmit Function

async function handleSubmit(event) {
  event.preventDefault();
  const form = event.target;

  const name    = form.name.value;
  const email   = form.email.value;
  const message = form.message.value;

  isSubmitting = true;
  statusMessage.set('');

  try {
    await emailjs.send(serviceID, templateID, { name, email, message }, publicKey);
    statusMessage.set('✅ ¡Mensaje enviado correctamente!');
    form.reset();
  } catch (err) {
    statusMessage.set('❌ Error al enviar el mensaje. Intenta de nuevo.');
    console.error(err);
  } finally {
    isSubmitting = false;
  }
}

​
Setting Up EmailJS for a Fork

1

Create an EmailJS account

Sign up for a free account at https://www.emailjs.com.
2

Create an Email Service

In the EmailJS dashboard, go to Email Services and connect a provider (e.g., Gmail). Note the Service ID assigned.
3

Create an Email Template

Go to Email Templates and create a new template. Use the variables {{name}}, {{email}}, and {{message}} in the template body. Note the Template ID.
4

Find your Public Key

Navigate to Account → API Keys in the EmailJS dashboard and copy your Public Key.
5

Update the component

Replace the hardcoded values in src/lib/components/ContactSection.svelte with your own credentials — or extract them to a .env file:
VITE_EMAILJS_SERVICE_ID=service_xxxxxxx
VITE_EMAILJS_TEMPLATE_ID=template_xxxxxxx
VITE_EMAILJS_PUBLIC_KEY=xxxxxxxxxxxxxxxxxxxx
Then reference them in the component:
const serviceID  = import.meta.env.VITE_EMAILJS_SERVICE_ID;
const templateID = import.meta.env.VITE_EMAILJS_TEMPLATE_ID;
const publicKey  = import.meta.env.VITE_EMAILJS_PUBLIC_KEY;
EmailJS free tier allows up to 200 emails/month. The contact form works entirely client-side — no server or API routes are needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us