portfolio/index.html

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mein Portflio: Ioannis</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div id="top">
        <nav>
            <ul id="navul">
                <li><a href="https://ioannisdev.de/portfolio">Home</a></li>
                <li><a href="#infos">Infos</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projekte">Projekte</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </div>

    <div id="startseite">
        <h1 id="hallo">Hallo, ich bin Ioannis.</h1>
        <h1 id="willkommen">Willkommen in meinem Portfolio!</h1>
        <a href="#infos"><button id="uebermichbut">Über mich!</button></a>
        <a href="#skills"><button id="skillsbut">Meine Skills</button></a>
    </div>
    <div id="infos">
        <h1 id="uebermichtitle">Über mich</h1>
        <div id="info-content">

            <img src="./uploads/me.jpg" alt="ioannis" id="rund">
            <div id="uebermich">
                <p>
                    Mein Name ist Ioannis, ich bin 20 Jahre alt und suche aktuell eine Ausbildung zum Fachinformatiker -
                    Systemintegration. <br>
                    Seit über sechs Jahren befasse ich mich mit verschiedensten, technischen, Systemen. <br>
                    Ich bin sowohl im Hardware, als auch im Software Bereich unterwegs und besitze in beiden Bereichen
                    verschiedene Kenntnisse wie Z.B. Bestandteile eines Computers oder die Programmierung einer
                    Webseite.
                </p>
            </div>
        </div>
    </div>

    <div id="skills">
        <h1 id="skillstitle">Meine Skills</h1>
        <div class="grid-container">
            <button class="grid-item javascript" onclick="window.location.href='https://www.javascript.com/'">
                <img src="icons/javascript-icon.png" alt="javascript Icon">
                JavaScript
            </button>
            <button class="grid-item c"
                onclick="window.location.href='https://www.gnu.org/software/c-intro-and-ref/manual/c-intro-and-ref.pdf'">
                <img src="icons/c-icon.png" alt="c Icon">
                C
            </button>
            <button class="grid-item javascript" onclick="window.location.href='https://docs.arduino.cc/'">
                <img src="icons/arduino-icon.png" alt="Arduino Icon">
                Arduino
            </button>
            <button class="grid-item python"
                onclick="window.location.href='https://learn.microsoft.com/de-de/dotnet/csharp/'">
                <img src="icons/csharp-icon.png" alt="csharp Icon">
                C#
            </button>
            <button class="grid-item java" onclick="window.location.href='https://sampwiki.blast.hk/wiki/Main_Page'">
                <img src="icons/pawn-icon.png" alt="Pawn Icon">
                Pawn
            </button>
            <button class="grid-item csharp"
                onclick="window.location.href='https://www.ibm.com/docs/en/zos/3.1.0?topic=language-introduction'">
                <img src="icons/rexx-icon.png" alt="REXX Icon">
                REXX
            </button>
            <button class="grid-item cpp" onclick="window.location.href='https://docs.docker.com/'">
                <img src="icons/docker-icon.png" alt="Docker Icon">
                Docker
            </button>
            <button class="grid-item mysql" onclick="window.location.href='https://dev.mysql.com/doc/'">
                <img src="icons/mysql-icon.png" alt="MySQL Icon">
                MySQL
            </button>
        </div>
    </div>
    <div id="projekte">
        <h1 id="projectstitle">Meine Projekte</h1>
       <div class="grd-container">
            <button class="grd-item javascript" onclick="window.location.href='https://github.com/Ioannis20x/Fortschrittsanzeige-Notion'">
                <img src="images/zeitanzeige.png" alt="Zeitanzeige">
                <h2>Notion Zeitanzeige</h2>
            </button>
            <button class="grd-item c"
                onclick="window.location.href='https://github.com/Ioannis20x/rexx-minispiel'">
                <img src="images/CMD.webp" alt="REXX">
                <h2>REXX Spiel</h2>
            </button>
            <button class="grd-item javascript" onclick="window.location.href='https://github.com/Ioannis20x/SAMP-Server'">
                <img src="images/samp.png" alt="SA-MP">
                <h2>SA-MP Server</h2>
            </button>
            <button class="grd-item python"
                onclick="window.location.href='https://github.com/Ioannis20x/ALT-V-Server'">
                <img src="images/altv.png" alt="ALT:V">
                <h2>ALT:V Server</h2>
            </button>
            <button class="grd-item java" onclick="window.location.href=''">
                <img src="images/portfolio.png" alt="Pawn Icon">
                <h2> Portfolio </h2>
            </button>
            <button class="grd-item java" onclick="window.location.href='https://github.com/Ioannis20x/shopseite'">
                <img src="images/shopseite.png" alt="Shopseite">
                <h2>Shopseite(Ausbildungsprojekt)</h2><br>
                <p>Dieses Projekt habe ich in meiner Ausbildung 
                </p>
            </button>
        </div>
    </div>
</body>

</html>