Contact Page
Relevant source files
The following files were used as context for generating this wiki page:
The contact functionality provides multiple ways for users to get in touch. It is implemented through a combination of a reusable ContactSection widget, a dedicated /contact page, and a backend form handling service provided by Netlify. The system is designed to guide users toward communication, either by navigating to a contact form, copying an email address directly, or accessing social media links.
All user-facing text content for contact prompts is centralized in a configuration file for easy management. The actual form submission is handled by a hidden HTML form that integrates with Netlify's built-in form detection, as detailed in the Privacy Policy.
Component Architecture
The contact feature is composed of several key components across different layers of the Feature-Sliced Design (FSD) architecture.
pages/Contact: A dedicated page at the/contactroute. It currently serves as a basic placeholder.widgets/ContactSection: A visually rich, reusable component displayed on the Home page to prompt user interaction. It contains calls-to-action and an email copy feature.widgets/Footer: Contains direct links to social media profiles (GitHub, LinkedIn, X) and a link to the Privacy Policy.index.html: The root HTML file contains a hidden form that is essential for Netlify's form handling service.
This diagram illustrates how the components are structured and how they relate to each other.
Content Configuration
All static text related to the contact section is managed in src/shared/config/content.ts. This allows for easy updates without changing component logic.
| Key | Description | Value |
|---|---|---|
title | The main headline of the contact section. | "Ready to start?" |
description | The paragraph text encouraging users to reach out. | "I'm currently seeking full-time opportunities where I can contribute my skills to meaningful projects..." |
email | The email address displayed and used for the copy functionality. | "bonykoshy@gmail.com" |
cta | The text for the primary call-to-action button, which links to the /contact page. | "Get in Touch" |
Sources: src/shared/config/content.ts:60-66
User Interaction and Data Flow
Contact Section Widget
The ContactSection widget provides two primary user interactions: navigating to the contact page and copying the email address.
- Get in Touch Button: A primary button that navigates the user to the
/contactpage.
Sources: src/widgets/ContactSection/ContactSection.tsx:75-84 - Copy Email Button: A secondary button that copies the predefined email address to the user's clipboard.
Sources: src/widgets/ContactSection/ContactSection.tsx:86-97
The flow for copying an email is handled client-side using the navigator.clipboard API.
This sequence diagram shows the email copy process.
Netlify Form Submission
The project uses Netlify Forms to handle submissions from the contact page. This is achieved by including a hidden HTML form in index.html with the netlify attribute. When a form with the same name is submitted from anywhere in the app (presumably from the /contact page, though its implementation is not detailed), Netlify processes it.
The hidden form defines the data fields that Netlify will expect.
| Field Name | Type | Description |
|---|---|---|
form-name | hidden | The name of the form, "contact". |
bot-field | hidden | A honeypot field to catch spam bots. |
name | text | The user's name. |
email | email | The user's email address. |
message | textarea | The content of the user's message. |
Sources: index.html:36-41
This diagram illustrates the data flow for a form submission.
Routing
The application router, defined in App.tsx, lazy-loads the Contact page component and associates it with the /contact path.
// src/app/App.tsx
const Contact = lazy(() => import("@/pages/Contact"));
// ...
<Route
path="/contact"
element={
<Suspense fallback={fallback}>
<Contact />
</Suspense>
}
/>
Sources: src/app/App.tsx:13, src/app/App.tsx:46-52
Data Privacy
The PrivacyPolicy.tsx page explicitly details how information submitted through the contact form is handled.
- Information Collected: Name, email address, and message content.
- Use of Information: Solely for responding to the user's inquiry. It is not used for marketing.
- Data Sharing: Information is not sold or rented. It is processed by third-party services like Netlify for form functionality.
- Data Retention: Information is retained only as long as necessary to respond to the inquiry. Users can request data deletion by emailing
bonykoshy@gmail.com.
Sources: src/pages/PrivacyPolicy.tsx:28-35, src/pages/PrivacyPolicy.tsx:37-41, src/pages/PrivacyPolicy.tsx:42-47, src/pages/PrivacyPolicy.tsx:56-61
Conclusion
The contact system is a well-structured feature that leverages both client-side interactivity and a serverless backend (Netlify Forms). It provides clear user pathways through the ContactSection widget and social links in the Footer. Content is managed centrally, and data handling practices are transparently documented in the privacy policy, creating a robust and user-friendly point of communication.