index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#05020c">
  <meta name="description" content="Denys Arkhipenko — full-stack software engineer building tomorrow's web from Austria.">
  <meta property="og:title" content="Denys Arkhipenko // Full-stack Engineer"><meta property="og:description" content="Interfaces. Infrastructure. Systems that ship."><meta property="og:type" content="website"><meta property="og:url" content="https://denys5dev.github.io/">
  <title>DENYS_5DEV // FULL-STACK ENGINEER</title><link rel="icon" href="favicon.svg" type="image/svg+xml">
  <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=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet"><link rel="stylesheet" href="styles.css?v=cyberpunk-2">
</head>
<body>
  <div class="scanlines" aria-hidden="true"></div><div class="noise" aria-hidden="true"></div><div class="cursor" aria-hidden="true"></div>
  <header><nav class="shell"><a class="brand" href="#top"><i></i>DENYS<span>_5DEV</span></a><div class="nav-links"><a href="#projects">[01] WORK</a><a href="#profile">[02] PROFILE</a><a href="#contact">[03] UPLINK</a></div><div class="status"><b></b>SYSTEM ONLINE</div></nav></header>
  <main id="top">
    <section class="hero shell">
      <div class="hero-hud reveal"><span>USER: DENYS_ARKHIPENKO</span><span>LOC: AUT_48.2082N</span><span id="clock">00:00:00 UTC</span></div>
      <div class="hero-copy reveal">
        <p class="eyebrow">// FULL-STACK SOFTWARE ENGINEER</p>
        <h1 class="glitch" data-text="BUILDING THE">BUILDING THE</h1><h1 class="outline">NEXT SYSTEM</h1>
        <p class="intro">I engineer high-performance digital products—translating complex architecture into interfaces that feel <em>effortless.</em></p>
        <div class="hero-actions"><a class="cyber-button" href="#projects"><span>EXPLORE WORK</span><i>↘</i></a><a class="text-link" href="mailto:denys5dev@gmail.com">INITIATE CONTACT_</a></div>
      </div>
      <div class="sun-scene" aria-hidden="true"><div class="sun"></div><div class="mountain m1"></div><div class="mountain m2"></div><div class="grid-floor"></div></div>
      <div class="side-code" aria-hidden="true"><span>00110101</span><span>NX/ANGULAR</span><span>NEST/.NET</span><span>TYPE_SAFE</span></div>
      <div class="scroll">SCROLL TO ACCESS <i>↓</i></div>
    </section>

    <section class="ticker"><div><span>ANGULAR</span><i>◆</i><span>TYPESCRIPT</span><i>◆</i><span>NX</span><i>◆</i><span>NESTJS</span><i>◆</i><span>.NET CORE</span><i>◆</i><span>ANGULAR</span><i>◆</i><span>TYPESCRIPT</span><i>◆</i><span>NX</span><i>◆</i><span>NESTJS</span><i>◆</i><span>.NET CORE</span><i>◆</i></div></section>

    <section class="projects shell section" id="projects">
      <div class="section-title reveal"><div><span>01</span><p>SELECTED_DATA</p></div><h2>PROJECT<br><i>ARCHIVE</i></h2><p>Public experiments, architecture systems and prototypes transmitted from GitHub.</p></div>
      <div class="project-grid">
        <a class="project-card featured reveal tilt" href="https://github.com/denys5dev/nx-setup-2026" target="_blank" rel="noreferrer">
          <div class="card-top"><span>SYS.01 / 2026</span><span class="live">● ACTIVE</span></div><div class="visual celestial"><div class="planet"></div><div class="ring"></div><div class="cross x1"></div><div class="cross x2"></div><p>CELESTIAL<br>MONOREPO</p></div><div class="card-copy"><div><h3>CELESTIAL</h3><p>Production-minded Angular + NestJS architecture with enforced boundaries, NgRx, Vitest and Playwright.</p></div><span class="launch">↗</span></div><ul><li>ANGULAR</li><li>NX</li><li>NESTJS</li><li>TYPESCRIPT</li></ul>
        </a>
        <a class="project-card reveal tilt" href="https://github.com/denys5dev/withSignalsPlay" target="_blank" rel="noreferrer"><div class="card-top"><span>SYS.02 / 2026</span><span class="live">● ACTIVE</span></div><div class="visual signal"><div></div><div></div><div></div><b>SIGNAL<br>REACTIVE</b></div><div class="card-copy"><div><h3>SIGNALS_PLAY</h3><p>Exploring modern reactive application design through Angular signals.</p></div><span class="launch">↗</span></div><ul><li>ANGULAR 21</li><li>SIGNALS</li><li>VITEST</li></ul></a>
        <a class="project-card reveal tilt" href="https://github.com/denys5dev/dynamic-hierarchy-form-configurator" target="_blank" rel="noreferrer"><div class="card-top"><span>SYS.03 / 2021</span><span>ARCHIVE</span></div><div class="visual nodes"><i></i><i></i><i></i><i></i><svg viewBox="0 0 400 220" preserveAspectRatio="none"><path d="M200 40V105M75 180V105H325V180"/></svg><b>FORM<br>CONFIG</b></div><div class="card-copy"><div><h3>HIERARCHY_UI</h3><p>Dynamic nested configuration translated into a manageable interface.</p></div><span class="launch">↗</span></div><ul><li>TYPESCRIPT</li><li>ANGULAR</li><li>DYNAMIC UI</li></ul></a>
      </div><a class="archive-link" href="https://github.com/denys5dev?tab=repositories" target="_blank" rel="noreferrer">ACCESS FULL GITHUB ARCHIVE <span>[ ↗ ]</span></a>
    </section>

    <section class="profile section" id="profile"><div class="shell profile-grid">
      <div class="profile-image reveal"><div class="image-frame"><img src="https://avatars.githubusercontent.com/u/19204308?v=4" alt="Denys Arkhipenko" width="520" height="520"><div class="target t1"></div><div class="target t2"></div><span class="vertical">IDENTITY_SCAN // VERIFIED</span></div><div class="image-meta"><span>ID: 19204308</span><span>STATUS: BUILDING</span></div></div>
      <div class="profile-copy"><div class="section-code reveal"><span>02</span>OPERATOR_PROFILE</div><h2 class="reveal">CODE WITH<br><i>CLARITY.</i><br>FLY WITH<br>COURAGE.</h2><p class="lead reveal">Full-stack engineer in Austria, turning ambitious technology into calm, scalable products.</p><div class="bio reveal"><p>My work crosses frontend systems, backend architecture and the space between them. I specialize in Angular, Node.js, .NET Core and monorepos—and currently build at <a href="https://www.bitpanda.com/" target="_blank" rel="noreferrer">BITPANDA ↗</a>.</p><p>Offline, I explore the world from above. Paragliding teaches the same lesson as engineering: understand the system, read the signals, then commit.</p></div><div class="metrics reveal"><div><strong>10+</strong><span>PUBLIC REPOS</span></div><div><strong>2016</strong><span>GITHUB_ORIGIN</span></div><div><strong>∞</strong><span>CURIOSITY</span></div></div></div>
    </div></section>

    <section class="capabilities shell section"><div class="section-code reveal"><span>03</span>CAPABILITY_MATRIX</div><div class="cap-list"><div class="reveal"><span>01</span><h3>FRONTEND<br>SYSTEMS</h3><p>Angular · Signals · NgRx<br>Design systems · A11y</p></div><div class="reveal"><span>02</span><h3>BACKEND<br>LOGIC</h3><p>Node · NestJS · .NET Core<br>APIs · Contracts · Testing</p></div><div class="reveal"><span>03</span><h3>PLATFORM<br>DESIGN</h3><p>Nx · Monorepos · CI/CD<br>Boundaries · Developer UX</p></div></div></section>

    <section class="contact shell section" id="contact"><div class="contact-panel reveal"><div class="contact-grid" aria-hidden="true"></div><p>// CHANNEL_OPEN</p><h2>LET'S BUILD<br><span>SOMETHING</span><br>REAL.</h2><a href="mailto:denys5dev@gmail.com">DENYS5DEV@GMAIL.COM <i>↗</i></a><div class="contact-code">REQUEST_ID: <span id="requestId">000000</span><br>ENCRYPTION: NONE<br>RESPONSE: HUMAN</div></div></section>
  </main>
  <footer class="shell"><a class="brand" href="#top"><i></i>DENYS<span>_5DEV</span></a><p>© <span id="year"></span> // ALL SYSTEMS OPERATIONAL</p><div><a href="https://github.com/denys5dev" target="_blank" rel="noreferrer">GITHUB ↗</a><a href="https://www.linkedin.com/in/denys-arkhipenko" target="_blank" rel="noreferrer">LINKEDIN ↗</a><a href="#top">TOP ↑</a></div></footer>
  <script src="script.js?v=cyberpunk-2"></script>
</body></html>