Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nicolasgrajaleshoyos/portafolio/llms.txt

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

The Contact component is the fourth and final section of the main portfolio layout (id #contact). It presents a centred call-to-action panel with three social icon links — GitHub, LinkedIn, and a general email icon — followed by a large primary button that opens a Gmail compose window pre-addressed to Nicolas’s email. Two decorative blurred colour blobs frame the panel in the background, and the entire section slides up into view as it enters the viewport.

​
Props

Contact accepts no external props. All URLs, email addresses, and copy text are hardcoded inside the component.

​
Behavior

​
Fade-in via IntersectionObserver

A useRef is bound to the <section> element. An IntersectionObserver with threshold: 0.1 fires once when 10 % of the section is visible, setting isVisible to true and disconnecting immediately. The boolean drives the entrance transition: 
opacity-0 translate-y-8  →  opacity-100 translate-y-0
transition-all duration-700 ease-out

​
Social icon links

Three icon links are rendered in a horizontal flex row. Each link applies the same hover transform: 
transform hover:scale-125 hover:-translate-y-1 transition-all duration-300
IconURL
GitHubIconhttps://github.com/nicolasgrajaleshoyos
LinkedInIconhttps://www.linkedin.com/in/nicolas-grajales-hoyos-12182a353/
EmailIconhttps://mail.google.com/mail/u/0/?hl=es#inbox?compose=new

​
Email CTA button

The primary “Envíame un Email” button links directly to a Gmail compose URL with the recipient pre-filled: 
https://mail.google.com/mail/?view=cm&fs=1&to=nicolasgrajaleshoyos@gmail.com
It opens in a new tab (target="_blank" rel="noopener noreferrer") and uses bg-primary with hover:bg-primary-hover plus a lift transform on hover.

​
Decorative background blobs

Two blurred circular divs create a soft ambient glow behind the content:
  • Top-left blob: bg-primary/10 w-64 h-64 rounded-full -translate-x-16 -translate-y-16 blur-3xl
  • Bottom-right blob: bg-blue-500/10 w-64 h-64 rounded-full translate-x-16 translate-y-16 blur-3xl
Both are absolutely positioned and sit behind the content (z-10 on the container).

​
Usage Example

Contact is placed inside <main> in App.tsx, as the last section before <Footer />: 
import Contact from '@/components/Contact';

const App: React.FC = () => (
  <main className="flex-grow">
    <Hero />
    <About />
    <Projects />
    <Contact />
  </main>
);

​
Customization

Find the <a> tags inside the flex justify-center row and update the href values:
<a href="https://github.com/your-username" target="_blank" rel="noopener noreferrer">
  <GitHubIcon className="h-9 w-9" />
</a>

<a href="https://www.linkedin.com/in/your-profile/" target="_blank" rel="noopener noreferrer">
  <LinkedInIcon className="h-9 w-9" />
</a>
Change the to= query parameter on both the email icon link and the CTA button href:
// Icon link
href="https://mail.google.com/mail/u/0/?hl=es#inbox?compose=new"

// CTA button
href="https://mail.google.com/mail/?view=cm&fs=1&to=your-email@gmail.com"
Edit the bg-* Tailwind classes on the two absolutely-positioned blob divs at the top of the section’s JSX:
bg-violet-400/10   /* top-left blob */
bg-pink-500/10     /* bottom-right blob */
The heading and paragraph text are hardcoded strings. Edit them directly in Contact.tsx:
<h2>Get In Touch</h2>
<p>Open to new opportunities and collaborations — feel free to reach out!</p>

Build docs developers (and LLMs) love

Get started for freeTalk to us