From fca87f49d9e36b3166af9226bffff6f214836beb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= <veikko@lintujarvi.fi>
Date: Sun, 9 Aug 2026 21:29:43 +0300
Subject: [PATCH] Add NotFound page with picture

- Create NotFound component that displays not-found.png
- Add SCSS styles for the NotFound page
- Update App.jsx to show NotFound page for invalid routes instead of redirecting

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
---
 src/App.jsx                                | 28 +++++++++++-----
 src/components/NotFound.jsx                | 15 +++++++++
 src/styles/components/NotFound.module.scss | 39 ++++++++++++++++++++++
 3 files changed, 73 insertions(+), 9 deletions(-)
 create mode 100644 src/components/NotFound.jsx
 create mode 100644 src/styles/components/NotFound.module.scss

diff --git a/src/App.jsx b/src/App.jsx
index 0569b06..d47fc2a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import Hero from './components/Hero';
 import About from './components/About';
 import Projects from './components/Projects';
 import Contact from './components/Contact';
+import NotFound from './components/NotFound';
 import Footer from './components/Footer';
 import styles from './App.module.scss';
 
@@ -27,18 +28,15 @@ export default function App() {
   const [displayedSection, setDisplayedSection] = useState(activeSection);
   const timerRef = useRef(null);
 
+  const path = location.pathname.substring(1) || 'home';
+  const notFound = !Object.keys(SECTIONS).includes(path);
+
   // Sync URL path with activeSection
   useEffect(() => {
-    const path = location.pathname.substring(1) || 'home';
-    if (Object.keys(SECTIONS).includes(path)) {
-      if (path !== activeSection) {
-        setActiveSection(path);
-      }
-    } else {
-      // Invalid path, redirect to home
-      navigate('/');
+    if (!notFound && path !== activeSection) {
+      setActiveSection(path);
     }
-  }, [location.pathname, activeSection, setActiveSection, navigate]);
+  }, [location.pathname, activeSection, setActiveSection, navigate, path, notFound]);
 
   useEffect(() => {
     if (theme === 'light') {
@@ -59,6 +57,18 @@ export default function App() {
   const isExiting = activeSection !== displayedSection;
   const Section = SECTIONS[displayedSection] ?? Hero;
 
+  if (notFound) {
+    return (
+      <>
+        <Navbar />
+        <main className={styles.enter}>
+          <NotFound />
+        </main>
+        <Footer />
+      </>
+    );
+  }
+
   return (
     <>
       <Navbar />
diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx
new file mode 100644
index 0000000..5fb69de
--- /dev/null
+++ b/src/components/NotFound.jsx
@@ -0,0 +1,15 @@
+import styles from '../styles/components/NotFound.module.scss';
+
+export default function NotFound() {
+  return (
+    <section id="not-found" className={styles.notFound}>
+      <div className={styles.inner}>
+        <div className={styles.imageContainer}>
+          <img src="/not-found.png" alt="Not found" className={styles.image} />
+        </div>
+        <h1 className={styles.title}>Page Not Found</h1>
+        <p className={styles.message}>The page you're looking for doesn't exist.</p>
+      </div>
+    </section>
+  );
+}
diff --git a/src/styles/components/NotFound.module.scss b/src/styles/components/NotFound.module.scss
new file mode 100644
index 0000000..21c4c6a
--- /dev/null
+++ b/src/styles/components/NotFound.module.scss
@@ -0,0 +1,39 @@
+@use '../variables' as *;
+
+.notFound {
+  padding: $space-24 $space-6;
+  min-height: 70vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.inner {
+  max-width: $max-width;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.imageContainer {
+  margin-bottom: $space-8;
+}
+
+.image {
+  max-width: 100%;
+  height: auto;
+  border-radius: $radius-lg;
+  box-shadow: 0 0 30px rgb(var(--color-primary-mid) / 0.2);
+}
+
+.title {
+  font-size: $text-4xl;
+  font-weight: 700;
+  color: $color-text;
+  margin-bottom: $space-4;
+}
+
+.message {
+  font-size: $text-lg;
+  color: $color-text-muted;
+  line-height: 1.6;
+}