Skip to content

Commit f60c4f4

Browse files
thusalapithusalapi
authored
Merge pull request #9 from thusalapi/feat/calendly-integration
feat: integrate Calendly for scheduling and add tracking events
2 parents 59dfa31 + 50682e1 commit f60c4f4

7 files changed

Lines changed: 143 additions & 9 deletions

File tree

‎dist/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/png" href="/portfolio-thusalapi/assets/favicon-f92e36ce.ico" />
5+
<link rel="icon" type="image/png" href="/assets/favicon-f92e36ce.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<meta
88
name="description"
@@ -15,8 +15,8 @@
1515

1616
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
1717
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
18-
<script type="module" crossorigin src="/portfolio-thusalapi/assets/index-ab127701.js"></script>
19-
<link rel="stylesheet" href="/portfolio-thusalapi/assets/index-004e9daf.css">
18+
<script type="module" crossorigin src="/assets/index-c6807895.js"></script>
19+
<link rel="stylesheet" href="/assets/index-004e9daf.css">
2020
</head>
2121
<body>
2222
<div id="root"></div>

‎package-lock.json‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"leva": "^0.9.35",
2222
"postcss": "^8.4.38",
2323
"react": "^18.2.0",
24+
"react-calendly": "^4.4.0",
2425
"react-dom": "^18.2.0",
2526
"react-icons": "^5.3.0",
2627
"react-typing-effect": "^2.0.5",

‎src/constants/index.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const freelanceProjects = [
8888
version: 'Live',
8989
techStack: 'React + Three.js',
9090
features: ['3D Product Views', 'AR Preview', 'Custom Configuration', 'Payment Gateway'],
91-
demo: 'https://unisonic.com',
91+
demo: 'https://unisonic.lk',
9292
category: 'E-commerce'
9393
},
9494
{
@@ -98,7 +98,7 @@ export const freelanceProjects = [
9898
version: 'Live',
9999
techStack: 'JavaScript + PHP',
100100
features: ['Online Booking', 'Virtual Tours', 'Guest Management', 'Review System'],
101-
demo: 'https://milkyway-resort.com',
101+
demo: 'https://milkyway-resort.web.app',
102102
category: 'Tourism'
103103
},
104104
{
@@ -118,6 +118,7 @@ export const freelanceProjects = [
118118
version: 'Live',
119119
techStack: 'JavaScript + PHP',
120120
features: ['Inventory Management', 'POS System', 'Customer Database', 'Repair Tracking'],
121+
demo: 'https://techcloudstore.com',
121122
category: 'Business System'
122123
},
123124
];
@@ -183,6 +184,10 @@ export const socialLinks = [
183184
{ name: 'Twitter', link: 'https://twitter.com/thusalapov' },
184185
];
185186

187+
// Calendly Configuration
188+
export const calendlyUrl = import.meta.env.VITE_CALENDLY_URL || 'https://calendly.com/your-username/30min';
189+
export const userEmail = 'thusalapi@gmail.com';
190+
186191
export const competitions = [
187192
{
188193
id: 1,

‎src/index.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -649,3 +649,30 @@ body {
649649
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
650650
background: rgba(56, 189, 248, 0.5);
651651
}
652+
653+
/* Calendly Modal Custom Styles */
654+
.calendly-popup-content {
655+
background: rgba(17, 17, 19, 0.95) !important;
656+
backdrop-filter: blur(20px);
657+
border: 1px solid rgba(139, 92, 246, 0.3) !important;
658+
border-radius: 16px !important;
659+
box-shadow: 0 0 40px rgba(139, 92, 246, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5) !important;
660+
}
661+
662+
.calendly-overlay {
663+
background: rgba(0, 0, 0, 0.85) !important;
664+
backdrop-filter: blur(8px);
665+
}
666+
667+
.calendly-popup-close {
668+
background: rgba(139, 92, 246, 0.1) !important;
669+
border: 1px solid rgba(139, 92, 246, 0.3) !important;
670+
border-radius: 50%;
671+
transition: all 0.3s ease;
672+
}
673+
674+
.calendly-popup-close:hover {
675+
background: rgba(139, 92, 246, 0.2) !important;
676+
transform: scale(1.1);
677+
box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
678+
}

‎src/sections/Socials.jsx‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,37 @@
1-
import React from "react";
1+
import React, { useState, useEffect } from "react";
2+
import { PopupModal } from "react-calendly";
23
import SocialProfiles from "../components/SocialProfiles";
3-
import { socialLinks } from "../constants";
4+
import { socialLinks, calendlyUrl, userEmail } from "../constants";
5+
import {
6+
trackCalendlyOpen,
7+
trackCalendlyClose,
8+
trackEmailClick,
9+
setupCalendlyEventListeners,
10+
} from "../utils/calendly";
411

512
const Socials = () => {
13+
const [isCalendlyOpen, setIsCalendlyOpen] = useState(false);
14+
15+
useEffect(() => {
16+
// Setup Calendly event listeners for tracking
17+
setupCalendlyEventListeners();
18+
}, []);
19+
20+
const handleScheduleClick = () => {
21+
setIsCalendlyOpen(true);
22+
trackCalendlyOpen();
23+
};
24+
25+
const handleCalendlyClose = () => {
26+
setIsCalendlyOpen(false);
27+
trackCalendlyClose();
28+
};
29+
30+
const handleEmailClick = () => {
31+
trackEmailClick();
32+
window.location.href = `mailto:${userEmail}`;
33+
};
34+
635
return (
736
<section
837
className="gap-16 w-5/6 max-container mx-auto px-4 relative"
@@ -53,8 +82,13 @@ const Socials = () => {
5382
{/* Contact CTA */}
5483
<div className="text-center space-y-6">
5584
<div className="flex flex-wrap justify-center gap-4">
56-
<button className="glow-button">Send Email</button>
57-
<button className="px-6 py-3 rounded-lg border border-border text-text-secondary hover:text-text-primary hover:border-primary-400 transition-all duration-300 bg-surface/30 backdrop-blur-sm">
85+
<button className="glow-button" onClick={handleEmailClick}>
86+
Send Email
87+
</button>
88+
<button
89+
className="px-6 py-3 rounded-lg border border-border text-text-secondary hover:text-text-primary hover:border-primary-400 transition-all duration-300 bg-surface/30 backdrop-blur-sm"
90+
onClick={handleScheduleClick}
91+
>
5892
Schedule Call
5993
</button>
6094
</div>
@@ -63,6 +97,21 @@ const Socials = () => {
6397
</p>
6498
</div>
6599
</div>
100+
101+
{/* Calendly Popup Modal */}
102+
<PopupModal
103+
url={calendlyUrl}
104+
onModalClose={handleCalendlyClose}
105+
open={isCalendlyOpen}
106+
rootElement={document.getElementById("root")}
107+
pageSettings={{
108+
backgroundColor: "111113",
109+
hideEventTypeDetails: false,
110+
hideLandingPageDetails: false,
111+
primaryColor: "8b5cf6",
112+
textColor: "ffffff",
113+
}}
114+
/>
66115
</section>
67116
);
68117
};

‎src/utils/calendly.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Calendly utility functions
2+
import { trackEvent } from './analytics';
3+
4+
// Track Calendly popup open
5+
export const trackCalendlyOpen = () => {
6+
trackEvent('calendly_open', 'scheduling', 'Calendly Popup Opened');
7+
};
8+
9+
// Track Calendly event scheduled
10+
export const trackCalendlyScheduled = () => {
11+
trackEvent('calendly_scheduled', 'scheduling', 'Appointment Scheduled');
12+
};
13+
14+
// Track Calendly popup close
15+
export const trackCalendlyClose = () => {
16+
trackEvent('calendly_close', 'scheduling', 'Calendly Popup Closed');
17+
};
18+
19+
// Track email button click
20+
export const trackEmailClick = () => {
21+
trackEvent('email_click', 'contact', 'Send Email Button Clicked');
22+
};
23+
24+
// Calendly event listener for tracking scheduled events
25+
export const setupCalendlyEventListeners = () => {
26+
if (typeof window !== 'undefined') {
27+
window.addEventListener('message', (e) => {
28+
if (e.data.event && e.data.event.indexOf('calendly') === 0) {
29+
// Track Calendly events
30+
if (e.data.event === 'calendly.event_scheduled') {
31+
trackCalendlyScheduled();
32+
console.log('📅 Calendly event scheduled successfully!');
33+
}
34+
}
35+
});
36+
}
37+
};

0 commit comments

Comments
 (0)