diff options
| -rw-r--r-- | error-en.html | 113 | ||||
| -rw-r--r-- | error.html | 115 | ||||
| -rw-r--r-- | index-en.html | 9 | ||||
| -rw-r--r-- | index.html | 10 | ||||
| -rw-r--r-- | sass/layout/_main-sections.scss | 7 |
5 files changed, 244 insertions, 10 deletions
diff --git a/error-en.html b/error-en.html new file mode 100644 index 0000000..c9c8526 --- /dev/null +++ b/error-en.html @@ -0,0 +1,113 @@ +<!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 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> + + <main> + <section class="error-section"> + <h2 class="title">There is nothing here...</h2> + <p>Oh no, took a wrong turn? 😟</p> + <a href="index-en.html" class="text-link">Back to the main page →</a> + </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> +</html> diff --git a/error.html b/error.html new file mode 100644 index 0000000..d64dd6a --- /dev/null +++ b/error.html @@ -0,0 +1,115 @@ +<!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" /> + + <!-- 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> + + <main> + <section class="error-section"> + <h2 class="title">Hier ist nichts...</h2> + <p>O nein, falsch abgebogen? 😟</p> + <a href="index.html" class="text-link">Zurück zur Startseite →</a> + </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> +</html> diff --git a/index-en.html b/index-en.html index 5fdf0f3..eda0462 100644 --- a/index-en.html +++ b/index-en.html @@ -101,12 +101,11 @@ <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 - > + <span class="text-emphasis"> + JavaScript, TypeScript, React, Vue.js, HTML, CSS, + </span> as well as - <span class="text-emphasis">Node.js, Express.js</span> + <span class="text-emphasis">PHP, Node.js, Express.js</span> and working with databases like <span class="text-emphasis">MySQL, PostgreSQL</span> and <span class="text-emphasis">MongoDB</span>. @@ -103,11 +103,11 @@ 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> + <span class="text-emphasis"> + JavaScript, TypeScript, React, Vue.js, HTML, CSS + </span> + , ebenso wie + <span class="text-emphasis">PHP, 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>. diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss index ad78012..c5ee4c2 100644 --- a/sass/layout/_main-sections.scss +++ b/sass/layout/_main-sections.scss @@ -15,6 +15,13 @@ } } +.error-section { + @include flex-column-center; + gap: 2rem; + @include mobile-container; + text-align: center; +} + .welcome-section { @include standard-grid; gap: 8rem; |