Skip to main content

​
Overview

The Contact component is a simple section that provides a way for visitors to get in touch with you. Currently, it displays a centered message with a link to your email.

​
Location

Source: src/components/sections/Contact.astro
The Contact component exists as a file but is not actually used as a component in index.astro. Instead, the contact section is implemented inline in the page.

​
Current Implementation

In src/pages/index.astro, the contact section is implemented inline rather than using the Contact component: 
<Card colSpan="md:col-span-1 lg:col-span-3" rowSpan="md:row-span-2 lg:row-span-1" title="Contact">
  <div class="flex h-full w-full items-center justify-center text-center text-sm">
    <i>
      Please feel free to reach out to me through 
      <a href={PROFILE.links.mail} class="underline hover:font-bold">Mail</a>.
    </i>
  </div>
</Card>

​
Data Source

The email link comes from PROFILE.links.mail in src/content/profileData.ts: 
links: {
  mail: "mailto:[email protected]",
  // ... other links
}

​
Display Format

The current implementation:
  • Centers content vertically and horizontally
  • Uses italic text for a softer tone
  • Provides an underlined link that becomes bold on hover
  • Uses small text size for subtle presentation

​
Using the Contact Component

If you want to use the actual Contact.astro component, you would need to:
  1. Import it in index.astro:
import Contact from '../components/sections/Contact.astro'
  1. Replace the inline implementation:
<Card colSpan="md:col-span-1 lg:col-span-3" rowSpan="md:row-span-2 lg:row-span-1" title="Contact">
  <Contact/>
</Card>
The current Contact.astro file contains placeholder content and would need to be updated before use. It appears to be an older version that displays book data.

​
Customization Ideas

​
Add a Contact Form

You can replace the simple message with a contact form: 
<form class="flex flex-col gap-4">
  <input 
    type="text" 
    placeholder="Your Name" 
    class="border rounded px-3 py-2"
  />
  <input 
    type="email" 
    placeholder="Your Email" 
    class="border rounded px-3 py-2"
  />
  <textarea 
    placeholder="Your Message" 
    rows="4"
    class="border rounded px-3 py-2"
  ></textarea>
  <button type="submit" class="bg-primary text-white rounded px-4 py-2">
    Send Message
  </button>
</form>

​
Add Multiple Contact Methods

Display various ways to reach you: 
<div class="flex flex-col gap-3">
  <div class="flex items-center gap-2">
    <Mail class="w-4 h-4"/>
    <a href={PROFILE.links.mail} class="hover:underline">
      {PROFILE.links.mail.replace('mailto:', '')}
    </a>
  </div>
  {PROFILE.links.linkedin && (
    <div class="flex items-center gap-2">
      <Linkedin class="w-4 h-4"/>
      <a href={PROFILE.links.linkedin} target="_blank" class="hover:underline">
        LinkedIn Profile
      </a>
    </div>
  )}
  {PROFILE.links.twitter && (
    <div class="flex items-center gap-2">
      <Twitter class="w-4 h-4"/>
      <a href={PROFILE.links.twitter} target="_blank" class="hover:underline">
        Twitter DM
      </a>
    </div>
  )}
</div>

​
Add Availability Status

Show your current availability for work or collaborations: 
<div class="flex flex-col items-center gap-4">
  <div class="flex items-center gap-2">
    <span class="w-3 h-3 rounded-full bg-green-500"></span>
    <span class="text-sm font-medium">Available for freelance work</span>
  </div>
  <p class="text-sm text-center">
    I'm currently accepting new projects. Feel free to reach out through 
    <a href={PROFILE.links.mail} class="underline hover:font-bold">email</a>.
  </p>
</div>

​
Add Calendar Booking

Integrate a scheduling tool like Calendly: 
<div class="flex flex-col items-center gap-4">
  <p class="text-sm text-center">
    Want to have a quick chat? Schedule a 30-minute call with me.
  </p>
  <a 
    href="https://calendly.com/yourusername/30min" 
    target="_blank"
    class="btn btn-primary"
  >
    Schedule a Call
  </a>
  <p class="text-xs text-gray-600">
    Or reach out via <a href={PROFILE.links.mail} class="underline">email</a>
  </p>
</div>

​
Add Social Media Grid

Create a visual grid of contact methods: 
<div class="grid grid-cols-2 gap-4">
  <a href={PROFILE.links.mail} class="flex flex-col items-center gap-2 p-4 border rounded hover:bg-gray-50">
    <Mail class="w-6 h-6"/>
    <span class="text-xs">Email</span>
  </a>
  <a href={PROFILE.links.linkedin} target="_blank" class="flex flex-col items-center gap-2 p-4 border rounded hover:bg-gray-50">
    <Linkedin class="w-6 h-6"/>
    <span class="text-xs">LinkedIn</span>
  </a>
  <a href={PROFILE.links.github} target="_blank" class="flex flex-col items-center gap-2 p-4 border rounded hover:bg-gray-50">
    <Github class="w-6 h-6"/>
    <span class="text-xs">GitHub</span>
  </a>
  <a href={PROFILE.links.twitter} target="_blank" class="flex flex-col items-center gap-2 p-4 border rounded hover:bg-gray-50">
    <Twitter class="w-6 h-6"/>
    <span class="text-xs">Twitter</span>
  </a>
</div>

​
Best Practices

​
Accessibility

  • Always use mailto: links for email addresses
  • Add descriptive link text (avoid “click here”)
  • Ensure sufficient color contrast
  • Make clickable areas large enough for touch targets

​
Privacy

  • Consider using a contact form to hide your email from scrapers
  • Use services like FormSpree or Netlify Forms for form handling
  • Add honeypot fields to prevent spam

​
User Experience

  • Clearly communicate response time expectations
  • Offer multiple contact methods for accessibility
  • Keep the interface simple and uncluttered
  • Provide context about what kinds of inquiries you welcome
  • See the IntroCard component which also displays social links
  • See the Card component for container styling

​
Integration with Forms Services

If you want to add a working contact form, consider these services:
  • FormSpree - Simple form backend
  • Netlify Forms - Built-in if hosting on Netlify
  • Formsubmit.co - Free form endpoint
  • Web3Forms - Privacy-focused form service
Example with FormSpree: 
<form action="https://formspree.io/f/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Your Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>

Build docs developers (and LLMs) love

Get started for freeTalk to us