Projects

package.json

@@ -13,6 +13,11 @@
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
   },
+  "dependencies": {
+    "@splitbee/web": "^0.3.0",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.2"
+  },
   "devDependencies": {
     "@sveltejs/adapter-netlify": "^1.0.0-next.51",
     "@sveltejs/kit": "next",
@@ -42,10 +47,5 @@
     "typescript": "^4.6.3",
     "vitest": "^0.8.4",
     "vitest-svelte-kit": "0.0.6"
-  },
-  "dependencies": {
-    "@splitbee/web": "^0.3.0",
-    "@tailwindcss/aspect-ratio": "^0.4.0",
-    "@tailwindcss/typography": "^0.5.2"
   }
 }

src/components/Header.svelte

@@ -9,6 +9,9 @@
       <li class:active={$page.url.pathname === "/about"}>
         <a sveltekit:prefetch href="/about">About</a>
       </li>
+      <li class:active={$page.url.pathname === "/projects"}>
+        <a sveltekit:prefetch href="/projects">Projects</a>
+      </li>
       <li class:active={$page.url.pathname.includes("/journal")}>
         <a sveltekit:prefetch href="/journal">Journal</a>
       </li>

src/components/Project.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  export const variant: string = "right"
+  export let prefix: string
+  export let title: string
+  export let image: string
+</script>
+
+<div class="relative max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+  <div class="mx-auto text-base max-w-prose lg:grid lg:grid-cols-2 lg:gap-8 lg:max-w-none">
+    <div>
+      {#if prefix}
+        <span class="text-base text-primary font-semibold tracking-wide">{prefix}</span>
+      {/if}
+      {#if title}
+        <h3
+          class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-100 sm:text-4xl}"
+        >
+          {title}
+        </h3>
+      {/if}
+    </div>
+  </div>
+  <div class="mt-8 lg:grid lg:grid-cols-2 lg:gap-8">
+    <div class="relative lg:row-start-1 lg:col-start-2">
+      <svg
+        class="hidden lg:block absolute top-0 right-0 -mt-20 -mr-20"
+        width={404}
+        height={384}
+        fill="none"
+        viewBox="0 0 404 384"
+        aria-hidden="true"
+      >
+        <defs>
+          <pattern
+            id="square-pattern"
+            x={0}
+            y={0}
+            width={20}
+            height={20}
+            patternUnits="userSpaceOnUse"
+          >
+            <rect x={0} y={0} width={4} height={4} class="text-faded" fill="currentColor" />
+          </pattern>
+        </defs>
+        <rect width={404} height={384} fill="url(#square-pattern)" />
+      </svg>
+      <div class="relative text-base mx-auto max-w-prose lg:max-w-none">
+        <figure>
+          <div class="aspect-w-12 aspect-h-7 lg:aspect-none">
+            <picture>
+              <source srcSet={`${image}.webp`} type="image/webp" />
+              <img
+                class="rounded-lg shadow-lg bg-white object-contain object-center"
+                src={`${image}.png`}
+                alt={title}
+                width={370}
+                height={370}
+              />
+            </picture>
+          </div>
+        </figure>
+      </div>
+    </div>
+    <div class="mt-8 lg:mt-0">
+      <div class="prose mx-auto lg:max-w-none lg:row-start-1 lg:col-start-1">
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>

src/routes/projects.svelte

@@ -0,0 +1,17 @@
+<script context="module">
+  import { dev } from "$app/env"
+  import Project from "$components/Project.svelte"
+
+  export const hydrate = dev
+  export const router = true
+  export const prerender = true
+</script>
+
+<svelte:head>
+  <title>Projects - loke.dev</title>
+  <meta name="description" content="This is the short story of Loke." />
+</svelte:head>
+
+<div class="">
+  <Project prefix="SaaS" title="Gitdash" image="/images/gitdash">hello world</Project>
+</div>