| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Portfolio | Creative Developer</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| animation: { |
| 'fade-in': 'fadeIn 1s ease-in-out', |
| 'slide-up': 'slideUp 0.8s ease-out', |
| 'float': 'float 3s ease-in-out infinite', |
| }, |
| keyframes: { |
| fadeIn: { |
| '0%': { opacity: '0' }, |
| '100%': { opacity: '1' }, |
| }, |
| slideUp: { |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, |
| '100%': { transform: 'translateY(0)', opacity: '1' }, |
| }, |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-10px)' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .gradient-text { |
| background-clip: text; |
| -webkit-background-clip: text; |
| color: transparent; |
| background-image: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| } |
| |
| .project-card:hover .project-overlay { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .skill-item:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| } |
| |
| .dark .gradient-text { |
| background-image: linear-gradient(90deg, #60a5fa, #a78bfa); |
| } |
| |
| @media (max-width: 768px) { |
| .nav-menu { |
| position: fixed; |
| top: 0; |
| right: -100%; |
| width: 80%; |
| height: 100vh; |
| background-color: white; |
| transition: 0.5s; |
| z-index: 10; |
| padding-top: 80px; |
| } |
| .nav-menu.active { |
| right: 0; |
| } |
| .dark .nav-menu { |
| background-color: #1f2937; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300"> |
| |
| <header class="fixed w-full z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm shadow-sm"> |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> |
| <a href="#" class="text-2xl font-bold gradient-text">Bennison's Portfolio</a> |
| <div class="flex items-center space-x-6"> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="hover:text-blue-500 dark:hover:text-blue-400 transition">Home</a> |
| <a href="#about" class="hover:text-blue-500 dark:hover:text-blue-400 transition">About</a> |
| <a href="#projects" class="hover:text-blue-500 dark:hover:text-blue-400 transition">Projects</a> |
| <a href="#skills" class="hover:text-blue-500 dark:hover:text-blue-400 transition">Skills</a> |
| <a href="#contact" class="hover:text-blue-500 dark:hover:text-blue-400 transition">Contact</a> |
| </nav> |
| |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-moon dark:hidden"></i> |
| <i class="fas fa-sun hidden dark:block"></i> |
| </button> |
| |
| <button id="menu-toggle" class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="nav-menu" class="nav-menu md:hidden"> |
| <div class="flex flex-col space-y-6 p-8"> |
| <a href="#home" class="text-xl hover:text-blue-500 dark:hover:text-blue-400 transition">Home</a> |
| <a href="#about" class="text-xl hover:text-blue-500 dark:hover:text-blue-400 transition">About</a> |
| <a href="#projects" class="text-xl hover:text-blue-500 dark:hover:text-blue-400 transition">Projects</a> |
| <a href="#skills" class="text-xl hover:text-blue-500 dark:hover:text-blue-400 transition">Skills</a> |
| <a href="#contact" class="text-xl hover:text-blue-500 dark:hover:text-blue-400 transition">Contact</a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="min-h-[90vh] flex items-center pt-16"> |
| <div class="container mx-auto px-6 py-16 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0 animate-fade-in"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> |
| Hi, I'm <span class="gradient-text">Bennison</span> |
| </h1> |
| <h2 class="text-2xl md:text-3xl font-semibold mb-6 animate-slide-up"> |
| AI Engineer & Backend Specialist |
| </h2> |
| <p class="text-lg mb-8 text-gray-600 dark:text-gray-300 max-w-lg animate-slide-up"> |
| I architect intelligent systems with Python, Node.js and Generative AI to solve complex problems. |
| </p> |
| <div class="flex space-x-4 animate-slide-up"> |
| <a href="#projects" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition shadow-lg"> |
| View My Work |
| </a> |
| <a href="#contact" class="px-6 py-3 border-2 border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-gray-800 rounded-lg font-medium transition"> |
| Contact Me |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center animate-float"> |
| <div class="relative w-64 h-64 md:w-80 md:h-80 flex items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-600 shadow-2xl"> |
| <span class="text-white text-5xl md:text-7xl font-bold">BD</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-gray-50 dark:bg-gray-800"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2> |
| |
| <div class="flex flex-col md:flex-row items-center gap-8"> |
| <div class="md:w-1/3 flex justify-center"> |
| <div class="relative w-56 h-56 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-600 shadow-xl flex items-center justify-center"> |
| <span class="text-white text-4xl font-bold">AI</span> |
| </div> |
| </div> |
| <div class="md:w-2/3"> |
| <h3 class="text-2xl font-semibold mb-4">Who I Am</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-6"> |
| I'm a passionate AI Engineer with 3.5+ years of experience in backend development and generative AI systems. |
| I specialize in Python, Node.js, and building RAG (Retrieval-Augmented Generation) architectures with Agentic AI workflows. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| <div class="flex items-start space-x-4"> |
| <div class="p-3 bg-blue-100 dark:bg-blue-900 rounded-full"> |
| <i class="fas fa-code text-blue-600 dark:text-blue-300"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Web Development</h4> |
| <p class="text-gray-500 dark:text-gray-400 text-sm"> |
| Building responsive and interactive web applications |
| </p> |
| </div> |
| </div> |
| |
| <div class="flex items-start space-x-4"> |
| <div class="p-3 bg-green-100 dark:bg-green-900 rounded-full"> |
| <i class="fas fa-server text-green-600 dark:text-green-300"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Backend Development</h4> |
| <p class="text-gray-500 dark:text-gray-400 text-sm"> |
| Designing scalable APIs and database architectures |
| </p> |
| </div> |
| </div> |
| |
| <div class="flex items-start space-x-4"> |
| <div class="p-3 bg-purple-100 dark:bg-purple-900 rounded-full"> |
| <i class="fas fa-brain text-purple-600 dark:text-purple-300"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Generative AI (RAG)</h4> |
| <p class="text-gray-500 dark:text-gray-400 text-sm"> |
| Building Retrieval-Augmented Generation systems |
| </p> |
| </div> |
| </div> |
| |
| <div class="flex items-start space-x-4"> |
| <div class="p-3 bg-indigo-100 dark:bg-indigo-900 rounded-full"> |
| <i class="fas fa-robot text-indigo-600 dark:text-indigo-300"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Agentic AI</h4> |
| <p class="text-gray-500 dark:text-gray-400 text-sm"> |
| Developing autonomous AI agents with reasoning capabilities |
| </p> |
| </div> |
| </div> |
| </div> |
| <a href="https://linkedin.com/in/bennisondevadoss" target="_blank" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition mr-4"> |
| <i class="fab fa-linkedin-in mr-2"></i> LinkedIn |
| </a> |
| <a href="https://github.com/BennisonDevadoss" target="_blank" class="inline-flex items-center px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition"> |
| <i class="fab fa-github mr-2"></i> GitHub |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="projects" class="py-16"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-4 gradient-text">My Projects</h2> |
| <p class="text-center text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-16"> |
| Here are some of my recent projects. Each one was built to solve a specific problem or explore new technologies. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="project-card rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300 relative"> |
| <div class="relative h-52"> |
| <img src="http://static.photos/technology/640x360/789" |
| alt="Project 1" class="w-full h-full object-cover"> |
| <div class="project-overlay absolute inset-0 bg-black/70 flex flex-col justify-center items-center opacity-0 transition duration-300 transform translate-y-4 p-6"> |
| <h3 class="text-white text-xl font-bold mb-2">E-commerce Platform</h3> |
| <p class="text-gray-300 text-sm mb-4 text-center"> |
| A full-featured online store with payment integration and admin dashboard. |
| </p> |
| <div class="flex space-x-2"> |
| <span class="px-2 py-1 bg-blue-600 text-white text-xs rounded">React</span> |
| <span class="px-2 py-1 bg-green-600 text-white text-xs rounded">Node.js</span> |
| <span class="px-2 py-1 bg-yellow-600 text-white text-xs rounded">MongoDB</span> |
| </div> |
| <div class="mt-4 flex space-x-4"> |
| <a href="#" class="text-white hover:text-blue-300 transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="text-white hover:text-blue-300 transition"> |
| <i class="fas fa-external-link-alt"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 bg-white dark:bg-gray-800"> |
| <h3 class="font-semibold text-lg mb-2">E-commerce Platform</h3> |
| <p class="text-gray-600 dark:text-gray-300 text-sm"> |
| Online store with Stripe payment integration and admin dashboard. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="project-card rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300 relative"> |
| <div class="relative h-60"> |
| <img src="http://static.photos/technology/640x360/321" |
| alt="Project 2" class="w-full h-full object-cover"> |
| <div class="project-overlay absolute inset-0 bg-black/70 flex flex-col justify-center items-center opacity-0 transition duration-300 transform translate-y-4 p-6"> |
| <h3 class="text-white text-xl font-bold mb-2">Task Management App</h3> |
| <p class="text-gray-300 text-sm mb-4 text-center"> |
| A collaborative task management tool with real-time updates. |
| </p> |
| <div class="flex space-x-2"> |
| <span class="px-2 py-1 bg-blue-600 text-white text-xs rounded">React</span> |
| <span class="px-2 py-1 bg-purple-600 text-white text-xs rounded">GraphQL</span> |
| <span class="px-2 py-1 bg-green-600 text-white text-xs rounded">Firebase</span> |
| </div> |
| <div class="mt-4 flex space-x-4"> |
| <a href="#" class="text-white hover:text-blue-300 transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="text-white hover:text-blue-300 transition"> |
| <i class="fas fa-external-link-alt"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 bg-white dark:bg-gray-800"> |
| <h3 class="font-semibold text-lg mb-2">Task Management App</h3> |
| <p class="text-gray-600 dark:text-gray-300 text-sm"> |
| Collaborative tool with real-time updates and team features. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="project-card rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300 relative"> |
| <div class="relative h-60"> |
| <img src="http://static.photos/technology/640x360/654" |
| alt="Project 3" class="w-full h-full object-cover"> |
| <div class="project-overlay absolute inset-0 bg-black/70 flex flex-col justify-center items-center opacity-0 transition duration-300 transform translate-y-4 p-6"> |
| <h3 class="text-white text-xl font-bold mb-2">Social Media Dashboard</h3> |
| <p class="text-gray-300 text-sm mb-4 text-center"> |
| Analytics dashboard for tracking social media performance. |
| </p> |
| <div class="flex space-x-2"> |
| <span class="px-2 py-1 bg-blue-600 text-white text-xs rounded">Vue.js</span> |
| <span class="px-2 py-1 bg-green-600 text-white text-xs rounded">D3.js</span> |
| <span class="px-2 py-1 bg-yellow-600 text-white text-xs rounded">Express</span> |
| </div> |
| <div class="mt-4 flex space-x-4"> |
| <a href="#" class="text-white hover:text-blue-300 transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="text-white hover:text-blue-300 transition"> |
| <i class="fas fa-external-link-alt"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 bg-white dark:bg-gray-800"> |
| <h3 class="font-semibold text-lg mb-2">Social Media Dashboard</h3> |
| <p class="text-gray-600 dark:text-gray-300 text-sm"> |
| Analytics platform with data visualization for social metrics. |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="px-6 py-3 border-2 border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-gray-800 rounded-lg font-medium transition inline-flex items-center"> |
| View All Projects |
| <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="skills" class="py-16 bg-gray-50 dark:bg-gray-800"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-4 gradient-text">My Skills</h2> |
| <p class="text-center text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-16"> |
| I've worked with a variety of technologies in the web development world. |
| </p> |
| |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"> |
| |
| <div class="skill-item p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition duration-300 flex flex-col items-center"> |
| <div class="w-16 h-16 mb-4 flex items-center justify-center"> |
| <i class="fab fa-python text-4xl text-blue-500"></i> |
| </div> |
| <h3 class="font-semibold">Python</h3> |
| <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-3"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 95%"></div> |
| </div> |
| </div> |
| |
| <div class="skill-item p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition duration-300 flex flex-col items-center"> |
| <div class="w-16 h-16 mb-4 flex items-center justify-center"> |
| <i class="fab fa-node-js text-4xl text-green-500"></i> |
| </div> |
| <h3 class="font-semibold">Node.js</h3> |
| <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-3"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div class="skill-item p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition duration-300 flex flex-col items-center"> |
| <div class="w-16 h-16 mb-4 flex items-center justify-center"> |
| <i class="fas fa-robot text-4xl text-purple-500"></i> |
| </div> |
| <h3 class="font-semibold">Generative AI</h3> |
| <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-3"> |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| |
| <div class="skill-item p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition duration-300 flex flex-col items-center"> |
| <div class="w-16 h-16 mb-4 flex items-center justify-center"> |
| <i class="fas fa-database text-4xl text-blue-600"></i> |
| </div> |
| <h3 class="font-semibold">PostgreSQL</h3> |
| <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-3"> |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div class="skill-item p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition duration-300 flex flex-col items-center"> |
| <div class="w-16 h-16 mb-4 flex items-center justify-center"> |
| <i class="fas fa-brain text-4xl text-pink-500"></i> |
| </div> |
| <h3 class="font-semibold">RAG Systems</h3> |
| <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-3"> |
| <div class="bg-pink-500 h-2 rounded-full" style="width: 88%"></div> |
| </div> |
| </div> |
| |
| <div class="skill-item p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition duration-300 flex flex-col items-center"> |
| <div class="w-16 h-16 mb-4 flex items-center justify-center"> |
| <i class="fas fa-code text-4xl text-indigo-500"></i> |
| </div> |
| <h3 class="font-semibold">FastAPI/NestJS</h3> |
| <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-3"> |
| <div class="bg-indigo-500 h-2 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-16"> |
| <h3 class="text-xl font-semibold text-center mb-8">Workflow & Tools</h3> |
| <div class="flex flex-wrap justify-center gap-4"> |
| <div class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center"> |
| <i class="fab fa-git-alt text-gray-700 dark:text-gray-300 mr-2"></i> |
| <span>Git</span> |
| </div> |
| <div class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center"> |
| <i class="fab fa-github text-gray-700 dark:text-gray-300 mr-2"></i> |
| <span>GitHub</span> |
| </div> |
| <div class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center"> |
| <i class="fab fa-figma text-gray-700 dark:text-gray-300 mr-2"></i> |
| <span>Figma</span> |
| </div> |
| <div class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center"> |
| <i class="fas fa-terminal text-gray-700 dark:text-gray-300 mr-2"></i> |
| <span>VS Code</span> |
| </div> |
| <div class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center"> |
| <i class="fab fa-npm text-gray-700 dark:text-gray-300 mr-2"></i> |
| <span>npm</span> |
| </div> |
| <div class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center"> |
| <i class="fab fa-docker text-gray-700 dark:text-gray-300 mr-2"></i> |
| <span>Docker</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-4 gradient-text">Get In Touch</h2> |
| <p class="text-center text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-16"> |
| Have a project in mind or want to discuss potential opportunities? Feel free to reach out! |
| </p> |
| |
| <div class="flex flex-col lg:flex-row gap-12"> |
| <div class="lg:w-1/2"> |
| <form class="space-y-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium mb-1">Name</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 transition"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 transition"> |
| </div> |
| </div> |
| <div> |
| <label for="subject" class="block text-sm font-medium mb-1">Subject</label> |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 transition"> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium mb-1">Message</label> |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 transition"></textarea> |
| </div> |
| <button type="submit" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition shadow-lg w-full"> |
| Send Message |
| </button> |
| </form> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl shadow-md h-full"> |
| <h3 class="text-xl font-semibold mb-6">Contact Information</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start space-x-4"> |
| <div class="p-3 bg-blue-100 dark:bg-blue-900 rounded-full"> |
| <i class="fas fa-map-marker-alt text-blue-600 dark:text-blue-300"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Location</h4> |
| <p class="text-gray-600 dark:text-gray-300">Coimbatore, Tamil Nadu</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start space-x-4"> |
| <div class="p-3 bg-green-100 dark:bg-green-900 rounded-full"> |
| <i class="fas fa-envelope text-green-600 dark:text-green-300"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Email</h4> |
| <p class="text-gray-600 dark:text-gray-300">bennisondevadoss@gmail.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start space-x-4"> |
| <div class="p-3 bg-purple-100 dark:bg-purple-900 rounded-full"> |
| <i class="fas fa-phone-alt text-purple-600 dark:text-purple-300"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Phone</h4> |
| <p class="text-gray-600 dark:text-gray-300">+91 6379705181</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="font-medium mb-4">Follow Me</h4> |
| <div class="flex space-x-4"> |
| <a href="https://linkedin.com/in/bennisondevadoss" target="_blank" class="p-3 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-blue-100 dark:hover:bg-blue-900 transition"> |
| <i class="fab fa-linkedin-in text-gray-700 dark:text-gray-300"></i> |
| </a> |
| <a href="https://github.com/BennisonDevadoss" target="_blank" class="p-3 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-blue-100 dark:hover:bg-blue-900 transition"> |
| <i class="fab fa-github text-gray-700 dark:text-gray-300"></i> |
| </a> |
| <a href="https://medium.com/@bennisondevadoss" target="_blank" class="p-3 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-blue-100 dark:hover:bg-blue-900 transition"> |
| <i class="fab fa-medium text-gray-700 dark:text-gray-300"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-100 dark:bg-gray-800 py-8"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <a href="#" class="text-2xl font-bold gradient-text">Portfolio</a> |
| <p class="text-gray-600 dark:text-gray-300 mt-2"> |
| © 2023 My Portfolio. All rights reserved. |
| </p> |
| </div> |
| |
| <div class="flex space-x-6"> |
| <a href="#home" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Home</a> |
| <a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">About</a> |
| <a href="#projects" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Projects</a> |
| <a href="#contact" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Contact</a> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-8 text-center text-gray-500 dark:text-gray-400 text-sm"> |
| <p>Made with <i class="fas fa-heart text-red-500"></i> by Bennison Devadoss</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="back-to-top" class="fixed bottom-8 right-8 p-3 bg-blue-600 text-white rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| <script> |
| |
| const themeToggle = document.getElementById('theme-toggle'); |
| const html = document.documentElement; |
| |
| |
| const savedTheme = localStorage.getItem('theme') || |
| (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); |
| |
| |
| if (savedTheme === 'dark') { |
| html.classList.add('dark'); |
| } else { |
| html.classList.remove('dark'); |
| } |
| |
| |
| themeToggle.addEventListener('click', () => { |
| html.classList.toggle('dark'); |
| const theme = html.classList.contains('dark') ? 'dark' : 'light'; |
| localStorage.setItem('theme', theme); |
| }); |
| |
| |
| const menuToggle = document.getElementById('menu-toggle'); |
| const navMenu = document.getElementById('nav-menu'); |
| |
| menuToggle.addEventListener('click', () => { |
| navMenu.classList.toggle('active'); |
| }); |
| |
| |
| document.querySelectorAll('#nav-menu a').forEach(link => { |
| link.addEventListener('click', () => { |
| navMenu.classList.remove('active'); |
| }); |
| }); |
| |
| |
| 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' |
| }); |
| } |
| }); |
| }); |
| |
| |
| const backToTopButton = document.getElementById('back-to-top'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('opacity-0', 'invisible'); |
| backToTopButton.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopButton.classList.remove('opacity-100', 'visible'); |
| backToTopButton.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| |
| backToTopButton.addEventListener('click', () => { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| const animateOnScroll = () => { |
| const elements = document.querySelectorAll('.animate-fade-in, .animate-slide-up, .animate-float'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-fade-in', 'animate-slide-up', 'animate-float'); |
| observer.unobserve(entry.target); |
| } |
| }); |
| }, { |
| threshold: 0.1 |
| }); |
| |
| elements.forEach(element => { |
| observer.observe(element); |
| }); |
| }; |
| |
| |
| document.addEventListener('DOMContentLoaded', animateOnScroll); |
| </script> |
| </body> |
| </html> |
