first commit

.gitignore

@@ -0,0 +1,7 @@
+forum/*
+musik/*
+notion/*
+phpmyadmin/*
+portfolio/*
+shopseite/*
+uploads/*

index.html

@@ -0,0 +1,126 @@
+<!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="icons/javascript-icon.png" alt="javascript Icon">
+                <h2>Notion Zeitanzeige</h2>
+            </button>
+            <button class="grd-item c"
+                onclick="window.location.href='https://github.com/Ioannis20x/rexx-minispiel'">
+                <img src="icons/c-icon.png" alt="c Icon">
+                <h2>REXX Spiel</h2>
+            </button>
+            <button class="grd-item javascript" onclick="window.location.href='https://github.com/Ioannis20x/SAMP-Server'">
+                <img src="icons/arduino-icon.png" alt="Arduino Icon">
+                <h2>SA-MP Server</h2>
+            </button>
+            <button class="grd-item python"
+                onclick="window.location.href='https://github.com/Ioannis20x/ALT-V-Server'">
+                <img src="icons/csharp-icon.png" alt="csharp Icon">
+                <h2>ALT:V Server</h2>
+            </button>
+            <button class="grd-item java" onclick="window.location.href=''">
+                <img src="icons/pawn-icon.png" alt="Pawn Icon">
+                <h2> Portfolio </h2>
+            </button>
+            <button class="grd-item java" onclick="window.location.href='https://github.com/Ioannis20x/shopseite'">
+                <img src="icons/pawn-icon.png" alt="Pawn Icon">
+                <h2>Shopseite(Ausbildungsprojekt)</h2><br>
+                <p>Hier steht ein kleiner Beispieltext damit ich sehen kann wie es aussieht
+                    eljdlskjalkjjsdljsdja
+                    aslkjlaskjaskjdlkjsalkjl
+                </p>
+            </button>
+        </div>
+    </div>
+</body>
+
+</html>

phpmyadmin

@@ -0,0 +1 @@
+/usr/share/phpmyadmin

style.css

@@ -0,0 +1,249 @@
+html {
+    scroll-behavior: smooth;
+}
+
+h1,
+h2 {
+    color: white;
+}
+
+#top {
+    margin-top: 0.938em;
+    height: 2.5em;
+    background-color: black;
+    border-bottom: 1px solid silver;
+}
+
+#navul li {
+    display: inline;
+    list-style-type: none;
+    margin-right: 1em;
+}
+
+#navul li a {
+    text-decoration: none;
+    font-size: large;
+    color: rgb(185, 185, 185);
+}
+
+#navul li :hover {
+    color: white;
+}
+
+#navul {
+    margin-top: 0.938em;
+    text-align: right;
+}
+
+#startseite {
+    width: 99%;
+    height: 40em;
+    align-items: center;
+    text-align: center;
+    font-size: larger;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+#hallo {
+    margin-top: 8em;
+}
+
+body {
+    height: auto;
+    width: 98vw;
+    padding: 0;
+    background-color: black;
+}
+
+#startseite a button {
+    font-size: 30px;
+    margin-top: 2em;
+    margin-left: 2.25em;
+    border: 2px solid grey;
+}
+
+#uebermichbut:hover {
+    background-color: white;
+    color: black;
+    cursor: pointer;
+}
+
+#uebermichbut {
+    background-color: black;
+    color: white;
+}
+
+#skillsbut:hover {
+    background-color: black;
+    color: white;
+    cursor: pointer;
+}
+
+#skillsbut {
+    background-color: white;
+    color: black;
+}
+
+/*ueber mich*/
+#info-content {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    justify-items: center;
+    align-items: center;
+    height: 50em;
+}
+
+#uebermichtitle {
+    margin: 0 auto;
+    text-align: center;
+}
+
+#rund {
+    grid-column: 1;
+    width: 60%;
+    height: 69%;
+    border-radius: 50%;
+    margin-bottom: 6em;
+}
+
+#uebermich {
+    grid-column: 2;
+    width: 71.8%;
+    height: 83.5%;
+    float: right;
+    margin-right: 3em;
+    margin-top: 5em;
+    color: white;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: x-large;
+}
+
+
+/*skills*/
+#skills {
+    margin-top: 10em;
+}
+
+#skillstitle {
+    margin: 0;
+    text-align: center;
+}
+
+
+#projectstitle {
+    margin: 0;
+    text-align: center;
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(4, 2fr);
+    grid-gap: 20px;
+    width: 90%;
+    max-width: 1200px;
+    margin: 5em auto;
+}
+
+.grid-item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 140px;
+    text-decoration: none;
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    border-radius: 12px;
+    background-color: #333;
+    border: 2px solid #444;
+    cursor: pointer;
+    transition: transform 0.3s ease, background-color 0.3s ease, border 0.3s ease;
+    overflow: hidden;
+}
+
+
+.grid-item img {
+    height: 50px;
+    width: auto;
+    margin-right: 10px;
+}
+
+.grid-item:hover {
+    transform: scale(1.1);
+    background-color: #555;
+    border: 2px solid #666;
+}
+
+/*projekte*/
+#projekte {
+    margin-top: 32.5em;
+}
+
+.grid-conts {
+    display: grid;
+    grid-template-columns: repeat(3, 2fr);
+    grid-gap: 20px;
+    width: 90%;
+    max-width: 1200px;
+    margin: 5em auto;
+}
+
+.grid-item p{
+    font-size: 10px;
+}
+
+
+
+
+.grd-container {
+    display: grid;
+    grid-template-columns: repeat(3, 2fr);
+    grid-gap: 20px;
+    width: 90%;
+    max-width: 1200px;
+    margin: 5em auto;
+}
+
+.grd-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 400px; /* Erhöht die Höhe für den zusätzlichen Text */
+    text-decoration: none;
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    border-radius: 12px;
+    background-color: #333;
+    border: 2px solid #444;
+    cursor: pointer;
+    transition: transform 0.3s ease, background-color 0.3s ease, border 0.3s ease;
+    overflow: hidden;
+    padding: 10px; /* Fügt Innenabstand hinzu */
+}
+
+.grd-item img {
+    height: 200px; /* Erhöht die Höhe des Bildes */
+    width: 100%; /* Lässt das Bild die gesamte Breite des Buttons einnehmen */
+    object-fit: contain; /* Behält das Seitenverhältnis des Bildes bei */
+    margin-bottom: 10px; /* Fügt Abstand unter dem Bild hinzu */
+}
+
+.grd-item h2 {
+    margin: 10px 0 5px 0; /* Fügt Abstand über und unter dem Titel hinzu */
+    font-size: 18px;
+}
+
+.grd-item p {
+    font-size: 14px; /* Reduziert die Schriftgröße der Beschreibung */
+    text-align: center; /* Zentriert den Beschreibungstext */
+}
+
+.grd-item:hover {
+    transform: scale(1.1);
+    background-color: #555;
+    border: 2px solid #666;
+}