Hugging Face's logo

Spaces:
hitty28
/
portfolio
Running

App Files Community
2
portfolio / index.html
hitty28's picture
hitty28
Add 2 files
b44c6c5 verified
raw
history blame contribute delete
58 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAI ROHITH VULAPU | Data Science Engineer</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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.net.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root {
--primary: #3b82f6;
--secondary: #10b981;
--dark: #1e293b;
--light: #f8fafc;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f1f5f9;
color: var(--dark);
overflow-x: hidden;
transition: background-color 0.3s, color 0.3s;
}
.dark {
background-color: #0f172a;
color: #f8fafc;
}
.dark .card {
background-color: #1e293b;
color: #f8fafc;
}
.dark .bg-white {
background-color: #1e293b !important;
color: #f8fafc;
}
.dark .bg-slate-50 {
background-color: #0f172a !important;
}
.dark .text-slate-600, .dark .text-slate-700 {
color: #e2e8f0 !important;
}
.dark .bg-gradient-to-br {
background-image: linear-gradient(to bottom right, #1e293b, #1e293b) !important;
}
.dark .border-slate-300 {
border-color: #334155 !important;
}
.dark .shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12) !important;
}
.gradient-text {
background: linear-gradient(90deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card {
transition: all 0.3s ease;
transform: translateY(0);
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.timeline-item::before {
content: '';
position: absolute;
left: -40px;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--primary);
border: 4px solid white;
}
.dark .timeline-item::before {
border-color: #1e293b;
}
.timeline::before {
content: '';
position: absolute;
left: 30px;
top: 0;
height: 100%;
width: 2px;
background: #e2e8f0;
}
.dark .timeline::before {
background: #334155;
}
.skill-bar {
height: 8px;
border-radius: 4px;
background: #e2e8f0;
overflow: hidden;
}
.dark .skill-bar {
background: #334155;
}
.skill-progress {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--secondary));
transition: width 1s ease-in-out;
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.glow {
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}
.typewriter {
overflow: hidden;
border-right: 3px solid var(--primary);
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: var(--primary) }
}
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hover-underline-animation {
display: inline-block;
position: relative;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background: linear-gradient(90deg, var(--primary), var(--secondary));
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Dark mode toggle */
.toggle-checkbox:checked {
right: 0;
background-color: #10b981;
}
.toggle-checkbox:checked + .toggle-label {
background-color: #1e293b;
}
/* 3D Character Container */
.character-container {
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
}
@media (max-width: 768px) {
.character-container {
width: 250px;
height: 250px;
}
}
/* Floating animations */
@keyframes float1 {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
@keyframes float2 {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.float-animation1 {
animation: float1 4s ease-in-out infinite;
}
.float-animation2 {
animation: float2 5s ease-in-out infinite;
}
/* Cursor interaction styles */
.character-hover-effect {
transition: transform 0.3s ease;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.hero-content {
flex-direction: column;
text-align: center;
}
.hero-buttons {
justify-content: center;
}
#about .grid-cols-3 {
grid-template-columns: 1fr;
}
.timeline::before {
left: 20px;
}
.timeline-item::before {
left: -30px;
}
}
@media (max-width: 768px) {
.project-grid {
grid-template-columns: 1fr;
}
.skill-grid {
grid-template-columns: 1fr;
}
.contact-box {
flex-direction: column;
}
.contact-info {
width: 100%;
}
.contact-form {
width: 100%;
}
.footer-content {
flex-direction: column;
text-align: center;
}
.footer-social {
justify-content: center;
margin-top: 1rem;
}
}
/* No select for particles */
.particles, .particles * {
user-select: none;
-webkit-user-select: none;
}
/* Preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0f172a;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease;
}
.preloader-content {
text-align: center;
}
.spinner {
width: 70px;
height: 70px;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #3b82f6;
animation: spin 1s ease-in-out infinite;
margin: 0 auto 1rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body class="min-h-screen">
<!-- Preloader -->
<div class="preloader" id="preloader">
<div class="preloader-content">
<div class="spinner"></div>
<div class="text-white text-xl font-medium">Loading Portfolio...</div>
</div>
</div>
<!-- Interactive Background -->
<div id="vanta-background" class="fixed inset-0 -z-10 overflow-hidden"></div>
<!-- Floating Particles -->
<div class="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
<div class="particles">
<!-- These will be added via JS -->
</div>
</div>
<!-- Header/Navbar -->
<header class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md shadow-sm z-50 dark:bg-slate-900/80">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<a href="#" class="text-2xl font-bold gradient-text hover-underline-animation">SAI ROHITH VULAPU</a>
<nav class="hidden md:flex space-x-8 items-center">
<a href="#about" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">About</a>
<a href="#experience" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Experience</a>
<a href="#projects" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Projects</a>
<a href="#skills" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Skills</a>
<a href="#contact" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Contact</a>
<!-- Dark mode toggle -->
<div class="relative inline-block w-12 h-6 mx-2 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
<label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>
<label for="toggle" class="text-gray-600 dark:text-gray-300 ml-1">
<i class="fas fa-moon dark:hidden"></i>
<i class="fas fa-sun hidden dark:inline"></i>
</label>
</nav>
<button class="md:hidden text-slate-700 dark:text-slate-300" id="mobile-menu-button">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</header>
<!-- Mobile menu -->
<div id="mobile-menu" class="fixed inset-0 z-40 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm hidden flex-col items-center justify-center space-y-6">
<button id="close-menu" class="absolute top-4 right-4 text-3xl text-slate-700 dark:text-slate-300">
<i class="fas fa-times"></i>
</button>
<a href="#about" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">About</a>
<a href="#experience" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Experience</a>
<a href="#projects" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Projects</a>
<a href="#skills" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Skills</a>
<a href="#contact" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Contact</a>
<div class="flex items-center mt-6">
<div class="relative inline-block w-12 h-6 mx-2 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" id="toggle-mobile" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
<label for="toggle-mobile" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>
<label for="toggle-mobile" class="text-gray-600 dark:text-gray-300 ml-1">
<i class="fas fa-moon dark:hidden"></i>
<i class="fas fa-sun hidden dark:inline"></i>
</label>
</div>
</div>
<!-- Hero Section -->
<section class="min-h-screen flex items-center pt-20">
<div class="container mx-auto px-6 py-20">
<div class="flex flex-col md:flex-row items-center hero-content">
<div class="md:w-1/2 mb-10 md:mb-0 fade-in">
<h1 class="text-4xl md:text-6xl font-bold mb-6 dark:text-white">
<span class="gradient-text">Innovative</span> Data Science Engineer
</h1>
<p class="text-xl text-slate-600 mb-8 typewriter dark:text-slate-300">
Specializing in AI product development and machine learning.
</p>
<div class="flex space-x-4 hero-buttons">
<a href="#contact" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-emerald-500 text-white rounded-full font-medium hover:shadow-lg transition-all transform hover:scale-105">
Contact Me
</a>
<a href="#projects" class="px-6 py-3 border border-blue-500 text-blue-500 rounded-full font-medium hover:bg-blue-50 transition-all transform hover:scale-105 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-slate-800">
View Projects
</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center fade-in delay-1">
<div class="character-container" id="character-container">
<!-- 3D Model will be rendered here -->
<canvas id="character-canvas"></canvas>
<div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 bg-white px-4 py-2 rounded-full shadow-md dark:bg-slate-800">
<!-- <span class="font-bold gradient-text">SAI ROHITH VULAPU</span> -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-white dark:bg-slate-800">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Professional Summary</h2>
<div class="max-w-4xl mx-auto bg-gradient-to-r from-blue-50 to-emerald-50 rounded-2xl p-8 shadow-lg card fade-in delay-1 dark:from-blue-900/20 dark:to-emerald-900/20">
<div class="flex items-start">
<div class="mr-6 text-blue-500 text-3xl dark:text-blue-400">
<i class="fas fa-user-tie"></i>
</div>
<div>
<p class="text-lg text-slate-700 leading-relaxed dark:text-slate-300">
Innovative Data Science Engineer at APEX CURA HEALTHCARE IT, specializing in AI product development and machine learning.
Successfully built an AI-powered SaaS product, fine-tuned LLMs for medical applications, and implemented a chatbot RAG pipeline.
Proficient in Python and decision-making, driving impactful solutions in healthcare technology.
</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
<div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-2 dark:bg-slate-700">
<div class="text-blue-500 text-3xl mb-4 dark:text-blue-400">
<i class="fas fa-graduation-cap"></i>
</div>
<h3 class="text-xl font-bold mb-3 dark:text-white">Education</h3>
<ul class="space-y-3">
<li class="flex items-start">
<span class="text-emerald-500 mr-2">•</span>
<span class="dark:text-slate-300">JNTUA College of Engineering, B.Tech CSE (8.3 CGPA)</span>
</li>
<li class="flex items-start">
<span class="text-emerald-500 mr-2">•</span>
<span class="dark:text-slate-300">Narayana IIT Academy, Intermediate (9.8 CGPA)</span>
</li>
<li class="flex items-start">
<span class="text-emerald-500 mr-2">•</span>
<span class="dark:text-slate-300">Sri Chaitanya Techno School, SSC (10 CGPA)</span>
</li>
</ul>
</div>
<div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-3 dark:bg-slate-700">
<div class="text-blue-500 text-3xl mb-4 dark:text-blue-400">
<i class="fas fa-trophy"></i>
</div>
<h3 class="text-xl font-bold mb-3 dark:text-white">Achievements</h3>
<ul class="space-y-3">
<li class="flex items-start">
<span class="text-emerald-500 mr-2">•</span>
<span class="dark:text-slate-300">Built AI-powered SaaS product for hospitals</span>
</li>
<li class="flex items-start">
<span class="text-emerald-500 mr-2">•</span>
<span class="dark:text-slate-300">Fine-tuned LLMs for medical applications</span>
</li>
<li class="flex items-start">
<span class="text-emerald-500 mr-2">•</span>
<span class="dark:text-slate-300">Implemented RAG pipeline for hospital chatbot</span>
</li>
</ul>
</div>
<div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-4 dark:bg-slate-700">
<div class="text-blue-500 text-3xl mb-4 dark:text-blue-400">
<i class="fas fa-heartbeat"></i>
</div>
<h3 class="text-xl font-bold mb-3 dark:text-white">Passion</h3>
<p class="text-slate-600 dark:text-slate-300">
Creating AI solutions that transform healthcare, making it more accessible and efficient through cutting-edge technology.
</p>
<div class="mt-4">
<span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full mr-2 mb-2 dark:bg-blue-900/30 dark:text-blue-300">#AI</span>
<span class="inline-block bg-emerald-100 text-emerald-800 text-sm px-3 py-1 rounded-full mr-2 mb-2 dark:bg-emerald-900/30 dark:text-emerald-300">#Healthcare</span>
<span class="inline-block bg-purple-100 text-purple-800 text-sm px-3 py-1 rounded-full mr-2 mb-2 dark:bg-purple-900/30 dark:text-purple-300">#Innovation</span>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="py-20 bg-slate-50 dark:bg-slate-900">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Professional Experience</h2>
<div class="max-w-4xl mx-auto relative pl-16 timeline">
<!-- APEX CURA -->
<div class="mb-12 relative timeline-item fade-in delay-1">
<div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold dark:text-white">Apex Cura Helathcare It</h3>
<span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">April 2024 - Present</span>
</div>
<ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-300">
<li>Building a AI powered SaaS product for hospitals</li>
<li>Fine-tuning LLM's to achieve the medical knowledge</li>
<li>Implemented a RAG pipeline for a hospital specific chatbot</li>
<li>Created a AI based Suggestion system to help doctors write the prescription effortlessly</li>
<li>Built a Copilot for our product</li>
</ul>
</div>
</div>
<!-- AURORA E-LABS -->
<div class="mb-12 relative timeline-item fade-in delay-2">
<div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold dark:text-white">A U R O R A E - L A B S</h3>
<span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">Aug 2023 - Mar 2024</span>
</div>
<ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-300">
<li>Built POC for converting natural language to SQL/Cypher query</li>
<li>Another POC includes audio transcription using LLM's</li>
</ul>
</div>
</div>
<!-- ANUBRAIN -->
<div class="mb-12 relative timeline-item fade-in delay-3">
<div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold dark:text-white">ANUBRAIN TECHNOLOGY</h3>
<span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">Mar 2023 - July 2023</span>
</div>
<p class="text-slate-600 dark:text-slate-300">
Executed numerous data science projects as a freelancer, delivering solutions tailored to client needs and requirements.
</p>
</div>
</div>
<!-- SHUNYAOS -->
<div class="relative timeline-item fade-in delay-4">
<div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold dark:text-white">S H U N Y A O S</h3>
<span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">Jan 2023 - March 2023</span>
</div>
<p class="text-slate-600 dark:text-slate-300">
Spearheaded pedestrian detection projects, undertaking data labeling tasks independently to ensure high-quality training data.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20 bg-white dark:bg-slate-800">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Featured Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 project-grid">
<!-- Brain Tumor Segmentation -->
<div class="bg-gradient-to-br from-blue-50 to-emerald-50 rounded-xl overflow-hidden shadow-lg card fade-in delay-1 dark:from-blue-900/20 dark:to-emerald-900/20">
<div class="h-48 bg-gradient-to-r from-blue-400 to-emerald-400 flex items-center justify-center">
<i class="fas fa-brain text-white text-6xl"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold dark:text-white">Brain Tumor Segmentation</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">2024</span>
</div>
<p class="text-slate-600 mb-4 dark:text-slate-300">
Developed a Brain Tumor Segmentation project utilizing UNet architecture for accurate segmentation results.
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded dark:bg-blue-900/30 dark:text-blue-300">Python</span>
<span class="text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded dark:bg-emerald-900/30 dark:text-emerald-300">TensorFlow</span>
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded dark:bg-purple-900/30 dark:text-purple-300">UNet</span>
</div>
</div>
</div>
<!-- NLP Search -->
<div class="bg-gradient-to-br from-blue-50 to-emerald-50 rounded-xl overflow-hidden shadow-lg card fade-in delay-2 dark:from-blue-900/20 dark:to-emerald-900/20">
<div class="h-48 bg-gradient-to-r from-purple-400 to-blue-400 flex items-center justify-center">
<i class="fas fa-search text-white text-6xl"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold dark:text-white">NLP Search</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">2023</span>
</div>
<p class="text-slate-600 mb-4 dark:text-slate-300">
Revolutionizing database interaction by developing intuitive solutions for crafting SQL queries using natural language.
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded dark:bg-blue-900/30 dark:text-blue-300">NLP</span>
<span class="text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded dark:bg-emerald-900/30 dark:text-emerald-300">LLMs</span>
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded dark:bg-purple-900/30 dark:text-purple-300">SQL</span>
</div>
</div>
</div>
<!-- Pedestrian Detection -->
<div class="bg-gradient-to-br from-blue-50 to-emerald-50 rounded-xl overflow-hidden shadow-lg card fade-in delay-3 dark:from-blue-900/20 dark:to-emerald-900/20">
<div class="h-48 bg-gradient-to-r from-orange-400 to-pink-400 flex items-center justify-center">
<i class="fas fa-walking text-white text-6xl"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold dark:text-white">Pedestrian Detection</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">2023</span>
</div>
<p class="text-slate-600 mb-4 dark:text-slate-300">
Implementing TensorFlow Object Detection models to accurately identify pedestrians in images or videos.
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded dark:bg-blue-900/30 dark:text-blue-300">TFOD</span>
<span class="text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded dark:bg-emerald-900/30 dark:text-emerald-300">Computer Vision</span>
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded dark:bg-purple-900/30 dark:text-purple-300">Object Detection</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-20 bg-slate-50 dark:bg-slate-900">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Technical Skills</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto skill-grid">
<div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-1 dark:bg-slate-800">
<h3 class="text-xl font-bold mb-6 text-center dark:text-white">Core Competencies</h3>
<div class="space-y-5">
<div>
<div class="flex justify-between mb-1">
<span class="font-medium dark:text-slate-300">Python</span>
<span class="text-blue-500 dark:text-blue-400">95%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="font-medium dark:text-slate-300">Machine Learning</span>
<span class="text-blue-500 dark:text-blue-400">90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="font-medium dark:text-slate-300">AI Product Development</span>
<span class="text-blue-500 dark:text-blue-400">88%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 88%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="font-medium dark:text-slate-300">Neural Networks</span>
<span class="text-blue-500 dark:text-blue-400">85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-2 dark:bg-slate-800">
<h3 class="text-xl font-bold mb-6 text-center dark:text-white">Technologies & Tools</h3>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
<i class="fab fa-python text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
<span class="dark:text-slate-300">Python</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
<i class="fas fa-brain text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
<span class="dark:text-slate-300">TensorFlow</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
<i class="fas fa-database text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
<span class="dark:text-slate-300">MySQL</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
<i class="fab fa-aws text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
<span class="dark:text-slate-300">AWS</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
<i class="fas fa-project-diagram text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
<span class="dark:text-slate-300">Cypher QL</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
<i class="fas fa-robot text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
<span class="dark:text-slate-300">LLMs</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
<i class="fas fa-eye text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
<span class="dark:text-slate-300">Computer Vision</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
<i class="fas fa-comments text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
<span class="dark:text-slate-300">NLP</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gradient-to-r from-blue-500 to-emerald-500 text-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 fade-in">Get In Touch</h2>
<div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden card fade-in delay-1 contact-box">
<div class="md:flex">
<div class="md:w-1/2 bg-gradient-to-br from-blue-400 to-emerald-400 p-10 flex flex-col justify-center contact-info">
<h3 class="text-2xl font-bold mb-6">Contact Information</h3>
<div class="space-y-4">
<div class="flex items-start">
<i class="fas fa-envelope mt-1 mr-4"></i>
<div>
<h4 class="font-medium">Email</h4>
<p class="text-blue-100">vulapusairohith28@gmail.com</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-phone-alt mt=1 mr-4"></i>
<div>
<h4 class="font-medium">Phone</h4>
<p class="text-blue-100">+91 6302052294</p>
</div>
</div>
<div class="flex items-start">
<i class="fab fa-github mt-1 mr-4"></i>
<div>
<h4 class="font-medium">GitHub</h4>
<p class="text-blue-100">github.com/yourusername</p>
</div>
</div>
<div class="flex items-start">
<i class="fab fa-linkedin-in mt-1 mr-4"></i>
<div>
<h4 class="font-medium">LinkedIn</h4>
<p class="text-blue-100">linkedin.com/in/yourprofile</p>
</div>
</div>
</div>
<div class="mt-8 flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
<i class="fab fa-github"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
<div class="md:w-1/2 p-10 contact-form">
<h3 class="text-2xl font-bold mb-6 text-slate-800 dark:text-slate-200">Send Me a Message</h3>
<form class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-slate-600 mb-1 dark:text-slate-300">Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white">
</div>
<div>
<label for="email" class="block text-sm font-medium text-slate-600 mb-1 dark:text-slate-300">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white">
</div>
<div>
<label for="message" class="block text-sm font-medium text-slate-600 mb-1 dark:text-slate-300">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"></textarea>
</div>
<button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-emerald-500 text-white py-3 rounded-lg font-medium hover:shadow-lg transition-all transform hover:scale-105">
Send Message
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center footer-content">
<div class="mb-6 md:mb-0">
<a href="#" class="text-2xl font-bold gradient-text">SAI ROHITH VULAPU</a>
<p class="mt-2 text-slate-400">Innovative Data Science Engineer</p>
</div>
<div class="flex space-x-6 footer-social">
<a href="#" class="text-slate-400 hover:text-white transition">
<i class="fab fa-github text-xl"></i>
</a>
<a href="#" class="text-slate-400 hover:text-white transition">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
<a href="#" class="text-slate-400 hover:text-white transition">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-slate-400 hover:text-white transition">
<i class="fab fa-instagram text-xl"></i>
</a>
</div>
</div>
<div class="border-t border-slate-800 mt-8 pt-8 text-center text-slate-400">
<p>&copy; 2024 Sai Rohith Vulapu. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Floating AI Elements -->
<div class="fixed top-20 right-20 z-0 opacity-30 float-animation1">
<div class="w-20 h-20 bg-blue-400 rounded-full blur-xl dark:bg-blue-800/30"></div>
</div>
<div class="fixed bottom-32 left-40 z-0 opacity-30 float-animation2">
<div class="w-24 h-24 bg-emerald-400 rounded-full blur-xl dark:bg-emerald-800/30"></div>
</div>
<div class="fixed top-1/3 left-1/4 z-0 opacity-20 float-animation1">
<div class="w-32 h-32 bg-purple-400 rounded-full blur-xl dark:bg-purple-800/30"></div>
</div>
<script>
// Preloader
window.addEventListener('load', function() {
setTimeout(function() {
const preloader = document.getElementById('preloader');
preloader.style.opacity = '0';
setTimeout(() => preloader.style.display = 'none', 500);
}, 1000);
});
// Interactive Background
VANTA.NET({
el: "#vanta-background",
color: 0x3b82f6,
backgroundColor: 0xf1f5f9,
points: 10,
maxDistance: 22,
spacing: 16,
showDots: false
});
// Dark mode toggle functionality
const toggle = document.getElementById('toggle');
const toggleMobile = document.getElementById('toggle-mobile');
const body = document.body;
// Check for saved user preference, if any
if (localStorage.getItem('dark-mode') === 'enabled') {
body.classList.add('dark');
toggle.checked = true;
if (toggleMobile) toggleMobile.checked = true;
// Change Vanta.js background for dark mode
VANTA.NET({
el: "#vanta-background",
color: 0x3b82f6,
backgroundColor: 0x0f172a,
points: 10,
maxDistance: 22,
spacing: 16,
showDots: false
});
}
// Desktop toggle
toggle.addEventListener('change', function() {
if (this.checked) {
body.classList.add('dark');
localStorage.setItem('dark-mode', 'enabled');
if (toggleMobile) toggleMobile.checked = true;
// Change Vanta.js background for dark mode
VANTA.NET({
el: "#vanta-background",
color: 0x3b82f6,
backgroundColor: 0x0f172a,
points: 10,
maxDistance: 22,
spacing: 16,
showDots: false
});
} else {
body.classList.remove('dark');
localStorage.setItem('dark-mode', 'disabled');
if (toggleMobile) toggleMobile.checked = false;
// Change Vanta.js background for light mode
VANTA.NET({
el: "#vanta-background",
color: 0x3b82f6,
backgroundColor: 0xf1f5f9,
points: 10,
maxDistance: 22,
spacing: 16,
showDots: false
});
}
});
// Mobile toggle
if (toggleMobile) {
toggleMobile.addEventListener('change', function() {
if (this.checked) {
body.classList.add('dark');
localStorage.setItem('dark-mode', 'enabled');
toggle.checked = true;
// Change Vanta.js background for dark mode
VANTA.NET({
el: "#vanta-background",
color: 0x3b82f6,
backgroundColor: 0x0f172a,
points: 10,
maxDistance: 22,
spacing: 16,
showDots: false
});
} else {
body.classList.remove('dark');
localStorage.setItem('dark-mode', 'disabled');
toggle.checked = false;
// Change Vanta.js background for light mode
VANTA.NET({
el: "#vanta-background",
color: 0x3b82f6,
backgroundColor: 0xf1f5f9,
points: 10,
maxDistance: 22,
spacing: 16,
showDots: false
});
}
});
}
// Mobile menu functionality
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const closeMenu = document.getElementById('close-menu');
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.remove('hidden');
mobileMenu.classList.add('flex');
});
closeMenu.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
mobileMenu.classList.remove('flex');
});
// Close menu when clicking on links
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
mobileMenu.classList.remove('flex');
});
});
// Create floating particles
document.addEventListener('DOMContentLoaded', function() {
const particlesContainer = document.querySelector('.particles');
const particleCount = window.innerWidth < 768 ? 15 : 30;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('absolute', 'rounded-full', 'bg-blue-300', 'dark:bg-blue-600/30');
// Random size
const size = Math.random() * 6 + 2;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// Random position
particle.style.left = `${Math.random() * 100}%`;
particle.style.top = `${Math.random() * 100}%`;
// Random animation
const duration = Math.random() * 20 + 10;
particle.style.animation = `float ${duration}s ease-in-out infinite`;
particle.style.animationDelay = `${Math.random() * 5}s`;
particlesContainer.appendChild(particle);
}
});
// Animate skill bars on scroll
window.addEventListener('scroll', function() {
const skillBars = document.querySelectorAll('.skill-progress');
const skillsSection = document.getElementById('skills');
const sectionPosition = skillsSection.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3;
if (sectionPosition < screenPosition) {
skillBars.forEach(bar => {
const width = bar.style.width;
bar.style.width = '0';
setTimeout(() => {
bar.style.width = width;
}, 100);
});
}
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// 3D Character Animation
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('character-container');
const canvas = document.getElementById('character-canvas');
// Create a simple 3D character (simplified for this example)
// In a real implementation, you would use a 3D model loader like GLTFLoader
// and a pre-made 3D model of a data scientist
if (canvas && typeof THREE !== 'undefined') {
// Set canvas size
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
canvas.width / canvas.height,
0.1,
1000
);
camera.position.z = 5;
// Renderer
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
alpha: true,
antialias: true
});
renderer.setClearColor(0x000000, 0);
renderer.setSize(canvas.width, canvas.height);
// Simple character geometry (could be replaced with a proper 3D model)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
color: 0x3b82f6,
wireframe: true
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Add some floating AI elements around the character
const aiElements = [];
const aiGeometry = new THREE.SphereGeometry(0.1, 16, 16);
const aiMaterial = new THREE.MeshBasicMaterial({
color: 0x10b981
});
for (let i = 0; i < 5; i++) {
const aiElement = new THREE.Mesh(aiGeometry, aiMaterial);
aiElement.position.x = (Math.random() - 0.5) * 2;
aiElement.position.y = (Math.random() - 0.5) * 2;
aiElement.position.z = (Math.random() - 0.5) * 2;
scene.add(aiElement);
aiElements.push(aiElement);
}
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Rotate character
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Animate AI elements
aiElements.forEach((element, index) => {
element.position.x = Math.sin(Date.now() * 0.001 + index) * 1.5;
element.position.y = Math.cos(Date.now() * 0.001 + index * 2) * 1.5;
element.position.z = Math.sin(Date.now() * 0.001 + index * 0.5) * 1.5;
});
renderer.render(scene, camera);
}
animate();
// Cursor interaction
container.addEventListener('mousemove', (event) => {
const rect = container.getBoundingClientRect();
const x = ((event.clientX - rect.left) / container.clientWidth) * 2 - 1;
const y = -((event.clientY - rect.top) / container.clientHeight) * 2 + 1;
// Rotate character based on cursor position
cube.rotation.y = x * 0.5;
cube.rotation.x = y * 0.5;
// Make AI elements follow cursor
aiElements[0].position.x = x * 2;
aiElements[0].position.y = y * 2;
});
// Hover effect
container.addEventListener('mouseenter', () => {
cube.material.color.setHex(0x10b981);
cube.scale.set(1.1, 1.1, 1.1);
});
container.addEventListener('mouseleave', () => {
cube.material.color.setHex(0x3b82f6);
cube.scale.set(1, 1, 1);
});
}
});
// Responsive adjustments on resize
window.addEventListener('resize', function() {
// Update character canvas size
const container = document.getElementById('character-container');
const canvas = document.getElementById('character-canvas');
if (canvas && container) {
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
}
});
</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=hitty28/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>