diff options
Diffstat (limited to 'index-en.html')
| -rw-r--r-- | index-en.html | 635 |
1 files changed, 355 insertions, 280 deletions
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> |