diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 710 |
1 files changed, 398 insertions, 312 deletions
@@ -1,334 +1,420 @@ -<!DOCTYPE html> +<!doctype html> <html lang="de"> - <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" /> + <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 rel="icon" href="images/favicon-AR.ico" type="image/x-icon" /> - <link href="style.css" rel="stylesheet" /> + <!-- 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 rel="icon" href="images/favicon-AR.ico" type="image/x-icon" /> + <link href="style.css" rel="stylesheet" /> - <title>Arne Rief - Webentwickler</title> - </head> - <body> - <!-- NAVBAR --> - <header> - <nav role="navigation"> - <ul> - <li> - <a href="index.html" aria-label="Zurück zur Hauptseite" - ><h1>Arne Rief</h1></a - > - </li> - <li> - <a href="about.html" aria-label="Über mich Infoseite">Über mich</a> - </li> - <li> - <a href="index.html#projects" aria-label="Projekte">Projekte</a> - </li> - <li><a href="index.html#contact" aria-label="Kontakt">Kontakt</a></li> - <li> - <a - href="https://linkedin.com/in/arne-rief" - target="_blank" - aria-label="Mein LinkedIn Profil" - ><i class="fa-brands fa-linkedin"></i - ></a> - </li> - <li> - <a - href="https://github.com/Arrief" - target="_blank" - aria-label="Mein Github Account" - ><i class="fa-brands fa-github"></i - ></a> - </li> - <li> - <a href="index-en.html" aria-label="Switch to English language" - >🇬🇧</a - > - </li> - </ul> - </nav> - </header> + <title>Arne Rief - Webentwickler</title> + </head> + <body> + <!-- NAVBAR --> + <header> + <nav role="navigation"> + <ul> + <li> + <a href="index.html" aria-label="Zurück zur Hauptseite" + ><h1>Arne Rief</h1></a + > + </li> + <li> + <a href="about.html" aria-label="Über mich Infoseite" + >Über mich</a + > + </li> + <li> + <a href="index.html#projects" aria-label="Projekte" + >Projekte</a + > + </li> + <li> + <a href="index.html#contact" aria-label="Kontakt" + >Kontakt</a + > + </li> + <li> + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="Mein LinkedIn Profil" + ><i class="fa-brands fa-linkedin"></i + ></a> + </li> + <li> + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="Mein Github Account" + ><i class="fa-brands fa-github"></i + ></a> + </li> + <li> + <a + href="index-en.html" + aria-label="Switch to English language" + >🇬🇧</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> - <article class="welcome-intro"> - <p> - 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. - </p> - <p> - 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> - </article> - </section> + <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> + <article class="welcome-intro"> + <p> + 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. + </p> + <p> + Ich bin sowohl in der Frontend als auch der Backend + Entwicklung zuhause . Meine Programmierkenntnisse + umfassen + <span class="text-emphasis" + >JavaScript, TypeScript, React, Vue.js, 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, PostgreSQL</span> und + <span class="text-emphasis">MongoDB</span>. + </p> + </article> + </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" - /> - <article class="text-container"> - <h3 class="subtitle">Note Book</h3> - <p> - <!-- <a + <!-- PROJECTS --> + <section class="projects-section" id="projects"> + <h2 class="title">Projektauswahl</h2> + <div class="project-container"> + <img + src="images/screenshot-robot-tracker.png" + alt="Ein Screenshot der Stadtkarte mit den Robotern" + class="project-screenshot" + /> + <article class="text-container"> + <h3 class="subtitle">Robot Tracker</h3> + <p> + <a + href="https://github.com/Arrief/robot-tracker" + target="_blank" + class="text-link" + aria-label="Github Repository für Robot Tracker" + >GitHub Code</a + > + </p> + <p> + Robot Tracker ist eine + <span class="text-emphasis" + >Full Stack Demo Webanwendung</span + >, die im Backend eine + <span class="text-emphasis" + >Simulation von konstanter Bewegung + durchführt</span + >, die Daten mit + <span class="text-emphasis">Redis</span> cached und + mit einer + <span class="text-emphasis">WebSocket</span> + Verbindung an das + <span class="text-emphasis">React Frontend</span> + übermittelt. Dort werden die aktuellen Standorte auf + einer + <span class="text-emphasis">OpenLayers</span> Karte + angezeigt und die Simulation gesteuert. + </p> + <p> + Erstellt mit: <br /> + <span class="text-emphasis" + >React, JavaScript, Node.js, Express.js, + PostgreSQL, Redis, WebSocket, HTML & CSS, + Docker</span + > + </p> + </article> + </div> + + <div class="project-container"> + <img + src="images/screenshot-note-book.png" + alt="Ein Screenshot der Büchersammlung eines Note Book Nutzers" + class="project-screenshot" + /> + <article class="text-container"> + <h3 class="subtitle">Note Book</h3> + <p> + <!-- <a href="https://the-note-book.netlify.app/" target="_blank" class="text-link" aria-label="Note Book live auf Netlify" >Website</a > | --> - <a - href="https://github.com/Arrief/note-book" - target="_blank" - class="text-link" - aria-label="Github Repository für Note Book" - >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> - </article> - </div> + <a + href="https://github.com/Arrief/note-book" + target="_blank" + class="text-link" + aria-label="Github Repository für Note Book" + >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> + </article> + </div> - <!-- reverse order class for smaller screen sizes --> - <div class="project-container"> - <article class="text-container"> - <h3 class="subtitle">All In Trips</h3> - <p> - <!-- <a + <!-- reverse order class for smaller screen sizes --> + <div class="project-container"> + <article class="text-container"> + <h3 class="subtitle">All In Trips</h3> + <p> + <!-- <a href="https://all-in-trips.netlify.app/" target="_blank" class="text-link" aria-label="All In Trips live auf Netlify" >Website</a > | --> - <a - href="https://github.com/Arrief/All-In-Trips" - target="_blank" - class="text-link" - aria-label="Github Repository für All In Trips" - >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> - </article> - <img - src="images/screenshot-all-in-trips.png" - alt="Ein Screenshot der Startseite von All In Trips" - class="project-screenshot" - /> - </div> + <a + href="https://github.com/Arrief/All-In-Trips" + target="_blank" + class="text-link" + aria-label="Github Repository für All In Trips" + >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> + </article> + <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" - /> - <article 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> - </article> - </div> - </section> + <!-- <div class="project-container"> + <img + src="images/screenshot-auriga.png" + alt="Ein Screenshot der Startseite von MiAuriga" + class="project-screenshot" + /> + <article 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> + </article> + </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="first-name">Vorname:</label> - <input - type="text" - id="first-name" - name="first-name" - placeholder="Ihr Vorname..." - required - /> - </div> - <div> - <label for="last-name">Nachname:</label> - <input - type="text" - id="last-name" - name="last-name" - placeholder="Ihr Nachname..." - required - /> - </div> - <div> - <label for="email">Email:</label> - <input - type="email" - id="email" - name="email" - placeholder="Ihre Email Adresse..." - required - /> - </div> - <div> - <label for="subject">Betreff:</label> - <input - type="text" - id="subject" - name="subject" - placeholder="Betreff..." - required - /> - </div> - <div class="text-area"> - <label for="message">Nachricht:</label> - <textarea - rows="20" - id="message" - 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> + <!-- 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="first-name">Vorname:</label> + <input + type="text" + id="first-name" + name="first-name" + placeholder="Ihr Vorname..." + required + /> + </div> + <div> + <label for="last-name">Nachname:</label> + <input + type="text" + id="last-name" + name="last-name" + placeholder="Ihr Nachname..." + required + /> + </div> + <div> + <label for="email">Email:</label> + <input + type="email" + id="email" + name="email" + placeholder="Ihre Email Adresse..." + required + /> + </div> + <div> + <label for="subject">Betreff:</label> + <input + type="text" + id="subject" + name="subject" + placeholder="Betreff..." + required + /> + </div> + <div class="text-area"> + <label for="message">Nachricht:</label> + <textarea + rows="20" + id="message" + 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" - aria-label="Mein LinkedIn Profil" - ><i class="fa-brands fa-linkedin big-icon"></i - ></a> - </dd> - <dt>Github:</dt> - <dd> - <a - href="https://github.com/Arrief" - target="_blank" - aria-label="Mein Github Account" - ><i class="fa-brands fa-github big-icon"></i - ></a> - </dd> - <dt>Email:</dt> - <dd> - <a href="#contact" aria-label="Zur Kontaktform"> - <i class="fa-solid fa-envelope big-icon"></i - ></a> - </dd> - </dl> - </address> - <p>© 2023 Arne Rief</p> - </footer> - </body> + <!-- FOOTER --> + <footer> + <address> + <dl> + <dt>LinkedIn:</dt> + <dd> + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="Mein LinkedIn Profil" + ><i class="fa-brands fa-linkedin big-icon"></i + ></a> + </dd> + <dt>Github:</dt> + <dd> + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="Mein Github Account" + ><i class="fa-brands fa-github big-icon"></i + ></a> + </dd> + <dt>Email:</dt> + <dd> + <a href="#contact" aria-label="Zur Kontaktform"> + <i class="fa-solid fa-envelope big-icon"></i + ></a> + </dd> + </dl> + </address> + <p>© 2023 Arne Rief</p> + </footer> + </body> </html> |