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