| | <!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> |
