Services

.gitpod.yml

@@ -1,9 +1,5 @@
-# This configuration file was automatically generated by Gitpod.
-# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
-# and commit this file to your remote git repository to share the goodness with others.
-
 tasks:
-  - init: npm install && npm run build
-    command: npm run dev
-
-
+  - init: npm install
+    command: |
+      export HMR_HOST=`gp url 3000`
+      npm run dev

src/components/Footer.svelte

@@ -1,5 +1,14 @@
-<footer class="flex flex-col justify-center items-center p-8 sm:px-0 bg-background">
-  <p>
+<footer class="flex flex-col justify-center items-center p-8 mt-10 sm:px-0 bg-background">
+  <div class="flex flex-col items-center text-center">
+    <p>
+      Contact me via <a href="mailto:[email protected]">Email</a> or find me on other medias:
+      <a href="https://github.com/loke-dev">Github</a>
+      | <a href="https://www.linkedin.com/in/lokecarlsson/">Linkedin</a>
+      | <a href="https://twitter.com/loke_dev">Twitter</a>
+    </p>
+  </div>
+
+  <p class="mt-8">
     All rights reserved © Loke Carlsson {new Date().getFullYear()}
   </p>
 </footer>

src/components/Header.svelte

@@ -12,6 +12,9 @@
       <li class:active={$page.url.pathname.includes("/journal")}>
         <a sveltekit:prefetch href="/journal">Journal</a>
       </li>
+      <li class:active={$page.url.pathname.includes("/services")}>
+        <a sveltekit:prefetch href="/services">Services</a>
+      </li>
       <li class:active={$page.url.pathname === "/contact"}>
         <a sveltekit:prefetch href="/contact">Contact</a>
       </li>

src/routes/index.svelte

@@ -15,13 +15,4 @@
 
 <section class="">
   <Hero />
-
-  <div class="flex flex-col items-center text-center mt-20">
-    <p>
-      Contact me via <a href="mailto:[email protected]">Email</a> or find me on other medias:
-      <a href="https://github.com/loke-dev">Github</a>
-      | <a href="https://www.linkedin.com/in/lokecarlsson/">Linkedin</a>
-      | <a href="https://twitter.com/loke_dev">Twitter</a>
-    </p>
-  </div>
 </section>

src/routes/services.svelte

@@ -0,0 +1,16 @@
+<script context="module">
+    import { dev } from "$app/env"
+
+    export const router = true
+    export const prerender = true
+  </script>
+
+  <svelte:head>
+    <title>Services - loke.dev</title>
+    <meta name="description" content="Some of the web development services I can provide help with." />
+  </svelte:head>
+
+  <div class="content">
+    <h1 class="mb-6">How can I help you?</h1>
+  </div>
+

svelte.config.js

@@ -24,6 +24,18 @@ const config = {
     },
     adapter: netlify(),
     vite: {
+      server: {
+        hmr: process.env.GITPOD_WORKSPACE_URL
+          ? {
+              // Due to port fowarding, we have to replace
+              // 'https' with the forwarded port, as this
+              // is the URI created by Gitpod.
+              host: process.env.GITPOD_WORKSPACE_URL.replace("https://", "3000-"),
+              protocol: "wss",
+              clientPort: 443
+            }
+          : true
+      },
       test: {
         environment: "jsdom",
         coverage: {