Update pricings to match this.. // Service data with prices const services = { 'KRA Services': { price: 'Ksh 200', description: 'Comprehensive tax registration and filing services to keep you compliant with Kenyan regulations.', features: [ 'KRA PIN Registration (Ksh 200)', 'Filing Returns (Ksh 150)', 'Tax Compliance Certificates (Ksh 250)', 'iTax Assistance (Ksh 100)' ] }, 'HELB Assistance': { price: 'First-time: Ksh 400 | Subsequent: Ksh 200', description: 'Expert guidance through the HELB application process for both new and returning applicants.', features: [ 'First-time Applications (Ksh 400)', 'Subsequent Applications (Ksh 200)', 'Loan Repayment Plans (Ksh 300)', 'Clearance Certificates (Ksh 500)' ] }, 'Computer Maintenance': { price: 'Ksh 300-1500', description: 'Keep your systems running smoothly with professional maintenance and optimization services.', features: [ 'OS Installation (Ksh 1500)', 'Software Installations (Ksh 300-800)', 'Updates (Ksh 300)', 'Virus Removal (Ksh 700)' ] }, 'System Development': { price: 'Ksh 3,000+', description: 'Custom software solutions tailored to your specific needs and requirements.', features: [ 'Fullstack Development (Ksh 10,000+)', 'School Project Development (Ksh 3,000+)', 'Custom Projects for Students (Ksh 5,000+)', 'Database Integration (Ksh 10,000+)' ] }, 'Web Development': { price: 'Ksh 1,000+', description: 'Modern, responsive websites that showcase your brand and engage your audience.', features: [ 'UI/UX Design (Ksh 1,000+)', 'Personal Website/Portfolio (Ksh 3,000+)', 'Business Websites (Ksh 5,000+)', 'E-commerce Solutions (Ksh 10,000+)' ] }, 'Graphic Design': { price: 'Ksh 500-2,000', description: 'Creative visual solutions that communicate your message effectively.', features: [ 'Logo Design (Ksh 1,500)', 'Birthday/Wedding Cards (Ksh 800)', 'Posters (Ksh 1,200)', 'Social Media Graphics (Ksh 500)' ] - Follow Up Deployment
d348b22
verified
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Wambia Kennedy | Web Developer & Designer</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: { | |
| 'text-gradient': 'text-gradient 1.5s linear infinite', | |
| 'fade-in': 'fadeIn 1s ease-in-out', | |
| 'slide-up': 'slideUp 0.5s ease-out' | |
| }, | |
| keyframes: { | |
| 'text-gradient': { | |
| 'to': { 'background-position': '200% center' } | |
| }, | |
| 'fadeIn': { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' } | |
| }, | |
| 'slideUp': { | |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| transition: background-color 0.3s ease; | |
| } | |
| .dark body { | |
| background-color: #0f172a; | |
| } | |
| .gradient-text { | |
| background-image: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6); | |
| background-size: 200% auto; | |
| color: transparent; | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| } | |
| .gradient-bg { | |
| background-image: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .project-card:hover .project-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .animate-role { | |
| animation: fadeIn 1s ease-in-out; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| transition: width 0.3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .hamburger span { | |
| transition: all 0.3s ease; | |
| } | |
| .hamburger.active span:nth-child(1) { | |
| transform: translateY(8px) rotate(45deg); | |
| } | |
| .hamburger.active span:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .hamburger.active span:nth-child(3) { | |
| transform: translateY(-8px) rotate(-45deg); | |
| } | |
| .progress-bar { | |
| transition: width 1.5s ease-in-out; | |
| } | |
| .floating-label { | |
| transition: all 0.3s ease; | |
| } | |
| .floating-input:focus + .floating-label, | |
| .floating-input:not(:placeholder-shown) + .floating-label { | |
| transform: translateY(-24px); | |
| font-size: 0.75rem; | |
| color: #3b82f6; | |
| } | |
| .dark .floating-input:focus + .floating-label, | |
| .dark .floating-input:not(:placeholder-shown) + .floating-label { | |
| color: #8b5cf6; | |
| } | |
| .section { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.6s ease-out, transform 0.6s ease-out; | |
| } | |
| .section.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .social-icon:hover { | |
| transform: translateY(-3px); | |
| } | |
| .service-details-btn { | |
| transition: all 0.3s ease; | |
| } | |
| #service-modal { | |
| transition: opacity 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800 dark:text-gray-200"> | |
| <!-- Header & Navigation --> | |
| <header class="fixed w-full z-50 transition-all duration-300" id="header"> | |
| <nav class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold gradient-text">Wambia</a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link font-medium">Home</a> | |
| <a href="#about" class="nav-link font-medium">About</a> | |
| <a href="#skills" class="nav-link font-medium">Skills</a> | |
| <a href="#services" class="nav-link font-medium">Services</a> | |
| <a href="#projects" class="nav-link font-medium">Projects</a> | |
| <a href="#contact" class="nav-link font-medium">Contact</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:block"></i> | |
| </button> | |
| <button class="md:hidden hamburger" id="menu-toggle"> | |
| <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white mb-1.5"></span> | |
| <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white mb-1.5"></span> | |
| <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white"></span> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden fixed inset-0 bg-white dark:bg-gray-900 z-40 flex flex-col items-center justify-center opacity-0 pointer-events-none transition-all duration-300" id="mobile-menu"> | |
| <div class="flex flex-col items-center space-y-8"> | |
| <a href="#home" class="text-xl font-medium nav-link">Home</a> | |
| <a href="#about" class="text-xl font-medium nav-link">About</a> | |
| <a href="#skills" class="text-xl font-medium nav-link">Skills</a> | |
| <a href="#services" class="text-xl font-medium nav-link">Services</a> | |
| <a href="#projects" class="text-xl font-medium nav-link">Projects</a> | |
| <a href="#contact" class="text-xl font-medium nav-link">Contact</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-16"> | |
| <div class="absolute inset-0 gradient-bg opacity-10"></div> | |
| <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div> | |
| <div class="container mx-auto px-6 z-10"> | |
| <div class="flex flex-col items-center text-center md:text-left md:items-start md:flex-row md:justify-between"> | |
| <div class="md:w-1/2 animate-fade-in"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4">Hi, I'm <span class="gradient-text">Wambia Kennedy</span></h1> | |
| <div class="text-xl md:text-2xl mb-8 h-8"> | |
| <span id="role-text" class="animate-role font-medium">Web Developer | Graphic Designer | Tech Enthusiast</span> | |
| </div> | |
| <p class="text-lg mb-8 max-w-lg">I create beautiful, functional digital experiences that help businesses grow and individuals shine online.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-medium hover:opacity-90 transition-opacity shadow-lg">Hire Me</a> | |
| <a href="#services" class="px-8 py-3 border-2 border-blue-500 text-blue-500 dark:text-blue-400 dark:border-blue-400 rounded-full font-medium hover:bg-blue-500 hover:text-white dark:hover:bg-blue-900 transition-colors">View Services</a> | |
| </div> | |
| </div> | |
| <div class="mt-12 md:mt-0 md:w-2/5 relative"> | |
| <div class="relative"> | |
| <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 p-1 mx-auto"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" | |
| alt="Wambia Kennedy" | |
| class="w-full h-full rounded-full object-cover border-4 border-white dark:border-gray-800"> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 p-4 rounded-xl shadow-xl"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-code text-blue-500 dark:text-blue-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold">5+ Years</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Experience</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50 dark:bg-gray-900 section"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text">About Me</h2> | |
| <div class="flex flex-col lg:flex-row items-center lg:items-start lg:justify-between"> | |
| <div class="lg:w-5/12 mb-12 lg:mb-0"> | |
| <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-4">Who am I?</h3> | |
| <p class="mb-6">I'm a passionate web developer and designer with over 5 years of experience creating digital solutions that make an impact. I specialize in building responsive, user-friendly websites and applications that help businesses and individuals establish their online presence.</p> | |
| <p class="mb-6">My approach combines technical expertise with creative design thinking to deliver solutions that are not only functional but also visually appealing and engaging for users.</p> | |
| <p>When I'm not coding, you can find me exploring new technologies, contributing to open-source projects, or mentoring aspiring developers.</p> | |
| </div> | |
| </div> | |
| <div class="lg:w-6/12"> | |
| <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-6">Personal Info</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-1">Full Name</p> | |
| <p class="font-medium">Wambia Kennedy</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-1">Email</p> | |
| <p class="font-medium">hello@wambiadev.com</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-1">Location</p> | |
| <p class="font-medium">Nairobi, Kenya</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-1">Languages</p> | |
| <p class="font-medium">English, Swahili</p> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h4 class="text-lg font-semibold mb-4">Education</h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 dark:bg-blue-900 w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-graduation-cap text-blue-500 dark:text-blue-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Bachelor's in Computer Science</p> | |
| <p class="text-gray-500 dark:text-gray-400">University of Nairobi, 2018</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 dark:bg-purple-900 w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-certificate text-purple-500 dark:text-purple-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Advanced Web Development</p> | |
| <p class="text-gray-500 dark:text-gray-400">Moringa School, 2020</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="inline-block px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-medium hover:opacity-90 transition-opacity shadow-lg"> | |
| Download CV <i class="fas fa-download ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 section"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text">My Skills</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Skill 1 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4"> | |
| <i class="fab fa-html5 text-blue-500 dark:text-blue-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">HTML5</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Semantic markup, accessibility standards, SEO optimization.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-blue-500 h-2.5 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 2 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-4"> | |
| <i class="fab fa-css3-alt text-purple-500 dark:text-purple-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">CSS3</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Responsive design, animations, Flexbox, Grid, TailwindCSS.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-purple-500 h-2.5 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 3 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-4"> | |
| <i class="fab fa-js text-yellow-500 dark:text-yellow-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">JavaScript</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">ES6+, DOM manipulation, async programming, APIs.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-yellow-500 h-2.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 4 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4"> | |
| <i class="fab fa-react text-blue-500 dark:text-blue-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">React</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Hooks, Context API, Redux, Next.js, component architecture.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-blue-500 h-2.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 5 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-pink-100 dark:bg-pink-900 flex items-center justify-center mr-4"> | |
| <i class="fab fa-figma text-pink-500 dark:text-pink-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Figma</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">UI/UX design, prototyping, design systems, wireframing.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-pink-500 h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 6 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-4"> | |
| <i class="fas fa-server text-green-500 dark:text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Backend</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Node.js, Express, MongoDB, REST APIs, authentication.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-green-500 h-2.5 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 7 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4"> | |
| <i class="fab fa-python text-blue-500 dark:text-blue-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Python/Django</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Django framework, ORM, REST APIs, authentication.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-blue-500 h-2.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 8 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-4"> | |
| <i class="fab fa-php text-purple-500 dark:text-purple-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">PHP/Laravel</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Laravel framework, Eloquent ORM, Blade templating.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-purple-500 h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 9 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4"> | |
| <i class="fab fa-css3-alt text-blue-500 dark:text-blue-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Tailwind/Bootstrap</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Responsive design, utility-first CSS, component libraries.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-blue-500 h-2.5 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 10 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-4"> | |
| <i class="fab fa-github text-gray-500 dark:text-gray-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Git/GitHub</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Version control, collaboration workflows, CI/CD pipelines.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-gray-500 h-2.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 11 --> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-4"> | |
| <i class="fas fa-code-branch text-green-500 dark:text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">REST APIs</h3> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Design, development, documentation, and integration.</p> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar bg-green-500 h-2.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50 dark:bg-gray-900 section"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text">My Services</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-6"> | |
| <i class="fas fa-file-invoice-dollar text-blue-500 dark:text-blue-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">KRA Services</h3> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Comprehensive tax registration and filing services to keep you compliant with Kenyan regulations.</p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 dark:text-blue-400 mr-2"></i> | |
| <span>KRA PIN Registration</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 dark:text-blue-400 mr-2"></i> | |
| <span>Filing Returns</span> | |
| </li> | |
| </ul> | |
| <button class="mt-4 px-4 py-2 border border-blue-500 text-blue-500 dark:text-blue-400 rounded-full font-medium hover:bg-blue-500 hover:text-white dark:hover:bg-blue-900 transition-colors service-details-btn"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md transition-all duration-300 group"> | |
| <div class="w-14 h-14 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mb-6"> | |
| <i class="fas fa-graduation-cap text-purple-500 dark:text-purple-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">HELB Assistance</h3> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Expert guidance through the HELB application process for both new and returning applicants.</p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-500 dark:text-purple-400 mr-2"></i> | |
| <span class="relative"> | |
| First-time Applications | |
| </span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-500 dark:text-purple-400 mr-2"></i> | |
| <span class="relative"> | |
| Subsequent Applications | |
| </span> | |
| </li> | |
| </ul> | |
| <button class="mt-4 px-4 py-2 border border-blue-500 text-blue-500 dark:text-blue-400 rounded-full font-medium hover:bg-blue-500 hover:text-white dark:hover:bg-blue-900 transition-colors service-details-btn"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mb-6"> | |
| <i class="fas fa-laptop-code text-green-500 dark:text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Computer Maintenance</h3> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Keep your systems running smoothly with professional maintenance and optimization services.</p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i> | |
| <span>OS Installation</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i> | |
| <span>Software Installations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i> | |
| <span>Updates</span> | |
| </li> | |
| </ul> | |
| <button class="mt-4 px-4 py-2 border border-blue-500 text-blue-500 dark:text-blue-400 rounded-full font-medium hover:bg-blue-500 hover:text-white dark:hover:bg-blue-900 transition-colors service-details-btn"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mb-6"> | |
| <i class="fas fa-project-diagram text-yellow-500 dark:text-yellow-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">System Development</h3> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Custom software solutions tailored to your specific needs and requirements.</p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-500 dark:text-yellow-400 mr-2"></i> | |
| <span>Fullstack Development</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-500 dark:text-yellow-400 mr-2"></i> | |
| <span>School Project Development</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-500 dark:text-yellow-400 mr-2"></i> | |
| <span>Custom Projects for Students</span> | |
| </li> | |
| </ul> | |
| <button class="mt-4 px-4 py-2 border border-blue-500 text-blue-500 dark:text-blue-400 rounded-full font-medium hover:bg-blue-500 hover:text-white dark:hover:bg-blue-900 transition-colors service-details-btn"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-pink-100 dark:bg-pink-900 flex items-center justify-center mb-6"> | |
| <i class="fas fa-globe text-pink-500 dark:text-pink-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Web Development</h3> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Modern, responsive websites that showcase your brand and engage your audience.</p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-pink-500 dark:text-pink-400 mr-2"></i> | |
| <span>UI/UX Design</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-pink-500 dark:text-pink-400 mr-2"></i> | |
| <span>Personal Website / Portfolio</span> | |
| </li> | |
| </ul> | |
| <button class="mt-4 px-4 py-2 border border-blue-500 text-blue-500 dark:text-blue-400 rounded-full font-medium hover:bg-blue-500 hover:text-white dark:hover:bg-blue-900 transition-colors service-details-btn"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mb-6"> | |
| <i class="fas fa-paint-brush text-indigo-500 dark:text-indigo-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Graphic Design</h3> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">Creative visual solutions that communicate your message effectively.</p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-indigo-500 dark:text-indigo-400 mr-2"></i> | |
| <span>Logo Design</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-indigo-500 dark:text-indigo-400 mr-2"></i> | |
| <span>Birthday/Wedding Cards</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-indigo-500 dark:text-indigo-400 mr-2"></i> | |
| <span>Posters</span> | |
| </li> | |
| </ul> | |
| <button class="mt-4 px-4 py-2 border border-blue-500 text-blue-500 dark:text-blue-400 rounded-full font-medium hover:bg-blue-500 hover:text-white dark:hover:bg-blue-900 transition-colors service-details-btn"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 section"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text">My Projects</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden relative"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="E-commerce Platform" | |
| class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">E-commerce Platform</h3> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">A full-featured online store with product management, cart functionality, and secure payments.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-500 dark:text-blue-400 text-sm rounded-full">React</span> | |
| <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-500 dark:text-purple-400 text-sm rounded-full">Node.js</span> | |
| <span class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-500 dark:text-green-400 text-sm rounded-full">MongoDB</span> | |
| </div> | |
| </div> | |
| <div class="project-overlay absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 flex items-end p-6 transition-all duration-300"> | |
| <div class="w-full"> | |
| <a href="#" class="block w-full mb-3 px-4 py-2 bg-white text-gray-800 rounded-full text-center font-medium hover:bg-gray-100 transition-colors"> | |
| Live Demo <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| <a href="#" class="block w-full px-4 py-2 bg-gray-800 text-white rounded-full text-center font-medium hover:bg-gray-700 transition-colors"> | |
| GitHub <i class="fab fa-github ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden relative"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Portfolio Website" | |
| class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Portfolio Website</h3> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">A sleek, responsive portfolio showcasing creative work with smooth animations.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-500 dark:text-blue-400 text-sm rounded-full">HTML</span> | |
| <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-500 dark:text-purple-400 text-sm rounded-full">CSS</span> | |
| <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-500 dark:text-yellow-400 text-sm rounded-full">JavaScript</span> | |
| </div> | |
| </div> | |
| <div class="project-overlay absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 flex items-end p-6 transition-all duration-300"> | |
| <div class="w-full"> | |
| <a href="#" class="block w-full mb-3 px-4 py-2 bg-white text-gray-800 rounded-full text-center font-medium hover:bg-gray-100 transition-colors"> | |
| Live Demo <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| <a href="#" class="block w-full px-4 py-2 bg-gray-800 text-white rounded-full text-center font-medium hover:bg-gray-700 transition-colors"> | |
| GitHub <i class="fab fa-github ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden relative"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Task Management App" | |
| class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Task Management App</h3> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4">A productivity tool for organizing tasks with drag-and-drop functionality and team collaboration.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-500 dark:text-blue-400 text-sm rounded-full">React</span> | |
| <span class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-500 dark:text-green-400 text-sm rounded-full">Firebase</span> | |
| <span class="px-3 py-1 bg-red-100 dark:bg-red-900 text-red-500 dark:text-red-400 text-sm rounded-full">Redux</span> | |
| </div> | |
| </div> | |
| <div class="project-overlay absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 flex items-end p-6 transition-all duration-300"> | |
| <div class="w-full"> | |
| <a href="#" class="block w-full mb-3 px-4 py-2 bg-white text-gray-800 rounded-full text-center font-medium hover:bg-gray-100 transition-colors"> | |
| Live Demo <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| <a href="#" class="block w-full px-4 py-2 bg-gray-800 text-white rounded-full text-center font-medium hover:bg-gray-700 transition-colors"> | |
| GitHub <i class="fab fa-github ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block px-6 py-3 border-2 border-blue-500 text-blue-500 dark:text-blue-400 dark:border-blue-400 rounded-full font-medium hover:bg-blue-500 hover:text-white dark:hover:bg-blue-900 transition-colors"> | |
| View All Projects <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50 dark:bg-gray-900 section"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text">Get In Touch</h2> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4"> | |
| <i class="fas fa-envelope text-blue-500 dark:text-blue-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-1">Email</p> | |
| <p class="font-medium">hello@wambiadev.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-4"> | |
| <i class="fas fa-phone-alt text-purple-500 dark:text-purple-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-1">Phone</p> | |
| <p class="font-medium">+254 712 345 678</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-4"> | |
| <i class="fas fa-map-marker-alt text-green-500 dark:text-green-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400 mb-1">Location</p> | |
| <p class="font-medium">Nairobi, Kenya</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-lg font-semibold mb-4">Follow Me</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="social-icon w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-500 dark:text-blue-400 hover:text-white hover:bg-blue-500 transition-all"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="social-icon w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-500 dark:text-blue-400 hover:text-white hover:bg-blue-600 transition-all"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="social-icon w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-white hover:bg-gray-800 transition-all"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="social-icon w-10 h-10 rounded-full bg-pink-100 dark:bg-pink-900 flex items-center justify-center text-pink-500 dark:text-pink-400 hover:text-white hover:bg-pink-500 transition-all"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-6">Send Me a Message</h3> | |
| <form id="contact-form" class="space-y-6"> | |
| <div class="relative"> | |
| <input type="text" id="name" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 dark:border-gray-600 bg-transparent focus:border-blue-500 dark:focus:border-blue-400 outline-none" placeholder=" "> | |
| <label for="name" class="floating-label absolute left-4 top-2 text-gray-500 dark:text-gray-400 pointer-events-none">Your Name</label> | |
| </div> | |
| <div class="relative"> | |
| <input type="email" id="email" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 dark:border-gray-600 bg-transparent focus:border-blue-500 dark:focus:border-blue-400 outline-none" placeholder=" "> | |
| <label for="email" class="floating-label absolute left-4 top-2 text-gray-500 dark:text-gray-400 pointer-events-none">Your Email</label> | |
| </div> | |
| <div class="relative"> | |
| <input type="text" id="subject" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 dark:border-gray-600 bg-transparent focus:border-blue-500 dark:focus:border-blue-400 outline-none" placeholder=" "> | |
| <label for="subject" class="floating-label absolute left-4 top-2 text-gray-500 dark:text-gray-400 pointer-events-none">Subject</label> | |
| </div> | |
| <div class="relative"> | |
| <textarea id="message" rows="4" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 dark:border-gray-600 bg-transparent focus:border-blue-500 dark:focus:border-blue-400 outline-none" placeholder=" "></textarea> | |
| <label for="message" class="floating-label absolute left-4 top-2 text-gray-500 dark:text-gray-400 pointer-events-none">Your Message</label> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-medium hover:opacity-90 transition-opacity shadow-lg"> | |
| Send Message <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 bg-gray-100 dark:bg-gray-800"> | |
| <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">Wambia</a> | |
| <p class="text-gray-500 dark:text-gray-400 mt-2">Creating digital solutions that make an impact.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-pink-500 dark:hover:text-pink-400 transition-colors"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4 md:mb-0">© 2023 Wambia Kennedy. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Service Modals --> | |
| <div id="service-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl max-w-md w-full p-6 relative max-h-[90vh] overflow-y-auto"> | |
| <button id="close-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| <h3 class="text-2xl font-bold mb-2" id="modal-title">Service Title</h3> | |
| <div class="text-blue-500 dark:text-blue-400 font-medium mb-4" id="modal-price">Price: Ksh 0</div> | |
| <p class="text-gray-700 dark:text-gray-300 mb-4" id="modal-description">Service description</p> | |
| <ul class="space-y-2 mb-6" id="modal-features"></ul> | |
| <button class="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-medium hover:opacity-90 transition-opacity"> | |
| Book This Service <i class="fas fa-calendar-check ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Mobile menu toggle | |
| const menuToggle = document.getElementById('menu-toggle'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuToggle.addEventListener('click', () => { | |
| menuToggle.classList.toggle('active'); | |
| mobileMenu.classList.toggle('opacity-0'); | |
| mobileMenu.classList.toggle('pointer-events-none'); | |
| }); | |
| // Close mobile menu when clicking a link | |
| document.querySelectorAll('#mobile-menu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| menuToggle.classList.remove('active'); | |
| mobileMenu.classList.add('opacity-0'); | |
| mobileMenu.classList.add('pointer-events-none'); | |
| }); | |
| }); | |
| // Sticky header | |
| const header = document.getElementById('header'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 100) { | |
| header.classList.add('bg-white', 'dark:bg-gray-800', 'shadow-md'); | |
| } else { | |
| header.classList.remove('bg-white', 'dark:bg-gray-800', 'shadow-md'); | |
| } | |
| }); | |
| // Animated role text | |
| const roles = ["Web Developer", "Graphic Designer", "Tech Enthusiast"]; | |
| let currentRole = 0; | |
| const roleElement = document.getElementById('role-text'); | |
| function changeRole() { | |
| roleElement.classList.remove('animate-role'); | |
| void roleElement.offsetWidth; // Trigger reflow | |
| roleElement.classList.add('animate-role'); | |
| roleElement.textContent = roles[currentRole]; | |
| currentRole = (currentRole + 1) % roles.length; | |
| } | |
| setInterval(changeRole, 3000); | |
| // Scroll animations | |
| const sections = document.querySelectorAll('.section'); | |
| function checkScroll() { | |
| sections.forEach(section => { | |
| const sectionTop = section.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (sectionTop < windowHeight * 0.75) { | |
| section.classList.add('visible'); | |
| } | |
| }); | |
| } | |
| window.addEventListener('scroll', checkScroll); | |
| window.addEventListener('load', checkScroll); | |
| // Form submission | |
| const contactForm = document.getElementById('contact-form'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Here you would typically integrate with EmailJS or another service | |
| alert('Message sent successfully! I will get back to you soon.'); | |
| contactForm.reset(); | |
| }); | |
| // Initialize progress bars animation | |
| document.querySelectorAll('.progress-bar').forEach(bar => { | |
| // This is just for demo purposes - in a real app you might want to trigger this on scroll | |
| bar.style.width = bar.style.width; | |
| }); | |
| // Service modals | |
| const serviceModal = document.getElementById('service-modal'); | |
| const closeModal = document.getElementById('close-modal'); | |
| const modalTitle = document.getElementById('modal-title'); | |
| const modalPrice = document.getElementById('modal-price'); | |
| const modalDescription = document.getElementById('modal-description'); | |
| const modalFeatures = document.getElementById('modal-features'); | |
| // Service data with prices | |
| const services = { | |
| 'KRA Services': { | |
| price: 'Ksh 200', | |
| description: 'Comprehensive tax registration and filing services to keep you compliant with Kenyan regulations.', | |
| features: [ | |
| 'KRA PIN Registration (Ksh 200)', | |
| 'Filing Returns (Ksh 150)', | |
| 'Tax Compliance Certificates (Ksh 250)', | |
| 'iTax Assistance (Ksh 100)' | |
| ] | |
| }, | |
| 'HELB Assistance': { | |
| price: 'First-time: Ksh 400 | Subsequent: Ksh 200', | |
| description: 'Expert guidance through the HELB application process for both new and returning applicants.', | |
| features: [ | |
| 'First-time Applications (Ksh 400)', | |
| 'Subsequent Applications (Ksh 200)', | |
| 'Loan Repayment Plans (Ksh 300)', | |
| 'Clearance Certificates (Ksh 500)' | |
| ] | |
| }, | |
| 'Computer Maintenance': { | |
| price: 'Ksh 300-1500', | |
| description: 'Keep your systems running smoothly with professional maintenance and optimization services.', | |
| features: [ | |
| 'OS Installation (Ksh 1500)', | |
| 'Software Installations (Ksh 300-800)', | |
| 'Updates (Ksh 300)', | |
| 'Virus Removal (Ksh 700)' | |
| ] | |
| }, | |
| 'System Development': { | |
| price: 'Ksh 3,000+', | |
| description: 'Custom software solutions tailored to your specific needs and requirements.', | |
| features: [ | |
| 'Fullstack Development (Ksh 10,000+)', | |
| 'School Project Development (Ksh 3,000+)', | |
| 'Custom Projects for Students (Ksh 5,000+)', | |
| 'Database Integration (Ksh 10,000+)' | |
| ] | |
| }, | |
| 'Web Development': { | |
| price: 'Ksh 1,000+', | |
| description: 'Modern, responsive websites that showcase your brand and engage your audience.', | |
| features: [ | |
| 'UI/UX Design (Ksh 1,000+)', | |
| 'Personal Website/Portfolio (Ksh 3,000+)', | |
| 'Business Websites (Ksh 5,000+)', | |
| 'E-commerce Solutions (Ksh 10,000+)' | |
| ] | |
| }, | |
| 'Graphic Design': { | |
| price: 'Ksh 500-2,000', | |
| description: 'Creative visual solutions that communicate your message effectively.', | |
| features: [ | |
| 'Logo Design (Ksh 1,500)', | |
| 'Birthday/Wedding Cards (Ksh 800)', | |
| 'Posters (Ksh 1,200)', | |
| 'Social Media Graphics (Ksh 500)' | |
| ] | |
| } | |
| }; | |
| // Open modal when service details button is clicked | |
| document.querySelectorAll('.service-details-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| const card = btn.closest('.service-card'); | |
| const serviceTitle = card.querySelector('h3').textContent; | |
| const service = services[serviceTitle]; | |
| modalTitle.textContent = serviceTitle; | |
| modalPrice.textContent = `Price: ${service.price}`; | |
| modalDescription.textContent = service.description; | |
| // Clear previous features | |
| modalFeatures.innerHTML = ''; | |
| // Add new features | |
| service.features.forEach(feature => { | |
| const li = document.createElement('li'); | |
| li.className = 'flex items-center'; | |
| li.innerHTML = `<i class="fas fa-check-circle text-blue-500 dark:text-blue-400 mr-2"></i><span>${feature}</span>`; | |
| modalFeatures.appendChild(li); | |
| }); | |
| serviceModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| // Close modal | |
| closeModal.addEventListener('click', () => { | |
| serviceModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Close modal when clicking outside | |
| serviceModal.addEventListener('click', (e) => { | |
| if (e.target === serviceModal) { | |
| serviceModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| </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=mastermind-creat/latest-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |