From ed251ebf3871a36dc445e02942070d674f39a0f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sof=C3=ADa=20Aritz?= <sofi@sofiaritz.com>
Date: Mon, 2 Jan 2023 21:27:20 +0100
Subject: [PATCH] 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                 | 14 +++++++++
 src/lib/Navbar.svelte          | 56 ++++++++++++++++++++++------------
 src/lib/routes/NotFound.svelte |  9 ++++++
 src/lib/routes/Projects.svelte | 10 ++++++
 4 files changed, 70 insertions(+), 19 deletions(-)
 create mode 100644 src/lib/routes/NotFound.svelte

diff --git a/src/App.svelte b/src/App.svelte
index e1358d2..bd4f863 100644
--- a/src/App.svelte
+++ b/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>
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index 4140f4e..4f1af52 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -2,28 +2,38 @@
     import {Link} from "svelte-navigator";
 </script>
 
-<i>yo</i>
-<ul>
-    <li><Link to="/">inicio y sobre mí</Link></li>
-    <li><Link to="/contact">contacto</Link></li>
-</ul>
+<div class="top">
+    <div>
+        <i>yo</i>
+        <ul>
+            <li><Link to="/">inicio y sobre mí</Link></li>
+            <li><Link to="/contact">contacto</Link></li>
+        </ul>
+    </div>
 
-<i>mi cabeza</i>
-<ul>
-    <li><Link to="/blog">weblog</Link></li>
-    <li><Link to="/recommendations">recomendaciones</Link></li>
-</ul>
+    <div>
+        <i>mi cabeza</i>
+        <ul>
+            <li><Link to="/blog">weblog</Link></li>
+            <li><Link to="/recommendations">recomendaciones</Link></li>
+        </ul>
+    </div>
 
-<i>creaciones</i>
-<ul>
-    <li><Link to="/projects">proyectos</Link></li>
-    <!--<li><Link to="/services">servicios</Link></li>-->
-</ul>
+    <div>
+        <i>creaciones</i>
+        <ul>
+            <li><Link to="/projects">proyectos</Link></li>
+            <!--<li><Link to="/services">servicios</Link></li>-->
+        </ul>
+    </div>
 
-<i>sitios</i>
-<ul>
-    <li><Link to="/links">enlaces</Link></li>
-</ul>
+    <div>
+        <i>sitios</i>
+        <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>
diff --git a/src/lib/routes/NotFound.svelte b/src/lib/routes/NotFound.svelte
new file mode 100644
index 0000000..2b3a350
--- /dev/null
+++ b/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>
diff --git a/src/lib/routes/Projects.svelte b/src/lib/routes/Projects.svelte
index 00b950d..4197f4b 100644
--- a/src/lib/routes/Projects.svelte
+++ b/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>