index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Michael Bennett - Software Developer & Security Specialist</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .section-active {
            border-bottom: 2px solid #1e40af;
            color: #1e40af;
        }
        .nav-item {
            transition: all 0.3s ease;
            padding-bottom: 0.5rem;
            margin-bottom: -2px;
        }
        .nav-item:hover {
            border-bottom: 2px solid #93c5fd;
            color: #1e40af;
        }
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .skill-category {
            transition: transform 0.3s ease;
        }
        .skill-category:hover {
            transform: scale(1.03);
        }
        .contact-link {
            transition: all 0.3s ease;
        }
        .contact-link:hover {
            transform: translateY(-3px);
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
<!-- Header section with profile images on both sides -->
<header class="bg-gradient-to-r from-blue-700 to-blue-900 text-white py-12">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center justify-center md:space-x-8">
            <!-- Left profile image -->
            <div class="mb-6 md:mb-0">
                <img src="profile.jpg.jpg" alt="Michael Bennett" class="w-32 h-32 rounded-full border-4 border-white shadow-lg object-cover">
            </div>
            
            <!-- Center content -->
            <div class="text-center">
                <h1 class="text-4xl font-bold mb-4">Michael Bennett</h1>
                <p class="text-xl text-blue-200">Software Developer & Security Specialist</p>
                <div class="flex space-x-4 mt-6 justify-center">
                    <!-- Social links -->
                    <a href="https://github.com/mbennett-labs/mbennett-labs" target="_blank" rel="noopener noreferrer" class="bg-white text-blue-700 p-3 rounded-full hover:bg-blue-50 transition-colors">
                        <i class="fab fa-github text-xl"></i>
                    </a>
                    <a href="https://www.linkedin.com/in/michael-bennett-a29a93103/" target="_blank" rel="noopener noreferrer" class="bg-white text-blue-700 p-3 rounded-full hover:bg-blue-50 transition-colors">
                        <i class="fab fa-linkedin-in text-xl"></i>
                    </a>
                    <a href="mailto:mikebennett637@gmail.com" class="bg-white text-blue-700 p-3 rounded-full hover:bg-blue-50 transition-colors">
                        <i class="fas fa-envelope text-xl"></i>
                    </a>
                    <a href="tel:+12406598286" class="bg-white text-blue-700 p-3 rounded-full hover:bg-blue-50 transition-colors">
                        <i class="fas fa-phone-alt text-xl"></i>
                    </a>
                </div>
            </div>
            
            <!-- Right profile image -->
            <div class="mt-6 md:mt-0">
                <img src="profile2.jpg.jpg" alt="Michael Bennett" class="w-32 h-32 rounded-full border-4 border-white shadow-lg object-cover">
            </div>
        </div>
    </div>
</header>
    
    <!-- Navigation -->
    <nav class="bg-white shadow-md sticky top-0 z-10">
        <div class="container mx-auto px-4 py-4">
            <ul class="flex justify-center md:justify-start space-x-8 overflow-x-auto whitespace-nowrap">
                <li><a href="#about" class="nav-item section-active text-blue-700 font-medium">About</a></li>
                <li><a href="#experience" class="nav-item text-gray-600 font-medium">Experience</a></li>
                <li><a href="#education" class="nav-item text-gray-600 font-medium">Education</a></li>
                <li><a href="#skills" class="nav-item text-gray-600 font-medium">Skills</a></li>
                <li><a href="#projects" class="nav-item text-gray-600 font-medium">Projects</a></li>
                <li><a href="#contact" class="nav-item text-gray-600 font-medium">Contact</a></li>
            </ul>
        </div>
    </nav>
    
    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8">
        <!-- About Section -->
        <section id="about" class="mb-12">
            <h2 class="text-3xl font-bold text-blue-700 text-center mb-8">About Me</h2>
            <div class="bg-white rounded-lg shadow-md p-6 md:p-8">
                <p class="text-gray-700 text-lg text-center mb-6">
                    Software Developer and Security Specialist leveraging 10+ years of leadership experience 
                    from a successful culinary career, seeking blockchain, cybersecurity, or full-stack development opportunities.
                </p>
                <p class="text-gray-700 mb-6">
                    My unique background combines technical expertise from my BS in Software Development & Security 
                    with operational excellence managing high-pressure environments and cross-functional teams. I 
                    approach coding challenges with the same precision, efficiency, and problem-solving mindset that drove 
                    my culinary success.
                </p>
                
                <h3 class="text-2xl font-semibold text-center mb-6">Core Competencies:</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                        <div class="text-blue-700 mb-2"><i class="fas fa-shield-alt text-2xl"></i></div>
                        <h4 class="font-semibold">Cybersecurity & Secure Development</h4>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                        <div class="text-blue-700 mb-2"><i class="fas fa-layer-group text-2xl"></i></div>
                        <h4 class="font-semibold">Full Stack Development</h4>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                        <div class="text-blue-700 mb-2"><i class="fas fa-link text-2xl"></i></div>
                        <h4 class="font-semibold">Blockchain Technology</h4>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                        <div class="text-blue-700 mb-2"><i class="fas fa-brain text-2xl"></i></div>
                        <h4 class="font-semibold">AI & Machine Learning</h4>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                        <div class="text-blue-700 mb-2"><i class="fas fa-users text-2xl"></i></div>
                        <h4 class="font-semibold">Team Leadership</h4>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                        <div class="text-blue-700 mb-2"><i class="fas fa-chart-line text-2xl"></i></div>
                        <h4 class="font-semibold">Process Optimization</h4>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Experience Section -->
        <section id="experience" class="mb-12">
            <h2 class="text-3xl font-bold text-blue-700 text-center mb-8">Professional Experience</h2>
            <div class="bg-white rounded-lg shadow-md p-6 md:p-8">
                <!-- Job 1 -->
                <div class="mb-8">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4">
                        <div>
                            <h3 class="text-2xl font-semibold">Independent Technology Consultant</h3>
                            <p class="text-gray-600">Self-employed</p>
                        </div>
                        <div class="mt-2 md:mt-0">
                            <span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">
                                2020 - Present
                            </span>
                        </div>
                    </div>
                    <ul class="list-disc pl-5 text-gray-700 space-y-2">
                        <li>Developed personal projects to build practical experience in software development</li>
                        <li>Created automated solutions for small business inventory management</li>
                        <li>Designed and implemented custom database solutions for resource tracking</li>
                        <li>Built secure web applications focusing on data protection and best practices</li>
                    </ul>
                </div>
                
                <!-- Job 2 -->
                <div>
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4">
                        <div>
                            <h3 class="text-2xl font-semibold">Executive Chef & Kitchen Operations Manager</h3>
                            <p class="text-gray-600">The Passenger</p>
                        </div>
                        <div class="mt-2 md:mt-0">
                            <span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">
                                2018 - 2019
                            </span>
                        </div>
                    </div>
                    <ul class="list-disc pl-5 text-gray-700 space-y-2">
                        <li>Developed inventory tracking systems reducing waste by 15%</li>
                        <li>Managed team scheduling and resource allocation using data-driven decision making</li>
                        <li>Designed systematic workflows ensuring consistent quality delivery</li>
                        <li>Conducted regular data analysis of costs and sales trends</li>
                    </ul>
                </div>
            </div>
        </section>
        
        <!-- Education Section -->
        <section id="education" class="mb-12">
            <h2 class="text-3xl font-bold text-blue-700 text-center mb-8">Education</h2>
            <div class="bg-white rounded-lg shadow-md p-6 md:p-8">
                <!-- Degree 1 -->
                <div class="mb-8">
                    <div class="flex items-center mb-4">
                        <div class="text-blue-700 mr-4">
                            <i class="fas fa-graduation-cap text-3xl"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-semibold">Bachelor of Science</h3>
                            <p class="text-gray-700">Software Development and Security</p>
                            <p class="text-gray-600">University of Maryland Global Campus</p>
                            <p class="text-gray-600">Graduated May 2024 | GPA: 3.053</p>
                        </div>
                    </div>
                    <div class="ml-12">
                        <h4 class="font-semibold mb-2">Key Achievements:</h4>
                        <ul class="list-disc pl-5 text-gray-700 space-y-1">
                            <li>Straight A's in all technical courses for final three semesters</li>
                            <li>Excellence in advanced security and software development</li>
                        </ul>
                    </div>
                </div>
                
                <!-- Degree 2 -->
                <div>
                    <div class="flex items-center mb-4">
                        <div class="text-blue-700 mr-4">
                            <i class="fas fa-university text-3xl"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-semibold">Associate of Science</h3>
                            <p class="text-gray-700">Health Science</p>
                            <p class="text-gray-600">SUNY Broome Community College</p>
                            <p class="text-gray-600">2011-2014</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Skills Section -->
        <section id="skills" class="mb-12">
            <h2 class="text-3xl font-bold text-blue-700 text-center mb-8">Technical Skills</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Programming -->
                <div class="bg-white rounded-lg shadow-md p-6 skill-category">
                    <div class="text-center mb-4">
                        <div class="inline-block p-3 bg-blue-100 rounded-full mb-2">
                            <i class="fas fa-code text-blue-700 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">Programming</h3>
                    </div>
                    <p class="text-gray-700 text-center">
                        Python JavaScript SQL HTML/CSS TypeScript
                    </p>
                </div>
                
                <!-- Security -->
                <div class="bg-white rounded-lg shadow-md p-6 skill-category">
                    <div class="text-center mb-4">
                        <div class="inline-block p-3 bg-blue-100 rounded-full mb-2">
                            <i class="fas fa-shield-alt text-blue-700 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">Security</h3>
                    </div>
                    <p class="text-gray-700 text-center">
                        Network Security Vulnerability Assessment Risk Management Secure Coding
                    </p>
                </div>
                
                <!-- Blockchain/Web3 -->
                <div class="bg-white rounded-lg shadow-md p-6 skill-category">
                    <div class="text-center mb-4">
                        <div class="inline-block p-3 bg-blue-100 rounded-full mb-2">
                            <i class="fas fa-link text-blue-700 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">Blockchain/Web3</h3>
                    </div>
                    <p class="text-gray-700 text-center">
                        Smart Contracts Cryptocurrency NFT Infrastructure
                    </p>
                </div>
                
                <!-- AI/ML -->
                <div class="bg-white rounded-lg shadow-md p-6 skill-category">
                    <div class="text-center mb-4">
                        <div class="inline-block p-3 bg-blue-100 rounded-full mb-2">
                            <i class="fas fa-brain text-blue-700 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">AI/ML</h3>
                    </div>
                    <p class="text-gray-700 text-center">
                        AI Agents Swarm Intelligence Machine Learning Hugging Face Transformers
                    </p>
                </div>
            </div>
        </section>
        
        <!-- Projects Section -->
        <section id="projects" class="mb-12">
            <h2 class="text-3xl font-bold text-blue-700 text-center mb-8">Featured Projects</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Project 1 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden card">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">AI Model Development</h3>
                        <p class="text-gray-600 mb-2">Hugging Face</p>
                        <p class="text-gray-700 mb-4">
                            Exploring and developing machine learning models using Hugging Face's transformers library and model hub.
                        </p>
                        <div class="text-gray-600 font-medium mb-4">AI ML Python Transformers</div>
                        <ul class="list-disc pl-5 text-gray-700 space-y-1 mb-4">
                            <li>Implemented custom ML models</li>
                            <li>Explored transformer architectures</li>
                            <li>Published models on Hugging Face Hub</li>
                        </ul>
                        <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center mb-2">
                            View on Hugging Face
                            <i class="fas fa-external-link-alt ml-1"></i>
                        </a>
                        <a href="https://hackmd.io/9vZWdiLSSyunNNvpjY3UTw" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
                            Project Documentation
                            <i class="fas fa-file-alt ml-1"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Project 2 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden card">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Swarm Agents</h3>
                        <p class="text-gray-600 mb-2">Multi-Agent AI System</p>
                        <p class="text-gray-700 mb-4">
                            Modular, extensible framework for collaborative AI agent systems inspired by swarm intelligence in nature.
                        </p>
                        <div class="text-gray-600 font-medium mb-4">Python AI LLM Agents</div>
                        <ul class="list-disc pl-5 text-gray-700 space-y-1 mb-4">
                            <li>Designed triage system for intelligent query routing</li>
                            <li>Implemented specialist agents with unique capabilities</li>
                            <li>Created shared memory system for agent collaboration</li>
                        </ul>
                        <a href="https://github.com/mbennett-labs/mbennett-labs" class="text-blue-600 hover:text-blue-800 font-medium flex items-center mb-2">
                            View on GitHub
                            <i class="fab fa-github ml-1"></i>
                        </a>
                        <a href="https://hackmd.io/@xbBf1zpRTXaSATerS04iJg/HkeOGwd6yg" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
                            Project Documentation
                            <i class="fas fa-file-alt ml-1"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Project 3 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden card">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Celestia Light Node Implementation</h3>
                        <p class="text-gray-600 mb-2">Blockchain Infrastructure</p>
                        <p class="text-gray-700 mb-4">
                            Professional implementation of a Celestia Light Node with resource-optimized monitoring dashboard for VPS environments.
                        </p>
                        <div class="text-gray-600 font-medium mb-4">Go Node.js DevOps Blockchain</div>
                        <ul class="list-disc pl-5 text-gray-700 space-y-1 mb-4">
                            <li>Implemented resource constraints for shared VPS hosting</li>
                            <li>Created custom real-time monitoring dashboard</li>
                            <li>Applied professional systemd service management</li>
                        </ul>
                        <a href="https://github.com/mbennett-labs/celestia-node-project" class="text-blue-600 hover:text-blue-800 font-medium flex items-center mb-2">
                            View on GitHub
                            <i class="fab fa-github ml-1"></i>
                        </a>
                        <a href="https://hackmd.io/@xbBf1zpRTXaSATerS04iJg/By9lgOuaJg" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
                            Project Documentation
                            <i class="fas fa-file-alt ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="text-center mt-8">
                <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">View All Projects</a>
            </div>
        </section>
        
        <!-- Contact Section -->
        <section id="contact">
            <h2 class="text-3xl font-bold text-blue-700 text-center mb-8">Let's Connect</h2>
            <div class="bg-white rounded-lg shadow-md p-6 md:p-8">
                <p class="text-gray-700 text-center mb-8">
                    I'm currently open to new opportunities in software development and security. Let's discuss how my unique background can benefit your team.
                </p>
                
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <a href="mailto:mikebennett637@gmail.com" class="contact-link bg-white border border-gray-200 rounded-lg p-4 flex flex-col items-center hover:border-blue-300 hover:shadow-md transition-all duration-300">
                        <div class="bg-blue-100 text-blue-700 rounded-full p-3 mb-3">
                            <i class="fas fa-envelope text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Email</h3>
                        <p class="text-gray-700 text-center">mikebennett637@gmail.com</p>
                    </a>
                    
                    <a href="tel:+12406598286" class="contact-link bg-white border border-gray-200 rounded-lg p-4 flex flex-col items-center hover:border-blue-300 hover:shadow-md transition-all duration-300">
                        <div class="bg-blue-100 text-blue-700 rounded-full p-3 mb-3">
                            <i class="fas fa-phone-alt text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Phone</h3>
                        <p class="text-gray-700 text-center">(240) 659-8286</p>
                    </a>
                    
                    <a href="https://www.linkedin.com/in/michael-bennett-a29a93103/" class="contact-link bg-white border border-gray-200 rounded-lg p-4 flex flex-col items-center hover:border-blue-300 hover:shadow-md transition-all duration-300">
                        <div class="bg-blue-100 text-blue-700 rounded-full p-3 mb-3">
                            <i class="fab fa-linkedin-in text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">LinkedIn</h3>
                        <p class="text-gray-700 text-center">Connect with me</p>
                    </a>
                    
                    <a href="https://github.com/mbennett-labs/mbennett-labs" class="contact-link bg-white border border-gray-200 rounded-lg p-4 flex flex-col items-center hover:border-blue-300 hover:shadow-md transition-all duration-300">
                        <div class="bg-blue-100 text-blue-700 rounded-full p-3 mb-3">
                            <i class="fab fa-github text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">GitHub</h3>
                        <p class="text-gray-700 text-center">View my code</p>
                    </a>
                </div>
            </div>
        </section>
    </main>
    
    <!-- Footer -->
    <footer class="bg-blue-800 text-white py-6 mt-12">
        <div class="container mx-auto px-4 text-center">
            <p>&copy; 2025 Michael Bennett. All rights reserved.</p>
            <p class="mt-2 text-blue-200">
                <a href="https://github.com/mbennett-labs/mbennett-labs" class="hover:text-white transition-colors duration-300">https://github.com/mbennett-labs/mbennett-labs</a>
            </p>
        </div>
    </footer>
    
    <script>
        // Simple navigation highlighting
        document.addEventListener('DOMContentLoaded', () => {
            const sections = document.querySelectorAll('section');
            const navItems = document.querySelectorAll('.nav-item');
            
            // On scroll, highlight the corresponding nav item
            window.addEventListener('scroll', () => {
                let current = '';
                
                sections.forEach(section => {
                    const sectionTop = section.offsetTop;
                    const sectionHeight = section.clientHeight;
                    if (scrollY >= (sectionTop - 200)) {
                        current = section.getAttribute('id');
                    }
                });
                
                navItems.forEach(item => {
                    item.classList.remove('section-active', 'text-blue-700');
                    item.classList.add('text-gray-600');
                    if (item.getAttribute('href').substring(1) === current) {
                        item.classList.add('section-active', 'text-blue-700');
                        item.classList.remove('text-gray-600');
                    }
                });
            });
            
            // Smooth scrolling for navigation links
            navItems.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const targetId = this.getAttribute('href');
                    const targetSection = document.querySelector(targetId);
                    
                    window.scrollTo({
                        top: targetSection.offsetTop - 100,
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>