File: /var/www/grapossconnect/include/career_profiles/250602110511_Lakshay_Singhal_Resume.pdf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lakshay Singhal - Full Stack Developer | AI/ML Enthusiast</title>
<meta name="description" content="Full Stack Developer and AI/ML Enthusiast creating intelligent, scalable solutions with clean code and purposeful design.">
<meta property="og:title" content="Lakshay Singhal - Full Stack Developer">
<meta property="og:description" content="Professional portfolio showcasing projects in AI/ML, web development, and software engineering.">
<meta property="og:type" content="website">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--accent-color: #3b82f6;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--bg-primary: #ffffff;
--bg-secondary: #f9fafb;
--bg-card: #ffffff;
--border-color: #e5e7eb;
--gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--shadow: 0 10px 30px rgba(0,0,0,0.1);
--shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
}
[data-theme="dark"] {
--text-primary: #f9fafb;
--text-secondary: #d1d5db;
--bg-primary: #111827;
--bg-secondary: #1f2937;
--bg-card: #374151;
--border-color: #4b5563;
--shadow: 0 10px 30px rgba(0,0,0,0.3);
--shadow-hover: 0 20px 40px rgba(0,0,0,0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-primary);
transition: all 0.3s ease;
}
/* Header & Navigation */
.header {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
z-index: 1000;
transition: all 0.3s ease;
}
[data-theme="dark"] .header {
background: rgba(17, 24, 39, 0.95);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 5%;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
align-items: center;
}
.nav-link {
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary-color);
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 50%;
background: var(--primary-color);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.theme-toggle {
background: none;
border: none;
font-size: 1.2rem;
color: var(--text-primary);
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
}
.theme-toggle:hover {
background: var(--bg-secondary);
transform: scale(1.1);
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
gap: 3px;
}
.hamburger span {
width: 25px;
height: 3px;
background: var(--text-primary);
transition: all 0.3s ease;
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%23ffffff08" points="0,1000 1000,0 1000,500 500,1000"/></svg>');
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(2deg); }
}
.hero-content {
text-align: center;
color: white;
z-index: 2;
position: relative;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
opacity: 0;
animation: slideUp 1s ease 0.5s forwards;
}
.hero-subtitle {
font-size: 1.5rem;
margin-bottom: 1rem;
opacity: 0;
animation: slideUp 1s ease 0.7s forwards;
}
.hero-tagline {
font-size: 1.1rem;
margin-bottom: 2rem;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
animation: slideUp 1s ease 0.9s forwards;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
animation: slideUp 1s ease 1.1s forwards;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.btn-primary {
background: white;
color: var(--primary-color);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.btn-secondary {
background: transparent;
color: white;
border-color: white;
}
.btn-secondary:hover {
background: white;
color: var(--primary-color);
transform: translateY(-2px);
}
/* Section Styles */
.section {
padding: 5rem 5%;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--gradient);
border-radius: 2px;
}
/* About Section */
.about-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
align-items: center;
}
.profile-img {
width: 300px;
height: 300px;
border-radius: 50%;
object-fit: cover;
border: 5px solid var(--primary-color);
transition: all 0.3s ease;
background: var(--gradient);
padding: 5px;
}
.profile-img:hover {
transform: scale(1.05);
box-shadow: var(--shadow-hover);
}
.about-text h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--primary-color);
}
.about-text p {
margin-bottom: 1rem;
color: var(--text-secondary);
line-height: 1.7;
}
.education {
margin-top: 2rem;
}
.education-item {
padding: 1rem;
border-left: 3px solid var(--primary-color);
margin-bottom: 1rem;
background: var(--bg-secondary);
border-radius: 0 8px 8px 0;
}
/* Skills Section */
.skills-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.skill-category {
background: var(--bg-card);
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.skill-category:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.skill-category h3 {
color: var(--primary-color);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.skill-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.skill-name {
display: flex;
align-items: center;
gap: 0.5rem;
}
.skill-level {
width: 60px;
height: 6px;
background: var(--bg-secondary);
border-radius: 3px;
overflow: hidden;
}
.skill-level::after {
content: '';
display: block;
height: 100%;
background: var(--gradient);
border-radius: 3px;
animation: skillLoad 2s ease-in-out;
}
.skill-level.advanced::after { width: 90%; }
.skill-level.intermediate::after { width: 75%; }
.skill-level.beginner::after { width: 60%; }
@keyframes skillLoad {
from { width: 0; }
}
/* Projects Section */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.project-card {
background: var(--bg-card);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow);
transition: all 0.3s ease;
position: relative;
}
.project-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.project-header {
background: var(--gradient);
color: white;
padding: 1.5rem;
}
.project-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.project-subtitle {
opacity: 0.9;
font-size: 0.9rem;
}
.project-body {
padding: 1.5rem;
}
.project-description {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.tech-stack {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.tech-tag {
background: var(--bg-secondary);
color: var(--text-primary);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.project-links {
display: flex;
gap: 1rem;
}
.project-link {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.project-link:hover {
color: var(--secondary-color);
transform: translateX(5px);
}
/* Experience Section */
.timeline {
position: relative;
padding-left: 2rem;
}
.timeline::before {
content: '';
position: absolute;
left: 1rem;
top: 0;
bottom: 0;
width: 2px;
background: var(--gradient);
}
.timeline-item {
position: relative;
margin-bottom: 3rem;
background: var(--bg-card);
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow);
margin-left: 2rem;
transition: all 0.3s ease;
}
.timeline-item:hover {
transform: translateX(10px);
box-shadow: var(--shadow-hover);
}
.timeline-item::before {
content: '';
position: absolute;
left: -3rem;
top: 2rem;
width: 12px;
height: 12px;
background: var(--primary-color);
border-radius: 50%;
border: 3px solid var(--bg-primary);
}
.experience-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.experience-title {
color: var(--primary-color);
font-weight: 600;
font-size: 1.2rem;
}
.experience-company {
font-weight: 500;
margin-bottom: 0.5rem;
}
.experience-date {
color: var(--text-secondary);
font-size: 0.9rem;
background: var(--bg-secondary);
padding: 0.25rem 0.75rem;
border-radius: 15px;
}
.experience-description {
color: var(--text-secondary);
line-height: 1.6;
}
.experience-description ul {
padding-left: 1.5rem;
}
.experience-description li {
margin-bottom: 0.5rem;
}
/* Certifications Section */
.certifications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.cert-card {
background: var(--bg-card);
padding: 1.5rem;
border-radius: 12px;
box-shadow: var(--shadow);
transition: all 0.3s ease;
text-align: center;
}
.cert-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.cert-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.cert-title {
font-weight: 600;
margin-bottom: 0.5rem;
}
.cert-issuer {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Contact Section */
.contact-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.contact-info h3 {
color: var(--primary-color);
margin-bottom: 1.5rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.contact-item i {
width: 20px;
color: var(--primary-color);
}
.contact-form {
background: var(--bg-card);
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.875rem;
border: 2px solid var(--border-color);
border-radius: 8px;
background: var(--bg-primary);
color: var(--text-primary);
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* WhatsApp Float Button */
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background: #25d366;
color: white;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.whatsapp-float:hover {
transform: scale(1.1);
background: #128c7e;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 40px;
left: 40px;
width: 50px;
height: 50px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
box-shadow: var(--shadow);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
/* Footer */
.footer {
background: var(--bg-secondary);
padding: 2rem 5%;
text-align: center;
border-top: 1px solid var(--border-color);
}
.social-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 50%;
transition: all 0.3s ease;
}
.social-link:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: var(--bg-primary);
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: var(--shadow);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.hamburger {
display: flex;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.hamburger.active span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.hero h1 {
font-size: 2.5rem;
}
.hero-buttons {
flex-direction: column;
gap: 1rem;
}
.about-content {
grid-template-columns: 1fr;
text-align: center;
}
.profile-img {
width: 250px;
height: 250px;
margin: 0 auto;
}
.contact-container {
grid-template-columns: 1fr;
}
.section {
padding: 3rem 5%;
}
.whatsapp-float,
.back-to-top {
bottom: 20px;
}
.whatsapp-float {
right: 20px;
}
.back-to-top {
left: 20px;
}
}
/* Animations */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-primary);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
transition: opacity 0.5s ease;
}
.preloader.hide {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid var(--border-color);
border-top: 5px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- Preloader -->
<div class="preloader" id="preloader">
<div class="spinner"></div>
</div>
<!-- Header -->
<header class="header">
<nav class="nav">
<a href="#home" class="logo">Lakshay Singhal</a>
<ul class="nav-menu" id="nav-menu">
<li><a href="#home" class="nav-link active">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#experience" class="nav-link">Experience</a></li>
<li><a href="#certifications" class="nav-link">Certifications</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
<li><button class="theme-toggle" id="theme-toggle"><i class="fas fa-moon"></i></button></li>
</ul>
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1>Lakshay Singhal</h1>
<div class="hero-subtitle">Full Stack Developer | AI/ML Enthusiast | Open Source Contributor</div>
<p class="hero-tagline">I create intelligent, scalable solutions with clean code and purposeful design.</p>
<div class="hero-buttons">
<a href="#" class="btn btn-primary" id="download-resume">
<i class="fas fa-download"></i>
Download Resume
</a>
<a href="https://wa.me/919917682528?text=Hi%20Lakshay%2C%20I%20visited%20your%20portfolio!" class="btn btn-secondary" target="_blank">
<i class="fab fa-whatsapp"></i>
WhatsApp Me
</a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="section fade-in">
<h2 class="section-title">About Me</h2>
<div class="about-content">
<div style="text-align: center;">
<div class="profile-img" style="background: linear-gradient(45deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-size: 4rem; margin: 0 auto;">
<i class="fas fa-user"></i>
</div>
</div>
<div class="about-text">
<h3>Professional Summary</h3>
<p>I'm a passionate Full Stack Developer and AI/ML Enthusiast with expertise in creating intelligent, scalable solutions. Currently pursuing B.Tech in Computer Science from Dr. A.P.J Abdul Kalam Technical University, I have hands-on experience in web development, artificial intelligence, and software engineering.</p>
<p>My journey includes developing AI-based systems that have guided 1,000+ students, building face recognition systems with 99% accuracy, and contributing to open source projects. I'm driven by the challenge of solving complex problems through clean code and innovative design.</p>
<div class="education">
<h3>Education</h3>
<div class="education-item">
<strong>Bachelor of Technology - Computer Science</strong><br>
Dr. A.P.J Abdul Kalam Technical University | CGPA: 7.4<br>
<em>Expected August 2025</em>
</div>
<div class="education-item">
<strong>Intermediate</strong><br>
L.N. Public School, Hapur | Percentage: 81%<br>
<em>March 2020 - March 2021</em>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="section fade-in">
<h2 class="section-title">Technical Skills</h2>
<div class="skills-container">
<div class="skill-category">
<h3><i class="fas fa-laptop-code"></i> Frontend Development</h3>
<div class="skill-item">
<div class="skill-name">
<i class="fab fa-html5"></i>
HTML5
</div>
<div class="skill-level advanced"></div>
</div>
<div class="skill-item">
<div class="skill-name">
<i class="fab fa-css3-alt"></i>
CSS3
</div>
<div class="skill-level advanced"></div>
</div>
<div class="skill-item">
<div class="skill-name">
<i class="fab fa-js"></i>
JavaScript
</div>
<div class="skill-level advanced"></div>
</div>
<div class="skill-item">
<div class="skill-name">
<i class="fab fa-react"></i>
React
</div>
<div class="skill-level intermediate"></div>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-server"></i> Backend Development</h3>
<div class="skill-item">
<div class="skill-name">
<i class="fab fa-python"></i>
Python
</div>
<div class="skill-level advanced"></div>
</div>
<div class="skill-item">
<div class="skill-name">
<i class="fab fa-java"></i>
Java
</div>
<div class="skill-level advanced"></div>
</div>
<div class="skill-item">
<div class="skill-name">
<i class="fas fa-database"></i>
Django
</div>
<div class="skill-level intermediate"></div>
</div>
<div class="skill-item">
<div class="skill-name">
<i class="fas fa-bolt"></i>
FastAPI
</div>
<div class="skill-level intermediate"></div>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-tools"></i> Tools & Technologies</h3>
<div class="skill-item">
<div class="skill-name">
<i class="fab fa-git-alt"></i>
Git
</div>
<div class="skill-level advanced"></div>
</div>
<div class="skill-item">
<div class="skill-name">
<i class="fab fa-docker"></i>
Docker
</div>
<div class="skill-level intermediate"></div>
</div>
<div class="skill-item">
<div class="skill-name">
<i class="fab fa-aws"></i>
AWS
</div>
<div class="skill-level beginner"></div>
</div>
<div class="skill-item">
<div class="skill-name">
<i class="fas fa-brain"></i>
AI/ML
</div>
<div class="skill-level beginner"></div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="section fade-in">
<h2 class="section-title">Featured Projects</h2>
<div class="projects-grid">
<div class="project-card">
<div class="project-header">
<div class="project-title">NextStep - AI Career Guidance</div>
<div class="project-subtitle">Intelligent Career Matching System</div>
</div>
<div class="project-body">
<p class="project-description">
AI-powered career guidance system that analyzes user data to provide personalized career recommendations.
Successfully guided 1,000+ students and impacts 200+ individuals monthly with intelligent insights.
</p>
<div class="tech-stack">
<span class="tech-tag">Python</span>
<span class="tech-tag">Java</span>
<span class="tech-tag">Django</span>
<span class="tech-tag">JavaScript</span>
<span class="tech-tag">SQL</span>
<span class="tech-tag">AI/ML</span>
</div>
<div class="project-links">
<a href="#" class="project-link">
<i class="fab fa-github"></i>
View Code
</a>
<a href="#" class="project-link">
<i class="fas fa-external-link-alt"></i>
Live Demo
</a>
</div>
</div>
</div>
<div class="project-card">
<div class="project-header">
<div class="project-title">Face Recognition Attendance</div>
<div class="project-subtitle">Real-time Attendance System</div>
</div>
<div class="project-body">
<p class="project-description">
Advanced face recognition system for automated attendance tracking with 99% accuracy.
Supports 500+ users with real-time identification and secure SQL-based data storage.
</p>
<div class="tech-stack">
<span class="tech-tag">Java</span>
<span class="tech-tag">Python</span>
<span class="tech-tag">JavaScript</span>
<span class="tech-tag">React</span>
<span class="tech-tag">SQL</span>
<span class="tech-tag">OpenCV</span>
</div>
<div class="project-links">
<a href="#" class="project-link">
<i class="fab fa-github"></i>
View Code
</a>
<a href="#" class="project-link">
<i class="fas fa-external-link-alt"></i>
Live Demo
</a>
</div>
</div>
</div>
<div class="project-card">
<div class="project-header">
<div class="project-title">House Price Prediction</div>
<div class="project-subtitle">ML-Powered Real Estate Analytics</div>
</div>
<div class="project-body">
<p class="project-description">
Data-driven real estate pricing solution using machine learning algorithms.
Assists 100+ buyers, sellers, and agents with accurate price predictions and market insights.
</p>
<div class="tech-stack">
<span class="tech-tag">Python</span>
<span class="tech-tag">React</span>
<span class="tech-tag">JavaScript</span>
<span class="tech-tag">SQL</span>
<span class="tech-tag">Streamlit</span>
<span class="tech-tag">ML</span>
</div>
<div class="project-links">
<a href="#" class="project-link">
<i class="fab fa-github"></i>
View Code
</a>
<a href="#" class="project-link">
<i class="fas fa-external-link-alt"></i>
Live Demo
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="section fade-in">
<h2 class="section-title">Professional Experience</h2>
<div class="timeline">
<div class="timeline-item">
<div class="experience-header">
<div>
<div class="experience-title">Intern</div>
<div class="experience-company">Edunet Foundation (AICTE – IBM SkillsBuild)</div>
</div>
<div class="experience-date">Jan 2025 - Feb 2025</div>
</div>
<div class="experience-description">
<p>Specialized internship focusing on Security, Java, Python, SQL, and AWS technologies.</p>
<ul>
<li>Gained hands-on experience with Java, Python, Security protocols, and version control systems (Git)</li>
<li>Completed a 6-week intensive program under IBM SkillsBuild framework</li>
<li>Developed components of a project addressing real-world cybersecurity threats</li>
<li>Enhanced skills in cloud computing and database management</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="experience-header">
<div>
<div class="experience-title">SDE Intern</div>
<div class="experience-company">Bluestock Fintech</div>
</div>
<div class="experience-date">Sep 2024 - Nov 2024</div>
</div>
<div class="experience-description">
<p>Full-stack development role focusing on fintech applications and system optimization.</p>
<ul>
<li>Delivered 2+ key features, improving application performance and code quality</li>
<li>Coordinated with a team of 5 developers during critical software deployment phases</li>
<li>Enhanced system efficiency through seamless frontend and backend integration</li>
<li>Worked with modern tech stack: Python, Django, React, JavaScript, SQL</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="experience-header">
<div>
<div class="experience-title">Open Source Contributor</div>
<div class="experience-company">GirlScript Summer Of Code (GSSOC)</div>
</div>
<div class="experience-date">May 2024 - Aug 2024</div>
</div>
<div class="experience-description">
<p>Active contributor to open source projects with focus on web development and system optimization.</p>
<ul>
<li>Debugged 3+ critical bugs across multiple projects, improving overall system stability</li>
<li>Reduced error incidents through systematic testing and code review processes</li>
<li>Collaborated with 2+ developers on various projects, enhancing development efficiency</li>
<li>Contributed to user experience improvements and feature enhancements</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Certifications Section -->
<section id="certifications" class="section fade-in">
<h2 class="section-title">Certifications & Achievements</h2>
<div class="certifications-grid">
<div class="cert-card">
<div class="cert-icon">
<i class="fas fa-lightbulb"></i>
</div>
<div class="cert-title">Tata Imagination Challenge 2024</div>
<div class="cert-issuer">Tata Group</div>
</div>
<div class="cert-card">
<div class="cert-icon">
<i class="fab fa-microsoft"></i>
</div>
<div class="cert-title">Asia AI Odyssey Challenge</div>
<div class="cert-issuer">Microsoft</div>
</div>
<div class="cert-card">
<div class="cert-icon">
<i class="fab fa-python"></i>
</div>
<div class="cert-title">Python Programming Training</div>
<div class="cert-issuer">Infosys</div>
</div>
<div class="cert-card">
<div class="cert-icon">
<i class="fas fa-code"></i>
</div>
<div class="cert-title">200+ DSA Problems Solved</div>
<div class="cert-issuer">Various Platforms</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section fade-in">
<h2 class="section-title">Get In Touch</h2>
<div class="contact-container">
<div class="contact-info">
<h3>Let's Connect</h3>
<p>I'm always open to discussing new opportunities, interesting projects, or just having a great conversation about technology!</p>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<div>
<strong>Email</strong><br>
<a href="mailto:Lakshaysinghal2909@gmail.com">Lakshaysinghal2909@gmail.com</a>
</div>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<div>
<strong>Phone</strong><br>
<a href="tel:+919917682528">+91-9917682528</a>
</div>
</div>
<div class="contact-item">
<i class="fab fa-linkedin"></i>
<div>
<strong>LinkedIn</strong><br>
<a href="https://linkedin.com/in/lakshay-singhal01" target="_blank">lakshay-singhal01</a>
</div>
</div>
<div class="contact-item">
<i class="fab fa-github"></i>
<div>
<strong>GitHub</strong><br>
<a href="https://github.com/Lakshaysinghal01" target="_blank">Lakshaysinghal01</a>
</div>
</div>
</div>
<div class="contact-form">
<h3>Send Message</h3>
<form id="contact-form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">
<i class="fas fa-paper-plane"></i>
Send Message
</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="social-links">
<a href="https://github.com/Lakshaysinghal01" class="social-link" target="_blank">
<i class="fab fa-github"></i>
</a>
<a href="https://linkedin.com/in/lakshay-singhal01" class="social-link" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
<a href="mailto:Lakshaysinghal2909@gmail.com" class="social-link">
<i class="fas fa-envelope"></i>
</a>
<a href="https://wa.me/919917682528" class="social-link" target="_blank">
<i class="fab fa-whatsapp"></i>
</a>
</div>
<p>© 2025 Lakshay Singhal. All rights reserved.</p>
</footer>
<!-- WhatsApp Float Button -->
<a href="https://wa.me/919917682528?text=Hi%20Lakshay%2C%20I%20visited%20your%20portfolio!" class="whatsapp-float" target="_blank">
<i class="fab fa-whatsapp"></i>
</a>
<!-- Back to Top Button -->
<button class="back-to-top" id="back-to-top">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// Preloader
window.addEventListener('load', function() {
const preloader = document.getElementById('preloader');
preloader.classList.add('hide');
setTimeout(() => {
preloader.style.display = 'none';
}, 500);
});
// Mobile Navigation
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
});
// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
});
});
// Theme Toggle
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
// Check for saved theme preference
const currentTheme = localStorage.getItem('theme') || 'light';
if (currentTheme === 'dark') {
body.setAttribute('data-theme', 'dark');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
}
themeToggle.addEventListener('click', function() {
const theme = body.getAttribute('data-theme');
if (theme === 'dark') {
body.removeAttribute('data-theme');
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
localStorage.setItem('theme', 'light');
} else {
body.setAttribute('data-theme', 'dark');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
localStorage.setItem('theme', 'dark');
}
});
// Smooth Scrolling
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'
});
}
});
});
// ScrollSpy - Active Navigation
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');
function updateActiveNav() {
const scrollY = window.pageYOffset;
sections.forEach(section => {
const sectionHeight = section.offsetHeight;
const sectionTop = section.offsetTop - 100;
const sectionId = section.getAttribute('id');
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
navLinks.forEach(link => link.classList.remove('active'));
const activeLink = document.querySelector(`.nav-link[href="#${sectionId}"]`);
if (activeLink) activeLink.classList.add('active');
}
});
}
window.addEventListener('scroll', updateActiveNav);
// Fade In Animation
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});
// Back to Top Button
const backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTop.classList.add('show');
} else {
backToTop.classList.remove('show');
}
});
backToTop.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Contact Form
const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Basic form validation
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const message = document.getElementById('message').value.trim();
if (!name || !email || !message) {
alert('Please fill in all fields');
return;
}
if (!isValidEmail(email)) {
alert('Please enter a valid email address');
return;
}
// Simulate form submission
alert('Thank you for your message! I\'ll get back to you soon.');
contactForm.reset();
});
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
// Download Resume Function
document.getElementById('download-resume').addEventListener('click', function(e) {
e.preventDefault();
// Create a temporary link to trigger download
const link = document.createElement('a');
link.href = '#'; // Replace with actual resume path
link.download = 'Lakshay_Singhal_Resume.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// For now, show an alert since we don't have the actual file
alert('Resume download would start here. Please add the actual PDF file to your assets folder.');
});
// Typing Animation for Hero Section
const heroSubtitle = document.querySelector('.hero-subtitle');
const titles = [
'Full Stack Developer',
'AI/ML Enthusiast',
'Open Source Contributor',
'Problem Solver'
];
let titleIndex = 0;
let charIndex = 0;
let isDeleting = false;
const typingSpeed = 100;
const erasingSpeed = 50;
const delayBetweenTitles = 2000;
function typeTitle() {
const currentTitle = titles[titleIndex];
if (isDeleting) {
heroSubtitle.textContent = currentTitle.substring(0, charIndex - 1);
charIndex--;
} else {
heroSubtitle.textContent = currentTitle.substring(0, charIndex + 1);
charIndex++;
}
if (!isDeleting && charIndex === currentTitle.length) {
setTimeout(() => isDeleting = true, delayBetweenTitles);
} else if (isDeleting && charIndex === 0) {
isDeleting = false;
titleIndex = (titleIndex + 1) % titles.length;
}
const currentSpeed = isDeleting ? erasingSpeed : typingSpeed;
setTimeout(typeTitle, currentSpeed);
}
// Start typing animation after page load
setTimeout(typeTitle, 2000);
// Parallax Effect for Hero Section
window.addEventListener('scroll', function() {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.hero');
const rate = scrolled * -0.5;
if (hero) {
hero.style.transform = `translateY(${rate}px)`;
}
});
// Add loading animation to skill bars
function animateSkillBars() {
const skillLevels = document.querySelectorAll('.skill-level');
skillLevels.forEach(skill => {
skill.style.opacity = '1';
});
}
// Trigger skill bar animation when skills section is visible
const skillsSection = document.getElementById('skills');
const skillsObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateSkillBars();
skillsObserver.unobserve(entry.target);
}
});
});
if (skillsSection) {
skillsObserver.observe(skillsSection);
}
</script>
<!-- Code injected by live-server -->
<script>
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
</body>
</html>