Spaces:

LovnishVerma
/

portfolio

Running

App Files Files Community

portfolio / index.html

LovnishVerma

Update index.html

79d2032 verified 8 months ago

raw

history blame contribute delete

61.7 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />

	<!-- SEO Meta Tags -->
	<title>Lovnish Verma - AI/ML Developer & Data Scientist \| Portfolio 2025</title>
	<meta name="description" content="Lovnish Verma - Expert AI/ML Developer & Data Scientist from Chandigarh, India. Specializing in machine learning, deep learning, predictive modeling, and intelligent systems. 3+ years experience, 100+ projects completed. Hire for AI solutions, web development, and data analysis." />
	<meta name="keywords" content="Lovnish Verma, AI developer Chandigarh, machine learning engineer India, data scientist portfolio, TensorFlow expert, Python developer, Django developer, brain tumor detection AI, diabetes prediction model, freelance AI developer, hire data scientist India" />
	<meta name="author" content="Lovnish Verma" />
	<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
	<link rel="canonical" href="https://lovnishverma.github.io/" />

	<!-- Open Graph Tags -->
	<meta property="og:title" content="Lovnish Verma - AI/ML Developer & Data Scientist \| Portfolio 2025" />
	<meta property="og:description" content="Expert AI/ML Developer from Chandigarh with 3+ years experience. Specializing in intelligent systems, predictive modeling, and data-driven solutions. 100+ projects completed." />
	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://lovnishverma.github.io/" />
	<meta property="og:image" content="https://lovnishverma.github.io/assets/favicon/lovnishfavicon.png" />
	<meta property="og:image:alt" content="Lovnish Verma - AI/ML Developer Portfolio" />
	<meta property="og:site_name" content="Lovnish Verma Portfolio" />
	<meta property="og:locale" content="en_US" />

	<!-- Twitter Card Tags -->
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:title" content="Lovnish Verma - AI/ML Developer & Data Scientist" />
	<meta name="twitter:description" content="Expert AI/ML Developer from Chandigarh with 3+ years experience in intelligent systems and data science." />
	<meta name="twitter:image" content="https://lovnishverma.github.io/assets/favicon/lovnishfavicon.png" />
	<meta name="twitter:creator" content="@lovnishofficial" />

	<!-- Additional SEO Tags -->
	<meta name="geo.region" content="IN-CH" />
	<meta name="geo.placename" content="Chandigarh" />
	<meta name="geo.position" content="30.7333;76.7794" />
	<meta name="ICBM" content="30.7333, 76.7794" />

	<!-- Schema.org JSON-LD Structured Data -->
	<script type="application/ld+json">
	{
	"@context": "https://schema.org",
	"@type": "Person",
	"name": "Lovnish Verma",
	"jobTitle": "AI/ML Developer & Data Scientist",
	"description": "Expert AI/ML Developer and Data Scientist specializing in intelligent systems, machine learning, and predictive modeling",
	"url": "https://lovnishverma.github.io/",
	"image": "https://lovnishverma.github.io/assets/favicon/lovnishfavicon.png",
	"email": "princelv84@gmail.com",
	"telephone": "+91-8894869371",
	"address": {
	"@type": "PostalAddress",
	"addressLocality": "Chandigarh",
	"addressCountry": "India"
	},
	"sameAs": [
	"https://www.linkedin.com/in/lovnishverma/",
	"https://github.com/LovnishVerma",
	"https://www.instagram.com/lovnishofficial/",
	"https://www.x.com/lovnishofficial/",
	"https://www.facebook.com/lovnishofficial/"
	],
	"knowsAbout": [
	"Artificial Intelligence",
	"Machine Learning",
	"Deep Learning",
	"Data Science",
	"Python Programming",
	"TensorFlow",
	"Django",
	"Web Development",
	"Predictive Modeling"
	],
	"alumniOf": {
	"@type": "Organization",
	"name": "NIELIT Chandigarh"
	}
	}
	</script>

	<link rel="shortcut icon" type="image/x-icon" href="assets/favicon/lovnishfavicon.png" />
	<link rel="apple-touch-icon" href="assets/favicon/lovnishfavicon.png" />

	<script src="https://kit.fontawesome.com/e674bba739.js" crossorigin="anonymous"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

	<style>
	/* CSS with mobile-friendly testimonials and AMP optimizations */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	line-height: 1.6;
	color: #333;
	background-color: #0a0a0a;
	color: white;
	}

	/* Header Styles */
	#header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	background: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(10px);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	}

	.navbar-title {
	display: flex;
	gap: 0.5rem;
	}

	.title-first-name, .title-last-name {
	font-size: 1.5rem;
	font-weight: bold;
	}

	.title-first-name {
	color: #00ff88;
	}

	.navbar-menu {
	display: flex;
	list-style: none;
	gap: 2rem;
	}

	.navbar-menu a {
	color: white;
	text-decoration: none;
	transition: color 0.3s ease;
	}

	.navbar-menu a:hover {
	color: #00ff88;
	}

	.social-media {
	display: flex;
	list-style: none;
	gap: 1rem;
	}

	.social-media a {
	color: white;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: color 0.3s ease;
	}

	.social-media a:hover {
	color: #00ff88;
	}

	/* Main Content */
	#content-body {
	margin-top: 80px;
	padding: 2rem;
	display: flex;
	min-height: 100vh;
	align-items: center;
	gap: 2rem;
	}

	.body-part-1 {
	flex: 1;
	z-index: 2;
	}

	.developer-intro p {
	font-size: 1.2rem;
	color: #00ff88;
	margin-bottom: 0.5rem;
	}

	.body-title h2 {
	font-size: 3rem;
	margin-bottom: 1rem;
	background: linear-gradient(45deg, #00ff88, #00ccff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.body-title p {
	font-size: 1.1rem;
	margin-bottom: 2rem;
	color: #ccc;
	line-height: 1.8;
	}

	.body-title a {
	display: inline-block;
	background: linear-gradient(45deg, #00ff88, #00ccff);
	color: black;
	padding: 1rem 2rem;
	text-decoration: none;
	border-radius: 50px;
	font-weight: bold;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	}

	.body-title a:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 255, 136, 0.3);
	}

	/* Let's Chat Button */
	.chat-button {
	display: inline-block;
	background: linear-gradient(45deg, #00ff88, #00ccff);
	color: black;
	padding: 1rem 2rem;
	text-decoration: none;
	border-radius: 50px;
	font-weight: bold;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	border: none;
	font-size: 1rem;
	}

	.chat-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 255, 136, 0.3);
	}

	.body-tail {
	display: flex;
	gap: 3rem;
	margin-top: 3rem;
	}

	.stat-item h3 {
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	}

	.stat-item p {
	font-size: 0.9rem;
	color: #ccc;
	}

	/* Skills Animation */
	.body-part-2 {
	flex: 1;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.hoodie-guy-animation-class {
	position: relative;
	width: 400px;
	height: 400px;
	}

	.hoodie-guy {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 150px;
	border-radius: 50%;
	z-index: 2;
	background-image: url('assets/lovnish_verma.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 3px solid #00ff88;
	box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
	}

	.circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	animation: rotate 20s linear infinite;
	}

	.circle span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(calc(var(--i) * 24deg)) translateY(-180px);
	}

	.circle span img {
	border-radius: 10px;
	padding: 10px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	transition: transform 0.3s ease;
	}

	.circle span img:hover {
	transform: scale(1.2);
	}

	@keyframes rotate {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
	}

	/* Services Section */
	#introduction {
	padding: 4rem 2rem;
	background: #111;
	}

	.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-bottom: 4rem;
	}

	.design-card {
	background: rgba(255, 255, 255, 0.05);
	padding: 2rem;
	border-radius: 20px;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	}

	.design-card:hover, .design-card.active {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 255, 136, 0.2);
	border-color: #00ff88;
	}

	.design-card div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	}

	.design-card h3 {
	color: #00ff88;
	font-size: 1.3rem;
	}

	.design-card i {
	font-size: 2rem;
	color: #00ff88;
	}

	.design-card p {
	color: #ccc;
	margin-bottom: 1.5rem;
	line-height: 1.6;
	}

	.design-card a {
	color: #00ff88;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.9rem;
	}

	.introduction-text {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	}

	.introduction-text p:first-child {
	color: #00ff88;
	font-size: 1.1rem;
	margin-bottom: 1rem;
	}

	.introduction-text h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	background: linear-gradient(45deg, #00ff88, #00ccff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.introduction-text h4 {
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
	}

	.introduction-text p:last-child {
	color: #ccc;
	line-height: 1.8;
	}

	/* Portfolio Section */
	#latest-works {
	padding: 4rem 2rem;
	background: #0a0a0a;
	}

	.latest-work-title {
	text-align: center;
	margin-bottom: 3rem;
	}

	.latest-work-title h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	background: linear-gradient(45deg, #00ff88, #00ccff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.latest-work-title p {
	color: #ccc;
	font-size: 1.1rem;
	}

	.project-card {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 20px;
	padding: 2rem;
	margin-bottom: 2rem;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.project-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 255, 136, 0.2);
	}

	.project-card .title h3 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	}

	.project-card .title h3 a {
	color: white;
	text-decoration: none;
	transition: color 0.3s ease;
	}

	.project-card .title h3 a:hover {
	color: #00ff88;
	}

	.tech-stack {
	margin-bottom: 1rem;
	}

	.tech-stack span {
	color: #00ff88;
	font-size: 0.9rem;
	}

	.project-card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 15px;
	margin-top: 1rem;
	}

	.all-projects {
	text-align: center;
	margin-top: 3rem;
	padding: 2rem;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 20px;
	backdrop-filter: blur(10px);
	}

	.all-projects a {
	color: #00ff88;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: bold;
	}

	.project-card-link {
	text-decoration: none; /* remove underline */
	color: inherit; /* keep text color */
	display: block; /* make <a> behave like block */
	}

	.github-btn-container {
	margin-top: 12px;
	text-align: center;
	}

	.github-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background-color: #24292f;
	border-radius: 20px;
	transition: background-color 0.2s ease, transform 0.1s ease;
	}

	.github-btn:hover {
	background-color: #333;
	transform: translateY(-2px);
	}

	.github-btn:active {
	transform: translateY(0);
	}

	.github-icon {
	width: 20px;
	height: 20px;
	fill: currentColor;
	}

	.all-projects p {
	color: #ccc;
	margin-top: 1rem;
	line-height: 1.6;
	}

	.all-projects p a {
	color: #00ccff;
	}

	/* Mobile-Friendly Testimonials Section */
	/* Mobile-Friendly Testimonials Section */
	#testimonial {
	padding: 4rem 2rem;
	background: #111;
	}

	.testimonial-title {
	text-align: center;
	margin-bottom: 3rem;
	}

	.testimonial-title h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	background: linear-gradient(45deg, #00ff88, #00ccff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.testimonial-title p {
	color: #ccc;
	font-size: 1.1rem;
	}

	/* Testimonial Container */
	.testimonial-container {
	max-width: 1200px;
	margin: 0 auto;
	}

	.testimonial-content {
	display: flex;
	gap: 2rem;
	align-items: stretch;
	}

	.testimonial-cards {
	flex: 2;
	position: relative;
	min-height: 300px;
	overflow: hidden;
	}

	.testimonial-card {
	background: rgba(255, 255, 255, 0.05);
	padding: 2rem;
	border-radius: 20px;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease;
	width: 100%;
	box-sizing: border-box;
	}

	.testimonial-card.active {
	opacity: 1;
	transform: translateY(0);
	}

	.star-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
	}

	.star-rating i {
	color: #ffd700;
	font-size: 1.2rem;
	}

	.star-rating p {
	color: #00ff88;
	font-weight: bold;
	margin-left: 1rem;
	}

	.testimonial-card h4 {
	color: #ccc;
	line-height: 1.8;
	font-size: 1.1rem;
	font-weight: normal;
	margin-bottom: 1.5rem;
	}

	.testimonial-card .fa-quote-right {
	color: #00ff88;
	font-size: 2rem;
	float: right;
	}

	.client-profiles {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	}

	.single-profile-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	min-width: 0;
	flex-shrink: 0;
	}

	.single-profile-card:hover,
	.single-profile-card.active {
	background: rgba(0, 255, 136, 0.1);
	border-color: #00ff88;
	transform: translateX(10px);
	}

	.single-profile-card img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	}

	.single-profile-card .profile-info {
	min-width: 0;
	flex: 1;
	}

	.single-profile-card h4 {
	color: white;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.single-profile-card p {
	color: #ccc;
	font-size: 0.9rem;
	line-height: 1.4;
	}

	.single-profile-card a {
	color: #00ccff;
	text-decoration: none;
	}

	.single-profile-card a:hover {
	color: #00ff88;
	}

	/* Testimonial Navigation */
	.testimonial-nav {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
	}

	.nav-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	}

	.nav-dot.active {
	background: #00ff88;
	transform: scale(1.2);
	}

	/* Footer */
	#footer {
	background: #0a0a0a;
	padding: 4rem 2rem 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.footer-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	max-width: 1200px;
	margin: 0 auto;
	}

	.footer-left h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	background: linear-gradient(45deg, #00ff88, #00ccff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.email-form h3 {
	margin-bottom: 1.5rem;
	color: white;
	}

	.email-form span {
	color: #00ff88;
	}

	.email-form form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	}

	.email-form input {
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	color: white;
	font-size: 1rem;
	}

	.email-form input::placeholder {
	color: #ccc;
	}

	.form-row {
	display: flex;
	gap: 1rem;
	}

	.form-row input {
	flex: 1;
	}

	.form-row button {
	padding: 1rem 2rem;
	background: linear-gradient(45deg, #00ff88, #00ccff);
	color: black;
	border: none;
	border-radius: 10px;
	font-weight: bold;
	cursor: pointer;
	transition: transform 0.3s ease;
	}

	.form-row button:hover {
	transform: scale(1.05);
	}

	.footer-title {
	margin-top: 3rem;
	}

	.footer-title h3 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	}

	.footer-right {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	}

	.footer-email-intro p {
	color: #00ff88;
	font-size: 1.1rem;
	margin-bottom: 1rem;
	}

	.footer-email-intro h4 {
	color: white;
	font-size: 1.3rem;
	margin-bottom: 0.5rem;
	}

	.footer-email-intro a {
	color: #00ccff;
	text-decoration: none;
	}

	.footer-menu {
	display: flex;
	gap: 2rem;
	list-style: none;
	}

	.footer-menu a {
	color: white;
	text-decoration: none;
	transition: color 0.3s ease;
	}

	.footer-menu a:hover {
	color: #00ff88;
	}

	.social-icons {
	display: flex;
	gap: 1rem;
	}

	.social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	color: white;
	text-decoration: none;
	transition: all 0.3s ease;
	}

	.social-icons a:hover {
	background: #00ff88;
	color: black;
	transform: translateY(-2px);
	}

	/* Mobile Responsiveness */
	@media (max-width: 768px) {
	#header {
	flex-direction: column;
	padding: 1rem;
	position: relative;
	}

	.navbar-menu {
	flex-direction: column;
	gap: 1rem;
	margin: 1rem 0;
	}

	.social-media {
	flex-wrap: wrap;
	justify-content: center;
	}

	#content-body {
	flex-direction: column;
	margin-top: 20px;
	padding: 1rem;
	text-align: center;
	}

	.body-title h2 {
	font-size: 2rem;
	}

	.body-tail {
	justify-content: center;
	gap: 2rem;
	}

	.hoodie-guy-animation-class {
	width: 300px;
	height: 300px;
	}

	.circle span {
	transform: translate(-50%, -50%) rotate(calc(var(--i) * 24deg)) translateY(-130px);
	}

	.circle span img {
	height: 50px !important;
	}

	.cards {
	grid-template-columns: 1fr;
	}

	.introduction-text h2 {
	font-size: 2rem;
	}

	.latest-work-title h2 {
	font-size: 2rem;
	}

	.testimonial-title h2 {
	font-size: 2rem;
	}

	/* Mobile Testimonials */
	.testimonial-content {
	flex-direction: column;
	}

	.client-profiles {
	order: -1;
	flex-direction: row;
	overflow-x: auto;
	padding-bottom: 1rem;
	}

	.single-profile-card {
	flex-shrink: 0;
	min-width: 200px;
	}

	.single-profile-card:hover,
	.single-profile-card.active {
	transform: translateY(-5px);
	}

	.footer-content {
	grid-template-columns: 1fr;
	gap: 2rem;
	}

	.footer-menu {
	flex-direction: column;
	gap: 1rem;
	}

	.form-row {
	flex-direction: column;
	}
	}

	@media (max-width: 480px) {
	.body-title h2 {
	font-size: 1.5rem;
	}

	.introduction-text h2,
	.latest-work-title h2,
	.testimonial-title h2 {
	font-size: 1.5rem;
	}

	.design-card,
	.project-card,
	.testimonial-card {
	padding: 1.5rem;
	}

	.hoodie-guy-animation-class {
	width: 250px;
	height: 250px;
	}

	.circle span {
	transform: translate(-50%, -50%) rotate(calc(var(--i) * 24deg)) translateY(-100px);
	}

	.circle span img {
	height: 40px !important;
	}
	}

	/* AMP-friendly animations */
	@media (prefers-reduced-motion: reduce) {
	.circle {
	animation: none;
	}

	.testimonial-card,
	.design-card,
	.project-card {
	transition: none;
	}
	}
	</style>
	</head>
	<body>
	<!-- Header Section with Navigation -->
	<header id="header" role="banner">
	<nav class="navbar-title" role="navigation" aria-label="Main navigation">
	<h1 class="title-first-name">Lovnish</h1>
	<h1 class="title-last-name">Verma</h1>
	</nav>
	<div>
	<ul class="navbar-menu" role="menubar">
	<li role="menuitem"><a href="https://wa.me/918894869371" aria-label="Contact via WhatsApp">WhatsApp</a></li>
	<li role="menuitem"><a href="mailto:princelv84@gmail.com" aria-label="Send email">Mail</a></li>
	<li role="menuitem"><a href="tel:8894869371" aria-label="Call phone number">Call</a></li>
	</ul>
	</div>
	<div>
	<ul class="social-media" role="list" aria-label="Social media links">
	<li>
	<i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
	<a href="https://www.linkedin.com/in/lovnishverma/" target="_blank" rel="noopener" aria-label="LinkedIn Profile">LinkedIn</a>
	</li>
	<li>
	<i class="fa-brands fa-github" aria-hidden="true"></i>
	<a href="https://github.com/Lovnishverma" target="_blank" rel="noopener" aria-label="GitHub Profile">GitHub</a>
	</li>
	<li>
	<i class="fa-regular fa-envelope" aria-hidden="true"></i>
	<a href="mailto:princelv84@gmail.com" aria-label="Email contact">Email</a>
	</li>
	</ul>
	</div>
	</header>

	<!-- Main Content Section -->
	<main id="content-body" role="main">
	<section class="body-part-1" aria-label="Hero introduction">
	<div class="developer-intro">
	<p>AI/ML Enthusiast</p>
	<p>Data Scientist</p>
	</div>
	<div class="body-title">
	<h2></h2>
	<p>
	I specialize in building intelligent systems,<br />extracting
	insights from data, and solving complex problems using AI and
	Machine Learning.
	</p>
	<button class="chat-button" onclick="redirectToWhatsApp()" aria-label="Start chat on WhatsApp">LET'S CHAT!</button>
	</div>
	<div class="body-tail" role="region" aria-label="Experience statistics">
	<div class="stat-item">
	<h3 style="color: #00ff88;">3</h3>
	<p>YEARS<br />EXPERIENCE</p>
	</div>
	<div class="stat-item">
	<h3 style="color: #00ff88;">100+</h3>
	<p>PROJECTS<br />COMPLETED</p>
	</div>
	</div>
	</section>

	<section class="body-part-2" aria-label="Skills showcase">
	<div class="hoodie-guy-animation-class">
	<div class="hoodie-guy" role="img" aria-label="Developer illustration"></div>
	<div class="circle" role="img" aria-label="Technology skills orbit">
	<span style="--i: 1"><img src="assets/SVGIcons/flutter.svg" height="75" alt="Flutter framework" /></span>
	<span style="--i: 2"><img src="assets/SVGIcons/python.svg" height="75" alt="Python programming" /></span>
	<span style="--i: 3"><img src="assets/SVGIcons/adobe-photoshop.svg" height="75" alt="Adobe Photoshop" /></span>
	<span style="--i: 4"><img src="assets/SVGIcons/django.svg" height="75" alt="Django framework" /></span>
	<span style="--i: 5"><img src="assets/SVGIcons/adobe-premiere-pro.svg" height="75" alt="Adobe Premiere Pro" /></span>
	<span style="--i: 6"><img src="assets/SVGIcons/html-5.svg" height="70" alt="HTML5" /></span>
	<span style="--i: 7"><img src="assets/SVGIcons/figma.svg" height="75" alt="Figma design" /></span>
	<span style="--i: 8"><img src="assets/SVGIcons/css3.svg" height="70" alt="CSS3" /></span>
	<span style="--i: 9"><img src="assets/SVGIcons/javascript.svg" height="75" alt="JavaScript" /></span>
	<span style="--i: 10"><img src="assets/SVGIcons/adobe-illustrator.svg" height="75" alt="Adobe Illustrator" /></span>
	<span style="--i: 11"><img src="assets/SVGIcons/dart.svg" height="75" alt="Dart programming" /></span>
	<span style="--i: 12"><img src="assets/SVGIcons/PostgreSQL-Dark.svg" height="75" alt="PostgreSQL database" /></span>
	<span style="--i: 13"><img src="assets/SVGIcons/MySQL-Dark.svg" height="75" alt="MySQL database" /></span>
	<span style="--i: 14"><img src="assets/SVGIcons/Firebase-Dark.svg" height="75" alt="Firebase" /></span>
	<span style="--i: 15"><img src="assets/SVGIcons/Github-Dark.svg" height="75" alt="GitHub" /></span>
	</div>
	</div>
	<div class="background-circle" aria-hidden="true"></div>
	</section>
	</main>

	<!-- Services Section -->
	<section id="introduction" aria-label="Services and introduction">
	<div class="cards">
	<div class="design-card active" onclick="switchCard(0)">
	<div>
	<h3>AI/ML Enthusiast</h3>
	<i class="fa-solid fa-wand-magic-sparkles"></i>
	</div>
	<p>
	Passionate about building intelligent solutions using AI, Machine
	Learning, and Deep Learning to solve real-world problems. Skilled in
	Python, TensorFlow, and data-driven insights.
	</p>
	<a href="#latest-works">30+ PROJECTS</a>
	</div>
	<div class="design-card" onclick="switchCard(1)">
	<div>
	<h3>Frontend Development</h3>
	<i class="fa-solid fa-code"></i>
	</div>
	<p>Creating stunning and responsive web interfaces that capture user attention and provide seamless user experiences.</p>
	<a href="#latest-works">30+ PROJECTS</a>
	</div>
	<div class="design-card" onclick="switchCard(2)">
	<div>
	<h3>Backend Development</h3>
	<i class="fa-solid fa-terminal"></i>
	</div>
	<p>Building robust and scalable server-side applications with secure APIs and efficient database management.</p>
	<a href="#latest-works">50+ PROJECTS</a>
	</div>
	</div>

	<div class="introduction-text" id="intro-0">
	<p>Introduction</p>
	<h2>Hello! I'm Lovnish Verma</h2>
	<h4 style="color: #00ff88;">AI/ML & Data Science Specialist</h4>
	<p>
	I am passionate about leveraging AI and Machine Learning to solve
	real-world problems. With expertise in predictive modeling, natural
	language processing, and scalable data analysis, I create intelligent
	systems that transform industries.
	</p>
	</div>

	<div class="introduction-text" id="intro-1" style="display: none">
	<p>Introduction</p>
	<h2>Hello! I'm Lovnish Verma</h2>
	<h4 style="color: #00ff88;">Frontend Development Expert</h4>
	<p>
	As a frontend developer, I create stunning and responsive web pages
	that capture the attention and imagination of users. I use my
	skills in HTML, CSS, JavaScript, and various frameworks to design
	and implement user interfaces that are both visually appealing and user-friendly.
	</p>
	</div>

	<div class="introduction-text" id="intro-2" style="display: none">
	<p>Introduction</p>
	<h2>Hello! I'm Lovnish Verma</h2>
	<h4 style="color: #00ff88;">Backend Development Specialist</h4>
	<p>
	As a backend developer, I create robust and scalable web applications
	that handle the logic and data behind the scenes. I use my skills in
	Python, Django, SQL, and various APIs to develop and deploy
	backend systems that are secure, reliable, and efficient.
	</p>
	</div>
	</section>

	<!-- Portfolio Section -->
	<section id="latest-works" aria-label="Portfolio showcase">
	<div class="latest-work-title">
	<h2>Latest Works</h2>
	<p>Perfect solutions for digital experience</p>
	</div>

	<!-- Brain Tumor Project -->
	<a href="https://lovnishverma-braintumor.hf.space/"
	target="_blank" rel="noopener"
	aria-label="Brain Tumor Prediction AI Model"
	class="project-card-link">
	<div class="project-card">
	<div class="title">
	<h3>Brain Tumor Prediction</h3>
	<div class="tech-stack" role="list" aria-label="Technologies used">
	<span>TensorFlow • </span>
	<span>Flask • </span>
	<span>MongoDB • </span>
	<span>Deep Learning</span>
	</div>
	</div>
	<p style="color: var(--text-secondary); margin: 1rem 0; line-height: 1.6;">
	Advanced deep learning model for brain tumor detection using CNN architecture.
	Features real-time image analysis with 95%+ accuracy rate and intuitive web interface
	for medical professionals.
	</p>
	<img src="assets/projectsimg/braintumor.png"
	alt="Brain Tumor Prediction AI Interface Screenshot"
	loading="lazy" />

	<!-- GitHub button -->
	<div class="github-btn-container">
	<a href="https://github.com/lovnishverma/huggingface-Braintumor-Flask"
	target="_blank" rel="noopener" class="github-btn">
	<svg class="github-icon" viewBox="0 0 24 24" aria-hidden="true">
	<path fill-rule="evenodd" clip-rule="evenodd"
	d="M12 0C5.37 0 0 5.37 0 12c0 5.3
	3.438 9.8 8.205 11.385.6.113.82-.263.82-.582
	0-.288-.01-1.05-.015-2.06-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.082-.73.082-.73
	1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305
	3.492.997.107-.775.42-1.305.763-1.605-2.665-.304-5.466-1.332-5.466-5.93
	0-1.31.47-2.38 1.235-3.22-.124-.303-.535-1.523.117-3.176
	0 0 1.008-.322 3.3 1.23a11.52 11.52 0 0 1 3.003-.404c1.02.005
	2.047.138 3.003.404 2.29-1.552 3.297-1.23
	3.297-1.23.653 1.653.242 2.873.118 3.176.77.84
	1.233 1.91 1.233 3.22 0 4.61-2.805 5.624-5.475
	5.92.43.372.823 1.102.823 2.222 0 1.606-.015
	2.898-.015 3.293 0 .322.218.699.825.58C20.565
	21.796 24 17.297 24 12c0-6.63-5.37-12-12-12z"/>
	</svg>
	View on GitHub
	</a>
	</div>
	</div>
	</a>

	<!-- Diabetes Project -->
	<a href="https://lovnishverma-diabetes.hf.space/"
	target="_blank" rel="noopener"
	aria-label="Diabetes Prediction ML Model"
	class="project-card-link">
	<div class="project-card">
	<div class="title">
	<h3>Diabetes Prediction</h3>
	<div class="tech-stack" role="list" aria-label="Technologies used">
	<span>Streamlit • </span>
	<span>Scikit-Learn • </span>
	<span>HuggingFace • </span>
	<span>ML Analytics</span>
	</div>
	</div>
	<p style="color: var(--text-secondary); margin: 1rem 0; line-height: 1.6;">
	Machine learning-powered diabetes prediction system using ensemble methods.
	Provides risk assessment with detailed analytics and personalized health recommendations
	based on clinical parameters.
	</p>
	<img src="assets/projectsimg/diabetes.png"
	alt="Diabetes Prediction Model Interface Screenshot"
	loading="lazy" />

	<!-- GitHub button -->
	<div class="github-btn-container">
	<a href="https://github.com/lovnishverma/diabetes-streamlit"
	target="_blank" rel="noopener" class="github-btn">
	<svg class="github-icon" viewBox="0 0 24 24" aria-hidden="true">
	<path fill-rule="evenodd" clip-rule="evenodd"
	d="M12 0C5.37 0 0 5.37 0 12c0 5.3
	3.438 9.8 8.205 11.385.6.113.82-.263.82-.582
	0-.288-.01-1.05-.015-2.06-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.082-.73.082-.73
	1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305
	3.492.997.107-.775.42-1.305.763-1.605-2.665-.304-5.466-1.332-5.466-5.93
	0-1.31.47-2.38 1.235-3.22-.124-.303-.535-1.523.117-3.176
	0 0 1.008-.322 3.3 1.23a11.52 11.52 0 0 1 3.003-.404c1.02.005
	2.047.138 3.003.404 2.29-1.552 3.297-1.23
	3.297-1.23.653 1.653.242 2.873.118 3.176.77.84
	1.233 1.91 1.233 3.22 0 4.61-2.805 5.624-5.475
	5.92.43.372.823 1.102.823 2.222 0 1.606-.015
	2.898-.015 3.293 0 .322.218.699.825.58C20.565
	21.796 24 17.297 24 12c0-6.63-5.37-12-12-12z"/>
	</svg>
	View on GitHub
	</a>
	</div>
	</div>
	</a>

	<!-- Books Recommender Project -->
	<a href="https://lovnishverma-book-recommendations.hf.space/"
	target="_blank" rel="noopener"
	aria-label="Advanced Books Recommender"
	class="project-card-link">
	<div class="project-card">
	<div class="title">
	<h3>Goodreads Book Recommender</h3>
	<div class="tech-stack" role="list" aria-label="Technologies used">
	<span>Gradio • </span>
	<span>Sentence Transformers • </span>
	<span>Hugging Face • </span>
	<span>Recommendation AI</span>
	</div>
	</div>
	<p style="color: var(--text-secondary); margin: 1rem 0; line-height: 1.6;">
	Intelligent book recommendation system using advanced NLP and similarity algorithms.
	Analyzes reading preferences and book metadata to suggest personalized reading lists
	from Goodreads database.
	</p>
	<img src="assets/projectsimg/books.png"
	alt="Book recommender Interface Screenshot"
	loading="lazy" />

	<!-- GitHub button -->
	<div class="github-btn-container">
	<a href="https://github.com/lovnishverma/Book-Recommendations"
	target="_blank" rel="noopener" class="github-btn">
	<svg class="github-icon" viewBox="0 0 24 24" aria-hidden="true">
	<path fill-rule="evenodd" clip-rule="evenodd"
	d="M12 0C5.37 0 0 5.37 0 12c0 5.3
	3.438 9.8 8.205 11.385.6.113.82-.263.82-.582
	0-.288-.01-1.05-.015-2.06-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.082-.73.082-.73
	1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305
	3.492.997.107-.775.42-1.305.763-1.605-2.665-.304-5.466-1.332-5.466-5.93
	0-1.31.47-2.38 1.235-3.22-.124-.303-.535-1.523.117-3.176
	0 0 1.008-.322 3.3 1.23a11.52 11.52 0 0 1 3.003-.404c1.02.005
	2.047.138 3.003.404 2.29-1.552 3.297-1.23
	3.297-1.23.653 1.653.242 2.873.118 3.176.77.84
	1.233 1.91 1.233 3.22 0 4.61-2.805 5.624-5.475
	5.92.43.372.823 1.102.823 2.222 0 1.606-.015
	2.898-.015 3.293 0 .322.218.699.825.58C20.565
	21.796 24 17.297 24 12c0-6.63-5.37-12-12-12z"/>
	</svg>
	View on GitHub
	</a>
	</div>
	</div>
	</a>

	<!-- Employee Location Tracking -->
	<a href="https://lovnishverma.github.io/universal-employee-location-tracking/"
	target="_blank" rel="noopener"
	aria-label="Employee Location Tracking"
	class="project-card-link">
	<div class="project-card">
	<div class="title">
	<h3>Employee Location Tracking</h3>
	<div class="tech-stack" role="list" aria-label="Technologies used">
	<span>HTML-CSS-JS • </span>
	<span>Firestore • </span>
	<span>Tailwind CSS</span>
	</div>
	</div>
	<p style="color: var(--text-secondary); margin: 1rem 0; line-height: 1.6;">
	Employee Location Tracking using Firestore you can Track, View & Manage Employee Location Data with
	Firebase Firestore and Google Maps Integration. Suitable for any department, remote teams, or
	organization-wide tracking.
	</p>
	<img src="assets/projectsimg/location.png"
	alt="Employee Location Tracking"
	loading="lazy" />

	<!-- GitHub button -->
	<div class="github-btn-container">
	<a href="https://github.com/lovnishverma/universal-employee-location-tracking"
	target="_blank" rel="noopener" class="github-btn">
	<svg class="github-icon" viewBox="0 0 24 24" aria-hidden="true">
	<path fill-rule="evenodd" clip-rule="evenodd"
	d="M12 0C5.37 0 0 5.37 0 12c0 5.3
	3.438 9.8 8.205 11.385.6.113.82-.263.82-.582
	0-.288-.01-1.05-.015-2.06-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.082-.73.082-.73
	1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305
	3.492.997.107-.775.42-1.305.763-1.605-2.665-.304-5.466-1.332-5.466-5.93
	0-1.31.47-2.38 1.235-3.22-.124-.303-.535-1.523.117-3.176
	0 0 1.008-.322 3.3 1.23a11.52 11.52 0 0 1 3.003-.404c1.02.005
	2.047.138 3.003.404 2.29-1.552 3.297-1.23
	3.297-1.23.653 1.653.242 2.873.118 3.176.77.84
	1.233 1.91 1.233 3.22 0 4.61-2.805 5.624-5.475
	5.92.43.372.823 1.102.823 2.222 0 1.606-.015
	2.898-.015 3.293 0 .322.218.699.825.58C20.565
	21.796 24 17.297 24 12c0-6.63-5.37-12-12-12z"/>
	</svg>
	View on GitHub
	</a>
	</div>
	</div>
	</a>

	<!-- All Projects Section -->
	<div class="all-projects">
	<a href="https://github.com/lovnishVerma" target="_blank" rel="noopener" aria-label="View all open source projects on GitHub">
	<h3>ALL PROJECTS</h3>
	</a>
	<p>
	* Some projects are under NDA and cannot be published.<br />
	If you’d like to see my open-source projects, <br>
	<a href="https://github.com/lovnishverma" target="_blank" rel="noopener"> please check my GitHub.</a>
	</p>

	<!-- GitHub button -->
	<div class="github-btn-container">
	<a href="https://github.com/lovnishVerma"
	target="_blank" rel="noopener" class="github-btn">
	<svg class="github-icon" viewBox="0 0 24 24" aria-hidden="true">
	<path fill-rule="evenodd" clip-rule="evenodd"
	d="M12 0C5.37 0 0 5.37 0 12c0 5.3
	3.438 9.8 8.205 11.385.6.113.82-.263.82-.582
	0-.288-.01-1.05-.015-2.06-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.082-.73.082-.73
	1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305
	3.492.997.107-.775.42-1.305.763-1.605-2.665-.304-5.466-1.332-5.466-5.93
	0-1.31.47-2.38 1.235-3.22-.124-.303-.535-1.523.117-3.176
	0 0 1.008-.322 3.3 1.23a11.52 11.52 0 0 1 3.003-.404c1.02.005
	2.047.138 3.003.404 2.29-1.552 3.297-1.23
	3.297-1.23.653 1.653.242 2.873.118 3.176.77.84
	1.233 1.91 1.233 3.22 0 4.61-2.805 5.624-5.475
	5.92.43.372.823 1.102.823 2.222 0 1.606-.015
	2.898-.015 3.293 0 .322.218.699.825.58C20.565
	21.796 24 17.297 24 12c0-6.63-5.37-12-12-12z"/>
	</svg>
	View on GitHub
	</a>
	</div>
	</div>
	</section>


	<!-- Mobile-Friendly Testimonials Section -->
	<section id="testimonial" aria-label="Client testimonials">
	<div class="testimonial-title">
	<h2>Testimonials</h2>
	<p>What clients say about me</p>
	</div>

	<div class="testimonial-container">
	<div class="testimonial-content">
	<div class="testimonial-cards">
	<div class="testimonial-card active" id="testimonial-0">
	<div class="star-rating">
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<p>5.0 Rating</p>
	</div>
	<h4>
	Lovnish was a real pleasure to work with and we look forward to
	working with him again. He's definitely the kind of developer you can
	trust with a project from start to finish.
	</h4>
	<i class="fa-solid fa-quote-right"></i>
	</div>

	<div class="testimonial-card" id="testimonial-1">
	<div class="star-rating">
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<p>4.5 Rating</p>
	</div>
	<h4>
	Working with Lovnish was a pleasure. His expertise in both design and
	development allowed him to create a website that exceeded
	expectations. We couldn't be happier with the end result.
	</h4>
	<i class="fa-solid fa-quote-right"></i>
	</div>

	<div class="testimonial-card" id="testimonial-2">
	<div class="star-rating">
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<i class="fa-solid fa-star"></i>
	<p>4.0 Rating</p>
	</div>
	<h4>
	I highly recommend Lovnish for any design or development project. He
	has the skills, experience, and passion to create stunning,
	functional solutions that will take your business to the next level.
	</h4>
	<i class="fa-solid fa-quote-right"></i>
	</div>
	</div>

	<div class="client-profiles">
	<div class="single-profile-card active" onclick="switchTestimonial(0)">
	<img src="assets/testimonials/sarwan_singh.png"
	alt="Dr. Sarwan Singh NIELIT Chandigarh" />
	<div>
	<h4>Dr. Sarwan Singh</h4>
	<p>
	Joint Director,<br>
	<a href="https://www.nielit.gov.in/chandigarh/index.php" target="_blank" rel="noopener">NIELIT Chandigarh</a>
	</p>
	</div>
	</div>

	<div class="single-profile-card" onclick="switchTestimonial(1)">
	<img src="assets/testimonials/anita_budhiraja.png"
	alt="Anita Budhiraja NIELIT" />
	<div>
	<h4>Anita Budhiraja</h4>
	<p>
	Scientist-E,<br>
	<a href="https://www.nielit.gov.in/chandigarh/index.php" target="_blank" rel="noopener">NIELIT Chandigarh</a>
	</p>
	</div>
	</div>

	<div class="single-profile-card" onclick="switchTestimonial(2)">
	<img src="assets/testimonials/arti_mehta.png"
	alt="Arti Mehta Founder Smiling Walls" />
	<div>
	<h4>Arti Mehta</h4>
	<p>
	Founder,<br>
	<a href="https://smilingwalls.in/" target="_blank" rel="noopener">Smiling Walls</a>
	</p>
	</div>
	</div>
	</div>
	</div>

	<div class="testimonial-nav">
	<div class="nav-dot active" onclick="switchTestimonial(0)"></div>
	<div class="nav-dot" onclick="switchTestimonial(1)"></div>
	<div class="nav-dot" onclick="switchTestimonial(2)"></div>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<footer id="footer" role="contentinfo">
	<div class="footer-content">
	<div class="footer-left">
	<h2>Let's Build Something Amazing Together</h2>
	<div class="email-form">
	<h3>Start by <span>saying hi</span></h3>
	<form id="contactForm" role="form" aria-label="Contact form">
	<input type="text" name="name" id="name" placeholder="Your name" required aria-label="Your name" />
	<input type="email" name="email" id="email" placeholder="Email Address" required aria-label="Email address" />
	<div class="form-row">
	<input type="text" name="message" id="message" placeholder="Type your message" required aria-label="Your message" />
	<button type="submit" aria-label="Send message">Send</button>
	</div>
	</form>
	</div>

	<div class="footer-title">
	<h3 class="title-first-name">Lovnish Verma</h3>
	<h3 class="title-last-name">Support me</h3>
	<a href="https://www.buymeacoffee.com/lovnishverma" target="_blank" rel="noopener" aria-label="Buy me a coffee">
	<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
	alt="Buy Me A Coffee"
	style="height: 60px !important; width: 217px !important;"
	loading="lazy" />
	</a>
	</div>
	</div>

	<div class="footer-right">
	<div class="footer-email-intro">
	<p>Contact Information</p>
	<address>
	<h4>Chandigarh, India</h4>
	<a href="mailto:princelv84@gmail.com">princelv84@gmail.com</a>
	</address>
	</div>

	<nav class="footer-nav-menu" role="navigation" aria-label="Footer navigation">
	<ul class="footer-menu">
	<li><a href="https://wa.me/918894869371" aria-label="Contact via WhatsApp">WhatsApp</a></li>
	<li><a href="mailto:princelv84@gmail.com" aria-label="Send email">Mail</a></li>
	<li><a href="tel:8894869371" aria-label="Call phone number">Call</a></li>
	</ul>
	</nav>

	<div class="social-icons" role="list" aria-label="Social media links">
	<a href="https://www.linkedin.com/in/lovnishverma/" target="_blank" rel="noopener" aria-label="LinkedIn Profile">
	<i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
	</a>
	<a href="https://github.com/LovnishVerma" target="_blank" rel="noopener" aria-label="GitHub Profile">
	<i class="fa-brands fa-github" aria-hidden="true"></i>
	</a>
	<a href="mailto:princelv84@gmail.com" aria-label="Email contact">
	<i class="fa-regular fa-envelope" aria-hidden="true"></i>
	</a>
	<a href="https://www.x.com/lovnishofficial/" target="_blank" rel="noopener" aria-label="Twitter Profile">
	<i class="fa-brands fa-twitter" aria-hidden="true"></i>
	</a>
	<a href="https://www.instagram.com/lovnishofficial/" target="_blank" rel="noopener" aria-label="Instagram Profile">
	<i class="fa-brands fa-instagram" aria-hidden="true"></i>
	</a>
	<a href="https://www.facebook.com/lovnishofficial/" target="_blank" rel="noopener" aria-label="Facebook Profile">
	<i class="fa-brands fa-facebook" aria-hidden="true"></i>
	</a>
	</div>
	</div>
	</div>
	</footer>

	<script>

	let currentIndex = 0;
	let autoSwitchInterval;

	function showCard(index) {
	// Get all cards and intros
	const cards = document.querySelectorAll(".design-card");
	const intros = document.querySelectorAll(".introduction-text");

	// Reset active states
	cards.forEach((card, i) => {
	card.classList.remove("active");
	intros[i].style.display = "none";
	});

	// Activate selected card and intro
	cards[index].classList.add("active");
	intros[index].style.display = "block";

	currentIndex = index;
	}

	function switchCard(index) {
	showCard(index);
	resetAutoSwitch(); // Restart auto switching if user clicks manually
	}

	function autoSwitch() {
	currentIndex = (currentIndex + 1) % document.querySelectorAll(".design-card").length;
	showCard(currentIndex);
	}

	function resetAutoSwitch() {
	clearInterval(autoSwitchInterval);
	autoSwitchInterval = setInterval(autoSwitch, 5000); // auto switch every 5 sec
	}

	// Start auto switching on page load
	document.addEventListener("DOMContentLoaded", () => {
	resetAutoSwitch();
	});


	// JavaScript with modern animations and interactions
	gsap.registerPlugin(ScrollTrigger);

	// Loading Screen
	window.addEventListener('load', function () {
	setTimeout(() => {
	document.getElementById('loadingScreen').classList.add('hidden');
	initializeAnimations();
	}, 1000);
	});

	// Create floating particles
	function createParticles() {
	const particlesContainer = document.getElementById('particles');
	const particleCount = 50;

	for (let i = 0; i < particleCount; i++) {
	const particle = document.createElement('div');
	particle.className = 'particle';
	particle.style.left = Math.random() * 100 + '%';
	particle.style.width = Math.random() * 4 + 2 + 'px';
	particle.style.height = particle.style.width;
	particle.style.animationDelay = Math.random() * 20 + 's';
	particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
	particlesContainer.appendChild(particle);
	}
	}

	// Initialize all animations
	function initializeAnimations() {
	createParticles();
	setupScrollAnimations();
	setupHeaderScroll();
	}

	// Scroll-triggered animations
	function setupScrollAnimations() {
	const fadeInElements = document.querySelectorAll('.fade-in');

	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('visible');
	}
	});
	}, {
	threshold: 0.1,
	rootMargin: '0px 0px -50px 0px'
	});

	fadeInElements.forEach(el => observer.observe(el));
	}

	// Header scroll effect
	function setupHeaderScroll() {
	window.addEventListener('scroll', () => {
	const header = document.getElementById('header');
	if (window.scrollY > 100) {
	header.classList.add('scrolled');
	} else {
	header.classList.remove('scrolled');
	}
	});
	}

	// WhatsApp redirect
	function redirectToWhatsApp() {
	const phoneNumber = "918894869371";
	const message = "Hi Lovnish! I'm interested in discussing an AI/ML project with you. Let's connect!";
	const url = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
	window.open(url, '_blank');
	}

	// Service card switching with animations
	function switchCard(index) {
	// Remove active class from all cards
	document.querySelectorAll('.design-card').forEach((card, i) => {
	card.classList.remove('active');
	if (i === index) {
	card.classList.add('active');
	}
	});

	// Hide all introduction texts with fade
	document.querySelectorAll('.introduction-text').forEach((text, i) => {
	if (i === index) {
	text.style.display = 'block';
	gsap.fromTo(text,
	{ opacity: 0, y: 20 },
	{ opacity: 1, y: 0, duration: 0.5 }
	);
	} else {
	text.style.display = 'none';
	}
	});
	}

	// testimonial switching
	function switchTestimonial(index) {
	// Remove active class from all elements
	document.querySelectorAll('.testimonial-card').forEach(card => {
	card.classList.remove('active');
	});

	document.querySelectorAll('.single-profile-card').forEach(profile => {
	profile.classList.remove('active');
	});

	document.querySelectorAll('.nav-dot').forEach(dot => {
	dot.classList.remove('active');
	});

	// Add active class to selected elements
	document.getElementById(`testimonial-${index}`).classList.add('active');
	document.querySelectorAll('.single-profile-card')[index].classList.add('active');
	document.querySelectorAll('.nav-dot')[index].classList.add('active');
	}

	// Auto-rotate testimonials
	let testimonialIndex = 0;
	function autoRotateTestimonials() {
	testimonialIndex = (testimonialIndex + 1) % 3;
	switchTestimonial(testimonialIndex);
	}

	// Start auto-rotation after page load
	setTimeout(() => {
	setInterval(autoRotateTestimonials, 6000);
	}, 3000);

	// contact form submission
	document.getElementById("contactForm").addEventListener("submit", function (event) {
	event.preventDefault();
	const name = document.getElementById("name").value;
	const email = document.getElementById("email").value;
	const messageText = document.getElementById("message").value;
	const message = `Hi! I'm ${name} (${email}). ${messageText}`;
	const phoneNumber = "918894869371";
	const url = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
	window.open(url, '_blank');

	// Reset form
	this.reset();

	// Show success message
	const button = this.querySelector('button');
	const originalText = button.textContent;
	button.textContent = 'Message Sent! ✓';
	button.style.background = 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)';

	setTimeout(() => {
	button.textContent = originalText;
	button.style.background = '';
	}, 3000);
	});

	// Smooth scrolling for internal links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();
	const target = document.querySelector(this.getAttribute('href'));
	if (target) {
	target.scrollIntoView({
	behavior: 'smooth',
	block: 'start'
	});
	}
	});
	});

	// button interactions
	document.querySelectorAll('.chat-button, .github-btn').forEach(button => {
	button.addEventListener('mouseenter', function () {
	gsap.to(this, { scale: 1.05, duration: 0.3 });
	});

	button.addEventListener('mouseleave', function () {
	gsap.to(this, { scale: 1, duration: 0.3 });
	});
	});

	// Project card hover effects
	document.querySelectorAll('.project-card').forEach(card => {
	card.addEventListener('mouseenter', function () {
	gsap.to(this, { y: -10, scale: 1.02, duration: 0.3 });
	});

	card.addEventListener('mouseleave', function () {
	gsap.to(this, { y: 0, scale: 1, duration: 0.3 });
	});
	});

	// Parallax effect for background
	window.addEventListener('scroll', () => {
	const scrolled = window.pageYOffset;
	const parallax = document.querySelector('.animated-bg');
	const speed = scrolled * 0.5;
	parallax.style.transform = `translateY(${speed}px)`;
	});

	// Add typing effect to main title
	function typeWriter(element, text, speed = 100) {
	let i = 0;
	element.innerHTML = '';
	function type() {
	if (i < text.length) {
	element.innerHTML += text.charAt(i);
	i++;
	setTimeout(type, speed);
	}
	}
	type();
	}

	// Initialize typing effect after load
	setTimeout(() => {
	const titleElement = document.querySelector('.body-title h2');
	if (titleElement) {
	typeWriter(titleElement, "Transforming Data into Intelligence", 50);
	}
	}, 500); // shorter delay so it starts quickly

	// Add cursor pointer to clickable elements
	document.querySelectorAll('.design-card, .single-profile-card, .nav-dot').forEach(el => {
	el.style.cursor = 'pointer';
	});

	// Performance optimization - Lazy load images
	const images = document.querySelectorAll('img[loading="lazy"]');
	const imageObserver = new IntersectionObserver((entries, observer) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	const img = entry.target;
	img.src = img.dataset.src \|\| img.src;
	img.classList.remove('lazy');
	imageObserver.unobserve(img);
	}
	});
	});

	images.forEach(img => imageObserver.observe(img));
	</script>
	</body>
	</html>