Error pageHEAD master

author: Arne Rief <riearn@proton.me> 2026-07-17 22:55:05 +0200
committer: Arne Rief <riearn@proton.me> 2026-07-18 19:01:18 +0200
commit: 540eb6f8ff6422d0dff0a4d95352fd9fad8a8a30 (patch)
tree: a8cc5228b416641c4c44de8840e53acbaebb30b9
parent: 976a826b7111e2c440cd9a394d536ab302c14cbe (diff)
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 &rarr;</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>&copy; 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 &rarr;</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>&copy; 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>.
diff --git a/index.html b/index.html
index 16c9c7f..172a15b 100644
--- a/index.html
+++ b/index.html
@@ -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;
author	Arne Rief <riearn@proton.me>	2026-07-17 22:55:05 +0200
committer	Arne Rief <riearn@proton.me>	2026-07-18 19:01:18 +0200
commit	540eb6f8ff6422d0dff0a4d95352fd9fad8a8a30 (patch)
tree	a8cc5228b416641c4c44de8840e53acbaebb30b9
parent	976a826b7111e2c440cd9a394d536ab302c14cbe (diff)