Add actual content to the current two virtual Monaco files ("Preview …

…README.md" and "+page.svelte")

src/lib/components/monaco-viewer/MonacoViewer.svelte

@@ -86,6 +86,7 @@ function closeFile(file: MonacoFile) {
     #editor > pre {
       margin: 0;
       height: calc(100% - 22px);
+        
       /*
         22px on top for breadcrumbs
         68px on left for line numbers

src/lib/media/monaco-viewer/virtual-files/+page.svelte

@@ -1 +1,34 @@
-<p>This is an example Svelte file</p>
+<script lang="ts">
+import { description, title } from "$lib/page-meta";
+
+/* This site also uses Typescript, although my first experience with Typescript was for chat-analytics */
+const CHAT_ANALYTICS_GITHUB = "https://github.com/mlomb/chat-analytics";
+</script>
+
+<svelte:head>
+  <title>{$title || "website"}</title>
+  <meta name="description" content={$description} />
+</svelte:head>
+
+<main>
+  <p>Svelte is the language I used to make the very site you are looking at!</p>
+  <p>Specifically, I use SvelteKit, which uses Vite to handle things like bundling.</p>
+  <p>
+    I first tried SvelteKit for my A Level computer science coursework as part my project
+    <a href="https://github.com/hopperelec/DefinitionDash">"Definition Dash"</a>
+  </p>
+</main>
+
+<style lang="scss">
+/* These sites are also where I first got experience with SCSS, a CSS pre-processor */
+
+main {
+  height: 100%;
+  background-color: #aaa;
+  color: #fff;
+
+  & a {
+    text-decoration: none;
+  }
+}
+</style>

src/lib/media/monaco-viewer/virtual-files/Preview README.md

@@ -1 +1,5 @@
-This *is* an **example** Markdown file
+~This "Preview" isn't really a file, but a preview is cooler than just Markdown code so forgive me~
+
+I have gained experience with a _number_ of **languages and frameworks** through all the **projects I have worked on**.
+
+Open each file (from the explorer panel on the left) to learn more about some of my projects and the experience I've gained from them!