Add website to projects and add 404 page

- Added Codeberg project to Projects
- Added Not Found page
- Improved responsiveness of the navbar

src/App.svelte

@@ -8,6 +8,7 @@
     import Projects from "./lib/routes/Projects.svelte";
     import Links from "./lib/routes/Links.svelte";
     import FirstPost from "./lib/posts/FirstPost.svelte";
+    import NotFound from "./lib/routes/NotFound.svelte";
 </script>
 
 <Router>
@@ -25,6 +26,8 @@
             <Route path="/links" component={Links} primary={false}/>
 
             <Route path="/blog/first-post" component={FirstPost}/>
+
+            <Route path="*" component={NotFound} primary={false}/>
         </main>
     </div>
 </Router>
@@ -47,4 +50,15 @@
     main {
         width: 40vw;
     }
+
+    @media only screen and (max-width: 600px) {
+        div {
+            display: block;
+            width: 100%;
+        }
+
+        main {
+            width: 90%;
+        }
+    }
 </style>

src/lib/Navbar.svelte

@@ -2,28 +2,38 @@
     import {Link} from "svelte-navigator";
 </script>
 
-<i>yo</i>
+<div class="top">
-<ul>
+    <div>
-    <li><Link to="/">inicio y sobre mí</Link></li>
+        <i>yo</i>
-    <li><Link to="/contact">contacto</Link></li>
+        <ul>
-</ul>
+            <li><Link to="/">inicio y sobre mí</Link></li>
+            <li><Link to="/contact">contacto</Link></li>
+        </ul>
+    </div>
 
-<i>mi cabeza</i>
+    <div>
-<ul>
+        <i>mi cabeza</i>
-    <li><Link to="/blog">weblog</Link></li>
+        <ul>
-    <li><Link to="/recommendations">recomendaciones</Link></li>
+            <li><Link to="/blog">weblog</Link></li>
-</ul>
+            <li><Link to="/recommendations">recomendaciones</Link></li>
+        </ul>
+    </div>
 
-<i>creaciones</i>
+    <div>
-<ul>
+        <i>creaciones</i>
-    <li><Link to="/projects">proyectos</Link></li>
+        <ul>
-    <!--<li><Link to="/services">servicios</Link></li>-->
+            <li><Link to="/projects">proyectos</Link></li>
-</ul>
+            <!--<li><Link to="/services">servicios</Link></li>-->
+        </ul>
+    </div>
 
-<i>sitios</i>
+    <div>
-<ul>
+        <i>sitios</i>
-    <li><Link to="/links">enlaces</Link></li>
+        <ul>
-</ul>
+            <li><Link to="/links">enlaces</Link></li>
+        </ul>
+    </div>
+</div>
 
 <style>
     ul {
@@ -50,4 +60,12 @@
     li :global(a) {
         color: white;
     }
+
+    @media only screen and (max-width: 600px) {
+        .top {
+            display: flex;
+            gap: 10px;
+            overflow: scroll;
+        }
+    }
 </style>

src/lib/routes/NotFound.svelte

@@ -0,0 +1,9 @@
+<script>
+    import {Link} from "svelte-navigator";
+</script>
+
+<h1>recurso no encontrado</h1>
+<p>
+    Parece que aquí no hay nada. Si esto te sorprende o resulta extraño,
+    <Link to="/contact">ponte en contacto conmigo</Link>.
+</p>

src/lib/routes/Projects.svelte

@@ -14,3 +14,13 @@
 <p>
     Actualizaré esta página cuando realice algún proyecto bajo mi nombre que merezca la pena ver.
 </p>
+
+<h2>proyectos irrelevantes</h2>
+<h3>sofi web | <a href="https://codeberg.org/sofiaritz/website">repo</a></h3>
+<p>
+    Una web simple, con contenido prácticamente estático, hecha en Svelte. En un futuro trataré de usar
+    <a href="https://kit.svelte.dev/docs/page-options#prerender">static rendering</a> en lugar de CSR.
+</p>
+<p>
+    El código fuente de esta página está disponible <a href="https://codeberg.org/sofiaritz/website">Codeberg</a>.
+</p>