diff options
| author | Arne Rief <arne.rief@gmail.com> | 2023-02-10 21:40:00 +0100 |
|---|---|---|
| committer | Arne Rief <arne.rief@gmail.com> | 2023-02-11 14:53:10 +0100 |
| commit | 5bab4502a098eb0e3b5a59b68bc9d8d23529ea55 (patch) | |
| tree | b8a737694d1217f7af9a6884720678a179cacbb0 | |
Desktop version
24 files changed, 1279 insertions, 0 deletions
diff --git a/about-en.html b/about-en.html new file mode 100644 index 0000000..94a2e26 --- /dev/null +++ b/about-en.html @@ -0,0 +1,118 @@ +<!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 - Web Developer</title> + </head> + <body> + <!-- NAVBAR --> + <header> + <nav> + <ul> + <li> + <a href="index-en.html"><h1>Arne Rief</h1></a> + </li> + <li><a href="about-en.html">About me</a></li> + <li><a href="index-en.html#projects">Projects</a></li> + <li><a href="index-en.html#contact">Contact</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="about.html">🇩🇪</a></li> + </ul> + </nav> + </header> + + <main> + <section class="about-section"> + <div class="portrait-container"> + <img src="images/portrait.JPG" alt="Arne Rief" /> + </div> + <div class="text-container text-about"> + <p> + Hi, my name is <span class="text-emphasis">Arne Rief</span>. + Originally I studied history with the goal of an academic career in + mind. My coding journey started only because of my natural curiosity + and + <span class="text-emphasis" + >love for learning new things and skills</span + >. However, once I gave coding a try, it turned out that I enjoy it + so much (and apparently have a talent for it, too) that I decided to + to turn this new hobby into a new career path for me. + </p> + <p> + So far I've been enjoying this journey immensely, as it provides a + very + <span class="text-emphasis">creative and dynamic outlet</span> for + my + <span class="text-emphasis" + >analytical way of thinking, my attention to details and my drive + to always learn and grow both on a personal and professional + level</span + >. I'm always ready for + <span class="text-emphasis">new challenges</span> and I look forward + to hearing from you! + </p> + </div> + </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> diff --git a/about.html b/about.html new file mode 100644 index 0000000..3f32d93 --- /dev/null +++ b/about.html @@ -0,0 +1,120 @@ +<!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="index.html#projects">Projekte</a></li> + <li><a href="index.html#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="about-en.html">🇬🇧</a></li> + </ul> + </nav> + </header> + + <main> + <section class="about-section"> + <div class="portrait-container"> + <img src="images/portrait.JPG" alt="Arne Rief" /> + </div> + <div class="text-container text-about"> + <p> + Hallo, mein Name ist <span class="text-emphasis">Arne Rief</span>. + Ursprünglich hatte ich eine akademische Karriere als + Geschichtswissenschaftler geplant, als meine natürliche Neugier und + meine <span class="text-emphasis">Liebe fürs Lernen</span> mich dazu + brachten, mich am Programmieren zu versuchen. Als ich dann meine + ersten Schritte im Programmieren unternommen hatte, stellte ich + fest, dass ich so viel Spaß daran (und offenbar auch ein Talent + dafür) habe, dass ich mich dazu entschloss, dieses neue Hobby zu + einem neuen Karrierepfad für mich zu machen. + </p> + <p> + Bisher habe ich die Reise auf diesem neuen Pfad sehr genossen. Denn + hier habe ich ein + <span class="text-emphasis" + >kreatives und dynamisches Betätigungsfeld</span + > + gefunden für meine + <span class="text-emphasis" + >analytische Denkenweise, mein Auge fürs Detail und meinen + Antrieb, immer Neues zu lernen und sowohl persönlich als auch + beruflich zu wachsen</span + >. Für <span class="text-emphasis">neue Herausforderungen</span> bin + ich immer offen und bereit. Ich freue mich darauf, von Ihnen zu + hören! + </p> + </div> + </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> diff --git a/images/portrait.JPG b/images/portrait.JPG Binary files differnew file mode 100755 index 0000000..affbcef --- /dev/null +++ b/images/portrait.JPG diff --git a/images/screenshot-all-in-trips.png b/images/screenshot-all-in-trips.png Binary files differnew file mode 100755 index 0000000..e3aa54e --- /dev/null +++ b/images/screenshot-all-in-trips.png diff --git a/images/screenshot-auriga.png b/images/screenshot-auriga.png Binary files differnew file mode 100644 index 0000000..17928ff --- /dev/null +++ b/images/screenshot-auriga.png diff --git a/images/screenshot-note-book.png b/images/screenshot-note-book.png Binary files differnew file mode 100644 index 0000000..e7f2291 --- /dev/null +++ b/images/screenshot-note-book.png diff --git a/index-en.html b/index-en.html new file mode 100644 index 0000000..0ba491d --- /dev/null +++ b/index-en.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 - Web Developer</title> + </head> + <body> + <!-- NAVBAR --> + <header> + <nav> + <ul> + <li> + <a href="index-en.html"><h1>Arne Rief</h1></a> + </li> + <li><a href="about-en.html">About me</a></li> + <li><a href="#projects">Projects</a></li> + <li><a href="#contact">Contact</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.html">🇩🇪</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> + <p class="welcome-intro"> + 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. 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> + </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" + /> + <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 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> + </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 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> + </div> + <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"> + <img + src="images/screenshot-auriga.png" + alt="A screenshot of a MiAuriga's landing page" + class="project-screenshot" + /> + <div class="text-container"> + <h3 class="subtitle">MiAuriga</h3> + <p class="note-auriga"> + Website and repository are property of Auriga + </p> + <p> + As a <span class="text-emphasis">client project</span>, I worked + on the website MiAuriga. The + <span class="text-emphasis">Spanish company Auriga</span> is a + provider for all services related to cars. As part of a + <span class="text-emphasis">complete restructure</span> of both + the looks and functionality of the website, my tasks included + working on the + <span class="text-emphasis">re-design of the frontend</span> as + well as taking part in the planning and implementing of the + <span class="text-emphasis">newly created database</span> for + migrating the data of Auriga's customers. + </p> + <p> + Created with: <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">Contact me</h2> + <form + action="https://formspree.io/f/xrgvpkbn" + method="POST" + class="messenger-form" + > + <div> + <label for="name">First Name:</label> + <input + type="text" + name="name" + placeholder="Your name..." + required + /> + </div> + <div> + <label for="name">Last Name:</label> + <input + type="text" + name="name" + placeholder="Your last name..." + required + /> + </div> + <div> + <label for="email">Email:</label> + <input + type="email" + name="email" + placeholder="Your email address..." + required + /> + </div> + <div> + <label for="subject">Subject:</label> + <input + type="text" + name="subject" + placeholder="Subject..." + required + /> + </div> + <div class="text-area"> + <label for="message">Message:</label> + <textarea + rows="20" + 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" + ><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> 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> diff --git a/sass/abstracts/_animations.scss b/sass/abstracts/_animations.scss new file mode 100644 index 0000000..819b356 --- /dev/null +++ b/sass/abstracts/_animations.scss @@ -0,0 +1,32 @@ +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +// text start on the left and transparent when the page loads, then moves into regular position +@keyframes moveInLeft { + 0% { + opacity: 0; + transform: translateX(-10rem); + } + 100% { + opacity: 1; + transform: translate(0); + } +} + +// skew to match the design of the .text-container class +@keyframes moveInRight { + 0% { + opacity: 0; + transform: translateX(10rem) skewX(-12deg); + } + 100% { + opacity: 1; + transform: translate(0) skewX(-12deg); + } +} diff --git a/sass/abstracts/_index.scss b/sass/abstracts/_index.scss new file mode 100644 index 0000000..9563860 --- /dev/null +++ b/sass/abstracts/_index.scss @@ -0,0 +1,3 @@ +@forward "animations"; +@forward "mixins"; +@forward "variables"; diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss new file mode 100644 index 0000000..98351c4 --- /dev/null +++ b/sass/abstracts/_mixins.scss @@ -0,0 +1,32 @@ +@use "variables" as *; + +@mixin main-link-hover { + color: $text-special-light; + transform: translateY(-0.3rem); +} + +@mixin flex-sp-around-center { + display: flex; + align-items: center; + justify-content: space-around; +} + +@mixin standard-grid { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: center; +} + +@mixin narrow-container { + margin: 3rem auto; +} + +@mixin wide-container { + margin: 10rem auto; + width: 80%; + + h2 { + margin-bottom: 5rem; + } +} diff --git a/sass/abstracts/_variables.scss b/sass/abstracts/_variables.scss new file mode 100644 index 0000000..5aea3e6 --- /dev/null +++ b/sass/abstracts/_variables.scss @@ -0,0 +1,19 @@ +// colors +$col-main-light: #023059; +$col-main-dark: #093d5ec5; +$bg-text-container: #173d5a; +$text-main: #ececec; +$text-dark: #252424; +$text-special-dark: #e79759; +$text-special-light: #ecbf4b; + +// font +$big-text: 2rem; +$medium-text: 1.5rem; +$medium-text-mobile: 1.3rem; +$small-text: 1.1rem; + +// layout +$margin-main: 3rem 4rem 2rem 4rem; +$margin-mobile: 2rem; +$radius-text-container: 10px; diff --git a/sass/base/_base.scss b/sass/base/_base.scss new file mode 100644 index 0000000..2211bca --- /dev/null +++ b/sass/base/_base.scss @@ -0,0 +1,43 @@ +@use "../abstracts" as *; + +*, +*::after, +*::before { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +html, +body { + // min-height to ensure footer sticks to bottom and background doesn't repeat + min-height: 100vh; + width: 100vw; +} + +body { + background: linear-gradient( + 45deg, + rgba($col-main-light, 0.89) 0%, + rgba($col-main-dark, 0.84) 100% + ); + background-repeat: no-repeat; + background-size: cover; + box-sizing: border-box; + color: $text-main; + // grid to ensure footer sticks to the bottom in all cases; body consists of header (auto), main (1fr) and footer (auto); needs min-height 100vh too, here added to "html, body" + display: grid; + grid-template-rows: auto 1fr auto; + font-family: "Inter", sans-serif; + font-size: $small-text; + line-height: 1.5; +} + +main { + height: 100%; + margin: $margin-main; + + & * { + animation: fade-in 2s ease-out; + } +} diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss new file mode 100644 index 0000000..38f3a3f --- /dev/null +++ b/sass/base/_typography.scss @@ -0,0 +1,39 @@ +@use "../abstracts/variables" as *; + +.text-link { + color: $text-special-dark; + + &:hover { + background-color: $text-special-dark; + border-radius: 2px; + color: $text-dark; + text-decoration: none; + } +} + +.text-emphasis { + color: $text-special-light; + font-weight: bold; +} + +.title { + font-family: "Archivo Black", sans-serif; + color: $text-special-light; + font-size: $big-text; + width: fit-content; +} + +.subtitle { + font-family: "Archivo Black", sans-serif; + color: $text-special-dark; + font-size: $medium-text; +} + +.name { + font-size: calc(2 * $big-text); +} + +.note-auriga { + color: $text-special-dark; + font-style: italic; +} diff --git a/sass/components/_button.scss b/sass/components/_button.scss new file mode 100644 index 0000000..2d5b50c --- /dev/null +++ b/sass/components/_button.scss @@ -0,0 +1,21 @@ +@use "../abstracts/" as *; + +button { + color: $text-dark; + background-color: $text-special-light; + border: none; + border-radius: 10px; + font-style: inherit; + font-weight: bold; + padding: 0.7rem; + text-transform: uppercase; + width: 35%; + + &:hover { + background-color: $text-special-dark; + } + + &:active { + outline: 3px solid $text-dark; + } +} diff --git a/sass/components/_contact-form.scss b/sass/components/_contact-form.scss new file mode 100644 index 0000000..a2a9c40 --- /dev/null +++ b/sass/components/_contact-form.scss @@ -0,0 +1,40 @@ +@use "../abstracts/" as *; + +.messenger-form { + @include standard-grid; + gap: 2rem; + width: 50%; + + // container for each label & input + div { + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: column; + gap: 1rem; + + // div container with textarea input spans entire column, pushes button to next row + &.text-area { + grid-column: 1 / 3; + } + } + + label { + font-weight: bold; + } + + input, + textarea { + background-color: $text-main; + border: none; + border-radius: 10px; + padding: 0.5rem; + width: 100%; + + &:focus { + color: $text-main; + background-color: $bg-text-container; + outline: 3px solid $text-special-dark; + } + } +} diff --git a/sass/components/_portrait-container.scss b/sass/components/_portrait-container.scss new file mode 100644 index 0000000..819b18e --- /dev/null +++ b/sass/components/_portrait-container.scss @@ -0,0 +1,15 @@ +@use "../abstracts/animations" as *; + +.portrait-container { + height: 50vh; + width: fit-content; + animation: moveInLeft 2s ease-out; + backface-visibility: hidden; + + img { + border-radius: 25px; + height: 100%; + width: 100%; + object-fit: scale-down; + } +} diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss new file mode 100644 index 0000000..d6d4e68 --- /dev/null +++ b/sass/components/_project-container.scss @@ -0,0 +1,6 @@ +@use "../abstracts/" as *; + +.project-container { + @include flex-sp-around-center; + gap: 2rem; +} diff --git a/sass/components/_screenshot-container.scss b/sass/components/_screenshot-container.scss new file mode 100644 index 0000000..8c28462 --- /dev/null +++ b/sass/components/_screenshot-container.scss @@ -0,0 +1,15 @@ +@use "../abstracts/" as *; + +.project-screenshot { + border-radius: $radius-text-container; + outline: 5px solid $text-special-dark; + outline-offset: 1.5rem; + object-fit: scale-down; + width: 40%; + transition: transform 0.6s ease; + + &:hover { + transform: scale(1.2); + z-index: 100; + } +} diff --git a/sass/components/_text-container.scss b/sass/components/_text-container.scss new file mode 100644 index 0000000..0108f94 --- /dev/null +++ b/sass/components/_text-container.scss @@ -0,0 +1,20 @@ +@use "../abstracts" as *; + +.text-container { + background-color: $bg-text-container; + border-radius: $radius-text-container; + box-shadow: 0 2rem 3.5rem rgba(#000, 0.6); + padding: 3.5rem; + transform: skewX(-12deg); + width: 50%; + + // margin between paragraphs but not below the last paragraph + & p:not(:last-child) { + margin-bottom: 1.5rem; + } +} + +.text-about { + animation: moveInRight 2s ease-out; + backface-visibility: hidden; +} diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss new file mode 100644 index 0000000..ecfb0a5 --- /dev/null +++ b/sass/layout/_footer.scss @@ -0,0 +1,60 @@ +@use "../abstracts" as *; + +footer { + background-color: $bg-text-container; + // delete positioning to make grid footer from body work + // position: absolute; + // bottom: 0; + // left: 0; + width: 100%; + + & * { + margin: $margin-main; + } + + dl { + display: flex; + justify-content: center; + align-items: center; + height: 2rem; + + & * { + color: inherit; + font-size: $medium-text; + margin: 0.5rem; + transition: transform 0.3s; + } + + & dd i:hover { + @include main-link-hover; + } + } + + p { + text-align: center; + } + + .big-icon { + font-size: $big-text; + } +} + +@media screen and (max-width: 420px) { + footer { + top: 100; + + & * { + margin: $margin-mobile; + } + + dl { + flex-direction: column; + height: max-content; + + & * { + font-size: $medium-text-mobile; + margin: 0.3rem; + } + } + } +} diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss new file mode 100644 index 0000000..fb2d433 --- /dev/null +++ b/sass/layout/_main-sections.scss @@ -0,0 +1,32 @@ +@use "../abstracts/" as *; + +.about-section { + @include flex-sp-around-center; + @include narrow-container; +} + +.welcome-section { + @include standard-grid; + gap: 8rem; + @include narrow-container; + width: 60%; + + .welcome-intro { + border-radius: $radius-text-container; + outline: 3px solid $text-special-dark; + outline-offset: 1rem; + } +} + +.projects-section { + @include wide-container; + + // less margin between h2 and the 2nd child = first project-container + & > div:not(:nth-child(2)) { + margin-top: 10rem; + } +} + +.contact-section { + @include wide-container; +} diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss new file mode 100644 index 0000000..d57f3d7 --- /dev/null +++ b/sass/layout/_nav.scss @@ -0,0 +1,61 @@ +@use "../abstracts" as *; + +nav { + background-color: $bg-text-container; + font-family: "Archivo Black", sans-serif; + height: 10vh; + width: 100%; + + ul { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-end; + height: 100%; + list-style-type: none; + padding: 0 3rem; + width: 100%; + } + + // logo to the left side of navbar + li:first-child { + text-align: left; + margin-right: auto; + } + + li a { + display: block; + color: inherit; + font-size: $medium-text; + padding: 0 1.5rem; + text-align: center; + transition: transform 0.3s; + text-decoration: none; + white-space: nowrap; + + &:hover { + @include main-link-hover; + } + } +} + +// mobile +@media screen and (max-width: 770px) { + nav { + ul { + gap: 1rem; + justify-content: center; + padding: 0; + } + + li:first-child { + text-align: center; + margin-right: 1.5rem; + } + + li a { + font-size: 1rem; + padding: 0; + } + } +} diff --git a/sass/main.scss b/sass/main.scss new file mode 100644 index 0000000..40ac841 --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,13 @@ +@use "base/base"; +@use "base/typography"; + +@use "layout/nav"; +@use "layout/main-sections"; +@use "layout/footer"; + +@use "components/text-container"; +@use "components/portrait-container"; +@use "components/project-container.scss"; +@use "components/screenshot-container.scss"; +@use "components/contact-form"; +@use "components/button"; |
