Created lots more pages

added few assets
started making project pages

package.json

@@ -14,6 +14,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
+		"@tailwindcss/typography": "^0.5.0",
 		"@types/lodash.sample": "^4.2.6",
 		"@types/lodash.samplesize": "^4.2.6",
 		"@types/node": "^17.0.8",
@@ -23,6 +24,7 @@
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^3.2.1",
+		"mdsvex": "^0.9.8",
 		"postcss": "^8.4.5",
 		"prettier": "^2.4.1",
 		"prettier-plugin-svelte": "^2.4.0",

src/components/About.svelte

@@ -2,7 +2,7 @@
 	import clsx from 'clsx';
 </script>
 
-<section class="grid md:grid-cols-3 gap-12">
+<section id="about" class="grid md:grid-cols-3 gap-12">
 	<img
 		src="profile.jpg"
 		alt="My face"
@@ -13,14 +13,18 @@
 			'rounded-full aspect-square w-32 mx-auto md:w-full'
 		])}
 	/>
-	<p class="text-4xl font-bold md:col-start-2 md:col-span-2 leading-normal">
+	<p class="text-3xl md:text-4xl font-bold md:col-start-2 md:col-span-2 leading-normal">
 		Hi, I'm Aleks. I create full stack web apps for fun!
 	</p>
-	<p class="md:col-start-2 md:col-span-2 text-xl leading-relaxed font-bold rounded-xl">
+	<p
+		class="md:col-start-2 md:col-span-2 text-xl leading-relaxed font-bold rounded-xl text-justify md:text-left"
+	>
 		I love using anything programming-related to turn some of my passions into projects for others
 		to enjoy. I use many technologies to achieve that and I'm always looking for something better or
 		to improve upon.<br />
-		I also love metal music, producing music, 3D printing, mechanical keyboards and woodworking.
+		I also love <span style="font-family: Cattedrale;">metal music</span>, producing music, 3D
+		printing, mechanical keyboards and woodworking.
+		<br />
 		<a href="/other" class="text-red-600 underline">Learn more about my hobbies here!</a>
 	</p>
 </section>

src/components/Bio.svelte

@@ -39,12 +39,12 @@
 <section class="grid xl:grid-cols-2 gap-10 xl:h-[32rem] xl:items-center ">
 	<div class="flex justify-between flex-col gap-3 xl:gap-10 h-min">
 		{#each periodData as period}
-			<div class="flex">
+			<div class="flex relative">
 				{#if period.short === selected.short}
 					<svg
 						transition:fly={{ x: -10 }}
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8 absolute left-16"
+						class="h-8 w-8 absolute -left-10"
 						viewBox="0 0 20 20"
 						fill="currentColor"
 					>
@@ -58,26 +58,26 @@
 				<button
 					on:click={() => handleClick(period)}
 					class={clsx(
-						'text-3xl xl:text-5xl font-bold flex gap-2 items-center h-8 text-zinc-400',
+						'text-2xl xl:text-5xl font-bold flex gap-2 items-center h-8 text-zinc-400',
 						selected.short === period.short && 'text-white'
 					)}
 				>
-					<p class="text-left">{period.full}</p>
+					<p class="text-left leading-tight">{period.full}</p>
 				</button>
 			</div>
 		{/each}
 	</div>
 
 	{#key selected.short}
 		<figure
-			in:fly={{ x: -10 }}
-			class="flex flex-col gap-5 h-[20rem] bg-zinc-100 p-5 rounded-xl shadow-md text-zinc-900"
+			in:fly={{ x: -10, opacity: 0 }}
+			class="flex flex-col gap-5 xl:h-[20rem] bg-zinc-100 p-5 rounded-xl shadow-md text-zinc-900"
 		>
-			<div in:fade class="flex gap-5 items-center">
-				<img src={selected.img} class="rounded-md w-32" alt={`${selected.full} logo`} />
-				<p class="text-5xl font-extrabold">{selected.full}</p>
+			<div class="flex gap-5 items-center">
+				<img src={selected.img} class="rounded-md xl:w-32 w-16" alt={`${selected.full} logo`} />
+				<p class="xl:text-5xl text-2xl font-extrabold">{selected.full}</p>
 			</div>
-			<figcaption in:fade={{ delay: 200 }}>{selected.description}</figcaption>
+			<figcaption in:fade>{selected.description}</figcaption>
 		</figure>
 	{/key}
 </section>

src/components/Hero.svelte

@@ -4,14 +4,18 @@
 			I'm a full-stack developer passionate about making usefull things in the best way possible.
 		</h2>
 		<div class="flex items-center gap-3 flex-col md:flex-row">
-			<button
-				class="bg-zinc-100 text-black w-56 rounded-full h-16 font-medium whitespace-nowrap px-4"
-				>Read about me</button
-			>
-			<button
-				class="text-zinc-100 border-2 border-zinc-500 w-56 rounded-full h-16 font-medium px-4 whitespace-nowrap"
-				>Check out my projects</button
-			>
+			<a href="#about">
+				<button
+					class="bg-zinc-100 text-black w-56 rounded-full h-16 font-medium whitespace-nowrap px-4 bg-opacity-90"
+					>Read about me</button
+				>
+			</a>
+			<a href="/projects">
+				<button
+					class="text-zinc-100 border-2 border-zinc-500 w-56 rounded-full h-16 font-medium px-4 whitespace-nowrap"
+					>Check out my projects</button
+				>
+			</a>
 		</div>
 	</div>
 	<h1 class="md:w-min mx-auto text-center text-red-800 col-start-1 row-start-1">

src/components/Languages.svelte

@@ -41,15 +41,29 @@
 	});
 </script>
 
-<section class="bg-zinc-200 rounded-3xl h-96 overflow-hidden relative">
-	<div class="absolute h-full p-10 z-20 ">
+<section class="bg-zinc-200 rounded-3xl overflow-hidden relative">
+	<div class="p-3  md:p-10 z-20 w-full h-full grid gap-3 md:grid-cols-2">
 		<p
-			class="text-7xl text-zinc-50 font-extrabold bg-zinc-800 w-min  p-5 z-20 bg-opacity-90 rounded-xl"
+			class="text-4xl sm:text-5xl text-zinc-50 font-extrabold bg-zinc-800 h-min p-5 z-20 bg-opacity-95 rounded-xl md:whitespace-nowrap"
 		>
-			What do I use
+			Who am I?
+		</p>
+		<p class="row-start-2 md:text-lg p-3 md:p-5 bg-zinc-800  rounded-xl bg-opacity-95">
+			I love learning, especially from other people. I usually spend my free time on
+			(over)researching my new hobbies. <br /> I am inspired by other people's great ideas and unique
+			approaches and love working in an environment with people who have those. I do not mind critique
+			at all, quite the opposite - I appreciate it.
+		</p>
+		<p class="row-span-2 md:text-lg p-3 md:p-5 bg-zinc-800  rounded-xl bg-opacity-95">
+			Besides programming I love woodworking and creating music. I have a page about these hobbies
+			so if you're curious check it out! I'm also a huge DIY fan. From electric bikes, to simple
+			smart home implementation with Raspberry Pi's, to a bunch of speakers I created from old
+			radios. I love 3D printing and maybe due to that mechanical keyboards are my jam and I have
+			multiple of these which you can of course check out in the hobby section (half of them are
+			printed).
 		</p>
 	</div>
-	<div class="absolute h-full w-full">
+	<div class="absolute h-full w-full left-0 top-0 z-0 opacity-30">
 		<div class="relative h-full filter blur-sm">
 			{#each randomImgs as i (i.src)}
 				<img
@@ -63,3 +77,9 @@
 		</div>
 	</div>
 </section>
+
+<style>
+	section > div {
+		grid-template-rows: auto 1fr;
+	}
+</style>

src/components/Nav.svelte

@@ -1,11 +1,34 @@
-<nav class="flex justify-between py-3 mt-10 mb-36 container mx-auto px-3">
+<script>
+	import { page } from '$app/stores';
+	import clsx from 'clsx';
+	$: path = $page.url.pathname;
+</script>
+
+<nav class="flex justify-between items-center py-3 md:mt-10 mb-36 container mx-auto px-3">
 	<a href="/" class="flex items-center">
-		<img src="favicon-32x32.png" alt="Aleksander Brymora logo" />
-		<p class="text-zinc-900 dark:text-white ml-5 font-medium text-xl">Aleksander Brymora</p>
+		<img src="/favicon-32x32.png" alt="Aleksander Brymora logo" />
+		<p class="text-red-800 ml-5 font-medium text-xl invisible sm:visible">Aleksander Brymora</p>
 	</a>
-	<ul class="flex gap-8 font-bold dark:text-zinc-400">
-		<li><a href="/" class="whitespace-nowrap">Main Page</a></li>
-		<li><a href="/projects">Projects</a></li>
-		<li><a href="/other">Other</a></li>
+	<ul class="flex gap-5 md:gap-8 font-bold dark:text-zinc-400">
+		<li>
+			<a href="/" class={clsx('whitespace-nowrap', path === '/' && 'text-zinc-100')}>Main Page</a>
+		</li>
+		<li>
+			<a
+				href="/projects"
+				class={clsx('whitespace-nowrap', path.includes('projects') && 'text-zinc-100')}>Projects</a
+			>
+		</li>
+		<li>
+			<a href="/other" class={clsx('whitespace-nowrap', path === '/other' && 'text-zinc-100')}
+				>Other</a
+			>
+		</li>
 	</ul>
 </nav>
+
+<style>
+	p {
+		font-family: Cattedrale;
+	}
+</style>

src/routes/api/images.json.ts

@@ -0,0 +1,10 @@
+export const get = async () => {
+	const allImgs = import.meta.glob('/static/tech-icons/*.{svg,png}');
+	// const paths = Object.keys(allImgs).map((p) =>
+	// 	p.replace(/\/static\/tech-icons\//, '').replace(/\.(png|svg)/, '')
+	// );
+	const paths = Object.keys(allImgs).map((p) => p.replace('/static', ''));
+	return {
+		body: { paths }
+	};
+};

src/routes/api/projects.json.ts

@@ -0,0 +1,20 @@
+export const get = async () => {
+	const allPostFiles = import.meta.glob('../projects/*.md');
+	const iterablePostFiles = Object.entries(allPostFiles);
+
+	const allProjects = await Promise.all(
+		iterablePostFiles.map(async ([path, resolver]) => {
+			const { metadata } = await resolver();
+			const postPath = path.slice(2, -3);
+
+			return {
+				meta: metadata,
+				path: postPath
+			};
+		})
+	);
+
+	return {
+		body: allProjects
+	};
+};

src/routes/index.svelte

@@ -1,12 +1,9 @@
-<script context="module">
-	export const load = () => {
-		const files = import.meta.glob(`/static/tech-icons/*.{png,svg}`);
-		const transformed = Object.keys(files).map((f) => f.replace('/static/', ''));
-		return {
-			props: {
-				paths: transformed
-			}
-		};
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ fetch }) => {
+		const imgs = await fetch('/api/images.json');
+		const { paths } = await imgs.json();
+		return { props: { paths } };
 	};
 </script>
 

src/routes/projects.svelte

@@ -0,0 +1,18 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ fetch }) => {
+		const projectPaths = await fetch('/api/projects.json');
+		const paths = await projectPaths.json();
+		return { props: { paths } };
+	};
+</script>
+
+<script>
+	export let paths;
+</script>
+
+<div class="flex flex-col">
+	{#each paths as p}
+		<a class="my-2 text-xl" href={p.path}>{p.meta.title}</a>
+	{/each}
+</div>

src/routes/projects/__layout.svelte

@@ -0,0 +1,88 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ fetch }) => {
+		const projectPaths = await fetch('/api/projects.json');
+		const paths = await projectPaths.json();
+
+		return {
+			props: { paths }
+		};
+	};
+</script>
+
+<script lang="ts">
+	import { page } from '$app/stores';
+	import clsx from 'clsx';
+
+	interface Project {
+		meta: { title: string; year: number; github?: string; website?: string };
+		path: string;
+	}
+
+	export let paths: Project[];
+	let data: Project;
+
+	$: {
+		data = paths.find((p) => p.path === $page.url.pathname);
+	}
+</script>
+
+<section class="grid gap-16 xl:grid-cols-project">
+	<aside class="flex flex-col xl:gap-5 gap-2 sticky h-min">
+		{#each paths as p}
+			<a
+				class={clsx(
+					'flex gap-3 items-center justify-between px-3 sm:px-5 py-2',
+					$page.url.pathname === p.path && 'text-zinc-800 bg-white rounded-xl '
+				)}
+				href={p.path}
+			>
+				<p class={clsx('font-bold text-lg')}>{p.meta.title}</p>
+				<div class="flex gap-2 items-center">
+					{#if p.meta.github}
+						<a
+							class="w-8 h-8 grid place-items-center text-zinc-50 bg-zinc-50 rounded-full hover:bg-zinc-200 transition-all"
+							href={p.meta.github}
+						>
+							<svg
+								height="32"
+								aria-hidden="true"
+								viewBox="0 0 16 16"
+								version="1.1"
+								width="32"
+								data-view-component="true"
+								class="octicon octicon-mark-github v-align-middle"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+								/>
+							</svg></a
+						>
+					{/if}
+					{#if p.meta.website}
+						<a
+							class="w-8 h-8 grid place-items-center text-zinc-50 bg-black rounded-full hover:bg-zinc-700 transition-all"
+							href={p.meta.website}
+							><svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+							>
+								<path
+									d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
+								/>
+								<path
+									d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
+								/>
+							</svg></a
+						>
+					{/if}
+				</div>
+			</a>
+		{/each}
+	</aside>
+
+	<slot />
+</section>

src/routes/projects/arduino.md

@@ -0,0 +1,21 @@
+---
+title: Arduino Projects
+year: 2020
+---
+<style>
+    article { @apply prose prose-invert prose-xl mb-32; }
+    img { @apply rounded-lg; }
+</style>
+
+<article>
+
+# Line following robot
+
+![Line following robot in action](/static/projects/arduino-robot.gif)
+
+This cute little robot is a culmination of a full semester of (learning) programming with few of my friends. We used Arduino to make a robot follow a black line and other guides towards the and of a track. It was my first battle with optimizations in code so the robot would keep up with all the information that was coming in. It was a life-changing experience and we have it on video!
+
+--- 
+
+The robot uses a whole array of sensors - Ultrasonic, IR or touch, to determine how to follow a line (or let's be real - get back to it). 
+</article>