diff options
| author | Arne Rief <arne.rief@gmail.com> | 2026-02-13 00:02:46 +0100 |
|---|---|---|
| committer | Arne Rief <arne.rief@gmail.com> | 2026-02-13 00:02:46 +0100 |
| commit | eed2831dd38930c4cf82e534c8fc6aa97360852b (patch) | |
| tree | f676e590b0c8f2a4678309b5f695d492b9d6c115 | |
| parent | c5badf0a8dce77c9fd7cd645f5a1e72c138e2ab4 (diff) | |
Update
| -rw-r--r-- | images/screenshot-robot-tracker.png | bin | 0 -> 1337985 bytes | |||
| -rw-r--r-- | index-en.html | 635 | ||||
| -rw-r--r-- | index.html | 710 |
3 files changed, 753 insertions, 592 deletions
diff --git a/images/screenshot-robot-tracker.png b/images/screenshot-robot-tracker.png Binary files differnew file mode 100644 index 0000000..2bc1a94 --- /dev/null +++ b/images/screenshot-robot-tracker.png diff --git a/index-en.html b/index-en.html index d3341b3..b717c23 100644 --- a/index-en.html +++ b/index-en.html @@ -1,203 +1,278 @@ -<!DOCTYPE html> +<!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" /> + <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 - Web Developer</title> - </head> - <body> - <!-- NAVBAR --> - <header> - <nav role="navigation"> - <ul> - <li> - <a href="index-en.html" aria-label="Back to main page" - ><h1>Arne Rief</h1></a - > - </li> - <li><a href="about-en.html" aria-label="About page">About me</a></li> - <li> - <a href="index-en.html#projects" aria-label="Projects">Projects</a> - </li> - <li> - <a href="index-en.html#contact" aria-label="Contact me">Contact</a> - </li> - <li> - <a - href="https://linkedin.com/in/arne-rief" - target="_blank" - aria-label="My LinkedIn Profile" - ><i class="fa-brands fa-linkedin"></i - ></a> - </li> - <li> - <a - href="https://github.com/Arrief" - target="_blank" - aria-label="My Github Account" - ><i class="fa-brands fa-github"></i - ></a> - </li> - <li> - <a href="index.html" aria-label="Switch to German language">🇩🇪</a> - </li> - </ul> - </nav> - </header> + <title>Arne Rief - Web Developer</title> + </head> + <body> + <!-- NAVBAR --> + <header> + <nav role="navigation"> + <ul> + <li> + <a href="index-en.html" aria-label="Back to main page" + ><h1>Arne Rief</h1></a + > + </li> + <li> + <a href="about-en.html" aria-label="About page" + >About me</a + > + </li> + <li> + <a href="index-en.html#projects" aria-label="Projects" + >Projects</a + > + </li> + <li> + <a href="index-en.html#contact" aria-label="Contact me" + >Contact</a + > + </li> + <li> + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="My LinkedIn Profile" + ><i class="fa-brands fa-linkedin"></i + ></a> + </li> + <li> + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="My Github Account" + ><i class="fa-brands fa-github"></i + ></a> + </li> + <li> + <a + href="index.html" + aria-label="Switch to German language" + >🇩🇪</a + > + </li> + </ul> + </nav> + </header> - <main> - <!-- WELCOME --> - <section class="welcome-section"> - <h2 class="title"> - Hello, I'm <span class="name">Arne</span>. <br /> - <span class="subtitle">Welcome to my web page! 👋🏻</span> - </h2> - <article class="welcome-intro"> - <p> - I am a - <span class="text-emphasis">full-stack web developer</span> with a - passion for learning, logic and combining both in order to create - meaningful and beautiful web applications. - </p> - <p> - Currently I am focusing on frontend development; my programming - skills include - <span class="text-emphasis" - >JavaScript, React, HTML, CSS, Sass</span - > - as well as - <span class="text-emphasis">Node.js, Express.js</span> and working - with databases like <span class="text-emphasis">MySQL</span> and - <span class="text-emphasis">MongoDB</span>. - </p> - </article> - </section> + <main> + <!-- WELCOME --> + <section class="welcome-section"> + <h2 class="title"> + Hello, I'm <span class="name">Arne</span>. <br /> + <span class="subtitle">Welcome to my web page! 👋🏻</span> + </h2> + <article class="welcome-intro"> + <p> + I am a + <span class="text-emphasis" + >full-stack web developer</span + > + with a passion for learning, logic and combining both in + order to create meaningful and beautiful web + applications. + </p> + <p> + I am well versed in both frontend and backend + development. My programming skills include + <span class="text-emphasis" + >JavaScript, TypeScript, React, Vue.js, HTML, CSS, + Sass</span + > + as well as + <span class="text-emphasis">Node.js, Express.js</span> + and working with databases like + <span class="text-emphasis">MySQL, PostgreSQL</span> and + <span class="text-emphasis">MongoDB</span>. + </p> + </article> + </section> - <!-- PROJECTS --> - <section class="projects-section" id="projects"> - <h2 class="title">Sample Projects</h2> - <div class="project-container"> - <img - src="images/screenshot-note-book.png" - alt="A screenshot of a Note Book user's book collection page" - 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">Sample Projects</h2> + <div class="project-container"> + <img + src="images/screenshot-robot-tracker.png" + alt="A screenshot of the city map with the robots" + 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 for Robot Tracker" + >GitHub Code</a + > + </p> + <p> + Robot Tracker is a + <span class="text-emphasis" + >full-stack demo application</span + >, which is running a + <span class="text-emphasis" + >simulation of constant movement</span + >, in the backend while caching the data with + <span class="text-emphasis">Redis</span> and + utilizing a + <span class="text-emphasis">WebSocket</span> + connection to boradcast the data to the + <span class="text-emphasis">React frontend</span> + . There the current position data is displayed on an + <span class="text-emphasis">OpenLayers</span> map + and the simulation can be controlled. + </p> + <p> + Created with: <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="A screenshot of a Note Book user's book collection page" + 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="Live demo of Note Book at Netlify" >Website</a > | --> - <a - href="https://github.com/Arrief/note-book" - target="_blank" - class="text-link" - aria-label="The Github repository for Note Book" - >GitHub Code</a - > - </p> - <p> - Note Book is a - <span class="text-emphasis">full-stack web application</span> for - book lovers. Sign up for a free account and build a - <span class="text-emphasis"> digital book collection</span>. Every - book in your collection comes with a "note book" for - <span class="text-emphasis">keeping track of your notes</span> on - the book and for storing remarkable quotations. Finding books, - notes and quotations is made easy thanks to a - <span class="text-emphasis">search function</span>. Additionally a - <span class="text-emphasis">filter</span> allows switching between - displaying notes or quotes only. - </p> - <p> - Created with: <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="The Github repository for Note Book" + >GitHub Code</a + > + </p> + <p> + Note Book is a + <span class="text-emphasis" + >full-stack web application</span + > + for book lovers. Sign up for a free account and + build a + <span class="text-emphasis"> + digital book collection</span + >. Every book in your collection comes with a "note + book" for + <span class="text-emphasis" + >keeping track of your notes</span + > + on the book and for storing remarkable quotations. + Finding books, notes and quotations is made easy + thanks to a + <span class="text-emphasis">search function</span>. + Additionally a + <span class="text-emphasis">filter</span> allows + switching between displaying notes or quotes only. + </p> + <p> + Created with: <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="Live demo of All In Trips at Netlify" >Website</a > | --> - <a - href="https://github.com/Arrief/All-In-Trips" - target="_blank" - class="text-link" - aria-label="The Github repository for All In Trips" - >GitHub Code</a - > - </p> - <p> - All In Trips is a - <span class="text-emphasis" - >frontend single page application</span - > - for planning your next vacation or business trip. Enter your - starting point, travel destination and the day of arrival and - departure <span class="text-emphasis">just once</span> to get an - overview of <span class="text-emphasis">the weather</span> at your - destination during your stay, the - <span class="text-emphasis">next flights</span> closest to your - current location and the - <span class="text-emphasis">cheapest hotels</span> available. With - data from <span class="text-emphasis">APIs</span>, provided by - reliable sources like - <span class="text-emphasis">Booking.com</span>. - </p> - <p> - Created with: <br /> - <span class="text-emphasis" - >React, JavaScript, 5 APIs, HTML & CSS</span - > - </p> - </article> - <img - src="images/screenshot-all-in-trips.png" - alt="A screenshot of a All In Trips' landing page" - class="project-screenshot" - /> - </div> + <a + href="https://github.com/Arrief/All-In-Trips" + target="_blank" + class="text-link" + aria-label="The Github repository for All In Trips" + >GitHub Code</a + > + </p> + <p> + All In Trips is a + <span class="text-emphasis" + >frontend single page application</span + > + for planning your next vacation or business trip. + Enter your starting point, travel destination and + the day of arrival and departure + <span class="text-emphasis">just once</span> to get + an overview of + <span class="text-emphasis">the weather</span> at + your destination during your stay, the + <span class="text-emphasis">next flights</span> + closest to your current location and the + <span class="text-emphasis">cheapest hotels</span> + available. With data from + <span class="text-emphasis">APIs</span>, provided by + reliable sources like + <span class="text-emphasis">Booking.com</span>. + </p> + <p> + Created with: <br /> + <span class="text-emphasis" + >React, JavaScript, 5 APIs, HTML & CSS</span + > + </p> + </article> + <img + src="images/screenshot-all-in-trips.png" + alt="A screenshot of a All In Trips' landing page" + class="project-screenshot" + /> + </div> - <div class="project-container"> + <!-- <div class="project-container"> <img src="images/screenshot-auriga.png" alt="A screenshot of a MiAuriga's landing page" @@ -229,105 +304,105 @@ > </p> </article> - </div> - </section> + </div> --> + </section> - <!-- CONTACT --> - <section class="contact-section" id="contact"> - <h2 class="title">Contact me</h2> - <form - action="https://formspree.io/f/xrgvpkbn" - method="POST" - class="messenger-form" - > - <div> - <label for="first-name">First Name:</label> - <input - type="text" - id="first-name" - name="first-name" - placeholder="Your name..." - required - /> - </div> - <div> - <label for="last-name">Last Name:</label> - <input - type="text" - id="last-name" - name="last-name" - placeholder="Your last name..." - required - /> - </div> - <div> - <label for="email">Email:</label> - <input - type="email" - id="email" - name="email" - placeholder="Your email address..." - required - /> - </div> - <div> - <label for="subject">Subject:</label> - <input - type="text" - id="subject" - name="subject" - placeholder="Subject..." - required - /> - </div> - <div class="text-area"> - <label for="message">Message:</label> - <textarea - rows="20" - id="message" - name="message" - placeholder="Your message..." - required - ></textarea> - </div> - <!-- disabling captcha for sending emails --> - <input type="hidden" name="_captcha" value="false" /> - <button type="submit">Send</button> - </form> - </section> - </main> + <!-- CONTACT --> + <section class="contact-section" id="contact"> + <h2 class="title">Contact me</h2> + <form + action="https://formspree.io/f/xrgvpkbn" + method="POST" + class="messenger-form" + > + <div> + <label for="first-name">First Name:</label> + <input + type="text" + id="first-name" + name="first-name" + placeholder="Your name..." + required + /> + </div> + <div> + <label for="last-name">Last Name:</label> + <input + type="text" + id="last-name" + name="last-name" + placeholder="Your last name..." + required + /> + </div> + <div> + <label for="email">Email:</label> + <input + type="email" + id="email" + name="email" + placeholder="Your email address..." + required + /> + </div> + <div> + <label for="subject">Subject:</label> + <input + type="text" + id="subject" + name="subject" + placeholder="Subject..." + required + /> + </div> + <div class="text-area"> + <label for="message">Message:</label> + <textarea + rows="20" + id="message" + name="message" + placeholder="Your message..." + required + ></textarea> + </div> + <!-- disabling captcha for sending emails --> + <input type="hidden" name="_captcha" value="false" /> + <button type="submit">Send</button> + </form> + </section> + </main> - <!-- FOOTER --> - <footer> - <address> - <dl> - <dt>LinkedIn:</dt> - <dd> - <a - href="https://linkedin.com/in/arne-rief" - target="_blank" - aria-label="My LinkedIn Profile" - ><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="My Github Account" - ><i class="fa-brands fa-github big-icon"></i - ></a> - </dd> - <dt>Email:</dt> - <dd> - <a href="#contact" aria-label="To the contact form"> - <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="My LinkedIn Profile" + ><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="My Github Account" + ><i class="fa-brands fa-github big-icon"></i + ></a> + </dd> + <dt>Email:</dt> + <dd> + <a href="#contact" aria-label="To the contact form"> + <i class="fa-solid fa-envelope big-icon"></i + ></a> + </dd> + </dl> + </address> + <p>© 2023 Arne Rief</p> + </footer> + </body> </html> @@ -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> |
