Upload 10 files

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/B[[:space:]]Chaitanya[[:space:]]Reddy[[:space:]]Resume.pdf filter=lfs diff=lfs merge=lfs -text
+static/images/myphoto.jpg filter=lfs diff=lfs merge=lfs -text
+static/images/Vexa[[:space:]]Chatbot.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,18 @@
+# Use the official Python slim image as the base image
+FROM python:3.9-slim
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy the requirements file (if you have one) or install dependencies directly
+# Since your project has minimal dependencies, we'll install them directly
+RUN pip install --no-cache-dir flask
+
+# Copy the entire project directory into the container
+COPY . .
+
+# Expose port 7860 (Hugging Face Spaces default port, matches your app)
+EXPOSE 7860
+
+# Command to run the Flask app
+CMD ["python", "main.py"]

main.py

@@ -0,0 +1,210 @@
+from flask import Flask, jsonify, request
+import logging
+import smtplib
+from email.mime.text import MIMEText
+from email.mime.multipart import MIMEMultipart
+
+app = Flask(__name__)
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+
+# Email configuration (replace with your Gmail credentials)
+EMAIL_ADDRESS = "chaituchaithanyareddy895@gmail.com"  # Replace with your Gmail address
+EMAIL_PASSWORD = "einf clqk oyds ucuj"    # Replace with your Gmail App Password
+RECIPIENT_EMAIL = "chaituchaithanyareddy895@gmail.com"  # The email where you want to receive messages
+
+# Data for API endpoints
+skills_data = [
+    {"title": "Machine Learning", "icon": "brain", "skills": [
+        {"name": "Numpy", "proficiency": 85},
+        {"name": "Pandas", "proficiency": 90},
+        {"name": "NLP", "proficiency": 80}
+    ]},
+    {"title": "Backend Development", "icon": "server", "skills": [
+        {"name": "PHP", "proficiency": 70},
+        {"name": "Python", "proficiency": 95},
+        {"name": "Java", "proficiency": 75},
+        {"name": "Flask", "proficiency": 85}
+    ]},
+    {"title": "Database", "icon": "database", "skills": [
+        {"name": "MySQL", "proficiency": 80}
+    ]},
+    {"title": "Deep Learning", "icon": "network-wired", "skills": [
+        {"name": "TensorFlow", "proficiency": 75}
+    ]}
+]
+
+achievements_data = [
+    {
+        "icon": "trophy",
+        "title": "Screen Smart Ideathon Winner",
+        "organization": "IEEE Student Branch, REVA University",
+        "description": "Proposed an innovative solution for reducing screen time among students, utilizing that time for upskilling."
+    },
+    {
+        "icon": "award",
+        "title": "Finalist in AI Hackathon",
+        "organization": "Entellika Sparc AI Hackathon",
+        "description": "Developed a Python Tkinter app for matching top 5 internships based on resume skills using binary classification and Naive Bayes."
+    },
+    {
+        "icon": "star",
+        "title": "Winner at UI/UX Design Challenge",
+        "organization": "IIT Jammu",
+        "description": "Designed an e-commerce platform showcasing Indian state-specific handicrafts, promoting cultural heritage."
+    }
+]
+
+hobbies_data = [
+    {
+        "icon": "code",
+        "title": "Coding",
+        "description": "Building side projects and exploring new technologies to fuel my passion for software development."
+    },
+    {
+        "icon": "chalkboard-teacher",
+        "title": "Educating Others",
+        "description": "Sharing knowledge in Python and tech concepts, driven by a passion for teaching."
+    },
+    {
+        "icon": "book",
+        "title": "Reading",
+        "description": "Keeping up with tech trends through blogs and articles."
+    },
+    {
+        "icon": "palette",
+        "title": "Digital Art",
+        "description": "Creating digital artwork and experimenting with UI/UX design."
+    }
+]
+
+projects_data = [
+    {
+        "title": "VEXA Chatbot",
+        "description": "An AI-powered chatbot for Sahayak Organization, assisting users with queries about underprivileged children's development.",
+        "image": "/static/images/Vexa Chatbot.png",
+        "technologies": ["Python", "Deep Learning", "PyTorch", "Flask", "HTML", "CSS"],
+        "githubLink": "https://github.com/BChaitanyaReddy895/vexa_chatbot",
+        "liveLink": "https://chaitanya895-sahayak.hf.space"
+    },
+    {
+        "title": "Bangla to English Translator",
+        "description": "A machine learning model translating Bangla text, images, PDFs, and websites to English using NLP and web crawling techniques.",
+        "image": "/static/images/translator.png",
+        "technologies": ["Python", "NLP", "HTML", "CSS", "JavaScript"],
+        "githubLink": "https://github.com/BChaitanyaReddy895/Bengali_English_translator",
+        "liveLink": "https://chaitanya895-bangla-translator.hf.space"
+    }
+]
+
+education_data = [
+    {
+        "degree": "B.Tech in Computer Science and Engineering",
+        "institution": "REVA University",
+        "period": "2023-2027",
+        "description": "Specializing in Python, C, Java, Machine Learning, and NLP.",
+        "achievements": [
+            "Won IEEE Ideathon at REVA University",
+            "Developed Bangla to English translation model for industrial use",
+            "Participated in Entellika Sparc AI Hackathon and IIT Jammu UI/UX Challenge"
+        ]
+    }
+]
+
+@app.route('/')
+def serve_index():
+    try:
+        return app.send_static_file('index.html'), 200
+    except Exception as e:
+        logging.error(f"Error serving index.html: {str(e)}")
+        return jsonify({"error": "File not found"}), 404
+
+@app.route('/static/<path:path>')
+def serve_static(path):
+    logging.info(f"Serving static file: {path}")
+    try:
+        return app.send_static_file(path)
+    except Exception as e:
+        logging.error(f"Error serving static file {path}: {str(e)}")
+        return jsonify({"error": "File not found"}), 404
+
+@app.route('/api/skills')
+def get_skills():
+    try:
+        return jsonify(skills_data)
+    except Exception as e:
+        logging.error(f"Error in /api/skills: {str(e)}")
+        return jsonify({"error": "Internal server error"}), 500
+
+@app.route('/api/achievements')
+def get_achievements():
+    try:
+        return jsonify(achievements_data)
+    except Exception as e:
+        logging.error(f"Error in /api/achievements: {str(e)}")
+        return jsonify({"error": "Internal server error"}), 500
+
+@app.route('/api/hobbies')
+def get_hobbies():
+    try:
+        return jsonify(hobbies_data)
+    except Exception as e:
+        logging.error(f"Error in /api/hobbies: {str(e)}")
+        return jsonify({"error": "Internal server error"}), 500
+
+@app.route('/api/projects')
+def get_projects():
+    try:
+        return jsonify(projects_data)
+    except Exception as e:
+        logging.error(f"Error in /api/projects: {str(e)}")
+        return jsonify({"error": "Internal server error"}), 500
+
+@app.route('/api/education')
+def get_education():
+    try:
+        return jsonify(education_data)
+    except Exception as e:
+        logging.error(f"Error in /api/education: {str(e)}")
+        return jsonify({"error": "Internal server error"}), 500
+
+@app.route('/api/contact', methods=['POST'])
+def contact():
+    try:
+        data = request.get_json()
+        if not data or 'email' not in data or 'message' not in data:
+            return jsonify({"error": "Invalid request data"}), 400
+        email = data['email']
+        message = data['message']
+        logging.info(f"Contact form submission - Email: {email}, Message: {message}")
+
+        # Set up the email
+        msg = MIMEMultipart()
+        msg['From'] = EMAIL_ADDRESS
+        msg['To'] = RECIPIENT_EMAIL
+        msg['Subject'] = "New Contact Form Submission"
+        
+        body = f"New message from your portfolio website:\n\nFrom: {email}\nMessage: {message}"
+        msg.attach(MIMEText(body, 'plain'))
+
+        # Connect to Gmail's SMTP server
+        with smtplib.SMTP('smtp.gmail.com', 587) as server:
+            server.starttls()  # Enable TLS
+            server.login(EMAIL_ADDRESS, EMAIL_PASSWORD)
+            server.sendmail(EMAIL_ADDRESS, RECIPIENT_EMAIL, msg.as_string())
+            logging.info(f"Email sent to {RECIPIENT_EMAIL}")
+
+        return jsonify({"message": "Message sent successfully!"})
+    except smtplib.SMTPAuthenticationError as e:
+        logging.error(f"SMTP Authentication Error: {str(e)}")
+        return jsonify({"error": "Failed to authenticate with email server. Please try again later."}), 500
+    except smtplib.SMTPException as e:
+        logging.error(f"SMTP Error: {str(e)}")
+        return jsonify({"error": "Failed to send email. Please try again later."}), 500
+    except Exception as e:
+        logging.error(f"Error in /api/contact: {str(e)}")
+        return jsonify({"error": "Internal server error"}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

static/B Chaitanya Reddy Resume.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:52acf3f146578b59421f53843d13ba6b33ab0d289f64a2fd3f110ac95f4590bf
+size 380137

static/script.js

@@ -0,0 +1,367 @@
+// Initialize immediately to reduce delay
+console.log("Script.js started executing at:", new Date().toISOString());
+
+// Initialize Particles.js
+particlesJS('particles-js', {
+  particles: {
+    number: { value: 80, density: { enable: true, value_area: 800 } },
+    color: { value: ['#1E90FF'] },
+    shape: { type: 'circle' },
+    opacity: { value: 0.5, random: true },
+    size: { value: 3, random: true },
+    line_linked: { enable: true, distance: 150, color: '#1E90FF', opacity: 0.4, width: 1 },
+    move: { enable: true, speed: 2, direction: 'none', random: true, straight: false, out_mode: 'out', bounce: false }
+  },
+  interactivity: {
+    detect_on: 'canvas',
+    events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' }, resize: true },
+    modes: { repulse: { distance: 100, duration: 0.4 }, push: { particles_nb: 4 } }
+  },
+  retina_detect: true
+});
+
+// Glowing Cursor Trail
+const canvas = document.getElementById('cursor-trail');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+const trails = [];
+window.addEventListener('mousemove', (e) => {
+  trails.push({ x: e.clientX, y: e.clientY, life: 1 });
+});
+function animateTrail() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  trails.forEach((trail, index) => {
+    ctx.beginPath();
+    ctx.arc(trail.x, trail.y, 5 * trail.life, 0, Math.PI * 2);
+    ctx.fillStyle = `rgba(30, 144, 255, ${trail.life})`;
+    ctx.fill();
+    trail.life -= 0.02;
+    if (trail.life <= 0) trails.splice(index, 1);
+  });
+  requestAnimationFrame(animateTrail);
+}
+animateTrail();
+window.addEventListener('resize', () => {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+});
+
+// GSAP Animations
+gsap.registerPlugin(ScrollTrigger);
+
+// Animate the static text "Hi, I'm B Chaitanya Reddy" and its siblings
+gsap.fromTo('.animate-slide-in', 
+  { y: 100, opacity: 0 }, 
+  { y: 0, opacity: 1, duration: 1.2, ease: 'power3.out', onComplete: () => {
+    document.querySelector('.animate-slide-in').style.opacity = '1'; // Ensure final state
+  }}
+);
+
+// Animate the image in the hero section
+gsap.fromTo('.animate-fade-in',
+  { opacity: 0 },
+  { opacity: 1, duration: 1.5, ease: 'power3.out', onComplete: () => {
+    document.querySelector('.animate-fade-in').style.opacity = '1'; // Ensure final state
+  }}
+);
+
+// Animate stat cards on scroll
+gsap.from('.stat-card', {
+  scrollTrigger: { trigger: '#about', start: 'top 80%' },
+  y: 50,
+  opacity: 0,
+  duration: 0.8,
+  stagger: 0.2,
+  ease: 'power3.out'
+});
+
+// Navigation Bar
+const menuToggle = document.getElementById('menu-toggle');
+const mobileMenu = document.getElementById('mobile-menu');
+menuToggle.addEventListener('click', () => {
+  mobileMenu.classList.toggle('hidden');
+  menuToggle.querySelector('i').classList.toggle('fa-bars');
+  menuToggle.querySelector('i').classList.toggle('fa-times');
+});
+
+// Smooth Scrolling
+document.querySelectorAll('.nav-link').forEach(link => {
+  link.addEventListener('click', (e) => {
+    e.preventDefault();
+    mobileMenu.classList.add('hidden');
+    menuToggle.querySelector('i').classList.add('fa-bars');
+    menuToggle.querySelector('i').classList.remove('fa-times');
+    document.querySelector(link.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
+  });
+});
+
+// Theme Toggle (Disabled since theme switching isn't implemented)
+const themeToggle = document.getElementById('theme-toggle');
+themeToggle.addEventListener('click', () => {
+  // Theme switching not implemented
+});
+
+// Back to Top Button
+const backToTop = document.getElementById('back-to-top');
+window.addEventListener('scroll', () => {
+  backToTop.classList.toggle('hidden', window.scrollY < 500);
+});
+backToTop.addEventListener('click', () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
+// Ripple Effect for Buttons
+document.querySelectorAll('.ripple').forEach(btn => {
+  btn.addEventListener('click', (e) => {
+    const rect = btn.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const ripple = document.createElement('span');
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    ripple.classList.add('ripple-effect');
+    btn.appendChild(ripple);
+    setTimeout(() => ripple.remove(), 600);
+  });
+});
+
+// Fetch Data Helper
+const fetchData = async (url, elementId, renderCallback) => {
+  try {
+    console.log(`Fetching data from ${url}`);
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const data = await response.json();
+    console.log(`Fetched data from ${url}:`, data);
+    const container = document.getElementById(elementId);
+    if (!container) throw new Error(`Container with ID ${elementId} not found`);
+    renderCallback(data, container);
+  } catch (error) {
+    console.error(`Error fetching ${url}:`, error);
+    document.getElementById(elementId).innerHTML = '<p class="text-red-500">Error loading data. Please try again later.</p>';
+  }
+};
+
+// Render Skills with Circular Progress
+fetchData('/api/skills', 'skills-grid', (data, container) => {
+  console.log('Rendering skills data:', data);
+  container.innerHTML = '';
+  data.forEach(category => {
+    const card = document.createElement('div');
+    card.className = 'skill-card rounded-xl hover:scale-105 transition-transform';
+    card.style.opacity = '1';
+    card.style.display = 'block';
+    card.innerHTML = `
+      <i class="fas fa-${category.icon} mb-2"></i>
+      <h3 class="mb-4">${category.title}</h3>
+      <div class="space-y-3">
+        ${category.skills.map(skill => `
+          <div class="skill-item">
+            <span>${skill.name}</span>
+            <div class="progress-circle-container">
+              <div class="progress-circle-bg"></div>
+              <svg class="progress-circle">
+                <circle cx="20" cy="20" r="18" stroke="#E5E5E5" stroke-width="4" fill="none" />
+                <circle class="progress-fill" cx="20" cy="20" r="18" stroke="#1E90FF" stroke-width="4" fill="none" stroke-dasharray="0 113" />
+              </svg>
+              <span class="progress-percentage">${skill.proficiency}%</span>
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+    container.appendChild(card);
+    console.log(`Rendered skill card for ${category.title}`);
+    // Animate the circular progress
+    card.querySelectorAll('.progress-fill').forEach(circle => {
+      const proficiency = circle.parentElement.parentElement.querySelector('.progress-percentage').textContent.replace('%', '');
+      const circumference = 2 * Math.PI * 18; // Circumference of the circle (r=18)
+      const offset = circumference * (proficiency / 100);
+      gsap.to(circle, {
+        scrollTrigger: { 
+          trigger: card, 
+          start: 'left 80%',
+          end: 'right 20%',
+          scrub: true
+        },
+        strokeDasharray: `${offset} 113`,
+        duration: 1.5,
+        ease: 'power3.out'
+      });
+    });
+  });
+});
+
+// Render Achievements
+fetchData('/api/achievements', 'achievements-grid', (data, container) => {
+  data.forEach(achievement => {
+    const card = document.createElement('div');
+    card.className = 'achievement-card glassmorphic p-6 rounded-xl hover:scale-105 transition-transform';
+    card.setAttribute('data-tilt', '');
+    card.setAttribute('data-tilt-max', '10');
+    card.innerHTML = `
+      <div class="flex items-start space-x-4">
+        <div class="icon-wrapper p-3 glassmorphic rounded-full">
+          <i class="fas fa-${achievement.icon} text-primary-blue glow"></i>
+        </div>
+        <div>
+          <h3 class="text-lg font-orbitron text-primary-blue glow">${achievement.title}</h3>
+          <p class="text-sm text-primary-blue">${achievement.organization}</p>
+          <p class="text-gray-300">${achievement.description}</p>
+        </div>
+      </div>
+    `;
+    container.appendChild(card);
+    VanillaTilt.init(card);
+    gsap.from(card, { scrollTrigger: { trigger: card, start: 'top 80%' }, y: 50, opacity: 0, duration: 1, ease: 'power3.out' });
+  });
+});
+
+// Render Hobbies
+fetchData('/api/hobbies', 'hobbies-grid', (data, container) => {
+  data.forEach(hobby => {
+    const card = document.createElement('div');
+    card.className = 'hobby-card glassmorphic p-6 rounded-xl hover:scale-105 transition-transform';
+    card.setAttribute('data-tilt', '');
+    card.setAttribute('data-tilt-max', '10');
+    card.innerHTML = `
+      <div class="flex items-center space-x-4">
+        <div class="icon-wrapper p-3 glassmorphic rounded-full">
+          <i class="fas fa-${hobby.icon} text-primary-blue glow"></i>
+        </div>
+        <div>
+          <h3 class="text-lg font-orbitron text-primary-blue glow">${hobby.title}</h3>
+          <p class="text-gray-300">${hobby.description}</p>
+        </div>
+      </div>
+    `;
+    container.appendChild(card);
+    VanillaTilt.init(card);
+    gsap.from(card, { scrollTrigger: { trigger: card, start: 'top 80%' }, y: 50, opacity: 0, duration: 1, ease: 'power3.out' });
+  });
+});
+
+// Render Projects with Modal
+const modal = document.getElementById('project-modal');
+const modalClose = document.getElementById('modal-close');
+fetchData('/api/projects', 'projects-grid', (data, container) => {
+  data.forEach(project => {
+    const card = document.createElement('div');
+    card.className = 'project-card glassmorphic rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform';
+    card.setAttribute('data-tilt', '');
+    card.setAttribute('data-tilt-max', '10');
+    card.innerHTML = `
+      <div class="relative">
+        <img src="${project.image}" alt="${project.title}" class="w-full h-48 object-cover glow">
+        <div class="project-overlay absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100">
+          <i class="fas fa-search text-white text-2xl glow"></i>
+        </div>
+      </div>
+      <div class="p-6">
+        <h3 class="text-lg font-orbitron text-primary-blue glow mb-2">${project.title}</h3>
+        <p class="text-gray-300 text-sm mb-4">${project.description.substring(0, 100)}...</p>
+        <div class="flex flex-wrap gap-2">
+          ${project.technologies.map(tech => `<span class="tech-tag glassmorphic text-xs px-2 py-1 rounded-full text-primary-blue glow">${tech}</span>`).join('')}
+        </div>
+      </div>
+    `;
+    card.addEventListener('click', () => {
+      document.getElementById('modal-image').src = project.image;
+      document.getElementById('modal-title').textContent = project.title;
+      document.getElementById('modal-description').textContent = project.description;
+      const techContainer = document.getElementById('modal-tech');
+      techContainer.innerHTML = project.technologies.map(tech => `<span class="tech-tag glassmorphic text-xs px-2 py-1 rounded-full text-primary-blue glow">${tech}</span>`).join('');
+      document.getElementById('modal-github').href = project.githubLink;
+      document.getElementById('modal-live').href = project.liveLink;
+      modal.classList.remove('hidden');
+      gsap.from(modal.querySelector('div'), { y: 100, opacity: 0, duration: 0.8, ease: 'power3.out' });
+    });
+    container.appendChild(card);
+    VanillaTilt.init(card);
+    gsap.from(card, { scrollTrigger: { trigger: card, start: 'top 80%' }, y: 50, opacity: 0, duration: 1, ease: 'power3.out' });
+  });
+});
+modalClose.addEventListener('click', () => {
+  modal.classList.add('hidden');
+});
+modal.addEventListener('click', (e) => {
+  if (e.target === modal) modal.classList.add('hidden');
+});
+
+// Render Education
+fetchData('/api/education', 'education-grid', (data, container) => {
+  data.forEach(edu => {
+    const card = document.createElement('div');
+    card.className = 'education-card glassmorphic p-6 rounded-xl hover:scale-105 transition-transform';
+    card.setAttribute('data-tilt', '');
+    card.setAttribute('data-tilt-max', '10');
+    card.innerHTML = `
+      <div class="flex items-start space-x-4">
+        <div class="icon-wrapper p-3 glassmorphic rounded-full">
+          <i class="fas fa-graduation-cap text-primary-blue glow"></i>
+        </div>
+        <div class="flex-1">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-lg font-orbitron text-primary-blue glow">${edu.degree}</h3>
+            <div class="period flex items-center text-gray-400">
+              <i class="fas fa-calendar mr-1"></i>
+              <span>${edu.period}</span>
+            </div>
+          </div>
+          <h4 class="text-primary-blue glow mb-2">${edu.institution}</h4>
+          <p class="text-gray-300 mb-4">${edu.description}</p>
+          <h5 class="font-orbitron text-primary-blue glow">Key Achievements:</h5>
+          <ul class="list-disc pl-5 text-gray-300">
+            ${edu.achievements.map(achievement => `<li>${achievement}</li>`).join('')}
+          </ul>
+        </div>
+      </div>
+    `;
+    container.appendChild(card);
+    VanillaTilt.init(card);
+    gsap.from(card, { scrollTrigger: { trigger: card, start: 'top 80%' }, y: 50, opacity: 0, duration: 1, ease: 'power3.out' });
+  });
+});
+
+// Handle Contact Form Submission via Button Click
+const contactSubmitButton = document.getElementById('contact-submit');
+const emailInput = document.getElementById('email');
+const messageInput = document.getElementById('message');
+
+contactSubmitButton.addEventListener('click', async () => {
+  const email = emailInput.value.trim();
+  const message = messageInput.value.trim();
+
+  // Validate inputs
+  if (!email || !message) {
+    alert('Please fill in both email and message fields.');
+    return;
+  }
+
+  if (!/\S+@\S+\.\S+/.test(email)) {
+    alert('Please enter a valid email address.');
+    return;
+  }
+
+  try {
+    const response = await fetch('/api/contact', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, message })
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    alert(data.message);
+    emailInput.value = '';
+    messageInput.value = '';
+  } catch (error) {
+    console.error('Error submitting contact form:', error);
+    alert('Error submitting form. If you\'re on Hugging Face Spaces, please use LinkedIn or GitHub to contact me.');
+  }
+});

static/style.css

@@ -0,0 +1,361 @@
+/* Custom Fonts */
+.font-orbitron {
+  font-family: 'Orbitron', sans-serif;
+}
+
+.font-lexend {
+  font-family: 'Lexend', sans-serif;
+}
+
+/* Color Variables */
+:root {
+  --primary-blue: #1E90FF; /* Accent color for progress rings */
+  --dark-bg: #1A0B2E;
+  --light-gray: #F5F5F5;
+  --text-gray: #666;
+}
+
+/* Glassmorphism Effect (Retained for other sections) */
+.glassmorphic {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+}
+
+/* Neumorphic Effect (Retained for other sections) */
+.neumorphic {
+  background: #6B46C1;
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+}
+
+.neumorphic:hover {
+  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3), inset -5px -5px 15px rgba(255, 255, 255, 0.1);
+}
+
+/* Glow Effect (Retained for other sections) */
+.glow {
+  text-shadow: 0 0 10px var(--primary-blue);
+  transition: text-shadow 0.3s ease;
+}
+
+.glow:hover {
+  text-shadow: 0 0 15px var(--primary-blue);
+}
+
+img.glow {
+  box-shadow: 0 0 15px var(--primary-blue);
+}
+
+/* Gradient wipe animation for #typing-text */
+#typing-text {
+  display: block;
+  visibility: visible;
+  opacity: 1;
+  background: linear-gradient(to right, rgba(209, 213, 219, 0) 0%, rgba(209, 213, 219, 1) 50%, rgba(209, 213, 219, 1) 100%);
+  background-size: 200% 100%;
+  background-position: -100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: gradientWipe 2s ease-out forwards 1s;
+}
+
+@keyframes gradientWipe {
+  0% {
+    background-position: -100%;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+  }
+  100% {
+    background-position: 100%;
+    -webkit-text-fill-color: rgb(209, 213, 219);
+    color: rgb(209, 213, 219);
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+/* Ensure hero section contents stay visible */
+#home .animate-slide-in,
+#home .animate-slide-in h1,
+#home .animate-slide-in p,
+#home .animate-slide-in .flex {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+/* Ensure the image stays visible */
+#home .animate-fade-in {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+/* Underline Effect */
+.underline {
+  width: 80px;
+  height: 4px;
+  background: var(--primary-blue);
+  margin: 0 auto;
+  border-radius: 2px;
+}
+
+/* Buttons */
+.btn-primary {
+  background: var(--primary-blue);
+  color: #fff;
+  padding: 12px 24px;
+  border-radius: 50px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-primary:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 0 20px var(--primary-blue);
+}
+
+.btn-secondary {
+  background: transparent;
+  border: 2px solid var(--primary-blue);
+  color: var(--primary-blue);
+  padding: 10px 20px;
+  border-radius: 50px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-secondary:hover {
+  background: var(--primary-blue);
+  color: #fff;
+  box-shadow: 0 0 20px var(--primary-blue);
+}
+
+/* Ripple Effect */
+.ripple .ripple-effect {
+  content: '';
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple-effect 0.6s ease-out;
+}
+
+@keyframes ripple-effect {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+/* Skills Section New Design */
+#skills {
+  background: #fff; /* Clean white background */
+  position: relative;
+  overflow: hidden;
+}
+
+/* Style for skill cards in horizontal scroll */
+#skills-grid {
+  display: flex; /* Ensure flexbox is applied */
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Modern Skill Card Design */
+.skill-card {
+  flex: 0 0 200px; /* Compact width */
+  height: 300px; /* Taller to fit skills vertically */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  background: var(--light-gray);
+  border-radius: 15px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  padding: 1rem;
+  margin: 0 1rem; /* Increased horizontal margin for more spacing */
+}
+
+/* Hover Effect */
+.skill-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+/* Icon Styling */
+.skill-card i {
+  font-size: 2rem;
+  color: var(--primary-blue);
+  margin-bottom: 0.5rem;
+}
+
+/* Category Title */
+.skill-card h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 1rem;
+}
+
+/* Adjust the skills list inside the card */
+.skill-card .space-y-3 {
+  width: 100%;
+  overflow-y: auto;
+}
+
+/* Style the scrollbar for the skills list inside the card */
+.skill-card .space-y-3::-webkit-scrollbar {
+  width: 4px;
+}
+
+.skill-card .space-y-3::-webkit-scrollbar-track {
+  background: #E5E5E5;
+}
+
+.skill-card .space-y-3::-webkit-scrollbar-thumb {
+  background: var(--primary-blue);
+  border-radius: 4px;
+}
+
+.skill-card .space-y-3::-webkit-scrollbar-thumb:hover {
+  background: #1E70D0;
+}
+
+/* Skill Item Layout */
+.skill-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Skill Name */
+.skill-item span:first-child {
+  flex: 1;
+  text-align: left;
+  font-size: 0.9rem;
+  color: var(--text-gray);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 80px;
+}
+
+/* Circular Progress Container */
+.progress-circle-container {
+  position: relative;
+  width: 40px;
+  height: 40px;
+}
+
+/* Circular Progress Background */
+.progress-circle-bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #E5E5E5;
+}
+
+/* Circular Progress Fill (SVG) */
+.progress-circle {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg); /* Start from the top */
+}
+
+/* Percentage Text Inside Circle */
+.progress-percentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.7rem;
+  color: var(--text-gray);
+}
+
+/* Ensure skills section is visible */
+#skills,
+#skills-grid,
+.skill-card,
+.skill-item,
+.progress-circle-container,
+.progress-circle,
+.progress-percentage {
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+/* Custom Scrollbar for the horizontal scroll */
+#skills-grid::-webkit-scrollbar {
+  height: 8px;
+}
+
+#skills-grid::-webkit-scrollbar-track {
+  background: #E5E5E5;
+}
+
+#skills-grid::-webkit-scrollbar-thumb {
+  background: var(--primary-blue);
+  border-radius: 4px;
+}
+
+#skills-grid::-webkit-scrollbar-thumb:hover {
+  background: #1E70D0;
+}
+
+/* Project Overlay (Retained for other sections) */
+.project-overlay {
+  background: var(--primary-blue);
+  transition: opacity 0.3s ease;
+}
+
+/* Global Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #2D1B46;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--primary-blue);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #1E70D0;
+}
+
+/* Animations */
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(50px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Remove CSS animation since we're using GSAP */
+.animate-slide-in {
+  /* No animation here; GSAP will handle it */
+}
+
+.animate-fade-in {
+  animation: fadeIn 1.5s ease-in-out;
+}

templates/index.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Portfolio of B Chaitanya Reddy, a passionate Python developer and aspiring Machine Learning engineer.">
+  <meta name="keywords" content="portfolio, python developer, machine learning, web development">
+  <meta name="author" content="B Chaitanya Reddy">
+  <title>B Chaitanya Reddy - Portfolio</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Lexend:wght@300;400;600&display=swap">
+  <link rel="stylesheet" href="/static/style.css">
+  <link rel="icon" type="image/jpg" href="/static/images/favicon.jpg">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.8.1/dist/vanilla-tilt.min.js"></script>
+  <script defer src="/static/script.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 font-lexend relative overflow-x-hidden">
+  <!-- Particle Background -->
+  <div id="particles-js" class="absolute inset-0 z-0"></div>
+
+  <!-- Glowing Cursor Trail -->
+  <canvas id="cursor-trail" class="fixed inset-0 pointer-events-none z-50"></canvas>
+
+  <!-- Navigation Bar -->
+  <nav id="navbar" class="fixed top-0 left-0 w-full glassmorphic z-50">
+    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+      <a href="#home" class="text-2xl font-orbitron text-primary-blue glow">BCR</a>
+      <div class="hidden md:flex space-x-6">
+        <a href="#home" class="nav-link text-primary-blue hover:text-primary-blue glow">Home</a>
+        <a href="#about" class="nav-link text-primary-blue hover:text-primary-blue glow">About</a>
+        <a href="#skills" class="nav-link text-primary-blue hover:text-primary-blue glow">Skills</a>
+        <a href="#achievements" class="nav-link text-primary-blue hover:text-primary-blue glow">Achievements</a>
+        <a href="#hobbies" class="nav-link text-primary-blue hover:text-primary-blue glow">Hobbies</a>
+        <a href="#projects" class="nav-link text-primary-blue hover:text-primary-blue glow">Projects</a>
+        <a href="#education" class="nav-link text-primary-blue hover:text-primary-blue glow">Education</a>
+        <a href="#resume" class="nav-link text-primary-blue hover:text-primary-blue glow">Resume</a>
+        <a href="#contact" class="nav-link text-primary-blue hover:text-primary-blue glow">Contact</a>
+      </div>
+      <div class="flex items-center space-x-4">
+        <button id="theme-toggle" class="text-primary-blue hover:text-primary-blue glow" aria-label="Toggle dark mode">
+          <i class="fas fa-moon"></i>
+        </button>
+        <button id="menu-toggle" class="md:hidden text-primary-blue" aria-label="Toggle menu">
+          <i class="fas fa-bars"></i>
+        </button>
+      </div>
+    </div>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="hidden md:hidden glassmorphic">
+      <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
+        <a href="#home" class="nav-link text-primary-blue hover:text-primary-blue glow">Home</a>
+        <a href="#about" class="nav-link text-primary-blue hover:text-primary-blue glow">About</a>
+        <a href="#skills" class="nav-link text-primary-blue hover:text-primary-blue glow">Skills</a>
+        <a href="#achievements" class="nav-link text-primary-blue hover:text-primary-blue glow">Achievements</a>
+        <a href="#hobbies" class="nav-link text-primary-blue hover:text-primary-blue glow">Hobbies</a>
+        <a href="#projects" class="nav-link text-primary-blue hover:text-primary-blue glow">Projects</a>
+        <a href="#education" class="nav-link text-primary-blue hover:text-primary-blue glow">Education</a>
+        <a href="#resume" class="nav-link text-primary-blue hover:text-primary-blue glow">Resume</a>
+        <a href="#contact" class="nav-link text-primary-blue hover:text-primary-blue glow">Contact</a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Hero Section -->
+  <section id="home" class="min-h-screen flex items-center relative z-10 pt-20">
+    <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
+      <div class="md:w-1/2 text-center md:text-left animate-slide-in">
+        <h1 class="text-4xl md:text-6xl font-orbitron text-primary-blue glow mb-4">Hi, I'm <span class="text-primary-blue">B Chaitanya Reddy</span></h1>
+        <p id="typing-text" class="text-xl md:text-2xl text-gray-300 mb-6">Python Developer | Machine Learning Enthusiast | AI Innovator</p>
+        <div class="flex justify-center md:justify-start space-x-4">
+          <a href="#projects" class="btn btn-primary ripple">View My Work <i class="fas fa-arrow-right ml-2"></i></a>
+          <a href="#contact" class="btn btn-secondary ripple">Contact Me</a>
+        </div>
+      </div>
+      <div class="md:w-1/2 mt-8 md:mt-0" data-tilt data-tilt-max="15" data-tilt-speed="400" data-tilt-perspective="1000">
+        <img src="/static/images/myPhoto.jpg" alt="B Chaitanya Reddy" class="rounded-full w-64 h-64 mx-auto object-cover glassmorphic glow animate-fade-in">
+      </div>
+    </div>
+  </section>
+
+  <!-- About Section -->
+  <section id="about" class="py-20 relative z-10">
+    <div class="container mx-auto px-4">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-orbitron text-primary-blue glow">About Me</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="flex flex-col md:flex-row gap-12">
+        <div class="md:w-1/2 glassmorphic p-8 rounded-xl">
+          <p class="text-lg text-gray-300 leading-relaxed">I'm a passionate fresher pursuing Computer Science and Engineering at REVA University. With a strong foundation in Python, Machine Learning, and NLP, I'm eager to create impactful solutions and grow as a professional in AI and software development.</p>
+          <div class="mt-6 space-y-4">
+            <div class="flex items-center gap-3 text-primary-blue">
+              <i class="fas fa-user"></i>
+              <span>Computer Science Student</span>
+            </div>
+            <div class="flex items-center gap-3 text-primary-blue">
+              <i class="fas fa-map-pin"></i>
+              <span>Bangalore, India</span>
+            </div>
+            <div class="flex items-center gap-3 text-primary-blue">
+              <i class="fas fa-briefcase"></i>
+              <span>Open to Opportunities</span>
+            </div>
+          </div>
+        </div>
+        <div class="md:w-1/2 grid grid-cols-2 gap-4">
+          <div class="stat-card glassmorphic p-6 rounded-xl text-center hover:scale-105 transition-transform">
+            <h3 class="text-3xl font-orbitron text-primary-blue glow">3+</h3>
+            <p class="text-gray-300">Academic Projects</p>
+          </div>
+          <div class="stat-card glassmorphic p-6 rounded-xl text-center hover:scale-105 transition-transform">
+            <h3 class="text-3xl font-orbitron text-primary-blue glow">5+</h3>
+            <p class="text-gray-300">Certifications</p>
+          </div>
+          <div class="stat-card glassmorphic p-6 rounded-xl text-center hover:scale-105 transition-transform">
+            <h3 class="text-3xl font-orbitron text-primary-blue glow">5+</h3>
+            <p class="text-gray-300">Skills</p>
+          </div>
+          <div class="stat-card glassmorphic p-6 rounded-xl text-center hover:scale-105 transition-transform">
+            <h3 class="text-3xl font-orbitron text-primary-blue glow">2+</h3>
+            <p class="text-gray-300">Internships</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Skills Section -->
+  <section id="skills" class="py-20 relative z-10">
+    <div class="container mx-auto px-4">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-orbitron text-primary-blue glow">Technical Skills</h2>
+        <div class="underline"></div>
+      </div>
+      <div id="skills-grid" class="flex overflow-x-auto space-x-10 pb-4"></div>
+    </div>
+  </section>
+
+  <!-- Achievements Section -->
+  <section id="achievements" class="py-20 relative z-10">
+    <div class="container mx-auto px-4">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-orbitron text-primary-blue glow">Achievements</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8" id="achievements-grid"></div>
+    </div>
+  </section>
+
+  <!-- Hobbies Section -->
+  <section id="hobbies" class="py-20 relative z-10">
+    <div class="container mx-auto px-4">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-orbitron text-primary-blue glow">Hobbies & Interests</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="hobbies-grid"></div>
+    </div>
+  </section>
+
+  <!-- Projects Section -->
+  <section id="projects" class="py-20 relative z-10">
+    <div class="container mx-auto px-4">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-orbitron text-primary-blue glow">Featured Projects</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="projects-grid"></div>
+    </div>
+  </section>
+
+  <!-- Education Section -->
+  <section id="education" class="py-20 relative z-10">
+    <div class="container mx-auto px-4">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-orbitron text-primary-blue glow">Education</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="flex flex-col gap-12" id="education-grid"></div>
+    </div>
+  </section>
+
+  <!-- Resume Section -->
+  <section id="resume" class="py-20 relative z-10">
+    <div class="container mx-auto px-4">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-orbitron text-primary-blue glow">Resume</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="max-w-2xl mx-auto glassmorphic p-8 rounded-xl">
+        <h3 class="text-2xl font-orbitron text-primary-blue glow mb-4">Download My Resume</h3>
+        <p class="text-gray-300 mb-6">Get a detailed overview of my skills, education, and achievements.</p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <a href="/static/B Chaitanya Reddy Resume.pdf" download class="btn btn-primary ripple">
+            <i class="fas fa-file-download mr-2"></i> Download PDF
+          </a>
+          <a href="/static/B Chaitanya Reddy Resume.pdf" target="_blank" rel="noopener noreferrer" class="btn btn-secondary ripple">
+            <i class="fas fa-eye mr-2"></i> View Online
+          </a>
+        </div>
+        <p class="mt-6 text-gray-400 text-sm">Last updated: <span id="last-updated-date">June 05, 2025</span></p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Contact Section -->
+  <section id="contact" class="py-20 relative z-10">
+    <div class="container mx-auto px-4">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl md:text-4xl font-orbitron text-primary-blue glow">Contact Me</h2>
+        <p class="text-gray-300 mt-4">Feel free to reach out for collaborations or just a friendly hello!</p>
+      </div>
+      <div id="contact-form" class="max-w-2xl mx-auto space-y-6 glassmorphic p-8 rounded-xl">
+        <input type="email" id="email" name="email" placeholder="Your email" required class="w-full p-3 rounded-md bg-transparent border border-gray-600 text-gray-100 focus:border-primary-blue focus:glow">
+        <textarea id="message" name="message" placeholder="Your message" required rows="6" class="w-full p-3 rounded-md bg-transparent border border-gray-600 text-gray-100 focus:border-primary-blue focus:glow"></textarea>
+        <button id="contact-submit" class="btn btn-primary w-full ripple">Send Message</button>
+        <p class="text-gray-400 text-sm mt-4">Note: Email submission may not work on Hugging Face Spaces due to sandbox restrictions. Please contact me via <a href="https://www.linkedin.com/in/b-chaitanya-reddy-63211728a/" target="_blank" class="text-primary-blue glow">LinkedIn</a> or <a href="https://github.com/BChaitanyaReddy895" target="_blank" class="text-primary-blue glow">GitHub</a>.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="bg-gray-800 text-gray-300 py-8 relative z-10">
+    <div class="container mx-auto px-4 text-center">
+      <p>© 2025 B Chaitanya Reddy. All rights reserved.</p>
+      <div class="flex justify-center space-x-6 mt-4">
+        <a href="https://github.com/BChaitanyaReddy895" target="_blank" rel="noopener noreferrer" class="text-primary-blue hover:text-primary-blue glow">
+          <i class="fab fa-github text-2xl"></i>
+        </a>
+        <a href="https://www.linkedin.com/in/b-chaitanya-reddy-63211728a/" target="_blank" rel="noopener noreferrer" class="text-primary-blue hover:text-primary-blue glow">
+          <i class="fab fa-linkedin text-2xl"></i>
+        </a>
+      </div>
+    </div>
+  </footer>
+
+  <!-- Back to Top Button -->
+  <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary-blue text-gray-900 p-3 rounded-full shadow-lg hidden neumorphic glow" aria-label="Back to top">
+    <i class="fas fa-arrow-up"></i>
+  </button>
+
+  <!-- Project Modal -->
+  <div id="project-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center hidden z-50">
+    <div class="glassmorphic p-8 rounded-xl max-w-2xl w-full mx-4 relative">
+      <button id="modal-close" class="absolute top-4 right-4 text-primary-blue hover:text-primary-blue glow" aria-label="Close modal">
+        <i class="fas fa-times"></i>
+      </button>
+      <img id="modal-image" src="" alt="" class="w-full h-64 object-cover rounded-md mb-4 glow">
+      <h3 id="modal-title" class="text-2xl font-orbitron text-primary-blue glow mb-2"></h3>
+      <p id="modal-description" class="text-gray-300 mb-4"></p>
+      <div id="modal-tech" class="flex flex-wrap gap-2 mb-4"></div>
+      <div class="flex space-x-4">
+        <a id="modal-github" href="#" class="btn btn-primary ripple">View on GitHub</a>
+        <a id="modal-live" href="#" class="btn btn-secondary ripple">Live Demo</a>
+      </div>
+    </div>
+  </div>
+</body>
+</html>