|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Madan Chauhan - Learning & Development Manager</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
border-radius: 3px; |
|
|
background-color: #e0e0e0; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
border-radius: 3px; |
|
|
background-color: #3b82f6; |
|
|
transition: width 1s ease-in-out; |
|
|
} |
|
|
|
|
|
.skill-item:hover .progress-fill { |
|
|
background-color: #2563eb; |
|
|
} |
|
|
|
|
|
.timeline-item:not(:last-child)::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 18px; |
|
|
top: 32px; |
|
|
height: calc(100% - 32px); |
|
|
width: 2px; |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.floating-btn { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
right: 30px; |
|
|
z-index: 99; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.floating-btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.section-divider { |
|
|
position: relative; |
|
|
height: 1px; |
|
|
background-color: #e5e7eb; |
|
|
margin: 60px 0; |
|
|
} |
|
|
|
|
|
.section-divider::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 50%; |
|
|
top: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background-color: white; |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 24px; |
|
|
} |
|
|
|
|
|
#about .section-divider::after { |
|
|
content: '\f007'; |
|
|
font-family: 'Font Awesome 6 Free'; |
|
|
font-weight: 900; |
|
|
} |
|
|
|
|
|
#expertise .section-divider::after { |
|
|
content: '\f19d'; |
|
|
font-family: 'Font Awesome 6 Free'; |
|
|
font-weight: 900; |
|
|
} |
|
|
|
|
|
#experience .section-divider::after { |
|
|
content: '\f0b1'; |
|
|
font-family: 'Font Awesome 6 Free'; |
|
|
font-weight: 900; |
|
|
} |
|
|
|
|
|
#education .section-divider::after { |
|
|
content: '\f19d'; |
|
|
font-family: 'Font Awesome 6 Free'; |
|
|
font-weight: 900; |
|
|
} |
|
|
|
|
|
#skills .section-divider::after { |
|
|
content: '\f542'; |
|
|
font-family: 'Font Awesome 6 Free'; |
|
|
font-weight: 900; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background-color: #3b82f6; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.nav-link.active::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.animate-fade-in { |
|
|
animation: fadeIn 0.8s ease forwards; |
|
|
} |
|
|
|
|
|
.delay-100 { |
|
|
animation-delay: 0.1s; |
|
|
} |
|
|
|
|
|
.delay-200 { |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
|
|
|
.delay-300 { |
|
|
animation-delay: 0.3s; |
|
|
} |
|
|
|
|
|
.delay-400 { |
|
|
animation-delay: 0.4s; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
|
|
<a href="#contact" class="floating-btn bg-blue-600 text-white w-14 h-14 rounded-full flex items-center justify-center text-2xl hover:bg-blue-700"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</a> |
|
|
|
|
|
|
|
|
<header class="sticky top-0 z-50 bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<img src="https://media.licdn.com/dms/image/v2/D4D03AQGNDQ61ooV0JA/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1731236394509?e=1752105600&v=beta&t=d87aJAC5z2uktUPvoJlG-3Tg9cxaNm8J59AxFNPvTkM" |
|
|
alt="Madan Chauhan" |
|
|
class="w-12 h-12 rounded-full object-cover border-2 border-blue-500"> |
|
|
<h1 class="text-xl font-bold text-gray-800">Madan Chauhan</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#about" class="nav-link text-gray-600 hover:text-blue-600">About</a> |
|
|
<a href="#expertise" class="nav-link text-gray-600 hover:text-blue-600">Expertise</a> |
|
|
<a href="#experience" class="nav-link text-gray-600 hover:text-blue-600">Experience</a> |
|
|
<a href="#education" class="nav-link text-gray-600 hover:text-blue-600">Education</a> |
|
|
<a href="#skills" class="nav-link text-gray-600 hover:text-blue-600">Skills</a> |
|
|
<a href="#contact" class="nav-link text-gray-600 hover:text-blue-600">Contact</a> |
|
|
</nav> |
|
|
<button class="md:hidden text-gray-600 focus:outline-none" id="mobile-menu-button"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden hidden bg-white shadow-lg" id="mobile-menu"> |
|
|
<div class="px-6 py-4 space-y-4"> |
|
|
<a href="#about" class="block nav-link text-gray-600 hover:text-blue-600">About</a> |
|
|
<a href="#expertise" class="block nav-link text-gray-600 hover:text-blue-600">Expertise</a> |
|
|
<a href="#experience" class="block nav-link text-gray-600 hover:text-blue-600">Experience</a> |
|
|
<a href="#education" class="block nav-link text-gray-600 hover:text-blue-600">Education</a> |
|
|
<a href="#skills" class="block nav-link text-gray-600 hover:text-blue-600">Skills</a> |
|
|
<a href="#contact" class="block nav-link text-gray-600 hover:text-blue-600">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Madan Chauhan</h1> |
|
|
<h2 class="text-2xl md:text-3xl font-semibold mb-6 text-blue-200">Learning & Development Manager</h2> |
|
|
<p class="text-lg mb-8 text-blue-100">With over a decade of experience in Learning & Development, I am a certified training professional passionate about designing and delivering high-impact training programs.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#contact" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition duration-300"> |
|
|
Contact Me |
|
|
</a> |
|
|
<a href="https://www.linkedin.com/in/madansa7/" target="_blank" class="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600 transition duration-300"> |
|
|
<i class="fab fa-linkedin mr-2"></i> LinkedIn |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center animate-fade-in delay-100"> |
|
|
<img src="https://media.licdn.com/dms/image/v2/D4D03AQGNDQ61ooV0JA/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1731236394509?e=1752105600&v=beta&t=d87aJAC5z2uktUPvoJlG-3Tg9cxaNm8J59AxFNPvTkM" |
|
|
alt="Madan Chauhan" |
|
|
class="rounded-full w-64 h-64 md:w-80 md:h-80 object-cover border-8 border-blue-400 shadow-xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 animate-fade-in">About Me</h2> |
|
|
|
|
|
<div class="section-divider"></div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center animate-fade-in delay-100"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-10"> |
|
|
<p class="text-lg mb-6 text-gray-700 leading-relaxed"> |
|
|
Dynamic and results-driven Learning & Development (L&D) professional with over 10 years of leadership experience in corporate training, talent development, process optimization, and employee engagement. |
|
|
</p> |
|
|
<p class="text-lg mb-6 text-gray-700 leading-relaxed"> |
|
|
Adept at designing and implementing comprehensive training programs to enhance workforce performance and organizational productivity. Proven expertise in training needs analysis (TNA), instructional design, soft skills development, and leadership coaching. |
|
|
</p> |
|
|
<p class="text-lg text-gray-700 leading-relaxed"> |
|
|
Skilled in LMS management, psychometric assessments, and competency mapping, with a track record of driving operational excellence through tailored training interventions. Passionate about fostering a culture of continuous learning and professional growth. |
|
|
</p> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-gray-50 p-8 rounded-xl shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4 text-blue-600">My Mission</h3> |
|
|
<p class="mb-6 text-gray-700"> |
|
|
To equip teams with the knowledge, skills, and confidence they need to excel in their roles through innovative and impactful learning solutions. |
|
|
</p> |
|
|
|
|
|
<h3 class="text-xl font-semibold mb-4 text-blue-600">Training Specializations</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> |
|
|
<span>US Mortgage Processors & Loan Underwriters (FNMA)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> |
|
|
<span>Australian Paraplanners & Mortgage Executives</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> |
|
|
<span>Call Center Employees & Customer Service Teams</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> |
|
|
<span>Leadership & Management Development Programs</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="expertise" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 animate-fade-in">My Expertise</h2> |
|
|
|
|
|
<div class="section-divider"></div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 animate-fade-in delay-100"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 border-t-4 border-blue-500"> |
|
|
<div class="text-blue-500 mb-4 text-4xl"> |
|
|
<i class="fas fa-chalkboard-teacher"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">End-to-End Training</h3> |
|
|
<p class="text-gray-600"> |
|
|
From Training Needs Analysis (TNA) to Instructional Design and delivery of Leadership, Technical, and Soft Skills programs. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 border-t-4 border-green-500"> |
|
|
<div class="text-green-500 mb-4 text-4xl"> |
|
|
<i class="fas fa-user-graduate"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Onboarding & Development</h3> |
|
|
<p class="text-gray-600"> |
|
|
Crafting seamless onboarding experiences and Individual Development Plans (IDPs) for employee growth. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 border-t-4 border-purple-500"> |
|
|
<div class="text-purple-500 mb-4 text-4xl"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Performance Management</h3> |
|
|
<p class="text-gray-600"> |
|
|
Helping professionals upskill and align with business goals through coaching and performance strategies. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 border-t-4 border-orange-500"> |
|
|
<div class="text-orange-500 mb-4 text-4xl"> |
|
|
<i class="fas fa-laptop-code"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">E-Learning Solutions</h3> |
|
|
<p class="text-gray-600"> |
|
|
Leveraging technology for scalable and effective digital learning experiences through LMS and custom modules. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 bg-blue-50 p-8 rounded-xl animate-fade-in delay-200"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-2/3 mb-6 md:mb-0 md:pr-8"> |
|
|
<h3 class="text-2xl font-bold mb-4 text-blue-800">🚀 My Approach to Learning & Development</h3> |
|
|
<p class="text-gray-700 mb-4"> |
|
|
I thrive on continuous learning, staying ahead of industry trends, and creating training solutions that drive business success. Whether it's building a new training module or adopting cutting-edge L&D strategies, I am always looking for ways to empower employees and cultivate a culture of growth. |
|
|
</p> |
|
|
<p class="text-gray-700"> |
|
|
My training philosophy combines practical application with engaging delivery methods to ensure knowledge retention and real-world implementation. |
|
|
</p> |
|
|
</div> |
|
|
<div class="md:w-1/3 flex justify-center"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md text-center"> |
|
|
<div class="text-5xl text-blue-500 mb-4"> |
|
|
<i class="fas fa-lightbulb"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold text-lg mb-2">Key Differentiator</h4> |
|
|
<p class="text-sm text-gray-600"> |
|
|
Customized solutions tailored to your organization's specific needs and challenges |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="experience" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 animate-fade-in">Professional Experience</h2> |
|
|
|
|
|
<div class="section-divider"></div> |
|
|
|
|
|
<div class="max-w-4xl mx-auto animate-fade-in delay-100"> |
|
|
|
|
|
<div class="timeline-item relative pl-12 pb-12"> |
|
|
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 border-4 border-blue-100 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-briefcase text-sm"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold text-blue-600">CountHQ Accounting and Taxation Pvt. Ltd.</h3> |
|
|
<span class="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">01/2024 – Present</span> |
|
|
</div> |
|
|
<h4 class="text-lg font-medium mb-3">Assistant Manager – Learning and Development</h4> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Conducting training programs on Australian Finance & Paraplanning.</li> |
|
|
<li>Conducting Interviews and Onboarding Employees.</li> |
|
|
<li>Delivering leadership training and organizational development (OD) programs.</li> |
|
|
<li>Providing advanced Microsoft Office training to enhance workplace efficiency.</li> |
|
|
<li>Drafting policy and other business standard documents.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-item relative pl-12 pb-12"> |
|
|
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 border-4 border-blue-100 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-briefcase text-sm"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold text-blue-600">Navkar Consultancy Services (Aka Aagam Consultancy Services)</h3> |
|
|
<span class="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">05/2022 – 12/2023</span> |
|
|
</div> |
|
|
<h4 class="text-lg font-medium mb-3">Manager – Learning and Development</h4> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Designed and delivered training on Australian Mortgage & Paraplanning.</li> |
|
|
<li>Led HR induction, onboarding, and competency-based psychometric assessments.</li> |
|
|
<li>Conducted Psychometric Assessments and OD Trainings.</li> |
|
|
<li>Developed training modules, OD initiatives, and employee development strategies.</li> |
|
|
<li>Created and updated SOPs, HR policies, and compliance documentation.</li> |
|
|
<li>Conducted effective communication and business writing workshops.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-item relative pl-12 pb-12"> |
|
|
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 border-4 border-blue-100 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-briefcase text-sm"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold text-blue-600">Equilibrium Mortgage Solutions (a subdivision of Kwik Mortgage)</h3> |
|
|
<span class="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">12/2019 – 03/2022</span> |
|
|
</div> |
|
|
<h4 class="text-lg font-medium mb-3">Deputy Manager – Training</h4> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Developed pre-hire aptitude tests to improve recruitment efficiency.</li> |
|
|
<li>Conducted Training on Mortgage Basics & Conventional Mortgage Underwriting (Encompass, Dummy loans).</li> |
|
|
<li>Managed LMS administration, including e-learning content and employee assessments.</li> |
|
|
<li>Handled sourcing, interviewing, induction, onboarding and classroom training.</li> |
|
|
<li>Developed HR Policies for the company and amending them when required.</li> |
|
|
<li>Managed performance management processes.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-item relative pl-12 pb-12"> |
|
|
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 border-4 border-blue-100 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-briefcase text-sm"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold text-blue-600">Ascendum KPS Private Limited</h3> |
|
|
<span class="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">04/2016 – 12/2019</span> |
|
|
</div> |
|
|
<h4 class="text-lg font-medium mb-3">Process Trainer for US Mortgage</h4> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Delivered specialized training on FNMA & FHLMC mortgage guidelines.</li> |
|
|
<li>Authored a 65-page training manual to standardize knowledge dissemination.</li> |
|
|
<li>Conducted training needs identification (TNI) and assessment programs.</li> |
|
|
<li>Developed custom training modules, quizzes, and knowledge assessments.</li> |
|
|
<li>Recognized as Best Trainer of the Year (2017 & 2018) for exceptional performance.</li> |
|
|
<li>Initiated Book Club throughout the company with over 1000 books raised in donations.</li> |
|
|
<li>Performed ISO Internal Audits for Ops and Represented L&D.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-item relative pl-12"> |
|
|
<div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 border-4 border-blue-100 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-briefcase text-sm"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold text-blue-600">Vodafone India Service Private Limited</h3> |
|
|
<span class="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">12/2013 – 03/2016</span> |
|
|
</div> |
|
|
<h4 class="text-lg font-medium mb-3">Process Trainer - Customer Service</h4> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Promoted from Customer Serve Associate to Process Trainer.</li> |
|
|
<li>Designed and conducted product & process training for inbound customer service.</li> |
|
|
<li>Developed TNI refreshers, LMS quizzes, and operational assessments.</li> |
|
|
<li>Managed user ID creation and access controls for CRM & Learning Portals.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="education" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 animate-fade-in">Education & Certifications</h2> |
|
|
|
|
|
<div class="section-divider"></div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto animate-fade-in delay-100"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-graduation-cap text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold">Bachelor of Business Administration</h3> |
|
|
<p class="text-gray-600">Aishwarya College of Education, Jodhpur, Rajasthan, India</p> |
|
|
<p class="text-sm text-gray-500 mt-1">2010 – 2014</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-school text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold">Higher Senior Secondary School</h3> |
|
|
<p class="text-gray-600">Ajmer Board, Pali, Rajasthan, India</p> |
|
|
<p class="text-sm text-gray-500 mt-1">2008 – 2010</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-center mt-16 mb-8">Certifications & Trainings</h3> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in delay-200"> |
|
|
|
|
|
<div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition duration-300 border-l-4 border-blue-500"> |
|
|
<h4 class="font-semibold text-lg mb-2">Loan Processing & Underwriting</h4> |
|
|
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> |
|
|
<li>Loan Processing and Advance loan processing</li> |
|
|
<li>Conventional Loan Underwriting and Advance Underwriting</li> |
|
|
<li>Appraisal Review</li> |
|
|
<li>Self-Employment Income</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition duration-300 border-l-4 border-purple-500"> |
|
|
<h4 class="font-semibold text-lg mb-2">Training & Development</h4> |
|
|
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> |
|
|
<li>Train The Trainer (TTT Certified – At Vodafone and At Ascendum)</li> |
|
|
<li>Instructional Designer</li> |
|
|
<li>Leadership Training (Time management, Change management, Conflict management and Coaching skills)</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition duration-300 border-l-4 border-green-500"> |
|
|
<h4 class="font-semibold text-lg mb-2">Assessments & Security</h4> |
|
|
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> |
|
|
<li>Personality Traits Assessments and Analysis & Psychometric Assessments</li> |
|
|
<li>Information Security Awareness</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 animate-fade-in">Core Skills & Expertise</h2> |
|
|
|
|
|
<div class="section-divider"></div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 animate-fade-in delay-100"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-blue-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-chalkboard-teacher text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">Training & Development</h3> |
|
|
</div> |
|
|
<div class="space-y-5"> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Soft Skills & Leadership Development</span> |
|
|
<span class="text-blue-600 font-medium">95%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Organizational Development (OD)</span> |
|
|
<span class="text-blue-600 font-medium">90%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Employee Training & Coaching</span> |
|
|
<span class="text-blue-600 font-medium">92%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 92%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">LMS Administration</span> |
|
|
<span class="text-blue-600 font-medium">88%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 88%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">E-Learning Module Development</span> |
|
|
<span class="text-blue-600 font-medium">85%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-green-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-users text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">HR & Talent Management</h3> |
|
|
</div> |
|
|
<div class="space-y-5"> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Recruitment & Campus Hiring</span> |
|
|
<span class="text-blue-600 font-medium">85%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Onboarding & HR Induction</span> |
|
|
<span class="text-blue-600 font-medium">92%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 92%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Training Coordination</span> |
|
|
<span class="text-blue-600 font-medium">95%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Performance Management</span> |
|
|
<span class="text-blue-600 font-medium">88%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 88%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Employee Engagement</span> |
|
|
<span class="text-blue-600 font-medium">90%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-purple-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-tasks text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">Process & Compliance</h3> |
|
|
</div> |
|
|
<div class="space-y-5"> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">SOP Development & Policy Drafting</span> |
|
|
<span class="text-blue-600 font-medium">90%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Compliance & Internal Audits</span> |
|
|
<span class="text-blue-600 font-medium">85%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Information Security Awareness</span> |
|
|
<span class="text-blue-600 font-medium">88%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 88%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Microsoft Office Suite</span> |
|
|
<span class="text-blue-600 font-medium">95%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="skill-item"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Business Communication</span> |
|
|
<span class="text-blue-600 font-medium">93%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 93%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-blue-50 p-8 rounded-xl animate-fade-in delay-200"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-3/4 mb-6 md:mb-0 md:pr-8"> |
|
|
<h3 class="text-2xl font-bold mb-4 text-blue-800">Languages</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-2 flex items-center"> |
|
|
<span class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-language"></i> |
|
|
</span> |
|
|
English |
|
|
</h4> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 100%"></div> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">Fluent in speaking, reading, and writing</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-2 flex items-center"> |
|
|
<span class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-language"></i> |
|
|
</span> |
|
|
Hindi |
|
|
</h4> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 100%"></div> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">Native proficiency</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/4 flex justify-center"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md text-center"> |
|
|
<div class="text-5xl text-blue-500 mb-4"> |
|
|
<i class="fas fa-globe-asia"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold text-lg mb-2">International Experience</h4> |
|
|
<p class="text-sm text-gray-600"> |
|
|
Trained professionals across US, Australian, and Indian markets |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-gray-900 text-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 animate-fade-in">Get In Touch</h2> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-12 animate-fade-in delay-100"> |
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-gray-800 p-8 rounded-xl"> |
|
|
<h3 class="text-xl font-semibold mb-6 text-blue-400">Contact Information</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-600 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-envelope text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-300">Email</h4> |
|
|
<a href="mailto:[email protected]" class="text-white hover:text-blue-400 transition duration-300">[email protected]</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-600 p-3 rounded-lg mr-4"> |
|
|
<i class="fab fa-linkedin-in text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-300">LinkedIn</h4> |
|
|
<a href="https://www.linkedin.com/in/madansa7/" target="_blank" class="text-white hover:text-blue-400 transition duration-300">linkedin.com/in/madansa7</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-600 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-300">Location</h4> |
|
|
<p class="text-white">Ahmedabad, India</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<h3 class="text-xl font-semibold mb-4 text-blue-400">Let's Connect</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="https://www.linkedin.com/in/madansa7/" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl transition duration-300"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="mailto:[email protected]" class="bg-gray-700 hover:bg-gray-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl transition duration-300"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-gray-800 p-8 rounded-xl"> |
|
|
<h3 class="text-xl font-semibold mb-6 text-blue-400">Send Me a Message</h3> |
|
|
|
|
|
<form id="contactForm" class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-gray-300 mb-2">Your Name</label> |
|
|
<input type="text" id="name" name="name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-400" placeholder="Enter your name" required> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block text-gray-300 mb-2">Your Email</label> |
|
|
<input type="email" id="email" name="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-400" placeholder="Enter your email" required> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="subject" class="block text-gray-300 mb-2">Subject</label> |
|
|
<input type="text" id="subject" name="subject" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-400" placeholder="Enter subject" required> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="message" class="block text-gray-300 mb-2">Your Message</label> |
|
|
<textarea id="message" name="message" rows="5" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-400" placeholder="Enter your message" required></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-gray-400 py-8"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<p>© 2024 Madan Chauhan. All rights reserved.</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#about" class="hover:text-white transition duration-300">About</a> |
|
|
<a href="#expertise" class="hover:text-white transition duration-300">Expertise</a> |
|
|
<a href="#experience" class="hover:text-white transition duration-300">Experience</a> |
|
|
<a href="#contact" class="hover:text-white transition duration-300">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('contactForm').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const name = document.getElementById('name').value; |
|
|
const email = document.getElementById('email').value; |
|
|
const subject = document.getElementById('subject').value; |
|
|
const message = document.getElementById('message').value; |
|
|
|
|
|
|
|
|
|
|
|
alert(`Thank you, ${name}! Your message has been sent. I'll get back to you soon.`); |
|
|
|
|
|
|
|
|
this.reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
const sections = document.querySelectorAll('section'); |
|
|
const navLinks = document.querySelectorAll('.nav-link'); |
|
|
|
|
|
let current = ''; |
|
|
|
|
|
sections.forEach(section => { |
|
|
const sectionTop = section.offsetTop; |
|
|
const sectionHeight = section.clientHeight; |
|
|
|
|
|
if (pageYOffset >= sectionTop - 100) { |
|
|
current = section.getAttribute('id'); |
|
|
} |
|
|
}); |
|
|
|
|
|
navLinks.forEach(link => { |
|
|
link.classList.remove('active', 'text-blue-600'); |
|
|
if (link.getAttribute('href') === `#${current}`) { |
|
|
link.classList.add('active', 'text-blue-600'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const animateOnScroll = function() { |
|
|
const elements = document.querySelectorAll('.animate-fade-in'); |
|
|
|
|
|
elements.forEach(element => { |
|
|
const elementPosition = element.getBoundingClientRect().top; |
|
|
const windowHeight = window.innerHeight; |
|
|
|
|
|
if (elementPosition < windowHeight - 100) { |
|
|
element.style.opacity = '1'; |
|
|
element.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}; |
|
|
|
|
|
window.addEventListener('scroll', animateOnScroll); |
|
|
window.addEventListener('load', animateOnScroll); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=madansa7/my-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
