Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Terence Musoni - Strategic Policy & Governance</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"> | |
| <style> | |
| .hero-image { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2160&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 90vh; | |
| } | |
| .pillar-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .pillar-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .headshot { | |
| border-radius: 50%; | |
| border: 5px solid #f8fafc; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .active-nav::after { | |
| width: 100%; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-left: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 4px; | |
| height: 100%; | |
| background-color: #3b82f6; | |
| border-radius: 2px; | |
| } | |
| .timeline-dot { | |
| position: absolute; | |
| left: -8px; | |
| top: 0; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background-color: #3b82f6; | |
| border: 4px solid #eff6ff; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold text-blue-600">Terence Musoni</a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link active-nav">HOME</a> | |
| <a href="#about" class="nav-link">ABOUT ME</a> | |
| <a href="#pillars" class="nav-link">STRATEGIC PILLARS</a> | |
| <a href="#resume" class="nav-link">RESUME</a> | |
| <a href="#contact" class="nav-link">CONTACT</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg"> | |
| <a href="#home" class="block py-2 border-b border-gray-100">HOME</a> | |
| <a href="#about" class="block py-2 border-b border-gray-100">ABOUT ME</a> | |
| <a href="#pillars" class="block py-2 border-b border-gray-100">STRATEGIC PILLARS</a> | |
| <a href="#resume" class="block py-2 border-b border-gray-100">RESUME</a> | |
| <a href="#contact" class="block py-2">CONTACT</a> | |
| </div> | |
| </nav> | |
| <!-- Home Section --> | |
| <section id="home" class="hero-image flex items-center justify-center text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Terence Musoni</h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold mb-8">Strategic Policy & Governance for Frontier Technologies</h2> | |
| <p class="text-lg md:text-xl max-w-3xl mx-auto mb-10"> | |
| I build the bridges between groundbreaking innovation and responsible, international governance. With over 14 years of experience mastering complex regulatory landscapes in the high-stakes medical technology sector, I specialize in creating the robust frameworks necessary for the safe and ethical deployment of world-changing technology. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#pillars" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300"> | |
| Explore My Approach | |
| </a> | |
| <a href="#resume" class="bg-transparent hover:bg-white hover:text-blue-600 text-white font-bold py-3 px-6 border-2 border-white rounded-lg transition duration-300"> | |
| View My Resume | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">From Regulated Tech to a Regulated Future</h2> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/3 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1583864697781-a88072735e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Terence Musoni" class="headshot w-64 h-64 object-cover"> | |
| </div> | |
| <div class="lg:w-2/3"> | |
| <p class="text-lg mb-6"> | |
| For more than a decade, I have operated at the intersection of technological advancement and rigorous international regulation. My career has been dedicated to ensuring that complex, life-impacting products not only meet but exceed the highest standards of safety, quality, and efficacy across global markets—from the EU and North America to Asia. | |
| </p> | |
| <p class="text-lg mb-8"> | |
| I've learned that true innovation doesn't happen in a vacuum. It requires a robust, proactive, and intelligent governance structure. It involves building systems from the ground up, engaging with regulators as partners, and creating surveillance mechanisms that learn from real-world performance to mitigate risk continuously. | |
| </p> | |
| <p class="text-lg font-semibold"> | |
| I am now driven to apply this playbook to the defining technology of our time: Artificial Intelligence. My mission is to help Anthropic navigate the emerging global policy landscape, build trust with policymakers and the public, and establish the gold standard for safe and beneficial AI systems. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-20"> | |
| <h3 class="text-2xl font-bold text-center mb-10">Core Competencies</h3> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="text-blue-600 mb-3"> | |
| <i class="fas fa-globe text-3xl"></i> | |
| </div> | |
| <h4 class="font-bold text-lg mb-2">Global Regulatory Analysis</h4> | |
| <p class="text-gray-600"> | |
| Deconstructing and interpreting complex, multi-jurisdictional legal and regulatory frameworks (e.g., EU MDR, MDSAP) to guide strategy and ensure compliance. | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="text-blue-600 mb-3"> | |
| <i class="fas fa-sitemap text-3xl"></i> | |
| </div> | |
| <h4 class="font-bold text-lg mb-2">Governance & Framework Development</h4> | |
| <p class="text-gray-600"> | |
| Architecting, implementing, and managing end-to-end quality and safety systems that translate policy into operational reality. | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="text-blue-600 mb-3"> | |
| <i class="fas fa-shield-alt text-3xl"></i> | |
| </div> | |
| <h4 class="font-bold text-lg mb-2">Proactive Risk & Safety Surveillance</h4> | |
| <p class="text-gray-600"> | |
| Designing and leading post-deployment monitoring programs to identify, investigate, and mitigate potential harms. | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="text-blue-600 mb-3"> | |
| <i class="fas fa-handshake text-3xl"></i> | |
| </div> | |
| <h4 class="font-bold text-lg mb-2">International Stakeholder Engagement</h4> | |
| <p class="text-gray-600"> | |
| Serving as the primary liaison for regulatory bodies (FDA, Health Canada, EU Notified Bodies), auditors, and international partners. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Strategic Pillars Section --> | |
| <section id="pillars" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Strategic Pillars</h2> | |
| <p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-16"> | |
| This section reframes my experience into case studies relevant to AI policy. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Pillar 1 --> | |
| <div class="pillar-card bg-white p-8 rounded-lg shadow-md"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-chess-board text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Architecting International Governance Frameworks</h3> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-gray-700 mb-2">The Challenge:</h4> | |
| <p class="text-gray-600"> | |
| When new, complex international regulations like the EU's Medical Device Regulation (MDR) were introduced, global organizations needed to fundamentally redesign their governance, documentation, and safety processes to remain compliant and competitive. | |
| </p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-gray-700 mb-2">My Action:</h4> | |
| <p class="text-gray-600"> | |
| As a lead consultant at companies like Mevion Medical Systems and Beckman-Coulter, I architected and implemented new Quality Management Systems (QMS) from the ground up. This involved creating new procedures, outlining reporting requirements for every jurisdiction, developing decision-trees for action, and training cross-functional teams on the new operational reality. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-700 mb-2">The AI Parallel:</h4> | |
| <p class="text-gray-600"> | |
| This is precisely the work required to operationalize principles from the EU AI Act or the NIST AI Risk Management Framework. My experience is in taking high-level legal requirements and building the tangible, auditable systems that ensure an organization's products and practices are verifiably safe and compliant on a global scale. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Pillar 2 --> | |
| <div class="pillar-card bg-white p-8 rounded-lg shadow-md"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-binoculars text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Leading Proactive, Post-Deployment Safety Surveillance</h3> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-gray-700 mb-2">The Challenge:</h4> | |
| <p class="text-gray-600"> | |
| A product's safety profile isn't static at launch. It's critical to continuously monitor its performance in the real world, gather data, and respond to unforeseen events or "malfunctions." | |
| </p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-gray-700 mb-2">My Action:</h4> | |
| <p class="text-gray-600"> | |
| At Terumo BCT, Beckman-Coulter, and Philips, I led Post-Market Surveillance (PMS) programs. I created the plans (PMSP) and wrote the reports (PSUR) that analyzed complaint data, scientific literature, and clinical feedback. I evaluated and investigated potential adverse events, determined their root cause (CAPA), and ensured timely reporting to global competent authorities. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-700 mb-2">The AI Parallel:</h4> | |
| <p class="text-gray-600"> | |
| This is a direct analogue to the robust model monitoring and incident response required for AI systems. My work involved creating the very feedback loops that are essential for AI safety: monitor for unexpected outputs, investigate why they occurred, mitigate the harm, and report transparently to build trust and inform future development. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Pillar 3 --> | |
| <div class="pillar-card bg-white p-8 rounded-lg shadow-md"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-handshake text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Navigating Global Audits & High-Stakes Engagement</h3> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-gray-700 mb-2">The Challenge:</h4> | |
| <p class="text-gray-600"> | |
| Earning and maintaining the trust of international regulators and partners requires flawless preparation, deep subject matter expertise, and transparent communication. | |
| </p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold text-gray-700 mb-2">My Action:</h4> | |
| <p class="text-gray-600"> | |
| At Allergan and Alcon, I managed the entire site audit program, hosting regulators from the FDA, Health Canada, and EU Notified Bodies (DEKRA, BSI). I was the primary point of contact for quality and compliance issues across EMEA, LACAN, and ASIA. I led for-cause supplier audits internationally, including in Yokohama, Japan (Showa Denko), ensuring partners met our rigorous standards. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-700 mb-2">The AI Parallel:</h4> | |
| <p class="text-gray-600"> | |
| An International Policy Advisor must be a credible and trusted voice for the company. I have a proven track record of being that person in high-pressure situations. I am adept at communicating complex technical and process information to regulatory bodies, defending strategic decisions, and holding global partners accountable to shared safety standards. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resume Section --> | |
| <section id="resume" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Resume for Anthropic</h2> | |
| <div class="max-w-4xl mx-auto bg-gray-50 p-8 rounded-lg shadow-sm"> | |
| <div class="text-center mb-10"> | |
| <h1 class="text-3xl font-bold mb-2">TERENCE MUSONI</h1> | |
| <p class="text-lg text-gray-600"> | |
| Fort Worth, TX • 214-309-8175 • tmusoni81@gmail.com • | |
| <a href="#" class="text-blue-600 hover:underline">Portfolio Website</a> • | |
| <a href="#" class="text-blue-600 hover:underline">LinkedIn Profile</a> | |
| </p> | |
| </div> | |
| <div class="mb-10"> | |
| <h2 class="text-xl font-bold mb-2 uppercase tracking-wider text-gray-700">STRATEGIC POLICY & GOVERNANCE PROFESSIONAL</h2> | |
| <p class="text-gray-600"> | |
| A seasoned governance and regulatory affairs professional with over 14 years of experience building and managing robust compliance and safety frameworks for complex technologies in highly regulated global markets. Proven expertise in translating dense international regulations (EU MDR, ISO 13485) into actionable, auditable corporate policy and procedure. Eager to apply a deep background in risk management, post-deployment surveillance, and regulator engagement to the challenges of AI safety and policy at Anthropic. | |
| </p> | |
| </div> | |
| <div class="mb-10"> | |
| <h2 class="text-xl font-bold mb-4 uppercase tracking-wider text-gray-700">CORE COMPETENCIES</h2> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>International Policy Analysis: Expert in navigating multi-jurisdictional regulations (EU, North America, Asia).</li> | |
| <li>AI Governance & Risk Management: Deep experience in QMS and Risk Management (ISO 14971), directly translatable to frameworks like the NIST AI RMF.</li> | |
| <li>Post-Deployment Safety & Incident Response: Led Post-Market Surveillance (PMS) and Complaint/CAPA systems, analogous to AI model monitoring and red-teaming.</li> | |
| </ul> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>Stakeholder & Regulator Engagement: Served as primary liaison for regulators (FDA, Health Canada) and EU Notified Bodies (BSI, TUV).</li> | |
| <li>Audit & Accountability: Led and managed international audit programs, including for-cause supplier audits.</li> | |
| <li>Cross-Functional Leadership: Coordinated with technical, clinical, and leadership teams to achieve safety and compliance goals.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mb-10"> | |
| <h2 class="text-xl font-bold mb-4 uppercase tracking-wider text-gray-700">PROFESSIONAL EXPERIENCE</h2> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <h3 class="text-lg font-bold mb-1">QMS & Post-Market Surveillance Lead (Contract)</h3> | |
| <p class="text-gray-500 mb-2">Mevion Medical Systems & Beckman-Coulter | 2020 – Current</p> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>Architected comprehensive Post-Market Surveillance (PMS) frameworks to align with new, complex international regulations (EU MDR), establishing a model for proactive safety monitoring.</li> | |
| <li>Authored strategic governance documents, including PMS Plans and Periodic Safety Update Reports (PSURs), to support technical documentation and certification with EU Notified Bodies (BSI).</li> | |
| <li>Translated complex regulatory requirements into clear operational workflows and decision-trees for reporting across multiple jurisdictions.</li> | |
| <li>Led training of personnel in new safety and surveillance processes, ensuring enterprise-wide adoption and compliance.</li> | |
| </ul> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <h3 class="text-lg font-bold mb-1">Post-Market Surveillance & Regulatory Consultant (Contract)</h3> | |
| <p class="text-gray-500 mb-2">Terumo BCT | 2019 – 2020</p> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>Directed the review of technical documentation and clinical evaluation reports for alignment with EU MDR, focusing on risk, intended use, and robustness of evidence.</li> | |
| <li>Analyzed complaint data and scientific literature to identify emerging risk signals, informing risk-benefit analyses and feeding back into product development.</li> | |
| <li>Created matrices for tracking and maintaining technical documentation, ensuring continuous compliance for a diverse portfolio of medical devices.</li> | |
| </ul> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <h3 class="text-lg font-bold mb-1">Global RAQA & Audit Program Manager</h3> | |
| <p class="text-gray-500 mb-2">Alcon/Novartis & Allergan Inc | 2013 – 2018</p> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>Managed quality and regulatory compliance for affiliates in Europe, Middle East, Africa (EMEA), Latin America/Canada (LACAN), and Asia, maintaining ISO certification across 21 countries.</li> | |
| <li>Served as the primary point of contact for global sites on all quality and compliance matters, developing multi-site procedures for CAPA, non-conformance, and product review.</li> | |
| <li>Hosted and managed audits from global competent authorities, including FDA (USA), TGA (Australia), MHRA (UK), and EU Notified Bodies (TUV, BSI).</li> | |
| <li>Developed and led audit responses, providing strategic guidance to international affiliates and ensuring timely, effective closure of findings.</li> | |
| <li>Responded directly to competent authority requests for information related to customer complaints and product recalls.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-bold mb-4 uppercase tracking-wider text-gray-700">EDUCATION & CERTIFICATION</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="font-bold">Bachelor of Arts, Evolution, Ecology & Organism Biology</h3> | |
| <p class="text-gray-600">The Ohio State University, Columbus, OH</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Certified EU MDR 2017/745 Auditor</h3> | |
| <p class="text-gray-600">Oriel Stat-a-Matrix</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Let's Connect</h2> | |
| <p class="text-xl text-gray-600 mb-12"> | |
| I'm passionate about building safe and reliable systems for the future. If you believe my experience in navigating complex regulatory environments could be valuable to Anthropic's mission, I would be delighted to speak with you. | |
| </p> | |
| </div> | |
| <div class="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md"> | |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope text-blue-600 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-semibold">Email</p> | |
| <a href="mailto:tmusoni81@gmail.com" class="text-blue-600 hover:underline">tmusoni81@gmail.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-phone text-blue-600 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-semibold">Phone</p> | |
| <a href="tel:2143098175" class="text-blue-600 hover:underline">214-309-8175</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fab fa-linkedin text-blue-600 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-semibold">LinkedIn</p> | |
| <a href="#" class="text-blue-600 hover:underline">linkedin.com/in/terence-musoni</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Send a Message</h3> | |
| <form id="contact-form" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> | |
| <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-md transition duration-300"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p>© 2023 Terence Musoni. All rights reserved.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-blue-400 transition duration-300"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="hover:text-blue-400 transition duration-300"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Update active nav link | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.classList.remove('active-nav'); | |
| }); | |
| if (targetId !== '#home') { | |
| this.classList.add('active-nav'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Update active nav link on scroll | |
| window.addEventListener('scroll', function() { | |
| const scrollPosition = window.scrollY; | |
| document.querySelectorAll('section').forEach(section => { | |
| const sectionTop = section.offsetTop - 100; | |
| const sectionHeight = section.offsetHeight; | |
| const sectionId = section.getAttribute('id'); | |
| if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.classList.remove('active-nav'); | |
| if (link.getAttribute('href') === `#${sectionId}`) { | |
| link.classList.add('active-nav'); | |
| } | |
| }); | |
| } | |
| }); | |
| }); | |
| // Form submission | |
| document.getElementById('contact-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const message = document.getElementById('message').value; | |
| // Here you would typically send the form data to a server | |
| // For this example, we'll just log it and show an alert | |
| console.log({ name, email, message }); | |
| alert('Thank you for your message! I will get back to you soon.'); | |
| // Reset form | |
| this.reset(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Smarticus81/resume" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |