diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 295 |
1 files changed, 295 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..09d26b2 --- /dev/null +++ b/index.html @@ -0,0 +1,295 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + + <!-- font general --> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=Inter&display=swap" + rel="stylesheet" + /> + <!-- font navbar --> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" + rel="stylesheet" + /> + <!-- FA icons --> + <link + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" + rel="stylesheet" + /> + <link href="style.css" rel="stylesheet" /> + + <title>Arne Rief - Webentwickler</title> + </head> + <body> + <!-- NAVBAR --> + <header> + <nav> + <ul> + <li> + <a href="index.html"><h1>Arne Rief</h1></a> + </li> + <li><a href="about.html">Über mich</a></li> + <li><a href="#projects">Projekte</a></li> + <li><a href="#contact">Kontakt</a></li> + <li> + <a href="https://linkedin.com/in/arne-rief" target="_blank" + ><i class="fa-brands fa-linkedin"></i + ></a> + </li> + <li> + <a href="https://github.com/Arrief" target="_blank" + ><i class="fa-brands fa-github"></i + ></a> + </li> + <li><a href="index-en.html">🇬🇧</a></li> + </ul> + </nav> + </header> + + <main> + <!-- WELCOME --> + <section class="welcome-section"> + <h2 class="title"> + Hallo, ich bin <span class="name">Arne</span>. <br /> + <span class="subtitle">Willkommen auf meiner Website! 👋🏻</span> + </h2> + <p class="welcome-intro"> + Ich bin ein + <span class="text-emphasis">Full Stack Webentwickler</span> und nutze + meine Leidenschaft für Lernen und Logik, um sinnvolle und ansprechende + Webapplikationen zu schaffen. Momentan konzentriere ich mich auf die + Frontend Entwicklung, meine Programmierkenntnisse umfassen + <span class="text-emphasis" + >JavaScript, React, HTML, CSS und Sass</span + >, ebenso wie + <span class="text-emphasis">Node.js, Express.js</span> und die Arbeit + mit Datenbanken wie <span class="text-emphasis">MySQL</span> und + <span class="text-emphasis">MongoDB</span>. + </p> + </section> + + <!-- PROJECTS --> + <section class="projects-section" id="projects"> + <h2 class="title">Projektauswahl</h2> + <div class="project-container"> + <img + src="images/screenshot-note-book.png" + alt="Ein Screenshot der Büchersammlung eines Note Book Nutzers" + class="project-screenshot" + /> + <div class="text-container"> + <h3 class="subtitle">Note Book</h3> + <p> + <a + href="https://the-note-book.netlify.app/" + target="_blank" + class="text-link" + >Website</a + > | + <a + href="https://github.com/Arrief/note-book" + target="_blank" + class="text-link" + >GitHub Code</a + > + </p> + <p> + Note Book ist eine + <span class="text-emphasis">Full Stack Webanwendung</span> für + Buchliebhaber. Registriere dich mit einem kostenlosen Account und + erstelle eine + <span class="text-emphasis"> digitale Buchsammlung</span>. Jedes + Buch in deiner Sammlung hat eine Notizfunktion, so dass du + <span class="text-emphasis">Notizen und Zitate speichern</span> + kannst. Eine <span class="text-emphasis">Suchfunktion</span> macht + es einfach, dich in deinen Büchern, Notizen und Zitaten + zurechtzufinden. Zusätzlich kannst du mit einem + <span class="text-emphasis">Filter</span> nur Notizen oder Zitate + anzeigen lassen. + </p> + <p> + Erstellt mit: <br /> + <span class="text-emphasis" + >React, JavaScript, Node.js, Express.js, MySQL, HTML & CSS</span + > + </p> + </div> + </div> + + <div class="project-container"> + <div class="text-container"> + <h3 class="subtitle">All In Trips</h3> + <p> + <a + href="https://all-in-trips.netlify.app/" + target="_blank" + class="text-link" + >Website</a + > | + <a + href="https://github.com/Arrief/All-In-Trips" + target="_blank" + class="text-link" + >GitHub Code</a + > + </p> + <p> + All In Trips ist eine + <span class="text-emphasis" + >Frontend Single Page Webanwendung</span + >, die dir hilft, deinen nächsten Urlaub oder eine Geschäftsreise + zu planen. Gib deinen Ausgangsort, Zielort, Tag der Ankunft und + Abreise <span class="text-emphasis">nur einmal</span> ein und + erhalte eine Übersicht über + <span class="text-emphasis">das Wetter</span> an deinem Zielort, + die <span class="text-emphasis">nächsten Flüge</span> in deiner + Nähe sowie über die + <span class="text-emphasis">günstigsten Hotels</span> vor Ort. Mit + Daten von <span class="text-emphasis">APIs</span>, bereitgestellt + durch namhafte Unternehmen wie + <span class="text-emphasis">Booking.com</span>. + </p> + <p> + Erstellt mit: <br /> + <span class="text-emphasis" + >React, JavaScript, 5 APIs, HTML & CSS</span + > + </p> + </div> + <img + src="images/screenshot-all-in-trips.png" + alt="Ein Screenshot der Startseite von All In Trips" + class="project-screenshot" + /> + </div> + + <div class="project-container"> + <img + src="images/screenshot-auriga.png" + alt="Ein Screenshot der Startseite von MiAuriga" + class="project-screenshot" + /> + <div class="text-container"> + <h3 class="subtitle">MiAuriga</h3> + <p class="note-auriga">Website und Code sind Eigentum von Auriga</p> + <p> + Meine Arbeit an der Website MiAuriga war ein + <span class="text-emphasis">Auftrag für einen Klienten</span>, das + <span class="text-emphasis">spanische Unternehmen Auriga</span>. + MiAuriga ist ein Onlineportal für alle Dienstleistungen rund ums + Auto. Als Teil einer + <span class="text-emphasis" + >kompletten Neustrukturierung der Website</span + > + im Design wie in der Funktionalität habe ich sowohl am + <span class="text-emphasis">neuen Design des Frontends</span> als + auch bei der Planung und Umsetzung der + <span class="text-emphasis">neuen Datenbank</span> mitgearbeitet. + </p> + <p> + Erstellt mit: <br /> + <span class="text-emphasis" + >React, JavaScript, Node.js, MongoDB, MaterialUI/MUI, HTML & + CSS</span + > + </p> + </div> + </div> + </section> + + <!-- CONTACT --> + <section class="contact-section" id="contact"> + <h2 class="title">Kontakt</h2> + <form + action="https://formspree.io/f/xrgvpkbn" + method="POST" + class="messenger-form" + > + <div> + <label for="name">Vorname:</label> + <input + type="text" + name="name" + placeholder="Ihr Vorname..." + required + /> + </div> + <div> + <label for="name">Nachname:</label> + <input + type="text" + name="name" + placeholder="Ihr Nachname..." + required + /> + </div> + <div> + <label for="email">Email:</label> + <input + type="email" + name="email" + placeholder="Ihre Email Adresse..." + required + /> + </div> + <div> + <label for="subject">Betreff:</label> + <input + type="text" + name="subject" + placeholder="Betreff..." + required + /> + </div> + <div class="text-area"> + <label for="message">Nachricht:</label> + <textarea + rows="20" + name="message" + placeholder="Ihre Nachricht..." + required + ></textarea> + </div> + <!-- disabling captcha for sending emails --> + <input type="hidden" name="_captcha" value="false" /> + <button type="submit">Senden</button> + </form> + </section> + </main> + + <!-- FOOTER --> + <footer> + <address> + <dl> + <dt>LinkedIn:</dt> + <dd> + <a href="https://linkedin.com/in/arne-rief" target="_blank" + ><i class="fa-brands fa-linkedin big-icon"></i + ></a> + </dd> + <dt>Github:</dt> + <dd> + <a href="https://github.com/Arrief" target="_blank" + ><i class="fa-brands fa-github big-icon"></i + ></a> + </dd> + <dt>Email:</dt> + <dd> + <a href="#contact"> + <i class="fa-solid fa-envelope big-icon"></i + ></a> + </dd> + </dl> + </address> + <p>© 2023 Arne Rief</p> + </footer> + </body> +</html> |