add skills and resume sections; update projects list in the portfolio

public/content/projects.md

@@ -1,18 +1,16 @@
-# My Projects
+# Projects
 
-## Project 1: Personal Portfolio
+## Personal Portfolio
 - **Tech Stack:** React, TypeScript, Tailwind CSS
 - **Description:** A retro TV-themed portfolio website
-- [View Source](https://github.com/username/portfolio)
+- [View Source](https://git.ivanch.me/ivanch/new-home)
 
-## Project 2: Task Manager
-- **Tech Stack:** Node.js, Express, MongoDB
-- **Description:** RESTful API for managing tasks and projects
-- [Live Demo](https://demo.example.com)
+## Kasbot
+- **Tech Stack:** .NET Core
+- **Description:** A Discord music bot for playing music from YouTube/Spotify
+- [View Source](https://github.com/ivanch/kasbot)
 
 ---
 
-### Currently Working On
-* Cloud infrastructure optimization
-* Open source contributions
-* Machine learning side projects
+# Published Articles
+(incoming)

src/App.tsx

@@ -4,6 +4,8 @@ import TerminalButton from './components/TerminalButton';
 import ProfileContent from './components/ProfileContent';
 import ProjectsContent from './components/ProjectsContent';
 import TerminalShell from './components/TerminalShell';
+import SkillsContent from './components/SkillsContent';
+import ResumeContent from './components/ResumeContent';
 
 function App() {
   const [activeSection, setActiveSection] = React.useState('about');
@@ -20,7 +22,7 @@ function App() {
             <div className="absolute inset-0 tv-screen-convex"></div>
 
             {/* Screen Content */}
-            <div className="relative h-full w-full bg-[#003300] p-6 font-mono text-[#00FF00] overflow-hidden z-10">
+            <div className="relative h-full w-full bg-[#003300] p-6 font-mono text-[#00FF00] overflow-hidden z-10 screen-content">
               <div className="animate-pulse mb-4">
                 <Terminal className="inline-block mr-2" />
                 <span className="text-sm">echo "Hey there!"</span>
@@ -71,6 +73,8 @@ function App() {
                   {activeSection === 'projects' && (
                     <ProjectsContent markdownPath="/content/projects.md" />
                   )}
+                  {activeSection === 'skills' && <SkillsContent />}
+                  {activeSection === 'resume' && <ResumeContent />}
                   {activeSection === 'shell' && <TerminalShell />}
                 </div>
               </div>

src/components/ResumeContent.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import TerminalButton from './TerminalButton';
+
+const ResumeContent: React.FC = () => {
+  const resumeUrl = "https://drive.google.com/file/d/1oYf68qKXUnBz7d4qjHX-hTw_-f5EKgeF/view?usp=sharing";
+  const downloadUrl = "https://drive.google.com/file/d/1oYf68qKXUnBz7d4qjHX-hTw_-f5EKgeF/view?usp=sharing";
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 mb-4">
+        <iframe
+          src={resumeUrl}
+          className="w-full h-full rounded-lg"
+          frameBorder="0"
+          allowFullScreen
+          allow="autoplay"
+        />
+      </div>
+      <div className="flex justify-center">
+        <TerminalButton
+          onClick={() => window.open(downloadUrl, '_blank')}
+          isSelected={false}
+        >
+          OPEN IN NEW TAB
+        </TerminalButton>
+      </div>
+    </div>
+  );
+};
+
+export default ResumeContent;

src/components/SkillsContent.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const SkillsContent: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-full">
+      <pre className="font-mono text-[#00FF00] whitespace-pre">
+{`
+   _____  __   _   _ _  _____
+  / ____|/ /_ (_) | | |/ ____|
+ | (___ | '_ \\| | | | | (___
+  \\___ \\| | | | | | | |\\____ \\
+  ____) | | | | | | | | ____) |
+ |_____/|_| |_|_|_| |_||_____/
+
+ Programming:
+ ├── Languages: C# (.NET Core, .NET Framework, ASP.NET Core)
+ ├── Languages: TypeScript, JavaScript, Python, Golang, Java, C/C++
+ └── Frontend: React
+
+ Infrastructure:
+ ├── Cloud: AWS
+ ├── CI/CD: GitHub Actions, GitLab CI, Helm/Terraform, Shell Scripting
+ └── Containers: Docker, Kubernetes
+
+ Databases:
+ ├── SQL: PostgreSQL, MySQL
+ ├── NoSQL: MongoDB
+ └── Caching: Redis
+`}</pre>
+    </div>
+  );
+};
+
+export default SkillsContent;

src/components/TerminalShell.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Terminal } from 'lucide-react';
 import { System } from '../shell/system';
+import '../styles/matrix.css';
 
 const TerminalShell: React.FC = () => {
     const [history, setHistory] = useState<string[]>(['Welcome to the terminal! Type "help" for commands.']);
@@ -20,12 +21,13 @@ const TerminalShell: React.FC = () => {
             if (system.knowsCommand(cmdName)) {
                 const output = system.executeCommand(cmdName, args);
 
-                const newLines = output.split('\\n').filter(l => l);
+                const newLines = output.split('\n').filter(l => l);
 
                 setHistory(prev => [...prev, `$ ${command}`, ...newLines]);
             } else {
                 setHistory(prev => [...prev, `$ ${command}`, `Command not found: ${cmdName}`]);
             }
+
             setCurrentCommand('');
         }
     };
@@ -34,8 +36,8 @@ const TerminalShell: React.FC = () => {
         <div className="h-full flex flex-col">
             <div className="flex-1 overflow-y-auto mb-4">
                 {history.map((line, index) => (
-                    <div key={index} className="mb-2">
-                        {line}
+                    <div key={index} className="mb-2" dangerouslySetInnerHTML={{ __html: line }}>
+                        {/* Dangerously set inner HTML */}
                     </div>
                 ))}
                 <div ref={bottomRef} />

src/index.css

@@ -189,6 +189,42 @@
     animation: horizontal-glare 4s linear infinite;
     opacity: 0.3;
   }
+
+  .cyberpunk-theme .terminal-button {
+    border-color: rgba(147, 51, 234, 0.3);
+    background: linear-gradient(180deg,
+      rgba(25, 0, 25, 0.9) 0%,
+      rgba(20, 0, 20, 0.95) 100%
+    );
+    color: #df6cfc;
+    text-shadow: 0 0 8px rgba(147, 51, 234, 0.5);
+    box-shadow:
+      inset 0 0 15px rgba(147, 51, 234, 0.1),
+      0 0 2px rgba(147, 51, 234, 0.5),
+      0 0 5px rgba(147, 51, 234, 0.2);
+  }
+
+  .cyberpunk-theme .terminal-button-selected {
+    color: #FF00FF;
+    text-shadow: 0 0 12px rgba(147, 51, 234, 0.8);
+    box-shadow:
+      inset 0 0 25px rgba(147, 51, 234, 0.2),
+      0 0 4px rgba(147, 51, 234, 0.6),
+      0 0 8px rgba(147, 51, 234, 0.3);
+  }
+
+  .cyberpunk-theme .typing-effect {
+    border-right-color: #df6cfc;
+  }
+
+  .cyberpunk-theme input {
+    color: #df6cfc;
+  }
+
+  .cyberpunk-theme .screen-content {
+    background-color: #1a001a;
+    color: #df6cfc;
+  }
 }
 
 @keyframes cursor-blink {

src/shell/FileSystem.ts

@@ -106,4 +106,6 @@ export class FileSystem {
         current.children!.delete(fileName);
         console.log(`[FileSystem] File deleted: ${path}`);
     }
+
+
 }

src/shell/ShellSyscall.ts

@@ -40,4 +40,8 @@ export class ShellSyscall {
     deleteFile(path: string): void {
         this.fs.deleteFile(`${this.cwd}/${path}`);
     }
+
+    createDirectory(dirname: string): void {
+        this.fs.createDirectory(`${this.cwd}/${dirname}`);
+    }
 }

src/shell/commands/IShellCommand.ts

@@ -1,4 +1,5 @@
 export interface IShellCommand {
     getName(): string;
+    getManPage(): string;
     execute(input: string | string[]): string;
 }

src/shell/commands/about.ts

@@ -0,0 +1,20 @@
+import { IShellCommand } from "./IShellCommand";
+
+export class about implements IShellCommand {
+    getName(): string {
+        return 'about';
+    }
+
+    execute(_: string | string[]): string {
+        let output = 'Really cool terminal ;)';
+        output += '\n\n';
+        output += 'Built by ivanch';
+        output += '\n';
+
+        return output;
+    }
+
+    getManPage(): string {
+        return 'about - about this terminal';
+    }
+}

src/shell/commands/cat.ts

@@ -12,4 +12,8 @@ export class cat implements IShellCommand {
         if (args.length === 0) return "cat: missing file operand";
         return this.syscall.readFile(args[0]);
     }
+
+    getManPage(): string {
+        return "cat - concatenate files and print on the standard output";
+    }
 }

src/shell/commands/cd.ts

@@ -13,4 +13,8 @@ export class cd implements IShellCommand {
         const success = this.syscall.changeDirectory(path);
         return success ? '' : 'Invalid directory';
     }
+
+    getManPage(): string {
+        return "cd - change the shell working directory";
+    }
 }

src/shell/commands/cyberpunk.ts

@@ -0,0 +1,16 @@
+import { IShellCommand } from './IShellCommand';
+
+export class cyberpunk implements IShellCommand {
+    getName(): string {
+        return 'cyberpunk';
+    }
+
+    getManPage(): string {
+        return 'Changes the terminal color scheme to cyberpunk theme (purple)';
+    }
+
+    execute(): string {
+        document.documentElement.classList.toggle('cyberpunk-theme', true);
+        return 'Toggled cyberpunk theme!';
+    }
+}

src/shell/commands/echo.ts

@@ -11,4 +11,8 @@ export class echo implements IShellCommand {
         }
         return input.trim();
     }
+
+    getManPage(): string {
+        return 'echo - echo a line of text';
+    }
 }

src/shell/commands/ls.ts

@@ -12,4 +12,8 @@ export class ls implements IShellCommand {
         const files = this.syscall.listCurrentDirectory();
         return files.join('\n');
     }
+
+    getManPage(): string {
+        return 'ls - list directory contents';
+    }
 }

src/shell/commands/man.ts

@@ -0,0 +1,27 @@
+import { IShellCommand } from "./IShellCommand";
+import { System } from "../system";
+
+export class man implements IShellCommand {
+    getName(): string {
+        return 'man';
+    }
+
+    getManPage(): string {
+        return 'man - display system reference manuals\n\nUsage: man command_name';
+    }
+
+    execute(args: string[]): string {
+        if (args.length !== 1) {
+            return 'Usage: man command_name';
+        }
+
+        const system = System.getInstance();
+        const command = system['commands'].find(c => c.getName() === args[0]);
+
+        if (!command) {
+            return `No manual entry for ${args[0]}`;
+        }
+
+        return command.getManPage();
+    }
+}

src/shell/commands/matrix.ts

@@ -0,0 +1,33 @@
+import { IShellCommand } from "./IShellCommand";
+
+export class matrix implements IShellCommand {
+    getName(): string {
+        return 'matrix';
+    }
+
+    getManPage(): string {
+        return 'matrix - displays a matrix-style text animation\n\nUsage: matrix';
+    }
+
+    execute(): string {
+        const width = 40;
+        const height = 15;
+        const characters = '日ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍ';
+
+        const matrixHtml = `
+            <div class="matrix-text-animation">
+                ${Array(height).fill(0).map(() => `
+                    <div class="matrix-line">
+                        ${Array(width).fill(0).map(() => `
+                            <span class="matrix-char" style="animation-delay: ${Math.random() * 5}s">
+                                ${characters[Math.floor(Math.random() * characters.length)]}
+                            </span>
+                        `).join('')}
+                    </div>
+                `).join('')}
+            </div>
+        `;
+
+        return matrixHtml;
+    }
+}

src/shell/commands/mkdir.ts

@@ -0,0 +1,23 @@
+import { IShellCommand } from "./IShellCommand";
+import { ShellSyscall } from "../ShellSyscall";
+
+export class mkdir implements IShellCommand {
+    constructor(private syscall: ShellSyscall) {}
+
+    getName(): string {
+        return 'mkdir';
+    }
+
+    getManPage(): string {
+        return 'mkdir - make directories\n\nUsage: mkdir directory_name';
+    }
+
+    execute(args: string[]): string {
+        if (args.length !== 1) {
+            return 'Usage: mkdir directory_name';
+        }
+
+        this.syscall.createDirectory(args[0]);
+        return '';
+    }
+}

src/shell/commands/ping.ts

@@ -0,0 +1,31 @@
+import { IShellCommand } from "./IShellCommand";
+
+export class ping implements IShellCommand {
+    getName(): string {
+        return 'ping';
+    }
+
+    getManPage(): string {
+        return 'ping - send ICMP ECHO_REQUEST to network hosts\n\nUsage: ping [ip-address]';
+    }
+
+    execute(args: string[]): string {
+        if (args.length !== 1) {
+            return 'Usage: ping [ip-address]';
+        }
+
+        const ip = args[0];
+        let output = `PING ${ip} (${ip}) 56(84) bytes of data.\n`;
+
+        for (let i = 0; i < 4; i++) {
+            const time = Math.random() * 50 + 20;
+            output += `64 bytes from ${ip}: icmp_seq=${i + 1} ttl=64 time=${time.toFixed(1)} ms\n`;
+        }
+
+        output += '\n--- ping statistics ---\n';
+        output += `4 packets transmitted, 4 received, 0% packet loss, time 3000ms\n`;
+        output += `rtt min/avg/max/mdev = 20.0/30.0/40.0/5.0 ms\n`;
+
+        return output;
+    }
+}

src/shell/commands/pwd.ts

@@ -11,4 +11,8 @@ export class pwd implements IShellCommand {
     execute(_: string[]): string {
         return this.syscall.getCurrentDirectory();
     }
+
+    getManPage(): string {
+        return "pwd - print name of current/working directory";
+    }
 }

src/shell/commands/rm.ts

@@ -21,4 +21,8 @@ export class rm implements IShellCommand {
         this.syscall.deleteFile(filename);
         return `Removed ${filename}`;
     }
+
+    getManPage(): string {
+        return "rm - remove files or directories";
+    }
 }

src/shell/commands/sudo.ts

@@ -0,0 +1,15 @@
+import { IShellCommand } from "./IShellCommand";
+
+export class sudo implements IShellCommand {
+    getName(): string {
+        return 'sudo';
+    }
+
+    getManPage(): string {
+        return 'sudo - execute a command as another user\n\nUsage: sudo command';
+    }
+
+    execute(args: string[]): string {
+        return 'Permission denied';
+    }
+}

src/shell/commands/terminal.ts

@@ -0,0 +1,16 @@
+import { IShellCommand } from './IShellCommand';
+
+export class terminal implements IShellCommand {
+    getName(): string {
+        return 'terminal';
+    }
+
+    getManPage(): string {
+        return 'Changes the terminal color scheme to terminal theme (green)';
+    }
+
+    execute(): string {
+        document.documentElement.classList.toggle('cyberpunk-theme', false);
+        return 'Toggled terminal theme!';
+    }
+}

src/shell/commands/touch.ts

@@ -13,4 +13,8 @@ export class touch implements IShellCommand {
         this.syscall.createFile(args[0]);
         return "";
     }
+
+    getManPage(): string {
+        return "touch - create an empty file";
+    }
 }

src/shell/files/hack.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+
+echo "[*] Initializing system breach protocol..."
+sleep 1
+echo "[+] Establishing secure connection to target..."
+sleep 0.5
+echo "[*] Running port scan on target system..."
+sleep 1
+echo "[+] Found vulnerable ports: 22, 80, 443"
+sleep 0.5
+echo "[*] Attempting SSH vulnerability exploit..."
+sleep 1
+echo "[+] Access granted to remote system"
+sleep 0.5
+echo "[*] Bypassing firewall rules..."
+sleep 1
+echo "[+] Firewall successfully circumvented"
+sleep 0.5
+echo "[*] Extracting system information..."
+sleep 1
+echo "[+] OS Version: Linux 5.15.0-generic"
+sleep 0.5
+echo "[*] Escalating privileges..."
+sleep 1
+echo "[+] Root access achieved"
+sleep 0.5
+echo "[*] Downloading sensitive data..."
+sleep 5
+echo "[+] Download complete: 1.2GB transferred"
+sleep 0.5
+echo "[*] Covering tracks..."
+sleep 1
+echo "[+] Logs cleared"
+sleep 0.5
+echo "[*] Disconnecting from target system..."
+sleep 1
+echo "[+] Operation completed successfully"

src/shell/system.ts

@@ -5,9 +5,17 @@ import { cd } from "./commands/cd";
 import { touch } from "./commands/touch";
 import { cat } from "./commands/cat";
 import { rm } from "./commands/rm";
+import { ping } from "./commands/ping";
+import { mkdir } from "./commands/mkdir";
+import { man } from "./commands/man";
+import { sudo } from "./commands/sudo";
 import { IShellCommand } from "./commands/IShellCommand";
 import { FileSystem } from "./FileSystem";
 import { ShellSyscall } from "./ShellSyscall";
+import { about } from "./commands/about";
+import { matrix } from "./commands/matrix";
+import { cyberpunk } from './commands/cyberpunk';
+import { terminal } from './commands/terminal';
 
 // System class to manage commands
 class System {
@@ -32,6 +40,14 @@ class System {
         this.commands.push(new touch(syscall));
         this.commands.push(new cat(syscall));
         this.commands.push(new rm(syscall));
+        this.commands.push(new ping());
+        this.commands.push(new mkdir(syscall));
+        this.commands.push(new man());
+        this.commands.push(new sudo());
+        this.commands.push(new about());
+        // this.commands.push(new matrix());
+        this.commands.push(new cyberpunk());
+        this.commands.push(new terminal());
     }
 
     public static getInstance(): System {
@@ -42,10 +58,14 @@ class System {
     }
 
     knowsCommand(commandName: string): boolean {
-        return this.commands.some(c => c.getName() === commandName);
+        return commandName === 'help' || this.commands.some(c => c.getName() === commandName);
     }
 
     executeCommand(commandName: string, args: string[]): string {
+        if (commandName === 'help') {
+            return this.commands.map(c => c.getName()).join('\n');
+        }
+
         const command = this.commands.find(c => c.getName() === commandName);
         if (command) {
             return command.execute(args);

src/styles/matrix.css

@@ -0,0 +1,30 @@
+.matrix-text-animation {
+    color: #0F0;
+    font-family: monospace;
+    line-height: 1;
+    display: inline-block;
+}
+.matrix-line {
+    white-space: pre;
+}
+.matrix-char {
+    opacity: 0;
+    display: inline-block;
+    animation: matrix-fade 3s infinite;
+}
+@keyframes matrix-fade {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 1; }
+}
+.matrix-text-animation::after {
+    content: "Wake up, Neo...";
+    display: block;
+    color: #0F0;
+    font-weight: bold;
+    margin-top: 1em;
+    animation: text-fade 4s infinite;
+}
+@keyframes text-fade {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 1; }
+}