Update index.html

index.html

@@ -7,8 +7,357 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        /* Keeping all original styles unchanged */
-        /* [Previous CSS content remains here - omitted for brevity] */
+        @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Share+Tech+Mono&display=swap');
+        
+        :root {
+            --terminal-bg: #0a0a12;
+            --terminal-green: #0f0;
+            --terminal-cyan: #0ff;
+            --terminal-purple: #b19cd9;
+            --terminal-red: #f44;
+            --terminal-glow: rgba(0, 255, 0, 0.7);
+            --terminal-border: #333;
+            --text-color: #e0e0e0;
+            --text-shadow: 0 0 8px var(--terminal-glow);
+            --selection-color: rgba(0, 255, 0, 0.3);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            background: #000;
+            overflow: hidden;
+            font-family: 'Inconsolata', monospace;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            perspective: 1000px;
+        }
+        
+        .matrix-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.15;
+        }
+        
+        .terminal-container {
+            position: relative;
+            width: 85%;
+            max-width: 900px;
+            height: 75vh;
+            background: var(--terminal-bg);
+            border-radius: 8px;
+            box-shadow: 0 0 30px rgba(0, 255, 0, 0.5),
+                        inset 0 0 10px rgba(0, 255, 0, 0.2);
+            overflow: hidden;
+            border: 1px solid var(--terminal-green);
+            transform-style: preserve-3d;
+            animation: float 8s ease-in-out infinite;
+        }
+        
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotateX(10deg) rotateY(5deg); }
+            50% { transform: translateY(-20px) rotateX(5deg) rotateY(10deg); }
+        }
+        
+        .terminal-header {
+            background: linear-gradient(to right, #0a0a0a, #111);
+            padding: 8px 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: var(--terminal-green);
+            font-family: 'Share Tech Mono', monospace;
+            border-bottom: 1px solid var(--terminal-green);
+            box-shadow: 0 2px 15px rgba(0, 255, 0, 0.3);
+        }
+        
+        .terminal-buttons {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .terminal-button {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            transition: all 0.2s;
+            cursor: pointer;
+        }
+        
+        .terminal-button:hover {
+            transform: scale(1.2);
+        }
+        
+        .terminal-button.red {
+            background: #ff5f56;
+        }
+        
+        .terminal-button.yellow {
+            background: #ffbd2e;
+        }
+        
+        .terminal-button.green {
+            background: #27c93f;
+        }
+        
+        .terminal-body {
+            padding: 15px;
+            height: calc(100% - 40px);
+            overflow-y: auto;
+            color: var(--text-color);
+            text-shadow: var(--text-shadow);
+            line-height: 1.6;
+            scrollbar-width: thin;
+            scrollbar-color: var(--terminal-green) transparent;
+        }
+        
+        .terminal-body::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        .terminal-body::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .terminal-body::-webkit-scrollbar-thumb {
+            background-color: var(--terminal-green);
+            border-radius: 10px;
+        }
+        
+        .typing-text {
+            white-space: pre-wrap;
+            font-size: 1.1rem;
+        }
+        
+        .command-line {
+            margin-top: 20px;
+            display: flex;
+            align-items: center;
+            position: sticky;
+            bottom: 0;
+            background: var(--terminal-bg);
+            padding-bottom: 10px;
+        }
+        
+        .prompt {
+            color: var(--terminal-green);
+            margin-right: 10px;
+            font-weight: bold;
+        }
+        
+        .cursor {
+            display: inline-block;
+            width: 10px;
+            height: 20px;
+            background: var(--terminal-green);
+            animation: blink 1s infinite;
+            vertical-align: middle;
+            margin-left: 5px;
+        }
+        
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        
+        .command-input {
+            flex-grow: 1;
+            background: transparent;
+            border: none;
+            color: var(--terminal-green);
+            font-family: 'Inconsolata', monospace;
+            font-size: 1.1rem;
+            outline: none;
+            caret-color: var(--terminal-green);
+            text-shadow: var(--text-shadow);
+        }
+        
+        .command-input::selection {
+            background: var(--selection-color);
+        }
+        
+        .glitch {
+            position: relative;
+        }
+        
+        .glitch::before, .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--terminal-bg);
+        }
+        
+        .glitch::before {
+            left: 2px;
+            text-shadow: -2px 0 var(--terminal-red);
+            clip: rect(24px, 550px, 90px, 0);
+            animation: glitch-anim-1 2s infinite linear alternate-reverse;
+        }
+        
+        .glitch::after {
+            left: -2px;
+            text-shadow: -2px 0 var(--terminal-cyan);
+            clip: rect(85px, 550px, 140px, 0);
+            animation: glitch-anim-2 2s infinite linear alternate-reverse;
+        }
+        
+        @keyframes glitch-anim-1 {
+            0% { clip: rect(54px, 800px, 54px, 0); }
+            20% { clip: rect(27px, 800px, 86px, 0); }
+            40% { clip: rect(14px, 800px, 75px, 0); }
+            60% { clip: rect(39px, 800px, 104px, 0); }
+            80% { clip: rect(18px, 800px, 53px, 0); }
+            100% { clip: rect(73px, 800px, 112px, 0); }
+        }
+        
+        @keyframes glitch-anim-2 {
+            0% { clip: rect(35px, 800px, 89px, 0); }
+            20% { clip: rect(56px, 800px, 103px, 0); }
+            40% { clip: rect(22px, 800px, 64px, 0); }
+            60% { clip: rect(88px, 800px, 120px, 0); }
+            80% { clip: rect(13px, 800px, 32px, 0); }
+            100% { clip: rect(42px, 800px, 99px, 0); }
+        }
+        
+        .ascii-art {
+            color: var(--terminal-purple);
+            line-height: 1.3;
+            margin: 15px 0;
+            white-space: pre;
+            font-size: 0.6rem;
+            letter-spacing: 1px;
+        }
+        
+        .highlight {
+            color: var(--terminal-cyan);
+        }
+        
+        .skill-bar {
+            margin: 8px 0;
+            display: flex;
+            align-items: center;
+        }
+        
+        .skill-name {
+            display: inline-block;
+            width: 150px;
+            color: var(--terminal-green);
+        }
+        
+        .skill-level {
+            display: inline-block;
+            height: 15px;
+            background: linear-gradient(to right, var(--terminal-green), var(--terminal-cyan));
+            box-shadow: 0 0 5px var(--terminal-glow);
+            animation: expand 1s ease-out;
+            transform-origin: left;
+            border-radius: 3px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .skill-level::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, 
+                rgba(255,255,255,0) 0%, 
+                rgba(255,255,255,0.2) 50%, 
+                rgba(255,255,255,0) 100%);
+            animation: shine 2s infinite;
+        }
+        
+        @keyframes shine {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        
+        @keyframes expand {
+            from { transform: scaleX(0); }
+            to { transform: scaleX(1); }
+        }
+        
+        .contact-item {
+            margin: 8px 0;
+            display: flex;
+            align-items: center;
+        }
+        
+        .contact-item a {
+            color: var(--terminal-purple);
+            text-decoration: none;
+            transition: all 0.3s;
+            margin-left: 10px;
+        }
+        
+        .contact-item a:hover {
+            color: var(--terminal-cyan);
+            text-shadow: 0 0 10px var(--terminal-cyan);
+        }
+        
+        .hidden {
+            display: none;
+        }
+        
+        .command-history {
+            opacity: 0.8;
+        }
+        
+        .system-alert {
+            color: var(--terminal-red);
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
+        
+        .hacker-icon {
+            color: var(--terminal-green);
+            margin-right: 8px;
+        }
+        
+        .secret-mode {
+            animation: secretGlow 0.5s infinite alternate;
+        }
+        
+        @keyframes secretGlow {
+            from { text-shadow: 0 0 5px var(--terminal-green); }
+            to { text-shadow: 0 0 20px var(--terminal-cyan), 0 0 30px var(--terminal-purple); }
+        }
+        
+        canvas {
+            display: block;
+        }
+        
+        @media (max-width: 768px) {
+            .terminal-container {
+                width: 95%;
+                height: 85vh;
+            }
+            
+            .skill-name {
+                width: 120px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -37,13 +386,59 @@
     </div>
 
     <script>
-        // [Previous Matrix effect code remains unchanged - omitted for brevity]
-
+        const canvas = document.getElementById('matrix');
+        const ctx = canvas.getContext('2d');
+        
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        
+        const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
+        const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        const nums = '0123456789';
+        const symbols = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~';
+        const binary = '01';
+        
+        const alphabet = katakana + latin + nums + symbols + binary;
+        
+        const fontSize = 16;
+        const columns = canvas.width / fontSize;
+        
+        const rainDrops = [];
+        
+        for (let x = 0; x < columns; x++) {
+            rainDrops[x] = Math.floor(Math.random() * canvas.height / fontSize);
+        }
+        
+        function draw() {
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            ctx.fillStyle = '#0f0';
+            ctx.font = fontSize + 'px monospace';
+            
+            for (let i = 0; i < rainDrops.length; i++) {
+                const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
+                const y = rainDrops[i] * fontSize;
+                
+                const opacity = Math.min(1, 1 - y / canvas.height);
+                ctx.fillStyle = `rgba(0, 255, 0, ${opacity})`;
+                
+                ctx.fillText(text, i * fontSize, y);
+                
+                if (y > canvas.height && Math.random() > 0.975) {
+                    rainDrops[i] = 0;
+                }
+                rainDrops[i]++;
+            }
+            
+            requestAnimationFrame(draw);
+        }
+        
         const terminalText = document.getElementById('typing-text');
         const commandLine = document.getElementById('command-line');
         const commandInput = document.getElementById('command-input');
         const securityIcon = document.getElementById('security-icon');
-
+        
         const messages = [
             { text: "Booting CYBERNODE v2.0...", delay: 50 },
             { text: "Initializing secure Salesforce connection...", delay: 50 },
@@ -98,14 +493,14 @@
             { text: "> Type 'help' for available commands", delay: 30, style: "color: #0f0" },
             { text: "\n", delay: 50 },
         ];
-
+        
         let currentMessageIndex = 0;
         let currentCharIndex = 0;
         let isTyping = true;
         let commandHistory = [];
         let historyIndex = -1;
         let secretMode = false;
-
+        
         function typeNextCharacter() {
             if (currentMessageIndex >= messages.length) {
                 isTyping = false;
@@ -136,7 +531,7 @@
                 setTimeout(typeNextCharacter, 100);
             }
         }
-
+        
         function processCommand(command) {
             if (command.trim() !== '') {
                 commandHistory.unshift(command);
@@ -168,6 +563,7 @@
                 <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">skills</span>: List technical skills</div>
                 <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">contact</span>: Show contact information</div>
                 <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">projects</span>: List key projects</div>
+                <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">certs</span>: List Salesforce certifications</div>
                 <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">clear</span>: Clear the terminal</div>
                 <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">secret</span>: Enable secret mode</div>
                 <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">exit</span>: Close terminal (simulated)</div>`;
@@ -200,6 +596,26 @@
                 <div class="contact-item"><i class="fas fa-award hacker-icon"></i> <span class="highlight">Tea Tree Gully</span> - GOV Design Award 2017</div>
                 <div class="contact-item"><i class="fas fa-bolt hacker-icon"></i> <span class="highlight">Virtual Power Plant SA</span> - State government portal</div>`;
             }
+            else if (command === 'certs') {
+                response.innerHTML = `>> SALESFORCE CERTIFICATIONS <<<br><br>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Business Analyst</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> B2B Solution Architect</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> System Architect</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Application Architect</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Administrator</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Sales Cloud Consultant</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Service Cloud Consultant</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Community Cloud Consultant</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Advanced Administrator</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Sharing and Visibility Architect</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Data Architect</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Platform App Builder</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Platform Developer I</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Identity and Access Management Architect</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Development Lifecycle and Deployment Architect</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Integration Architect</div>
+                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Security & Privacy Accredited Professional</div>`;
+            }
             else if (command === 'clear') {
                 terminalText.innerHTML = '';
                 commandInput.value = '';
@@ -212,11 +628,13 @@
                     <i class="fas fa-user-secret hacker-icon"></i> AI Initiatives Unlocked:<br>
                     <i class="fas fa-brain hacker-icon"></i> MoodLens: Sentiment Analysis<br>
                     <i class="fas fa-shield-alt hacker-icon"></i> Abuse Detector: Content Filter<br>
-                    <i class="fas fa-robot hacker-icon"></i> CouncilCaseClassifier: Case Routing`;
+                    <i class="fas fa-robot hacker-icon"></i> CouncilCaseClassifier: Case Routing<br>
+                    <i class="fas fa-book hacker-icon"></i> CfSuiteKnowbler: GPT-4 Knowledge Generation<br>
+                    <i class="fas fa-heartbeat hacker-icon"></i> MindMeter: Stress Detection`;
                     securityIcon.className = 'fas fa-lock hacker-icon';
                     document.body.style.background = '#000a0a';
                 } else {
-                    response.innerHTML = `<span style="color: #0f0">SECRET MODE DEACTIVATED</span>`;
+                    response.innerHTML = `<span style="。本color: #0f0">SECRET MODE DEACTIVATED</span>`;
                     securityIcon.className = 'fas fa-lock-open hacker-icon';
                     document.body.style.background = '#000';
                 }
@@ -233,19 +651,84 @@
             terminalText.appendChild(document.createElement('br'));
             commandLine.scrollIntoView();
         }
-
-        // [Previous terminal window controls and command history code remains unchanged - omitted for brevity]
-
+        
+        function minimizeTerminal() {
+            const terminal = document.querySelector('.terminal-container');
+            terminal.style.transform = 'translateY(100vh)';
+            setTimeout(() => {
+                alert('Terminal minimized. Refresh page to restore.');
+            }, 500);
+        }
+        
+        function maximizeTerminal() {
+            const terminal = document.querySelector('.terminal-container');
+            if (terminal.style.width === '100%') {
+                terminal.style.width = '85%';
+                terminal.style.height = '75vh';
+            } else {
+                terminal.style.width = '100%';
+                terminal.style.height = '100vh';
+            }
+        }
+        
+        function closeTerminal() {
+            const terminal = document.querySelector('.terminal-container');
+            terminal.style.animation = 'none';
+            terminal.style.transform = 'scale(0)';
+            terminal.style.opacity = '0';
+            setTimeout(() => {
+                document.body.innerHTML = '<div style="color: #0f0; font-family: monospace; text-align: center; margin-top: 40vh;">Connection terminated. Refresh to reconnect.</div>';
+            }, 500);
+        }
+        
+        commandInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') {
+                const command = this.value;
+                this.value = '';
+                
+                if (command.trim() !== '') {
+                    processCommand(command);
+                }
+            }
+            else if (e.key === 'ArrowUp') {
+                if (commandHistory.length > 0 && historyIndex < commandHistory.length - 1) {
+                    historyIndex++;
+                    this.value = commandHistory[historyIndex];
+                    e.preventDefault();
+                }
+            }
+            else if (e.key === 'ArrowDown') {
+                if (historyIndex > 0) {
+                    historyIndex--;
+                    this.value = commandHistory[historyIndex];
+                    e.preventDefault();
+                } else if (historyIndex === 0) {
+                    historyIndex = -1;
+                    this.value = '';
+                    e.preventDefault();
+                }
+            }
+        });
+        
         window.addEventListener('load', function() {
             draw();
             typeNextCharacter();
             
             console.log('%c Try "secret" for hidden AI projects!', 'color: #0f0; font-family: monospace; font-size: 14px;');
         });
-
+        
         window.addEventListener('resize', function() {
             canvas.width = window.innerWidth;
             canvas.height = window.innerHeight;
+            
+            const newColumns = canvas.width / fontSize;
+            while (rainDrops.length < newColumns) {
+                rainDrops.push(Math.floor(Math.random() * canvas.height / fontSize));
+            }
+            while (rainDrops.length > newColumns) {
+                rainDrops.pop();
+            }
         });
     </script>
+</body>
 </html>