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">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>
                <p>Die Zeitanzeige ist ein kleines Projekt für nebenbei gewesen, welches ich bei verschiedenen Personen auf YouTube gesehen habe und es nachmachen wollte.</p>
            </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>
                <p>Die Sprache <a href="https://rexxinfo.org/reference/index_reference.html">REXX</a> wird meistens dazu verwendet um Abläufe zu automatisieren.<br><br>
                        Das Spiel ist ein kleines Ratespiel bei dem man erraten mus, welche Zahl sich der Computer "ausgesucht" hat.
                </p>
            </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>
                <p>Der SA-MP Server ist mein allererstes Projekt, welches ich gestartet habe um einen Kumpel bei seinem SA-MP Server unter die Arme greifen zu können. <br>
                        Mittlerweile ist dieses Projekt mein Favorit, da es Spaß macht mit PAWN zu programmieren.
                </p>
            </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>
                <p>Der <a href="https://altv.mp/de/">ALT:V</a> Server ist eine Mischung aus zwei meiner Interessen. <br>
                    Die Sprache C#, welche unteranderem bei der Spieleentwicklung genutzt wird, <br>und dem Spiel GTA:V.</p>
            </button>
            <button class="grd-item java" onclick="window.location.href=''">
                <img src="images/portfolio.png" alt="Pawn Icon">
                <h2> Portfolio </h2>
                <p>Dies ist der Code des aktuellen Portfolios(was man hier sehen kann). <br>
                        Das Portfolio wurde vorzeitig mit HTML & CSS geschrieben. <br> Updates folgen.
                </p>
            </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 alten Ausbildung gemacht um die Sprache PHP zu erlernen. <br><br>
                    Das Projekt hatte natürlich auch diverse Anforderungen vom Ausbilder, die erfüllt werden mussten. 
                </p>
            </button>
        </div>
    </div>
    <div id="kontakt">
        <h1>Kontakt</h1>
        <p>Am besten nimmt man mit mir über eine dieser Plattformen kontakt auf, dort bin ich aktiv und bemerke die Nachrichten sehr schnell.</p>
        <div class="circle-container">
            <button class="circle linkedin" onclick="window.location.href='https://linkedin.com/in/ioannis-antoniadis-ia'">
                <img src="icons/linkedin.png" alt="LinkedIn Logo">
            </button>
            <button class="circle github" onclick="window.location.href='https://github.com/Ioannis20x'">
                <img src="icons/github.png" alt="GitHub Logo">
            </button>
            <button class="circle instagram" onclick="window.location.href='https://www.instagram.com/Ioannis20x'">
                <img src="icons/instagram.png" alt="Instagram Logo">
            </button>
        </div>
    </div>

</body>

</html>