<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dominic´s Projekte</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
    <meta name="theme-color" content="#1a1a36">
    <link type="image/png" sizes="16x16" rel="icon" href="icons/16.png">
    <link type="image/png" sizes="32x32" rel="icon" href="icons/32.png">
    <link type="image/png" sizes="96x96" rel="icon" href="icons/96.png">
</head>
<body>
    <div id="particles-js"></div>
    <header>
        <div class="nav-container">
            <button class="nav-toggle" aria-label="Toggle-Navigation">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">Über mich</a></li>
                    <li><a href="#projects">Projekte</a></li>
                    <li><a href="#downloads">Downloads</a></li>
                    <li><a href="#contact">Kontakt</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="profile-image-container">
                <img src="/images/thatsme.webp" alt="Dominic König" class="profile-image" loading="lazy">
            </div>
            <h1 class="glow-text">Dominic König</h1>
            <p><span id="typed-text"></span></p>
        </section>

        <section id="about">
            <h2 class="glow-text-secondary">Über mich</h2>
            <p>Hi, freut mich, dass du dich hierher verirrt hast!</p>
            <p>Ich bin Dominic und studiere derzeit Informatik an der Universität Salzburg. Bald werde ich meinen Bachelorabschluss in den Händen halten. Seit fünf Jahren arbeite ich in der IT-Abteilung einer Versicherung.
                Neben meiner beruflichen Tätigkeit bin ich sportbegeistert und liebe es, in den Bergen zu wandern. Dabei begleiten mich stets meine drei treuen Hunde, die mich jeden Tag aufs Neue herausfordern und für Abwechslung sorgen. Die Natur und die Bewegung geben mir die perfekte Balance zu meiner Arbeit und inspirieren mich immer wieder zu neuen Projekten.
                Ein paar meiner Projekte findest du weiter unten. Viel Spaß beim Stöbern!
            </p>
            <br><br>
            <h2 class="glow-text-secondary">Meine Skills</h2>
            <ul class="skills-list">
                <li class="skill-html">HTML</li>
                <li class="skill-css">CSS</li>
                <li class="skill-js">JS</li>
                <li class="skill-nodejs">Node.js</li>
                <li class="skill-express">Express</li>
                <li class="skill-java">Java</li>
                <li class="skill-sql">SQL</li>
                <li class="skill-mongodb">MongoDB</li>
                <li class="skill-mongodb">Python</li>
            </ul>
        </section>

        <section id="projects">
            <h2 class="glow-text-secondary">Meine Projekte</h2>
            <div class="project-grid" id="project-container">
                <!-- Projekte werden hier dynamisch eingefügt -->
            </div>
        </section>

        <section class="downloads-section" id="downloads">
            <h2 class="glow-text-secondary">Downloads</h2>
            <p class="downloads-intro">
                In diesem Bereich findest du eine sorgfältig kuratierte Sammlung meiner Entwicklungen und Tools. 
                Von Automatisierungsskripten bis hin zu komplexeren Anwendungen - alle diese Projekte sind 
                das Ergebnis meiner Leidenschaft für effiziente und innovative Softwarelösungen.
            </p>
            <div class="downloads-grid" id="downloads-container">
                <!-- Downloads werden dynamisch eingefügt -->
            </div>
        </section>

        <section id="contact">
            <h2 class="glow-text-secondary">Kontakt</h2>
        
            <p>Gefallen dir meine kleinen aber feinen Projekte und bist du an einer möglichen Zusammenarbeit interessiert?</p>
            <p>Dann schreib mir doch einfach!</p>
            <br>
        
            <a href="mailto:info.domkoenig@gmail.com" class="cta-button pulsate">Schreib mir</a>
        </section>

    </main>

    <footer>
        <p>&copy; 2024 Dominic König. Alle Rechte vorbehalten.</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <script src="js/downloads.js"></script>
    <script src="js/main.js"></script>
</body>

</html>
