ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda

"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 25-May-2025. Component is made with Tailwind v3.4. It is responsive.

Header Breadcrumb Pagination Range Slider

Author Code Master(Mfuranziza Dusabe Hamza)

Tailwind v3.4 1.9k 30

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ACODE MASTER - Full Stack Developer</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    * {
      font-family: 'Space Grotesk', sans-serif;
    }

.orbitron {
      font-family: 'Orbitron', monospace;
    }

body {
      background: radial-gradient(ellipse at center, #0f172a 0%, #020617 100%);
      overflow-x: hidden;
    }

/* Matrix Animation */
    .matrix-code {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.1;
    }

/* Cyber Grid */
    .cyber-grid {
      background-image: 
        linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
      background-size: 50px 50px;
      z-index: -1;
    }

/* Hologram Effect */
    .hologram {
      background: rgba(6, 182, 212, 0.05);
      border: 1px solid rgba(6, 182, 212, 0.3);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
    }

/* Neon Text */
    .neon-text {
      color: #06b6d4;
      text-shadow: 0 0 10px #06b6d4, 0 0 20px #06b6d4, 0 0 30px #06b6d4;
    }

/* Floating Orbs */
    .floating-orb {
      position: fixed;
      background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, transparent 70%);
      border-radius: 50%;
      animation: float 8s ease-in-out infinite;
      pointer-events: none;
      z-index: -1;
    }

@keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-30px) rotate(180deg); }
    }

/* Pulse Ring */
    .pulse-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 2px solid rgba(6, 182, 212, 0.5);
      border-radius: 50%;
      animation: pulse 3s ease-out infinite;
    }

@keyframes pulse {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
      }
    }

/* Glitch Effect */
    .glitch {
      position: relative;
      animation: glitch 2s linear infinite;
    }

@keyframes glitch {
      2%, 64% { transform: translate(2px, 0) skew(0deg); }
      4%, 60% { transform: translate(-2px, 0) skew(0deg); }
      62% { transform: translate(0, 0) skew(5deg); }
    }

/* Skill Bars */
    .skill-bar {
      background: rgba(6, 182, 212, 0.1);
      border: 1px solid rgba(6, 182, 212, 0.3);
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }

.skill-progress {
      background: linear-gradient(90deg, #06b6d4, #0891b2);
      height: 100%;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

.skill-progress::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      animation: shimmer 2s infinite;
    }

@keyframes shimmer {
      0% { left: -100%; }
      100% { left: 100%; }
    }

/* Project Cards */
    .project-card {
      background: rgba(6, 182, 212, 0.05);
      border: 1px solid rgba(6, 182, 212, 0.2);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

.project-card:hover {
      border-color: rgba(6, 182, 212, 0.5);
      box-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
      transform: translateY(-10px);
    }

/* Typing Animation */
    @keyframes typing {
      from { width: 0; }
      to { width: 100%; }
    }

@keyframes blink {
      50% { border-color: transparent; }
    }

.typing {
      width: 0;
      animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
      white-space: nowrap;
      overflow: hidden;
      border-right: 3px solid #06b6d4;
    }

/* Scroll Animations */
    .fade-in {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s ease;
    }

.fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

/* Contact Form */
    .cyber-input {
      background: rgba(6, 182, 212, 0.05);
      border: 1px solid rgba(6, 182, 212, 0.3);
      color: white;
      transition: all 0.3s ease;
    }

.cyber-input:focus {
      outline: none;
      border-color: #06b6d4;
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
    }

/* Smooth Scrolling */
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body class="text-white">
  
  <div class="matrix-code" id="matrix"></div>

<div class="fixed inset-0 cyber-grid"></div>

<div class="floating-orb w-20 h-20 top-10 left-10" style="animation-delay: 0s;"></div>
  <div class="floating-orb w-12 h-12 top-1/3 right-20" style="animation-delay: 2s;"></div>
  <div class="floating-orb w-16 h-16 bottom-20 left-1/4" style="animation-delay: 4s;"></div>
  <div class="floating-orb w-8 h-8 top-2/3 right-1/3" style="animation-delay: 6s;"></div>

<nav class="fixed top-0 w-full z-50 hologram">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="flex items-center justify-between h-20">
        <div class="orbitron text-2xl font-bold neon-text">
          &lt;ACODE.MASTER/&gt;
        </div>

<div class="hidden md:flex space-x-8">
          <a href="#home" class="hover:text-cyan-400 transition-all duration-300 relative group">HOME<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-400 group-hover:w-full transition-all duration-300"></span></a>
          <a href="#about" class="hover:text-cyan-400 transition-all duration-300 relative group">ABOUT<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-400 group-hover:w-full transition-all duration-300"></span></a>
          <a href="#skills" class="hover:text-cyan-400 transition-all duration-300 relative group">SKILLS<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-400 group-hover:w-full transition-all duration-300"></span></a>
          <a href="#projects" class="hover:text-cyan-400 transition-all duration-300 relative group">PROJECTS<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-400 group-hover:w-full transition-all duration-300"></span></a>
          <a href="#contact" class="hover:text-cyan-400 transition-all duration-300 relative group">CONTACT<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-400 group-hover:w-full transition-all duration-300"></span></a>
        </div>

<div id="mobile-nav" class="md:hidden hidden hologram">
      <div class="px-6 py-4 space-y-4">
        <a href="#home" class="block hover:text-cyan-400 transition-colors">HOME</a>
        <a href="#about" class="block hover:text-cyan-400 transition-colors">ABOUT</a>
        <a href="#skills" class="block hover:text-cyan-400 transition-colors">SKILLS</a>
        <a href="#projects" class="block hover:text-cyan-400 transition-colors">PROJECTS</a>
        <a href="#contact" class="block hover:text-cyan-400 transition-colors">CONTACT</a>
      </div>
    </div>
  </nav>

<section id="home" class="min-h-screen flex items-center justify-center relative z-10 pt-20">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="text-center space-y-8">
        <div class="relative inline-block mb-12">
          <div class="pulse-ring w-64 h-64"></div>
          <div class="pulse-ring w-64 h-64" style="animation-delay: 1s;"></div>
          <div class="relative w-64 h-64 mx-auto hologram rounded-full overflow-hidden">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm6wnb71UWRhZNmlaoBg4PHqhXBvbh9fWpiA&s" alt="Acode Master" class="w-full h-full object-cover" />
          </div>
        </div>

<div class="orbitron text-6xl md:text-8xl font-black mb-6">
          <span class="neon-text">ACODE</span><br />
          <span class="text-4xl md:text-6xl text-cyan-300">MASTER</span>
        </div>

<div class="text-2xl md:text-3xl text-cyan-200 mb-8">
          <div id="typing-text" class="h-12">Coding the Future, Mastering the Web</div>
        </div>

<div class="flex flex-col md:flex-row gap-6 justify-center items-center">
          <button class="hologram px-12 py-4 text-xl font-bold neon-text hover:bg-cyan-900/30 transition-all duration-300 transform hover:scale-105">
            HIRE ME NOW
          </button>
          <button class="border-2 border-cyan-400 px-12 py-4 text-xl font-bold text-cyan-400 hover:bg-cyan-400 hover:text-slate-900 transition-all duration-300 transform hover:scale-105">
            VIEW PROJECTS
          </button>
        </div>

<div class="grid grid-cols-3 gap-8 mt-16">
          <div class="hologram p-6 rounded-lg">
            <div class="orbitron text-4xl font-bold neon-text mb-2">5+</div>
            <div class="text-cyan-200">Years Experience</div>
          </div>
          <div class="hologram p-6 rounded-lg">
            <div class="orbitron text-4xl font-bold neon-text mb-2">77+</div>
            <div class="text-cyan-200">Projects Done</div>
          </div>
          <div class="hologram p-6 rounded-lg">
            <div class="orbitron text-4xl font-bold neon-text mb-2">98%</div>
            <div class="text-cyan-200">Success Rate</div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="about" class="py-20 relative z-10">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="orbitron text-5xl font-bold neon-text mb-4">ABOUT ME</h2>
        <div class="w-24 h-1 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto"></div>
      </div>

<div class="fade-in space-y-6">
          <h3 class="text-3xl font-bold text-cyan-300 mb-4">Full Stack Developer & Tech Innovator</h3>
          <p class="text-lg text-gray-300 leading-relaxed">
            Welcome to my digital realm! I'm ACODE MASTER, a passionate full-stack developer with over 5 years of experience crafting cutting-edge web solutions. My journey in the tech world has been fueled by an insatiable curiosity for emerging technologies and a commitment to delivering exceptional user experiences.
          </p>
          <p class="text-lg text-gray-300 leading-relaxed">
            From responsive front-end interfaces to robust back-end architectures, I specialize in creating seamless digital experiences that push the boundaries of what's possible on the web. My expertise spans across modern frameworks, cloud technologies, and innovative development practices.
          </p>

<div class="grid grid-cols-2 gap-6 mt-8">
            <div class="hologram p-4 rounded-lg text-center">
              <div class="text-2xl font-bold neon-text">Frontend</div>
              <div class="text-sm text-gray-400">React, Vue, Angular</div>
            </div>
            <div class="hologram p-4 rounded-lg text-center">
              <div class="text-2xl font-bold neon-text">Backend</div>
              <div class="text-sm text-gray-400">Node.js, Python, PHP</div>
            </div>
            <div class="hologram p-4 rounded-lg text-center">
              <div class="text-2xl font-bold neon-text">Database</div>
              <div class="text-sm text-gray-400">MongoDB, MySQL, PostgreSQL</div>
            </div>
            <div class="hologram p-4 rounded-lg text-center">
              <div class="text-2xl font-bold neon-text">Cloud</div>
              <div class="text-sm text-gray-400">AWS, Azure, GCP</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="skills" class="py-20 relative z-10">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="orbitron text-5xl font-bold neon-text mb-4">SKILLS</h2>
        <div class="w-24 h-1 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto"></div>
      </div>

<div class="grid md:grid-cols-2 gap-12">
        <div class="fade-in">
          <h3 class="text-2xl font-bold text-cyan-300 mb-8">Technical Skills</h3>
          <div class="space-y-6">
            <div>
              <div class="flex justify-between mb-2">
                <span class="text-white font-semibold">JavaScript / TypeScript</span>
                <span class="text-cyan-400">95%</span>
              </div>
              <div class="skill-bar h-3">
                <div class="skill-progress" style="width: 95%;"></div>
              </div>
            </div>

<div>
              <div class="flex justify-between mb-2">
                <span class="text-white font-semibold">React / Next.js</span>
                <span class="text-cyan-400">92%</span>
              </div>
              <div class="skill-bar h-3">
                <div class="skill-progress" style="width: 92%;"></div>
              </div>
            </div>

<div>
              <div class="flex justify-between mb-2">
                <span class="text-white font-semibold">Node.js / Express</span>
                <span class="text-cyan-400">88%</span>
              </div>
              <div class="skill-bar h-3">
                <div class="skill-progress" style="width: 88%;"></div>
              </div>
            </div>

<div>
              <div class="flex justify-between mb-2">
                <span class="text-white font-semibold">Python / Django</span>
                <span class="text-cyan-400">85%</span>
              </div>
              <div class="skill-bar h-3">
                <div class="skill-progress" style="width: 85%;"></div>
              </div>
            </div>

<div>
              <div class="flex justify-between mb-2">
                <span class="text-white font-semibold">Database Management</span>
                <span class="text-cyan-400">90%</span>
              </div>
              <div class="skill-bar h-3">
                <div class="skill-progress" style="width: 90%;"></div>
              </div>
            </div>
          </div>
        </div>

<div class="fade-in">
          <h3 class="text-2xl font-bold text-cyan-300 mb-8">Professional Skills</h3>
          <div class="space-y-6">
            <div>
              <div class="flex justify-between mb-2">
                <span class="text-white font-semibold">Problem Solving</span>
                <span class="text-cyan-400">98%</span>
              </div>
              <div class="skill-bar h-3">
                <div class="skill-progress" style="width: 98%;"></div>
              </div>
            </div>

<div>
              <div class="flex justify-between mb-2">
                <span class="text-white font-semibold">Team Leadership</span>
                <span class="text-cyan-400">87%</span>
              </div>
              <div class="skill-bar h-3">
                <div class="skill-progress" style="width: 87%;"></div>
              </div>
            </div>

<div>
              <div class="flex justify-between mb-2">
                <span class="text-white font-semibold">Project Management</span>
                <span class="text-cyan-400">91%</span>
              </div>
              <div class="skill-bar h-3">
                <div class="skill-progress" style="width: 91%;"></div>
              </div>
            </div>

<div>
              <div class="flex justify-between mb-2">
                <span class="text-white font-semibold">Client Communication</span>
                <span class="text-cyan-400">94%</span>
              </div>
              <div class="skill-bar h-3">
                <div class="skill-progress" style="width: 94%;"></div>
              </div>
            </div>

<div>
              <div class="flex justify-between mb-2">
                <span class="text-white font-semibold">Innovation</span>
                <span class="text-cyan-400">96%</span>
              </div>
              <div class="skill-bar h-3">
                <div class="skill-progress" style="width: 96%;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="projects" class="py-20 relative z-10">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="orbitron text-5xl font-bold neon-text mb-4">PROJECTS</h2>
        <div class="w-24 h-1 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto"></div>
      </div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div class="project-card p-6 rounded-lg fade-in">
          <div class="relative mb-4 overflow-hidden rounded-lg">
            <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Real-time Collaboration Tool" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-110" />
          </div>
          <h3 class="text-xl font-bold text-cyan-300 mb-2">Real-time Collaboration Tool</h3>
          <p class="text-gray-400 mb-4">Advanced collaboration platform with real-time editing, video conferencing, file sharing, and project management capabilities.</p>
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Next.js</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Socket.io</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Redis</span>
          </div>
          <button class="w-full hologram py-2 text-cyan-400 hover:text-white transition-colors">VIEW PROJECT</button>
        </div>
      </div>
    </div>
  </section>

<section id="contact" class="py-20 relative z-10">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="orbitron text-5xl font-bold neon-text mb-4">CONTACT</h2>
        <div class="w-24 h-1 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto"></div>
      </div>

<div class="grid md:grid-cols-2 gap-12">
        <div class="fade-in">
          <h3 class="text-2xl font-bold text-cyan-300 mb-8">Get In Touch</h3>
          <p class="text-lg text-gray-300 mb-8">
            Ready to transform your ideas into reality? Let's collaborate and build something extraordinary together. Whether you need a cutting-edge web application, mobile solution, or innovative tech consultation, I'm here to help bring your vision to life.
          </p>

<div class="space-y-6">
            <div class="flex items-center space-x-4">
              <div class="w-12 h-12 hologram rounded-full flex items-center justify-center">
                <span class="text-cyan-400 text-xl">📧</span>
              </div>
              <div>
                <div class="text-white font-semibold">Email</div>
                <div class="text-cyan-400">contact=mfuranzizahamza@gmail.com</div>
              </div>
            </div>

<div class="flex items-center space-x-4">
              <div class="w-12 h-12 hologram rounded-full flex items-center justify-center">
                <span class="text-cyan-400 text-xl">📱</span>
              </div>
              <div>
                <div class="text-white font-semibold">Phone</div>
                <div class="text-cyan-400">+250 796132866 </div>
              </div>
            </div>

<div class="flex items-center space-x-4">
              <div class="w-12 h-12 hologram rounded-full flex items-center justify-center">
                <span class="text-cyan-400 text-xl">📍</span>
              </div>
              <div>
                <div class="text-white font-semibold">Location</div>
                <div class="text-cyan-400">kigali rwanda</div>
              </div>
            </div>

<div class="flex items-center space-x-4">
              <div class="w-12 h-12 hologram rounded-full flex items-center justify-center">
                <span class="text-cyan-400 text-xl">💼</span>
              </div>
              <div>
                <div class="text-white font-semibold">LinkedIn</div>
                <div class="text-cyan-400">https://www.linkedin.com/in/mfuranziza-hamza-898970354/</div>
              </div>
            </div>
          </div>

<div class="mt-8">
            <h4 class="text-xl font-bold text-cyan-300 mb-4">Follow Me</h4>
            <div class="flex space-x-4">
              <a href="#" class="w-12 h-12 hologram rounded-full flex items-center justify-center text-cyan-400 hover:text-white transition-colors">📘</a>
              <a href="#" class="w-12 h-12 hologram rounded-full flex items-center justify-center text-cyan-400 hover:text-white transition-colors">🐦</a>
              <a href="#" class="w-12 h-12 hologram rounded-full flex items-center justify-center text-cyan-400 hover:text-white transition-colors">📷</a>
              <a href="#" class="w-12 h-12 hologram rounded-full flex items-center justify-center text-cyan-400 hover:text-white transition-colors">💻</a>
            </div>
          </div>
        </div>

<div class="fade-in">
          <form class="hologram p-8 rounded-lg space-y-6">
            <h3 class="text-2xl font-bold text-cyan-300 mb-6">Send Message</h3>
            
            <div class="grid md:grid-cols-2 gap-4">
              <div>
                <label class="block text-white font-semibold mb-2">First Name</label>
                <input type="text" class="w-full px-4 py-3 cyber-input rounded-lg" placeholder="John" />
              </div>
              <div>
                <label class="block text-white font-semibold mb-2">Last Name</label>
                <input type="text" class="w-full px-4 py-3 cyber-input rounded-lg" placeholder="Doe" />
              </div>
            </div>

<div>
              <label class="block text-white font-semibold mb-2">Email</label>
              <input type="email" class="w-full px-4 py-3 cyber-input rounded-lg" placeholder="john@example.com" />
            </div>

<div>
              <label class="block text-white font-semibold mb-2">Subject</label>
              <input type="text" class="w-full px-4 py-3 cyber-input rounded-lg" placeholder="Project Discussion" />
            </div>

<div>
              <label class="block text-white font-semibold mb-2">Message</label>
              <textarea rows="5" class="w-full px-4 py-3 cyber-input rounded-lg resize-none" placeholder="Tell me about your project..."></textarea>
            </div>

<button type="submit" class="w-full py-4 hologram text-xl font-bold neon-text hover:bg-cyan-900/30 transition-all duration-300 transform hover:scale-105">
              SEND MESSAGE
            </button>
          </form>
        </div>
      </div>
    </div>
  </section>

<footer class="py-12 border-t border-cyan-900/30 relative z-10">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="grid md:grid-cols-4 gap-8">
        <div>
          <div class="orbitron text-2xl font-bold neon-text mb-4">
            &lt;ACODE.MASTER/&gt;
          </div>
          <p class="text-gray-400">
            Crafting digital experiences that push the boundaries of innovation and technology.
          </p>
        </div>

<div>
          <h4 class="text-xl font-bold text-cyan-300 mb-4">Services</h4>
          <ul class="space-y-2 text-gray-400">
            <li><a href="#" class="hover:text-cyan-400 transition-colors">Web Development</a></li>
            <li><a href="#" class="hover:text-cyan-400 transition-colors">Mobile Apps</a></li>
            <li><a href="#" class="hover:text-cyan-400 transition-colors">Cloud Solutions</a></li>
            <li><a href="#" class="hover:text-cyan-400 transition-colors">Consulting</a></li>
          </ul>
        </div>

<div>
          <h4 class="text-xl font-bold text-cyan-300 mb-4">Technologies</h4>
          <ul class="space-y-2 text-gray-400">
            <li><a href="#" class="hover:text-cyan-400 transition-colors">React/Next.js</a></li>
            <li><a href="#" class="hover:text-cyan-400 transition-colors">Node.js</a></li>
            <li><a href="#" class="hover:text-cyan-400 transition-colors">Python</a></li>
            <li><a href="#" class="hover:text-cyan-400 transition-colors">Blockchain</a></li>
          </ul>
        </div>

<div>
          <h4 class="text-xl font-bold text-cyan-300 mb-4">Quick Links</h4>
          <ul class="space-y-2 text-gray-400">
            <li><a href="#about" class="hover:text-cyan-400 transition-colors">About</a></li>
            <li><a href="#skills" class="hover:text-cyan-400 transition-colors">Skills</a></li>
            <li><a href="#projects" class="hover:text-cyan-400 transition-colors">Projects</a></li>
            <li><a href="#contact" class="hover:text-cyan-400 transition-colors">Contact</a></li>
          </ul>
        </div>
      </div>

<div class="border-t border-cyan-900/30 mt-12 pt-8 text-center">
        <p class="text-gray-400">
          &copy; 2025 ACODE MASTER. All rights reserved. | Designed with ⚡ and passion
        </p>
      </div>
    </div>
  </footer>

canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      canvas.style.position = 'absolute';
      canvas.style.top = '0';
      canvas.style.left = '0';
      canvas.style.zIndex = '-1';

const matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
      const matrixArray = matrix.split("");
      const fontSize = 10;
      const columns = canvas.width / fontSize;
      const drops = [];

for (let x = 0; x < columns; x++) {
        drops[x] = 1;
      }

function draw() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#0ff';
        ctx.font = fontSize + 'px monospace';

for (let i = 0; i < drops.length; i++) {
          const text = matrixArray[Math.floor(Math.random() * matrixArray.length)];
          ctx.fillText(text, i * fontSize, drops[i] * fontSize);

if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
            drops[i] = 0;
          }
          drops[i]++;
        }
      }

setInterval(draw, 35);

window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      });
    }

// Initialize Matrix
    createMatrix();

// Typing Animation
    const phrases = [
      "Coding the Future, Mastering the Web",
      "Full Stack Developer & Tech Innovator",
      "Building Tomorrow's Digital Solutions",
      "Transforming Ideas into Reality"
    ];

let phraseIndex = 0;
    let charIndex = 0;
    let isDeleting = false;
    const typingSpeed = 100;
    const deletingSpeed = 50;
    const pauseTime = 2000;

function typeWriter() {
      const currentPhrase = phrases[phraseIndex];
      const typingElement = document.getElementById('typing-text');

if (isDeleting) {
        typingElement.textContent = currentPhrase.substring(0, charIndex - 1);
        charIndex--;
      } else {
        typingElement.textContent = currentPhrase.substring(0, charIndex + 1);
        charIndex++;
      }

let typeSpeed = isDeleting ? deletingSpeed : typingSpeed;

if (!isDeleting && charIndex === currentPhrase.length) {
        typeSpeed = pauseTime;
        isDeleting = true;
      } else if (isDeleting && charIndex === 0) {
        isDeleting = false;
        phraseIndex = (phraseIndex + 1) % phrases.length;
      }

setTimeout(typeWriter, typeSpeed);
    }

// Start typing animation
    typeWriter();

// Mobile Menu Toggle
    document.getElementById('mobile-menu').addEventListener('click', function() {
      const mobileNav = document.getElementById('mobile-nav');
      mobileNav.classList.toggle('hidden');
    });

// Smooth Scrolling for Navigation Links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
        // Close mobile menu if open
        document.getElementById('mobile-nav').classList.add('hidden');
      });
    });

// Scroll Animation Observer
    const observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    };

// Observe all fade-in elements
    document.querySelectorAll('.fade-in').forEach(el => {
      observer.observe(el);
    });

// Add active nav link highlighting
    window.addEventListener('scroll', () => {
      let current = '';
      const sections = document.querySelectorAll('section[id]');
      
      sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        if (scrollY >= sectionTop - 200) {
          current = section.getAttribute('id');
        }
      });

// Form Submission
    document.querySelector('form').addEventListener('submit', function(e) {
      e.preventDefault();
      
      // Create success message
      const successMessage = document.createElement('div');
      successMessage.className = 'fixed top-20 right-6 bg-green-500/20 border border-green-400 text-green-400 px-6 py-4 rounded-lg z-50';
      successMessage.textContent = 'Message sent successfully! I\'ll get back to you soon.';
      document.body.appendChild(successMessage);
      
      // Remove message after 3 seconds
      setTimeout(() => {
        successMessage.remove();
      }, 3000);
      
      // Reset form
      this.reset();
    });

// Add parallax effect to floating orbs
    window.addEventListener('scroll', () => {
      const scrolled = window.pageYOffset;
      const orbs = document.querySelectorAll('.floating-orb');
      
      orbs.forEach((orb, index) => {
        const speed = 0.5 + (index * 0.1);
        orb.style.transform = `translateY(${scrolled * speed}px)`;
      });
    });

// Add glitch effect to main title on hover
    document.querySelector('.orbitron').addEventListener('mouseenter', function() {
      this.classList.add('glitch');
      setTimeout(() => {
        this.classList.remove('glitch');
      }, 1000);
    });
  </script>
</body>
</html>
          </div>
          <h3 class="text-xl font-bold text-cyan-300 mb-2">E-Commerce Platform</h3>
         
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">React</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Node.js</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">MongoDB</span>
          </div>
          <button class="w-full hologram py-2 text-cyan-400 hover:text-white transition-colors">VIEW PROJECT</button>
        </div>

<div class="project-card p-6 rounded-lg fade-in">
          <div class="relative mb-4 overflow-hidden rounded-lg">
            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Data Analytics Dashboard" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-110" />
          </div>
          <h3 class="text-xl font-bold text-cyan-300 mb-2">Data Analytics Dashboard</h3>
          <p class="text-gray-400 mb-4">Interactive dashboard for business intelligence with real-time data visualization, predictive analytics, and custom reporting.</p>
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Vue.js</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Python</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">D3.js</span>
          </div>
          <button class="w-full hologram py-2 text-cyan-400 hover:text-white transition-colors">VIEW PROJECT</button>
        </div>

<div class="project-card p-6 rounded-lg fade-in">
          <div class="relative mb-4 overflow-hidden rounded-lg">
            <img src="https://images.unsplash.com/photo-1512486130939-2c4f79935e4f?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Mobile Banking App" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-110" />
          </div>
          <h3 class="text-xl font-bold text-cyan-300 mb-2">Mobile Banking App</h3>
          <p class="text-gray-400 mb-4">Secure mobile banking application with biometric authentication, transaction management, and financial planning tools.</p>
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">React Native</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Firebase</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">AWS</span>
          </div>
          <button class="w-full hologram py-2 text-cyan-400 hover:text-white transition-colors">VIEW PROJECT</button>
        </div>

<div class="project-card p-6 rounded-lg fade-in">
          <div class="relative mb-4 overflow-hidden rounded-lg">
            <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="AI Chatbot Platform" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-110" />
          </div>
          <h3 class="text-xl font-bold text-cyan-300 mb-2">AI Chatbot Platform</h3>
          <p class="text-gray-400 mb-4">Intelligent chatbot platform with natural language processing, machine learning capabilities, and multi-channel integration.</p>
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Angular</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">TensorFlow</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Docker</span>
          </div>
          <button class="w-full hologram py-2 text-cyan-400 hover:text-white transition-colors">VIEW PROJECT</button>
        </div>

<div class="project-card p-6 rounded-lg fade-in">
          <div class="relative mb-4 overflow-hidden rounded-lg">
            <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Blockchain Voting System" class="w-full h-48 object-cover transition-transform duration-300 hover:scale-110" />
          </div>
          <h3 class="text-xl font-bold text-cyan-300 mb-2">Blockchain Voting System</h3>
          <p class="text-gray-400 mb-4">Decentralized voting platform built on blockchain technology ensuring transparency, security, and immutable voting records.</p>
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Solidity</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Web3.js</span>
            <span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 text-sm rounded-full">Ethereum</span>
          </div>
          <button class="w-full hologram py-2 text-cyan-400 hover:text-white transition-colors">VIEW PROJECT</button>
        </div>

<div class="project-card p-6 rounded-lg fade-in">
          <div class="relative mb-4 overflow-hidden rounded-lg">
            <img src="https://images.

Related Examples

Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Nicole Shalom

1 year ago

2.2k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Ele Eriksen

1 year ago

1.3k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

788