images and stuff

package.json

@@ -1,34 +1,33 @@
 {
-  "name": "bgenc.net-new",
+	"name": "bgenc.net-new",
-  "version": "0.0.1",
+	"version": "0.0.1",
-  "private": true,
+	"private": true,
-  "scripts": {
+	"scripts": {
-    "dev": "vite dev",
+		"dev": "vite dev",
-    "build": "vite build",
+		"build": "vite build",
-    "preview": "vite preview",
+		"preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
+		"lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
+		"format": "prettier --write ."
-  },
+	},
-  "devDependencies": {
+	"devDependencies": {
-    "@sveltejs/adapter-auto": "^2.1.1",
+		"@sveltejs/adapter-auto": "^2.1.1",
-    "@sveltejs/kit": "^1.27.6",
+		"@sveltejs/kit": "^1.27.6",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
+		"@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
+		"@typescript-eslint/parser": "^6.11.0",
-    "eslint": "^8.54.0",
+		"eslint": "^8.54.0",
-    "eslint-config-prettier": "^9.0.0",
+		"eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-svelte": "^2.35.0",
+		"eslint-plugin-svelte": "^2.35.0",
-    "prettier": "^3.1.0",
+		"mdsvex": "^0.11.0",
-    "prettier-plugin-svelte": "^3.1.0",
+		"prettier": "^3.1.0",
-    "svelte": "^4.2.5",
+		"prettier-plugin-svelte": "^3.1.0",
-    "svelte-check": "^3.6.0",
+		"svelte": "^4.2.5",
-    "tslib": "^2.6.2",
+		"svelte-check": "^3.6.0",
-    "typescript": "^5.2.2",
+		"tslib": "^2.6.2",
-    "vite": "^4.4.2"
+		"typescript": "^5.2.2",
-  },
+		"vite": "^4.4.2",
-  "type": "module",
+		"vite-imagetools": "^6.2.4"
-  "dependencies": {
+	},
-    "mdsvex": "^0.11.0"
+	"type": "module"
-  }
 }

src/app.css

@@ -61,9 +61,6 @@ input, button, textarea, select {
 p, h1, h2, h3, h4, h5, h6 {
   overflow-wrap: break-word;
 }
-ol, ul {
-  list-style: none;
-}
 
 body {
   min-height: 100vh;

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/prism/gruvbox/dark.css

@@ -0,0 +1,143 @@
+/**
+ * Gruvbox dark theme
+ *
+ * Adapted from a theme based on:
+ * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox)
+ *
+ * @author Azat S. <to@azat.io>
+ * @version 1.0
+ */
+
+ code[class*="language-"],
+ pre[class*="language-"] {
+   color: #ebdbb2; /* fg1 / fg */
+   font-family: Consolas, Monaco, "Andale Mono", monospace;
+   direction: ltr;
+   text-align: left;
+   white-space: pre;
+   word-spacing: normal;
+   word-break: normal;
+   line-height: 1.5;
+ 
+   -moz-tab-size: 4;
+   -o-tab-size: 4;
+   tab-size: 4;
+ 
+   -webkit-hyphens: none;
+   -moz-hyphens: none;
+   -ms-hyphens: none;
+   hyphens: none;
+ }
+ 
+ pre[class*="language-"]::-moz-selection,
+ pre[class*="language-"] ::-moz-selection,
+ code[class*="language-"]::-moz-selection,
+ code[class*="language-"] ::-moz-selection {
+   color: #fbf1c7; /* fg0 */
+   background: #7c6f64; /* bg4 */
+ }
+ 
+ pre[class*="language-"]::selection,
+ pre[class*="language-"] ::selection,
+ code[class*="language-"]::selection,
+ code[class*="language-"] ::selection {
+   color: #fbf1c7; /* fg0 */
+   background: #7c6f64; /* bg4 */
+ }
+ 
+ /* Code blocks */
+ pre[class*="language-"] {
+   padding: 1em;
+   overflow: auto;
+ }
+ 
+ :not(pre) > code[class*="language-"],
+ pre[class*="language-"] {
+   background: #1d2021; /* bg0_h */
+ }
+ 
+ /* Inline code */
+ :not(pre) > code[class*="language-"] {
+   padding: 0.1em;
+   border-radius: 0.3em;
+ }
+ 
+ .token.comment,
+ .token.prolog,
+ .token.cdata {
+   color: #a89984; /* fg4 / gray1 */
+ }
+ 
+ .token.delimiter,
+ .token.boolean,
+ .token.keyword,
+ .token.selector,
+ .token.important,
+ .token.atrule {
+   color: #fb4934; /* red2 */
+ }
+ 
+ .token.operator,
+ .token.punctuation,
+ .token.attr-name {
+   color: #a89984; /* fg4 / gray1 */
+ }
+ 
+ .token.tag,
+ .token.tag .punctuation,
+ .token.doctype,
+ .token.builtin {
+   color: #fabd2f; /* yellow2 */
+ }
+ 
+ .token.entity,
+ .token.number,
+ .token.symbol {
+   color: #d3869b; /* purple2 */
+ }
+ 
+ .token.property,
+ .token.constant,
+ .token.variable {
+   color: #fb4934; /* red2 */
+ }
+ 
+ .token.string,
+ .token.char {
+   color: #b8bb26; /* green2 */
+ }
+ 
+ .token.attr-value,
+ .token.attr-value .punctuation {
+   color: #a89984; /* fg4 / gray1 */
+ }
+ 
+ .token.url {
+   color: #b8bb26; /* green2 */
+   text-decoration: underline;
+ }
+ 
+ .token.function {
+   color: #fabd2f; /* yellow2 */
+ }
+ 
+ .token.regex {
+   background: #b8bb26; /* green2 */
+ }
+ 
+ .token.bold {
+   font-weight: bold;
+ }
+ 
+ .token.italic {
+   font-style: italic;
+ }
+ 
+ .token.inserted {
+   background: #a89984; /* fg4 / gray1 */
+ }
+ 
+ .token.deleted {
+   background: #fb4934; /* red2 */
+ }
+ 

src/prism/gruvbox/light.css

@@ -0,0 +1,143 @@
+/**
+ * Gruvbox light theme
+ *
+ * Based on Gruvbox: https://github.com/morhetz/gruvbox
+ * Adapted from PrismJS gruvbox-dark theme: https://github.com/schnerring/prism-themes/blob/master/themes/prism-gruvbox-dark.css
+ *
+ * @author Michael Schnerring (https://schnerring.net)
+ * @version 1.0
+ */
+
+ code[class*="language-"],
+ pre[class*="language-"] {
+   color: #3c3836; /* fg1 / fg */
+   font-family: Consolas, Monaco, "Andale Mono", monospace;
+   direction: ltr;
+   text-align: left;
+   white-space: pre;
+   word-spacing: normal;
+   word-break: normal;
+   line-height: 1.5;
+ 
+   -moz-tab-size: 4;
+   -o-tab-size: 4;
+   tab-size: 4;
+ 
+   -webkit-hyphens: none;
+   -moz-hyphens: none;
+   -ms-hyphens: none;
+   hyphens: none;
+ }
+ 
+ pre[class*="language-"]::-moz-selection,
+ pre[class*="language-"] ::-moz-selection,
+ code[class*="language-"]::-moz-selection,
+ code[class*="language-"] ::-moz-selection {
+   color: #282828; /* fg0 */
+   background: #a89984; /* bg4 */
+ }
+ 
+ pre[class*="language-"]::selection,
+ pre[class*="language-"] ::selection,
+ code[class*="language-"]::selection,
+ code[class*="language-"] ::selection {
+   color: #282828; /* fg0 */
+   background: #a89984; /* bg4 */
+ }
+ 
+ /* Code blocks */
+ pre[class*="language-"] {
+   padding: 1em;
+   overflow: auto;
+ }
+ 
+ :not(pre) > code[class*="language-"],
+ pre[class*="language-"] {
+   background: #f9f5d7; /* bg0_h */
+ }
+ 
+ /* Inline code */
+ :not(pre) > code[class*="language-"] {
+   padding: 0.1em;
+   border-radius: 0.3em;
+ }
+ 
+ .token.comment,
+ .token.prolog,
+ .token.cdata {
+   color: #7c6f64; /* fg4 / gray1 */
+ }
+ 
+ .token.delimiter,
+ .token.boolean,
+ .token.keyword,
+ .token.selector,
+ .token.important,
+ .token.atrule {
+   color: #9d0006; /* red2 */
+ }
+ 
+ .token.operator,
+ .token.punctuation,
+ .token.attr-name {
+   color: #7c6f64; /* fg4 / gray1 */
+ }
+ 
+ .token.tag,
+ .token.tag .punctuation,
+ .token.doctype,
+ .token.builtin {
+   color: #b57614; /* yellow2 */
+ }
+ 
+ .token.entity,
+ .token.number,
+ .token.symbol {
+   color: #8f3f71; /* purple2 */
+ }
+ 
+ .token.property,
+ .token.constant,
+ .token.variable {
+   color: #9d0006; /* red2 */
+ }
+ 
+ .token.string,
+ .token.char {
+   color: #797403; /* green2 */
+ }
+ 
+ .token.attr-value,
+ .token.attr-value .punctuation {
+   color: #7c6f64; /* fg4 / gray1 */
+ }
+ 
+ .token.url {
+   color: #797403; /* green2 */
+   text-decoration: underline;
+ }
+ 
+ .token.function {
+   color: #b57614; /* yellow2 */
+ }
+ 
+ .token.regex {
+   background: #797403; /* green2 */
+ }
+ 
+ .token.bold {
+   font-weight: bold;
+ }
+ 
+ .token.italic {
+   font-style: italic;
+ }
+ 
+ .token.inserted {
+   background: #7c6f64; /* fg4 / gray1 */
+ }
+ 
+ .token.deleted {
+   background: #9d0006; /* red2 */
+ }
+ 

src/routes/+layout.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
-	import Spacer from '$lib/spacer.svelte';
 	import '../app.css';
+	import '../typography.css';
+	import '../prism/gruvbox/light.css';
+
+	import Spacer from '$lib/spacer.svelte';
 	import Footer from './footer.svelte';
 	import Header from './header.svelte';
 </script>
@@ -9,3 +12,11 @@
 <main><slot /></main>
 <Spacer />
 <Footer />
+<img src={''} />
+
+<style>
+	main {
+		margin: 2rem auto;
+		max-width: var(--size-container);
+	}
+</style>

src/routes/+page.md

@@ -0,0 +1,17 @@
+<script>
+  import Avif from "./profile.avif";
+  import Jpeg from "./profile.avif?format=jpeg";
+  import WebP from "./profile.avif?format=webp";
+</script>
+
+<picture>
+  <source srcset={Avif} type="image/avif">
+  <source srcset={WebP} type="image/webp">
+  <img src={Jpeg} class="circle" alt="Kaan, wearing a beanie, in front of some shrubbery." style="max-width:20rem">
+</picture>
+
+# Kaan Barmore-Genç
+
+Hi! I'm a Software Engineer, an avid Linux user, an enthusiast of many programming languages, a home cook, and an amateur gardener.
+
+My interests include building web and mobile applications, both front and back end. Over the years I learned and used many programming languages and technologies, including JavaScript, TypeScript, React, React Native, Python, Java, C, C++, Clojure, Rust, and Haskell. Pretty much everything I've worked on is open source and available on my Github page.

src/routes/+page.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-	const x = 1;
-	const y = 2;
-	const z = 3;
-	const p = 0;
-</script>
-
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

src/typography.css

@@ -0,0 +1,47 @@
+h1 {
+  font-size: 2.5rem;
+}
+h2 {
+  font-size: 2rem;
+}
+h3 {
+  font-size: 1.8rem;
+}
+h4 {
+  font-size: 1.5rem;
+}
+h5 {
+  font-size: 1.25rem;
+}
+h6 {
+  font-size: 1.125rem;
+}
+a {
+  color: var(--color-secondary);
+  text-decoration: none;
+}
+
+pre {
+  white-space: pre-wrap;
+  margin: 1rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 1rem 0 2rem 0;
+  font-weight: bold;
+}
+
+p {
+  margin: 1.5rem 0;
+}
+
+li {
+  margin: 0.5rem 0 0.5rem 2rem;
+}
+ul li {
+  list-style-type: "🬙  ";
+}
+ul li::marker {
+  font-size: 0.6rem;
+}
+

svelte.config.js

@@ -9,7 +9,8 @@ const config = {
 	preprocess: [
 		vitePreprocess(),
 		mdsvex({
-			extensions: ['.md']
+			extensions: ['.md'],
+			smartypants: true
 		})
 	],
 

vite.config.ts

@@ -1,6 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import { imagetools } from 'vite-imagetools';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [imagetools(), sveltekit()]
 });