ukpro
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ujjwal Kumar - Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #111827;
color: #d1d5db;
}
.glass-effect {
background: rgba(31, 41, 55, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.skill-card, .achievement-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill-card:hover, .achievement-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
}
.project-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 0 25px rgba(59, 130, 246, 0.3);
}
.fade-in-section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Typing animation styles */
.typing-cursor {
display: inline-block;
width: 2px;
height: 1.5rem; /* Match text size */
background-color: #60a5fa; /* A light blue color */
animation: blink 0.7s infinite;
margin-left: 4px;
vertical-align: middle;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
</style>
</head>
<body class="antialiased">
<!-- Header -->
<header class="glass-effect sticky top-0 z-50">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="#" class="text-2xl font-bold text-white">Ujjwal Kumar</a>
<div class="hidden md:flex space-x-6 items-center">
<a href="#about" class="text-gray-300 hover:text-blue-400 transition duration-300">About</a>
<a href="#skills" class="text-gray-300 hover:text-blue-400 transition duration-300">Skills</a>
<a href="#projects" class="text-gray-300 hover:text-blue-400 transition duration-300">Projects</a>
<a href="#achievements" class="text-gray-300 hover:text-blue-400 transition duration-300">Achievements</a>
<a href="#experience" class="text-gray-300 hover:text-blue-400 transition duration-300">Experience</a>
<a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">Contact</a>
</div>
<button id="mobile-menu-button" class="md:hidden text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</nav>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden">
<a href="#about" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700">About</a>
<a href="#skills" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700">Skills</a>
<a href="#projects" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700">Projects</a>
<a href="#achievements" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700">Achievements</a>
<a href="#experience" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700">Experience</a>
<a href="#contact" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700">Contact</a>
</div>
</header>
<main class="container mx-auto px-6 py-12">
<!-- Hero Section -->
<section id="about" class="min-h-screen flex items-center fade-in-section">
<div class="grid md:grid-cols-2 gap-12 items-center w-full">
<div class="text-center md:text-left">
<h1 class="text-4xl md:text-6xl font-bold text-white leading-tight mb-4">
Hi, I'm Ujjwal Kumar
</h1>
<p class="text-xl md:text-2xl text-blue-400 mb-8 h-8">
<span id="typing-text"></span><span class="typing-cursor"></span>
</p>
<p class="max-w-3xl mx-auto md:mx-0 text-lg text-gray-400 mb-8">
A motivated computer science student with a strong foundation in web development, Java, Python, databases, and ML. Eager to build innovative platforms, enhance user experiences, and develop solutions that foster collaboration and connectivity.
</p>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://www.linkedin.com/in/ujjwal-kumar-309074247/" target="_blank" class="text-gray-400 hover:text-white transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
<a href="https://github.com/ujjwalkr7449" target="_blank" class="text-gray-400 hover:text-white transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
</a>
</div>
</div>
<div class="flex justify-center">
<!-- Replace the src with the URL to your own image -->
<img src="https://placehold.co/400x400/1f2937/d1d5db?text=Your\nPhoto" alt="Ujjwal Kumar" class="w-64 h-64 md:w-80 md:h-80 rounded-full object-cover border-4 border-blue-500 shadow-lg">
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-20 fade-in-section">
<h2 class="text-3xl font-bold text-center text-white mb-12">My Expertise</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
<div class="skill-card bg-gray-800 p-6 rounded-lg text-center flex flex-col items-center justify-center">
<svg class="w-10 h-10 mb-3 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
<p class="text-lg font-semibold text-white">Python</p>
</div>
<div class="skill-card bg-gray-800 p-6 rounded-lg text-center flex flex-col items-center justify-center">
<svg class="w-10 h-10 mb-3 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M12 6a2 2 0 11-4 0 2 2 0 014 0zM12 18a2 2 0 11-4 0 2 2 0 014 0zM12 6a2 2 0 114 0 2 2 0 01-4 0zM12 18a2 2 0 114 0 2 2 0 01-4 0z"></path></svg>
<p class="text-lg font-semibold text-white">ReactJS</p>
</div>
<div class="skill-card bg-gray-800 p-6 rounded-lg text-center flex flex-col items-center justify-center">
<svg class="w-10 h-10 mb-3 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
<p class="text-lg font-semibold text-white">JavaScript</p>
</div>
<div class="skill-card bg-gray-800 p-6 rounded-lg text-center flex flex-col items-center justify-center">
<svg class="w-10 h-10 mb-3 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<p class="text-lg font-semibold text-white">Front-End Development</p>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20 fade-in-section">
<h2 class="text-3xl font-bold text-center text-white mb-12">Featured Projects</h2>
<div class="grid md:grid-cols-2 gap-12">
<!-- Project 1 -->
<div class="project-card bg-gray-800 rounded-lg overflow-hidden">
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-2">Virtual Herbal Garden</h3>
<p class="text-gray-400 mb-4">An innovative digital platform to enhance accessibility to traditional herbal gardens, offering an interactive and immersive experience.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-700 text-blue-300 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">MERN</span>
<span class="bg-gray-700 text-blue-300 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">Streamlit</span>
<span class="bg-gray-700 text-blue-300 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">Python</span>
</div>
<a href="https://aushadiveda.netlify.app/" target="_blank" class="inline-flex items-center text-blue-400 hover:text-blue-300 font-semibold">
View Project
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
</div>
</div>
<!-- Project 2 -->
<div class="project-card bg-gray-800 rounded-lg overflow-hidden">
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-2">AI-based Chatbot</h3>
<p class="text-gray-400 mb-4">An interactive chatbot that addresses common medical issues and provides general health info, powered by Google's Gemini API.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-700 text-blue-300 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">Python</span>
<span class="bg-gray-700 text-blue-300 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">Streamlit</span>
<span class="bg-gray-700 text-blue-300 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">Gemini API</span>
</div>
<a href="https://dt4l9qvuemk6nkdnqimpx5.streamlit.app/" target="_blank" class="inline-flex items-center text-blue-400 hover:text-blue-300 font-semibold">
View Project
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
</div>
</div>
</div>
</section>
<!-- Achievements Section -->
<section id="achievements" class="py-20 fade-in-section">
<h2 class="text-3xl font-bold text-center text-white mb-12">Achievements</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="achievement-card bg-gray-800 p-6 rounded-lg text-center">
<p class="text-lg font-semibold text-white">Hackerrank 3 Star Coder</p>
</div>
<div class="achievement-card bg-gray-800 p-6 rounded-lg text-center">
<p class="text-lg font-semibold text-white">90+ Questions Solved on LeetCode</p>
</div>
<div class="achievement-card bg-gray-800 p-6 rounded-lg text-center">
<p class="text-lg font-semibold text-white">Python Certification from Udemy</p>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="py-20 fade-in-section">
<h2 class="text-3xl font-bold text-center text-white mb-12">Internship Experience</h2>
<div class="max-w-3xl mx-auto">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold text-white">Software Engineer Intern</h3>
<p class="text-blue-400 font-medium">Yuga Yatra Retail (OPC) pvt. ltd.</p>
</div>
<p class="text-gray-400 text-sm">June 2025 - Present</p>
</div>
<p class="mt-4 text-gray-400">
As a software intern, I am gaining hands-on experience in a professional development environment. My key responsibilities and learnings involve Front-End Web Development, utilizing technologies like Cursor AI and Firebase, and designing with Canva.
</p>
</div>
</div>
</section>
<!-- Education Section -->
<section id="education" class="py-20 fade-in-section">
<h2 class="text-3xl font-bold text-center text-white mb-12">Education</h2>
<div class="max-w-3xl mx-auto space-y-8">
<div class="bg-gray-800 p-6 rounded-lg">
<p class="text-gray-400">2022 - 2026</p>
<h3 class="text-xl font-bold text-white">B.Tech. Computer Science & Engineering</h3>
<p class="text-blue-400">Sagar Group of Institutions - SISTec</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<p class="text-gray-400">2022</p>
<h3 class="text-xl font-bold text-white">12th CBSE</h3>
<p class="text-blue-400">Kendriya Vidyalaya Kahalgaon, Bhagalpur</p>
</div>
</div>
</section>
</main>
<!-- Contact Section / Footer -->
<footer id="contact" class="bg-gray-900 py-12">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold text-white mb-4">Get In Touch</h2>
<p class="text-gray-400 max-w-xl mx-auto mb-8">
I'm currently seeking opportunities to apply my technical expertise and problem-solving skills in impactful projects. Feel free to reach out!
</p>
<a href="mailto:ujjwalkr7449@gmail.com" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 text-lg">
ujjwalkr7449@gmail.com
</a>
<div class="flex justify-center space-x-6 mt-8">
<a href="https://www.linkedin.com/in/ujjwal-kumar-309074247/" target="_blank" class="text-gray-400 hover:text-white transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
<a href="https://github.com/ujjwalkr7449" target="_blank" class="text-gray-400 hover:text-white transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
</a>
</div>
<p class="text-gray-500 mt-8 text-sm">© 2025 Ujjwal Kumar. All rights reserved.</p>
</div>
</footer>
<!-- Scroll to top button -->
<button id="to-top-button" title="Go To Top"
class="hidden fixed z-50 bottom-10 right-10 p-4 border-0 w-14 h-14 rounded-full shadow-md bg-blue-600 hover:bg-blue-700 text-white text-lg font-semibold transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path d="M12 4l8 8h-6v8h-4v-8H4l8-8z" />
</svg>
</button>
<script>
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Scroll to top button
const toTopButton = document.getElementById('to-top-button');
window.onscroll = function () {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
toTopButton.classList.remove("hidden");
} else {
toTopButton.classList.add("hidden");
}
};
toTopButton.addEventListener("click", function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Fade-in sections on scroll
const sections = document.querySelectorAll('.fade-in-section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
}
});
}, {
threshold: 0.1
});
sections.forEach(section => {
observer.observe(section);
});
// Typing animation script
const typingTextElement = document.getElementById('typing-text');
const textsToType = ["Computer Science Student", "Web Developer", "Problem Solver"];
let textIndex = 0;
let charIndex = 0;
let isDeleting = false;
function type() {
const currentText = textsToType[textIndex];
if (isDeleting) {
// Deleting
charIndex--;
typingTextElement.textContent = currentText.substring(0, charIndex);
if (charIndex === 0) {
isDeleting = false;
textIndex = (textIndex + 1) % textsToType.length;
setTimeout(type, 500); // Pause before typing next text
} else {
setTimeout(type, 50); // Deleting speed
}
} else {
// Typing
charIndex++;
typingTextElement.textContent = currentText.substring(0, charIndex);
if (charIndex === currentText.length) {
isDeleting = true;
setTimeout(type, 1500); // Pause after typing
} else {
setTimeout(type, 100); // Typing speed
}
}
}
// Start the animation when the window loads
window.onload = function() {
setTimeout(type, 500);
};
</script>
</body>
</html>
Comments
Post a Comment