|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Shivam Kumar | AI & Full Stack Developer</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> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%); |
|
|
} |
|
|
.skill-badge { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.skill-badge:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
.project-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.project-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.2); |
|
|
} |
|
|
.timeline-item:not(:last-child)::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 7px; |
|
|
top: 24px; |
|
|
height: calc(100% - 24px); |
|
|
width: 2px; |
|
|
background: #e2e8f0; |
|
|
} |
|
|
.typewriter { |
|
|
overflow: hidden; |
|
|
border-right: .15em solid #6e48aa; |
|
|
white-space: nowrap; |
|
|
margin: 0 auto; |
|
|
letter-spacing: .15em; |
|
|
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; |
|
|
} |
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: #6e48aa; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans antialiased"> |
|
|
|
|
|
<header class="gradient-bg text-white sticky top-0 z-50 shadow-lg"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="text-2xl font-bold"> |
|
|
<span class="text-white">Shivam</span><span class="text-purple-200">Kumar</span> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#about" class="hover:text-purple-200 transition">About</a> |
|
|
<a href="#experience" class="hover:text-purple-200 transition">Experience</a> |
|
|
<a href="#projects" class="hover:text-purple-200 transition">Projects</a> |
|
|
<a href="#skills" class="hover:text-purple-200 transition">Skills</a> |
|
|
<a href="#contact" class="hover:text-purple-200 transition">Contact</a> |
|
|
</nav> |
|
|
<button class="md:hidden focus:outline-none" id="menu-toggle"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:hidden hidden mt-2" id="mobile-menu"> |
|
|
<div class="flex flex-col space-y-3"> |
|
|
<a href="#about" class="block hover:text-purple-200 transition">About</a> |
|
|
<a href="#experience" class="block hover:text-purple-200 transition">Experience</a> |
|
|
<a href="#projects" class="block hover:text-purple-200 transition">Projects</a> |
|
|
<a href="#skills" class="block hover:text-purple-200 transition">Skills</a> |
|
|
<a href="#contact" class="block hover:text-purple-200 transition">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-20"> |
|
|
<div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-purple-200">Shivam Kumar</span></h1> |
|
|
<h2 class="text-2xl md:text-3xl font-semibold mb-6 typewriter">Senior AI & Full Stack Developer</h2> |
|
|
<p class="text-lg mb-8 text-purple-100">Passionate about building intelligent systems and scalable applications with expertise in AI, machine learning, and full stack development.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#contact" class="bg-white text-purple-800 px-6 py-3 rounded-lg font-semibold hover:bg-purple-100 transition">Contact Me</a> |
|
|
<a href="#projects" class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-800 transition">View Projects</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl"> |
|
|
<img src="https://via.placeholder.com/400x400.png?text=Shivam+Kumar" alt="Shivam Kumar" class="w-full h-full object-cover"> |
|
|
</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 text-gray-800">About Me</h2> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<p class="text-lg text-gray-700 mb-6"> |
|
|
I'm a Senior AI Software Developer with over 4 years of experience specializing in AI-related technologies including machine learning, deep learning, time series forecasting, and large language models. |
|
|
</p> |
|
|
<p class="text-lg text-gray-700 mb-6"> |
|
|
My expertise spans across the entire AI development lifecycle, from research and model training to deployment and integration with web applications. I'm passionate about creating intelligent systems that solve real-world problems. |
|
|
</p> |
|
|
<p class="text-lg text-gray-700"> |
|
|
When I'm not coding, you can find me exploring new AI research papers, contributing to open-source projects, or mentoring aspiring developers in the field of artificial intelligence. |
|
|
</p> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-gray-50 p-8 rounded-xl shadow-lg"> |
|
|
<div class="mb-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Personal Info</h3> |
|
|
<div class="space-y-2"> |
|
|
<p class="flex items-center text-gray-700"> |
|
|
<i class="fas fa-envelope mr-3 text-purple-600"></i> |
|
|
<span>kumarshivam066@gmail.com</span> |
|
|
</p> |
|
|
<p class="flex items-center text-gray-700"> |
|
|
<i class="fas fa-phone mr-3 text-purple-600"></i> |
|
|
<span>9871029576</span> |
|
|
</p> |
|
|
<p class="flex items-center text-gray-700"> |
|
|
<i class="fas fa-map-marker-alt mr-3 text-purple-600"></i> |
|
|
<span>New Delhi, India</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Connect With Me</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="https://linkedin.com/in/shivam-jha-3515a713a" target="_blank" class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 transition"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="https://github.com/kumar045" target="_blank" class="w-10 h-10 rounded-full bg-gray-800 text-white flex items-center justify-center hover:bg-gray-900 transition"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="https://twitter.com/@dk238347" target="_blank" class="w-10 h-10 rounded-full bg-blue-400 text-white flex items-center justify-center hover:bg-blue-500 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="experience" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Work Experience</h2> |
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<div class="space-y-8"> |
|
|
|
|
|
<div class="relative pl-8 timeline-item"> |
|
|
<div class="absolute left-0 w-4 h-4 rounded-full bg-purple-600 border-4 border-purple-200"></div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Senior AI Software Developer</h3> |
|
|
<span class="text-purple-600 font-semibold">July 2023 - Present</span> |
|
|
</div> |
|
|
<h4 class="text-lg font-semibold text-gray-700 mb-2">Sveltetech, Gurgaon, Haryana</h4> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Contributing to Big Data Project, a Big Data and Generative AI project focused on processing, unstructured data analysis, generation, and RAG.</li> |
|
|
<li>Fine-tuning Large Language Models with Multimodal Data (Text, Audio, Image Text) to transform unstructured data into structured formats.</li> |
|
|
<li>Working with NLP, Django, PySpark, Apache Flink, Apache Kafka, Docker, LLM, Generative AI, Hugging Face Transformers, Elastic Search, Neo4j, and Langchain.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative pl-8 timeline-item"> |
|
|
<div class="absolute left-0 w-4 h-4 rounded-full bg-purple-600 border-4 border-purple-200"></div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Senior Artificial Intelligence Technical Specialist</h3> |
|
|
<span class="text-purple-600 font-semibold">Jan 2022 - July 2023</span> |
|
|
</div> |
|
|
<h4 class="text-lg font-semibold text-gray-700 mb-2">Skill-Up Technologies, Noida, UP</h4> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Developed content, labs, and assessments related to AI and Cloud technologies for IBM learning programs on Coursera, edX, and IBM's in-house learning platforms.</li> |
|
|
<li>Worked with Computer Vision, Natural Language Processing, Machine Learning, Deep Learning, Django, MERN, Docker, LLM, Diffusion, Hugging Face Transformers, Terraform, Kubernetes and Langchain.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative pl-8 timeline-item"> |
|
|
<div class="absolute left-0 w-4 h-4 rounded-full bg-purple-600 border-4 border-purple-200"></div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Artificial Intelligence Technical Specialist</h3> |
|
|
<span class="text-purple-600 font-semibold">Jun 2021 - Jan 2022</span> |
|
|
</div> |
|
|
<h4 class="text-lg font-semibold text-gray-700 mb-2">Skill-Up Technologies, Noida, UP</h4> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Worked as an AI and Cloud Subject Matter Expert for IBM learning programs on Coursera, edX, and IBM's in-house learning platforms.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative pl-8"> |
|
|
<div class="absolute left-0 w-4 h-4 rounded-full bg-purple-600 border-4 border-purple-200"></div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Artificial Intelligence Engineer</h3> |
|
|
<span class="text-purple-600 font-semibold">Nov 2020 - Jun 2021</span> |
|
|
</div> |
|
|
<h4 class="text-lg font-semibold text-gray-700 mb-2">Pink Tech Design, Gurgaon, Haryana</h4> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Worked with Computer Vision and used GDAL and Rasterio libraries to create satellite tif images suitable for deep learning models.</li> |
|
|
<li>Developed Computer Vision models using CNN, YOLOV5, UNET, Mask R-CNN, GAN, Autoencoder and NLP models using RNN LSTM, Transformer.</li> |
|
|
<li>Developed API's of trained models using Django Rest Framework, integrated with React and Node applications, and deployed on the cloud.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Featured Projects</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-lg"> |
|
|
<div class="h-48 bg-purple-100 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-6xl text-purple-600"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Advanced Virtual Assistant Platform</h3> |
|
|
<p class="text-gray-600 mb-4">AI-based real-time virtual assistant with subscription payment integration and faster responses than typical mobile ChatGPT versions.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="skill-badge bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">LLM</span> |
|
|
<span class="skill-badge bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">LangChain</span> |
|
|
<span class="skill-badge bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Hugging Face</span> |
|
|
</div> |
|
|
<a href="#" class="text-purple-600 font-semibold hover:text-purple-800 transition">View Details →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-lg"> |
|
|
<div class="h-48 bg-blue-100 flex items-center justify-center"> |
|
|
<i class="fas fa-headset text-6xl text-blue-600"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Real-Time Communication Analysis Tool</h3> |
|
|
<p class="text-gray-600 mb-4">Real-time call analysis tool using MediaStream Recording API, WebSocket, Whisper OpenAI STT, and Pyannote for speaker diarization.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="skill-badge bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">WebSocket</span> |
|
|
<span class="skill-badge bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">OpenAI STT</span> |
|
|
<span class="skill-badge bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Pyannote</span> |
|
|
</div> |
|
|
<a href="#" class="text-blue-600 font-semibold hover:text-blue-800 transition">View Details →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-lg"> |
|
|
<div class="h-48 bg-green-100 flex items-center justify-center"> |
|
|
<i class="fas fa-traffic-light text-6xl text-green-600"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Smart City Traffic Flow Optimization</h3> |
|
|
<p class="text-gray-600 mb-4">System analyzing real-time video feeds from urban traffic cameras using object detection and time series analysis to optimize traffic light schedules.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="skill-badge bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">YOLOv5</span> |
|
|
<span class="skill-badge bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">OpenCV</span> |
|
|
<span class="skill-badge bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">LSTM</span> |
|
|
</div> |
|
|
<a href="#" class="text-green-600 font-semibold hover:text-green-800 transition">View Details →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-lg"> |
|
|
<div class="h-48 bg-orange-100 flex items-center justify-center"> |
|
|
<i class="fas fa-shopping-cart text-6xl text-orange-600"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">AI-Powered E-commerce Recommendation Engine</h3> |
|
|
<p class="text-gray-600 mb-4">Personalized product recommendation system using collaborative and content-based filtering with real-time suggestions and A/B testing.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="skill-badge bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm">PySpark</span> |
|
|
<span class="skill-badge bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm">MERN Stack</span> |
|
|
<span class="skill-badge bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm">NLP</span> |
|
|
</div> |
|
|
<a href="#" class="text-orange-600 font-semibold hover:text-orange-800 transition">View Details →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-lg"> |
|
|
<div class="h-48 bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-file-invoice-dollar text-6xl text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Automated Financial Document Analysis</h3> |
|
|
<p class="text-gray-600 mb-4">Automated summarization and analysis tool for financial reports using NLP, NER, and Hugging Face Transformers with Streamlit interface.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="skill-badge bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Hugging Face</span> |
|
|
<span class="skill-badge bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">NER</span> |
|
|
<span class="skill-badge bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Streamlit</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 font-semibold hover:text-indigo-800 transition">View Details →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Technical Skills</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-code text-2xl text-purple-600 mr-3"></i> |
|
|
<h3 class="text-xl font-bold text-gray-800">Programming Languages</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-badge bg-purple-100 text-purple-800 px-3 py-2 rounded-full text-sm">Python</span> |
|
|
<span class="skill-badge bg-purple-100 text-purple-800 px-3 py-2 rounded-full text-sm">JavaScript</span> |
|
|
<span class="skill-badge bg-purple-100 text-purple-800 px-3 py-2 rounded-full text-sm">SQL</span> |
|
|
<span class="skill-badge bg-purple-100 text-purple-800 px-3 py-2 rounded-full text-sm">HTML/CSS</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-brain text-2xl text-blue-600 mr-3"></i> |
|
|
<h3 class="text-xl font-bold text-gray-800">AI/ML Technologies</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-badge bg-blue-100 text-blue-800 px-3 py-2 rounded-full text-sm">Machine Learning</span> |
|
|
<span class="skill-badge bg-blue-100 text-blue-800 px-3 py-2 rounded-full text-sm">Deep Learning</span> |
|
|
<span class="skill-badge bg-blue-100 text-blue-800 px-3 py-2 rounded-full text-sm">LLM</span> |
|
|
<span class="skill-badge bg-blue-100 text-blue-800 px-3 py-2 rounded-full text-sm">Computer Vision</span> |
|
|
<span class="skill-badge bg-blue-100 text-blue-800 px-3 py-2 rounded-full text-sm">NLP</span> |
|
|
<span class="skill-badge bg-blue-100 text-blue-800 px-3 py-2 rounded-full text-sm">Time Series</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-layer-group text-2xl text-green-600 mr-3"></i> |
|
|
<h3 class="text-xl font-bold text-gray-800">Frameworks & Libraries</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-badge bg-green-100 text-green-800 px-3 py-2 rounded-full text-sm">Django</span> |
|
|
<span class="skill-badge bg-green-100 text-green-800 px-3 py-2 rounded-full text-sm">FastAPI</span> |
|
|
<span class="skill-badge bg-green-100 text-green-800 px-3 py-2 rounded-full text-sm">React</span> |
|
|
<span class="skill-badge bg-green-100 text-green-800 px-3 py-2 rounded-full text-sm">Node.js</span> |
|
|
<span class="skill-badge bg-green-100 text-green-800 px-3 py-2 rounded-full text-sm">TensorFlow</span> |
|
|
<span class="skill-badge bg-green-100 text-green-800 px-3 py-2 rounded-full text-sm">PyTorch</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-robot text-2xl text-orange-600 mr-3"></i> |
|
|
<h3 class="text-xl font-bold text-gray-800">AI Tools & Platforms</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-badge bg-orange-100 text-orange-800 px-3 py-2 rounded-full text-sm">Hugging Face</span> |
|
|
<span class="skill-badge bg-orange-100 text-orange-800 px-3 py-2 rounded-full text-sm">LangChain</span> |
|
|
<span class="skill-badge bg-orange-100 text-orange-800 px-3 py-2 rounded-full text-sm">Diffusion</span> |
|
|
<span class="skill-badge bg-orange-100 text-orange-800 px-3 py-2 rounded-full text-sm">Scikit-Learn</span> |
|
|
<span class="skill-badge bg-orange-100 text-orange-800 px-3 py-2 rounded-full text-sm">Streamlit</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-cloud text-2xl text-indigo-600 mr-3"></i> |
|
|
<h3 class="text-xl font-bold text-gray-800">Cloud & DevOps</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-badge bg-indigo-100 text-indigo-800 px-3 py-2 rounded-full text-sm">Docker</span> |
|
|
<span class="skill-badge bg-indigo-100 text-indigo-800 px-3 py-2 rounded-full text-sm">Kubernetes</span> |
|
|
<span class="skill-badge bg-indigo-100 text-indigo-800 px-3 py-2 rounded-full text-sm">GCP</span> |
|
|
<span class="skill-badge bg-indigo-100 text-indigo-800 px-3 py-2 rounded-full text-sm">IBM Cloud</span> |
|
|
<span class="skill-badge bg-indigo-100 text-indigo-800 px-3 py-2 rounded-full text-sm">Terraform</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-database text-2xl text-red-600 mr-3"></i> |
|
|
<h3 class="text-xl font-bold text-gray-800">Big Data & Databases</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-badge bg-red-100 text-red-800 px-3 py-2 rounded-full text-sm">PySpark</span> |
|
|
<span class="skill-badge bg-red-100 text-red-800 px-3 py-2 rounded-full text-sm">Apache Kafka</span> |
|
|
<span class="skill-badge bg-red-100 text-red-800 px-3 py-2 rounded-full text-sm">Apache Flink</span> |
|
|
<span class="skill-badge bg-red-100 text-red-800 px-3 py-2 rounded-full text-sm">Elastic Search</span> |
|
|
<span class="skill-badge bg-red-100 text-red-800 px-3 py-2 rounded-full text-sm">Neo4j</span> |
|
|
<span class="skill-badge bg-red-100 text-red-800 px-3 py-2 rounded-full text-sm">MySQL</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Education & Certifications</h2> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<i class="fas fa-graduation-cap text-3xl text-purple-600 mr-4"></i> |
|
|
<h3 class="text-2xl font-bold text-gray-800">Education</h3> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="border-l-4 border-purple-600 pl-4"> |
|
|
<h4 class="text-xl font-semibold text-gray-800">Bachelor of Technology (IT)</h4> |
|
|
<p class="text-purple-600 font-medium">Panipat Institute of Engineering and Technology</p> |
|
|
<p class="text-gray-600">August 2016 - May 2020</p> |
|
|
</div> |
|
|
<div class="border-l-4 border-blue-600 pl-4"> |
|
|
<h4 class="text-xl font-semibold text-gray-800">Machine Learning Training</h4> |
|
|
<p class="text-blue-600 font-medium">Aptron Solution Private Limited, Noida</p> |
|
|
<p class="text-gray-600">May 2019 - August 2019</p> |
|
|
<p class="text-sm text-gray-600 mt-1">Comprehensive training in exploratory data analysis, feature engineering, and machine learning model development</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<i class="fas fa-certificate text-3xl text-green-600 mr-4"></i> |
|
|
<h3 class="text-2xl font-bold text-gray-800">Professional Certifications</h3> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<i class="fas fa-check-circle text-green-600 mt-1"></i> |
|
|
<div> |
|
|
<p class="font-semibold text-gray-800">IBM Applied AI Professional Course</p> |
|
|
<p class="text-sm text-gray-600">Certified by EDX</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<i class="fas fa-check-circle text-green-600 mt-1"></i> |
|
|
<div> |
|
|
<p class="font-semibold text-gray-800">IBM AI Engineering Professional Course</p> |
|
|
<p class="text-sm text-gray-600">Certified by Coursera</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<i class="fas fa-check-circle text-green-600 mt-1"></i> |
|
|
<div> |
|
|
<p class="font-semibold text-gray-800">IBM DevOps and Software Engineering</p> |
|
|
<p class="text-sm text-gray-600">Certified by Coursera</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<i class="fas fa-check-circle text-green-600 mt-1"></i> |
|
|
<div> |
|
|
<p class="font-semibold text-gray-800">IBM Full Stack Cloud Developer</p> |
|
|
<p class="text-sm text-gray-600">Certified by EDX</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<i class="fas fa-check-circle text-green-600 mt-1"></i> |
|
|
<div> |
|
|
<p class="font-semibold text-gray-800">Google Cloud Platform Professional</p> |
|
|
<p class="text-sm text-gray-600">Certified by Coursera</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 gradient-bg text-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Get In Touch</h2> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold mb-6">Let's Connect</h3> |
|
|
<p class="text-lg mb-8 text-purple-100"> |
|
|
I'm always interested in discussing new opportunities, innovative AI projects, and potential collaborations. |
|
|
Whether you're looking for an AI expert or want to explore cutting-edge solutions, let's talk! |
|
|
</p> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
|
|
<i class="fas fa-envelope text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-semibold">Email</p> |
|
|
<a href="mailto:kumarshivam066@gmail.com" class="text-purple-200 hover:text-white transition">kumarshivam066@gmail.com</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
|
|
<i class="fas fa-phone text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-semibold">Phone</p> |
|
|
<a href="tel:+919871029576" class="text-purple-200 hover:text-white transition">+91 9871029576</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
|
|
<i class="fas fa-map-marker-alt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-semibold">Location</p> |
|
|
<p class="text-purple-200">New Delhi, India</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8"> |
|
|
<h4 class="text-lg font-semibold mb-4">Follow Me</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="https://linkedin.com/in/shivam-jha-3515a713a" target="_blank" class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-white hover:text-purple-800 transition"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="https://github.com/kumar045" target="_blank" class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-white hover:text-purple-800 transition"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="https://twitter.com/@dk238347" target="_blank" class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-white hover:text-purple-800 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm"> |
|
|
<h3 class="text-2xl font-semibold mb-6">Send Message</h3> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium mb-2">Your Name</label> |
|
|
<input type="text" id="name" name="name" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white placeholder-purple-200 focus:outline-none focus:ring-2 focus:ring-white focus:bg-opacity-30 transition" placeholder="Enter your name"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium mb-2">Your Email</label> |
|
|
<input type="email" id="email" name="email" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white placeholder-purple-200 focus:outline-none focus:ring-2 focus:ring-white focus:bg-opacity-30 transition" placeholder="Enter your email"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="subject" class="block text-sm font-medium mb-2">Subject</label> |
|
|
<input type="text" id="subject" name="subject" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white placeholder-purple-200 focus:outline-none focus:ring-2 focus:ring-white focus:bg-opacity-30 transition" placeholder="Message subject"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium mb-2">Message</label> |
|
|
<textarea id="message" name="message" rows="5" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white placeholder-purple-200 focus:outline-none focus:ring-2 focus:ring-white focus:bg-opacity-30 transition resize-none" placeholder="Write your message here..."></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-white text-purple-800 px-6 py-3 rounded-lg font-semibold hover:bg-purple-100 transition transform hover:scale-105"> |
|
|
<i class="fas fa-paper-plane mr-2"></i>Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white 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 class="text-gray-400">© 2025 Shivam Kumar. All rights reserved.</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#about" class="text-gray-400 hover:text-white transition">About</a> |
|
|
<a href="#experience" class="text-gray-400 hover:text-white transition">Experience</a> |
|
|
<a href="#projects" class="text-gray-400 hover:text-white transition">Projects</a> |
|
|
<a href="#skills" class="text-gray-400 hover:text-white transition">Skills</a> |
|
|
<a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 pt-6 border-t border-gray-800 text-center"> |
|
|
<p class="text-gray-400">Designed and developed with ❤️ using modern web technologies</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<script> |
|
|
document.getElementById('menu-toggle').addEventListener('click', function() { |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
}); |
|
|
} |
|
|
|
|
|
document.getElementById('mobile-menu').classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('Thank you for your message! I\'ll get back to you soon.'); |
|
|
this.reset(); |
|
|
}); |
|
|
</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=Shivam098/my-resume" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
