commit 0bfb0c335fb3f3684dc585f62928555688944642 Author: Ioannis20x Date: Mon Jun 10 21:01:57 2024 +0200 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3493ae5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +forum/* +musik/* +notion/* +phpmyadmin/* +portfolio/* +shopseite/* +uploads/* diff --git a/icons/arduino-icon.png b/icons/arduino-icon.png new file mode 100644 index 0000000..7303d0f Binary files /dev/null and b/icons/arduino-icon.png differ diff --git a/icons/c-icon.png b/icons/c-icon.png new file mode 100644 index 0000000..163cea1 Binary files /dev/null and b/icons/c-icon.png differ diff --git a/icons/csharp-icon.png b/icons/csharp-icon.png new file mode 100644 index 0000000..9cf5f92 Binary files /dev/null and b/icons/csharp-icon.png differ diff --git a/icons/docker-icon.png b/icons/docker-icon.png new file mode 100644 index 0000000..db9d9d4 Binary files /dev/null and b/icons/docker-icon.png differ diff --git a/icons/javascript-icon.png b/icons/javascript-icon.png new file mode 100644 index 0000000..1ac6c2f Binary files /dev/null and b/icons/javascript-icon.png differ diff --git a/icons/mysql-icon.png b/icons/mysql-icon.png new file mode 100644 index 0000000..1570538 Binary files /dev/null and b/icons/mysql-icon.png differ diff --git a/icons/pawn-icon.png b/icons/pawn-icon.png new file mode 100644 index 0000000..c1c488c Binary files /dev/null and b/icons/pawn-icon.png differ diff --git a/icons/rexx-icon.png b/icons/rexx-icon.png new file mode 100644 index 0000000..afc66ca Binary files /dev/null and b/icons/rexx-icon.png differ diff --git a/images/javascript-background.webp b/images/javascript-background.webp new file mode 100644 index 0000000..a45c8ea Binary files /dev/null and b/images/javascript-background.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..77c2a6c --- /dev/null +++ b/index.html @@ -0,0 +1,126 @@ + + + + + + + Mein Portflio: Ioannis + + + + + +
+ +
+ +
+

Hallo, ich bin Ioannis.

+

Willkommen in meinem Portfolio!

+ + +
+
+

Über mich

+
+ + ioannis +
+

+ Mein Name ist Ioannis, ich bin 20 Jahre alt und suche aktuell eine Ausbildung zum Fachinformatiker - + Systemintegration.
+ Seit über sechs Jahren befasse ich mich mit verschiedensten, technischen, Systemen.
+ 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. +

+
+
+
+ +
+

Meine Skills

+
+ + + + + + + + +
+
+
+

Meine Projekte

+
+ + + + + + +
+
+ + + \ No newline at end of file diff --git a/phpmyadmin b/phpmyadmin new file mode 120000 index 0000000..3b895ec --- /dev/null +++ b/phpmyadmin @@ -0,0 +1 @@ +/usr/share/phpmyadmin \ No newline at end of file diff --git a/shopseite b/shopseite new file mode 160000 index 0000000..fff5d8b --- /dev/null +++ b/shopseite @@ -0,0 +1 @@ +Subproject commit fff5d8b7437aea9e3a0c587463828109a990caa5 diff --git a/style.css b/style.css new file mode 100644 index 0000000..92d5000 --- /dev/null +++ b/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; +} \ No newline at end of file