class CustomTerminal extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `
kent@devops:~
$ whoami
> Kent Vuong
> Full-Stack Developer & DevOps Engineer
> Building scalable solutions since 2019
$ ls -la experience/
📁 .senior-engineer/
└── microservices-architecture.yaml
📁 .cloud-infrastructure/
├── aws-deployments/
├── kubernetes-clusters/
└── ci-cd-pipelines/
📁 .web-development/
├── react-applications/
├── nextjs-ssr/
└── nodejs-apis/
$ cat motivation.txt
> "Code is poetry, infrastructure is the canvas."
> Passionate about creating elegant solutions
> to complex problems. Always learning, always evolving.
$ Try typing a command...
$
`; } initTerminal() { const input = this.shadowRoot.getElementById('terminal-input'); input.addEventListener('keypress', (e) => { if (e.key === 'Enter') { const command = input.value.trim().toLowerCase(); this.handleCommand(command); input.value = ''; } }); } handleCommand(command) { const terminalBody = this.shadowRoot.getElementById('terminal-content'); // Create new command line const newCommandLine = document.createElement('div'); newCommandLine.className = 'command-line'; newCommandLine.innerHTML = `$${command}`; // Insert before the input line const inputLine = terminalBody.lastElementChild; terminalBody.insertBefore(newCommandLine, inputLine); // Create output const output = document.createElement('div'); output.className = 'output'; switch(command) { case 'help': output.innerHTML = `Available commands:
> about - Learn more about me
> skills - View my technical skills
> projects - See my work
> contact - Get in touch
> clear - Clear terminal`; break; case 'about': output.innerHTML = `Kent Vuong
> Full-Stack & DevOps Engineer
> 5+ years of experience
> Based in San Francisco, CA`; break; case 'skills': output.innerHTML = `Core Skills:
> Frontend: React, Vue, Next.js
> Backend: Node.js, Python, Go
> DevOps: AWS, Docker, K8s, Terraform
> Databases: PostgreSQL, MongoDB, Redis`; break; case 'projects': output.innerHTML = `Featured Projects:
> mooshieblob.com - AI Showcase
> Cloud Dashboard - Infrastructure Monitor
> E-Commerce Platform - Full-Stack Solution
> DevOps Pipeline - CI/CD Automation`; break; case 'contact': output.innerHTML = `Let's Connect!
> Email: hello@kentvuong.com
> GitHub: @Mooshieblob1
> LinkedIn: /in/kentvuong
> Jump to Contact Section →`; break; case 'clear': // Remove all command lines except the last one (input) while (terminalBody.children.length > 1) { terminalBody.removeChild(terminalBody.firstChild); } return; default: output.innerHTML = `Command not found: ${command}
Type 'help' for available commands.`; } terminalBody.insertBefore(output, inputLine); } } customElements.define('custom-terminal', CustomTerminal);