|
|
<!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/[email protected]/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; |
|
|
} |
|
|
|
|
|
|
|
|
.toggle-checkbox:checked { |
|
|
right: 0; |
|
|
background-color: #10b981; |
|
|
} |
|
|
|
|
|
.toggle-checkbox:checked + .toggle-label { |
|
|
background-color: #1e293b; |
|
|
} |
|
|
|
|
|
|
|
|
.character-container { |
|
|
width: 300px; |
|
|
height: 300px; |
|
|
position: relative; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.character-container { |
|
|
width: 250px; |
|
|
height: 250px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@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; |
|
|
} |
|
|
|
|
|
|
|
|
.character-hover-effect { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
|
|
|
@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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.particles, .particles * { |
|
|
user-select: none; |
|
|
-webkit-user-select: none; |
|
|
} |
|
|
|
|
|
|
|
|
.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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="vanta-background" class="fixed inset-0 -z-10 overflow-hidden"></div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 -z-10 overflow-hidden pointer-events-none"> |
|
|
<div class="particles"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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">[email protected]</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 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>© 2024 Sai Rohith Vulapu. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
window.addEventListener('load', function() { |
|
|
setTimeout(function() { |
|
|
const preloader = document.getElementById('preloader'); |
|
|
preloader.style.opacity = '0'; |
|
|
setTimeout(() => preloader.style.display = 'none', 500); |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
|
|
|
VANTA.NET({ |
|
|
el: "#vanta-background", |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0xf1f5f9, |
|
|
points: 10, |
|
|
maxDistance: 22, |
|
|
spacing: 16, |
|
|
showDots: false |
|
|
}); |
|
|
|
|
|
|
|
|
const toggle = document.getElementById('toggle'); |
|
|
const toggleMobile = document.getElementById('toggle-mobile'); |
|
|
const body = document.body; |
|
|
|
|
|
|
|
|
if (localStorage.getItem('dark-mode') === 'enabled') { |
|
|
body.classList.add('dark'); |
|
|
toggle.checked = true; |
|
|
if (toggleMobile) toggleMobile.checked = true; |
|
|
|
|
|
VANTA.NET({ |
|
|
el: "#vanta-background", |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0x0f172a, |
|
|
points: 10, |
|
|
maxDistance: 22, |
|
|
spacing: 16, |
|
|
showDots: false |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
toggle.addEventListener('change', function() { |
|
|
if (this.checked) { |
|
|
body.classList.add('dark'); |
|
|
localStorage.setItem('dark-mode', 'enabled'); |
|
|
if (toggleMobile) toggleMobile.checked = true; |
|
|
|
|
|
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; |
|
|
|
|
|
VANTA.NET({ |
|
|
el: "#vanta-background", |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0xf1f5f9, |
|
|
points: 10, |
|
|
maxDistance: 22, |
|
|
spacing: 16, |
|
|
showDots: false |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (toggleMobile) { |
|
|
toggleMobile.addEventListener('change', function() { |
|
|
if (this.checked) { |
|
|
body.classList.add('dark'); |
|
|
localStorage.setItem('dark-mode', 'enabled'); |
|
|
toggle.checked = true; |
|
|
|
|
|
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; |
|
|
|
|
|
VANTA.NET({ |
|
|
el: "#vanta-background", |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0xf1f5f9, |
|
|
points: 10, |
|
|
maxDistance: 22, |
|
|
spacing: 16, |
|
|
showDots: false |
|
|
}); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileLinks = mobileMenu.querySelectorAll('a'); |
|
|
mobileLinks.forEach(link => { |
|
|
link.addEventListener('click', function() { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
mobileMenu.classList.remove('flex'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 6 + 2; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
|
|
|
|
|
|
particle.style.left = `${Math.random() * 100}%`; |
|
|
particle.style.top = `${Math.random() * 100}%`; |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const container = document.getElementById('character-container'); |
|
|
const canvas = document.getElementById('character-canvas'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (canvas && typeof THREE !== 'undefined') { |
|
|
|
|
|
canvas.width = container.clientWidth; |
|
|
canvas.height = container.clientHeight; |
|
|
|
|
|
|
|
|
const scene = new THREE.Scene(); |
|
|
const camera = new THREE.PerspectiveCamera( |
|
|
75, |
|
|
canvas.width / canvas.height, |
|
|
0.1, |
|
|
1000 |
|
|
); |
|
|
camera.position.z = 5; |
|
|
|
|
|
|
|
|
const renderer = new THREE.WebGLRenderer({ |
|
|
canvas: canvas, |
|
|
alpha: true, |
|
|
antialias: true |
|
|
}); |
|
|
renderer.setClearColor(0x000000, 0); |
|
|
renderer.setSize(canvas.width, canvas.height); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
function animate() { |
|
|
requestAnimationFrame(animate); |
|
|
|
|
|
|
|
|
cube.rotation.x += 0.01; |
|
|
cube.rotation.y += 0.01; |
|
|
|
|
|
|
|
|
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(); |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
cube.rotation.y = x * 0.5; |
|
|
cube.rotation.x = y * 0.5; |
|
|
|
|
|
|
|
|
aiElements[0].position.x = x * 2; |
|
|
aiElements[0].position.y = y * 2; |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', function() { |
|
|
|
|
|
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> |
