Cod3Uchiha · Cod3Uchiha · Aug 9, 2026 · Aug 9, 2026 · Aug 9, 2026 · Aug 9, 2026
diff --git a/.github/workflows/deploy-react.yml b/.github/workflows/deploy-react.yml
@@ -0,0 +1,59 @@
+name: Build and deploy React site
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Set up Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        run: npm install --no-audit --no-fund
+
+      - name: Build React site
+        run: npm run build
+
+      - name: Preserve existing static routes and assets
+        run: |
+          cp Uchiha.jpg jchrist.mp3 dist/
+          cp -R business visagelab-free dist/
+          touch dist/.nojekyll
+
+      - name: Configure GitHub Pages
+        if: github.event_name != 'pull_request'
+        uses: actions/configure-pages@v6
+
+      - name: Upload GitHub Pages artifact
+        if: github.event_name != 'pull_request'
+        uses: actions/upload-pages-artifact@v5
+        with:
+          path: ./dist
+
+  deploy:
+    if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v5
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+.DS_Store
diff --git a/index.html b/index.html
@@ -1,139 +1,30 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "Person",
-  "name": "Takudzwa Mlambo",
-  "alternateName": "Cod3Uchiha",
-  "url": "https://iamtkm.vercel.app",
-  "image": "https://github.com/Cod3Uchiha.png",
-  "sameAs": [
-    "https://www.tiktok.com/@Cod3Uchiha",
-    "https://www.youtube.com/@Cod3Uchiha",
-    "https://twitter.com/Cod3Uchiha",
-    "https://github.com/Cod3Uchiha"
-  ],
-  "jobTitle": "Node.js Developer",
-  "description": "Takudzwa Mlambo, known online as Cod3Uchiha, is a Node.js programmer and web developer who creates open-source tools and tutorials."
-}
-  </script>
-  <title>Code Uchiha</title>
-  <style>
-    body {
-      background-color: #000;
-      color: #ff0000;
-      text-align: center;
-      font-family: "Courier New", monospace;
-    }
-
-    h1 {
-      color: #f00;
-      font-size: 36px;
-    }
-
-    .image-container {
-      margin-top: 20px;
-    }
-
-    img {
-      width: 300px;
-      border-radius: 50%;
-    }
-
-    .story {
-      margin: 20px;
-      padding: 20px;
-      background-color: rgba(0, 0, 0, 0.8);
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    }
-
-    .audio-controls {
-      margin-top: 20px;
-    }
-
-    .hacker-button {
-      background-color: #000;
-      color: #f00;
-      border: 2px solid #f00;
-      padding: 10px 20px;
-      font-size: 16px;
-      cursor: pointer;
-      margin-right: 10px;
-    }
-
-    .hacker-button:hover {
-      background-color: #f00;
-      color: #fff;
-    }
-
-    .contact-details {
-      margin-top: 20px;
-      color: #fff;
-    }
-
-    .copyright {
-      margin-top: 20px;
-      color: #fff;
-    }
-  </style>
-  <script>
-    window.onload = function() {
-      const audio = new Audio('jchrist.mp3');
-      const playButton = document.getElementById('play-btn');
-      const stopButton = document.getElementById('stop-btn');
-
-      playButton.addEventListener('click', () => {
-        audio.play();
-      });
-
-      stopButton.addEventListener('click', () => {
-        audio.pause();
-        audio.currentTime = 0;
-      });
-    };
-
-    document.addEventListener('contextmenu', event => event.preventDefault()); // Disable right-click context menu
-    document.onkeydown = function (e) { // Disable copy, cut, and paste
-      if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85)) {
-        return false;
-      } else {
-        return true;
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code Uchiha</title>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Person",
+        "name": "Takudzwa Mlambo",
+        "alternateName": "Cod3Uchiha",
+        "url": "https://iamtkm.vercel.app",
+        "image": "https://github.com/Cod3Uchiha.png",
+        "sameAs": [
+          "https://www.tiktok.com/@Cod3Uchiha",
+          "https://www.youtube.com/@Cod3Uchiha",
+          "https://twitter.com/Cod3Uchiha",
+          "https://github.com/Cod3Uchiha"
+        ],
+        "jobTitle": "Node.js Developer",
+        "description": "Takudzwa Mlambo, known online as Cod3Uchiha, is a Node.js programmer and web developer who creates open-source tools and tutorials."
       }
-    };
-  </script>
-</head>
-<body>
-  <h1>Code Uchiha</h1>
-
-  <div class="image-container">
-    <img src="Uchiha.jpg" alt="Uchiha Clan">
-  </div>
-
-  <div class="story">
-    <h2>The Uchiha Clan and Coding</h2>
-    <p>The Uchiha Clan is renowned for their exceptional abilities and Sharingan eye technique. In the world of coding, we strive to develop our own unique skills and techniques, just like the Uchiha Clan.</p>
-    <p>Programming and developing, like the Sharingan, allow us to perceive and understand the intricacies of technology. With each line of code we write, we unlock new possibilities and shape the digital world around us.</p>
-    <p>As the Uchiha Clan sought to protect and advance their abilities, we, as developers, aim to use our coding skills to create innovative solutions, build amazing projects, and contribute to the ever-evolving field of technology.</p>
-  </div>
-
-  <div class="audio-controls">
-    <button id="play-btn" class="hacker-button">Play</button>
-    <button id="stop-btn" class="hacker-button">Stop</button>
-  </div>
-
-  <div class="contact-details">
-    <p>Contact me: <a href="https://wa.me/263785028126" style="color: #f00;">WhatsApp: +263785028126</a></p>
-    <p>GitHub: <a href="https://github.com/Cod3chiha" style="color: #f00;">github.com/Cod3chiha</a></p>
-    <p>Telegram: <a href="https://t.me/Code_Uchiha" style="color: #f00;">t.me/Code_Uchiha</a></p>
-    <p>WhatsApp Channel: <a href="https://whatsapp.com/channel/0029VaKjSra9WtC0kuJqvl0g" style="color: #f00;">Code Uchiha whatsapp Channel</a></p>
-    <p>WhatsApp Group: <a href="https://chat.whatsapp.com/KtKGYZuIK4BEGtHSbjc0yj" style="color: #f00;">Code Uchiha whatsapp Group</a></p>
-  </div>
-
-  <div class="copyright">
-    <p>&copy; CodeUchiha 2024</p>
-    <p>The song belongs to <b>Lil Nas X</b> I didn't mean to do wrong.</p>
-  </div>
-</body>
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
 </html>
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "cod3uchiha-site",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "19.1.1",
+    "react-dom": "19.1.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "5.0.0",
+    "vite": "7.1.1"
+  }
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,94 @@
+import { useEffect, useRef } from 'react'
+
+function Story() {
+  return (
+    <section className="story">
+      <h2>The Uchiha Clan and Coding</h2>
+      <p>
+        The Uchiha Clan is renowned for their exceptional abilities and Sharingan eye technique. In the world of coding, we strive to develop our own unique skills and techniques, just like the Uchiha Clan.
+      </p>
+      <p>
+        Programming and developing, like the Sharingan, allow us to perceive and understand the intricacies of technology. With each line of code we write, we unlock new possibilities and shape the digital world around us.
+      </p>
+      <p>
+        As the Uchiha Clan sought to protect and advance their abilities, we, as developers, aim to use our coding skills to create innovative solutions, build amazing projects, and contribute to the ever-evolving field of technology.
+      </p>
+    </section>
+  )
+}
+
+function AudioControls() {
+  const audioRef = useRef(null)
+
+  const play = () => {
+    audioRef.current?.play()
+  }
+
+  const stop = () => {
+    const audio = audioRef.current
+    if (!audio) return
+
+    audio.pause()
+    audio.currentTime = 0
+  }
+
+  return (
+    <div className="audio-controls">
+      <audio ref={audioRef} src="/jchrist.mp3" preload="metadata" />
+      <button className="hacker-button" type="button" onClick={play}>Play</button>
+      <button className="hacker-button" type="button" onClick={stop}>Stop</button>
+    </div>
+  )
+}
+
+function ContactDetails() {
+  return (
+    <section className="contact-details">
+      <p>Contact me: <a href="https://wa.me/263785028126">WhatsApp: +263785028126</a></p>
+      <p>GitHub: <a href="https://github.com/Cod3chiha">github.com/Cod3chiha</a></p>
+      <p>Telegram: <a href="https://t.me/Code_Uchiha">t.me/Code_Uchiha</a></p>
+      <p>WhatsApp Channel: <a href="https://whatsapp.com/channel/0029VaKjSra9WtC0kuJqvl0g">Code Uchiha whatsapp Channel</a></p>
+      <p>WhatsApp Group: <a href="https://chat.whatsapp.com/KtKGYZuIK4BEGtHSbjc0yj">Code Uchiha whatsapp Group</a></p>
+    </section>
+  )
+}
+
+function App() {
+  useEffect(() => {
+    const preventContextMenu = (event) => event.preventDefault()
+    const preventCopyShortcuts = (event) => {
+      if (event.ctrlKey && ['c', 'v', 'u'].includes(event.key.toLowerCase())) {
+        event.preventDefault()
+      }
+    }
+
+    document.addEventListener('contextmenu', preventContextMenu)
+    document.addEventListener('keydown', preventCopyShortcuts)
+
+    return () => {
+      document.removeEventListener('contextmenu', preventContextMenu)
+      document.removeEventListener('keydown', preventCopyShortcuts)
+    }
+  }, [])
+
+  return (
+    <main className="site-shell">
+      <h1>Code Uchiha</h1>
+
+      <div className="image-container">
+        <img src="/Uchiha.jpg" alt="Uchiha Clan" />
+      </div>
+
+      <Story />
+      <AudioControls />
+      <ContactDetails />
+
+      <footer className="copyright">
+        <p>© CodeUchiha 2024</p>
+        <p>The song belongs to <strong>Lil Nas X</strong> I didn't mean to do wrong.</p>
+      </footer>
+    </main>
+  )
+}
+
+export default App
diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+import './styles.css'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)