EchoFolio/contact.html at master · harsh98trivedi/EchoFolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
---
layout: default
title: Contact
---

<section class="min-h-screen pt-32 pb-24 relative overflow-hidden">
    <!-- Abstract Background -->
    <div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-b from-primary/5 to-transparent blur-3xl pointer-events-none"></div>

    <div class="container mx-auto px-6 relative z-10">
        <div class="flex flex-col lg:flex-row gap-16 lg:gap-24 items-start">
            <!-- Info Side -->
            <div class="lg:w-5/12 fade-up lg:sticky lg:top-32">
                <h1 class="text-6xl md:text-8xl font-display font-bold mb-8 tracking-tighter leading-none shery-text">
                    {{ site.data.owner.ui.contact_title | default: "Let's Talk." }}
                </h1>
                <p class="text-xl text-gray-400 mb-12 leading-relaxed">
                    {{ site.data.owner.ui.contact_subtitle | default: "Have a project in mind or just want to explore a collaboration? I'm all ears." }}
                </p>

                <div class="space-y-12">
                     <!-- Email -->
                     {% if site.data.owner.email %}
                     <div>
                         <span class="text-sm font-mono text-gray-500 uppercase tracking-widest block mb-2">Email Me</span>
                         <a href="mailto:{{ site.data.owner.email }}?subject=Let's work together" class="text-2xl md:text-3xl font-display hover:text-primary transition-colors magnetic inline-block border-b border-transparent hover:border-primary transform-gpu">
                             {{ site.data.owner.email }}
                         </a>
                     </div>
                     {% endif %}


                     <!-- Google Calendar Appointment Scheduling begin -->
                     <!-- Google Calendar Appointment Scheduling begin -->
                     <a href="{{ site.data.owner.config.google_calendar_appointment_url }}" target="_blank" class="text-2xl md:text-3xl font-display hover:text-primary transition-colors magnetic inline-block border-b border-transparent hover:border-primary transform-gpu">
                        <i class="fa-regular fa-calendar mr-3"></i> Schedule a Call
                     </a>
                     <!-- end Google Calendar Appointment Scheduling -->

                     <!-- Socials -->
                     <div>
                         <span class="text-sm font-mono text-gray-500 uppercase tracking-widest block mb-6">Connect</span>
                         <div class="flex flex-wrap gap-4">
                             {% for social in site.data.owner.socials %}
                             <a href="{{ social[1] }}" target="_blank" class="w-14 h-14 bg-white/5 border border-white/10 rounded-2xl flex items-center justify-center hover:bg-white hover:text-black transition-all group magnetic transform-gpu" aria-label="{{ social[0] | capitalize }}">
                                 <!-- Icon Logic -->
                                 {% assign platform = social[0] | downcase %}
                                 {% assign icon_class = 'fa-solid fa-link' %}

                                 {% if platform == 'twitter' or platform == 'x' %}
                                     {% assign icon_class = 'fab fa-x-twitter' %}
                                 {% elsif platform == 'github' %}
                                     {% assign icon_class = 'fab fa-github' %}
                                 {% elsif platform == 'linkedin' %}
                                     {% assign icon_class = 'fab fa-linkedin' %}
                                 {% elsif platform == 'instagram' %}
                                     {% assign icon_class = 'fab fa-instagram' %}
                                 {% elsif platform == 'youtube' %}
                                     {% assign icon_class = 'fab fa-youtube' %}
                                 {% elsif platform == 'behance' %}
                                     {% assign icon_class = 'fab fa-behance' %}
                                 {% elsif platform == 'reddit' %}
                                     {% assign icon_class = 'fab fa-reddit' %}
                                 {% endif %}

                                 <i class="{{ icon_class }} text-xl opacity-70 group-hover:opacity-100"></i>
                             </a>
                             {% endfor %}
                         </div>
                     </div>
                </div>
            </div>

            <!-- Form Side -->
            <div class="lg:w-7/12 w-full fade-up" style="animation-delay: 0.2s">
                <!-- Hidden Iframe for handling submission without redirect -->
                <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>

                <form
                    action="{{ site.data.owner.config.google_form_action }}"
                    method="POST"
                    id="contact-form"
                    target="hidden_iframe"
                    class="bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl p-8 md:p-12 space-y-8 shadow-2xl relative overflow-hidden group/form transform-gpu will-change-transform"
                    onsubmit="this.querySelector('button[type=submit]').innerHTML = 'Sending...'; this.querySelector('button[type=submit]').disabled = true; setTimeout(() => { this.reset(); this.querySelector('button[type=submit]').innerHTML = 'Message Sent!'; this.querySelector('button[type=submit]').classList.add('bg-green-500', 'hover:bg-green-600'); setTimeout(() => { this.querySelector('button[type=submit]').innerHTML = 'Send Message'; this.querySelector('button[type=submit]').disabled = false; this.querySelector('button[type=submit]').classList.remove('bg-green-500', 'hover:bg-green-600'); }, 3000); }, 1000);"
                >
                    <!-- Glossy Effect -->
                    <div class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-transparent opacity-0 group-hover/form:opacity-100 transition-opacity duration-700 pointer-events-none"></div>

                    <div class="space-y-4">
                        <label for="name" class="text-xs font-mono text-gray-400 uppercase tracking-widest ml-1">Name</label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none text-gray-500 group-focus-within:text-primary transition-colors duration-300">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                            </div>
                            <input type="text" id="name" name="entry.2110729848" required placeholder="What's your name?" class="w-full bg-white/5 border border-white/10 rounded-xl pl-14 pr-6 py-4 text-white text-base placeholder-gray-500 focus:border-primary/50 focus:bg-white/10 focus:outline-none focus:ring-1 focus:ring-primary/50 transition-all duration-300 backdrop-blur-sm shadow-inner-lg">
                        </div>
                    </div>

                    <div class="space-y-4">
                        <label for="email" class="text-xs font-mono text-gray-400 uppercase tracking-widest ml-1">Email</label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none text-gray-500 group-focus-within:text-primary transition-colors duration-300">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                            </div>
                            <input type="email" id="email" name="entry.992557118" required placeholder="Your email address" class="w-full bg-white/5 border border-white/10 rounded-xl pl-14 pr-6 py-4 text-white text-base placeholder-gray-500 focus:border-primary/50 focus:bg-white/10 focus:outline-none focus:ring-1 focus:ring-primary/50 transition-all duration-300 backdrop-blur-sm shadow-inner-lg">
                        </div>
                    </div>

                    <div class="space-y-4">
                        <label for="message" class="text-xs font-mono text-gray-400 uppercase tracking-widest ml-1">Message</label>
                        <div class="relative group">
                             <div class="absolute top-5 left-0 pl-5 flex items-start pointer-events-none text-gray-500 group-focus-within:text-primary transition-colors duration-300">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                            </div>
                            <textarea id="message" name="entry.1832246219" required rows="5" placeholder="Tell me about your project..." class="w-full bg-white/5 border border-white/10 rounded-xl pl-14 pr-6 py-4 text-white text-base placeholder-gray-500 focus:border-primary/50 focus:bg-white/10 focus:outline-none focus:ring-1 focus:ring-primary/50 transition-all duration-300 resize-none backdrop-blur-sm shadow-inner-lg"></textarea>
                        </div>
                    </div>

                    <div class="pt-4">
                        <button type="submit" class="w-full bg-white text-black rounded-xl font-bold text-lg py-5 overflow-hidden transition-all hover:scale-[1.02] active:scale-[0.98] hover:shadow-xl hover:shadow-white/10">
                            Send Message
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>