Update project files and README

- Updated `.vscode/settings.json` to remove TypeScript SDK path.
- Enhanced `README.md` with project details, technologies used, features, and setup instructions.
- Modified `src/lib/markdoc/nodes/Fence.svelte` to improve language handling and UI styling.
- Adjusted `src/lib/markdoc/shiki.ts` to export available languages.
- Improved navigation in `src/lib/components/layout/links/nav-links.svelte` with better state management and transitions.
- Updated styles in various components for consistency and responsiveness.

.github/workflows/metrics.yml

@@ -0,0 +1,28 @@
+# Visit https://github.com/lowlighter/metrics#-documentation for full reference
+name: Metrics
+on:
+  # Schedule updates (onec a month)
+  schedule: [{ cron: '0 0 1 * *' }]
+  # Lines below let you run workflow manually and on each commit
+  workflow_dispatch:
+  push: { branches: ['main'] }
+jobs:
+  github-metrics:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: lowlighter/metrics@latest
+        with:
+          # Current configuration doesn't require a GitHub token
+          token: NOT_NEEDED
+
+          # Options
+          user: IslamZaoui
+          template: classic
+          base: ''
+          config_timezone: Africa/Algiers
+          plugin_pagespeed: yes
+          plugin_pagespeed_detailed: yes
+          plugin_pagespeed_pwa: yes
+          plugin_pagespeed_url: https://islamzaoui.top/

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "svelte.svelte-vscode",
+    "inlang.vs-code-extension",
+    "stripe.markdoc-language-support",
+    "esbenp.prettier-vscode",
+    "csstools.postcss",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -3,6 +3,5 @@
 		"./user/experiences/schema.json": ["experiences/*.yaml"],
 		"./user/projects/schema.json": ["projects/*.yaml"],
 		"./user/uses/schema.json": ["uses/*.yaml"]
-	},
-	"typescript.tsdk": "node_modules\\typescript\\lib"
+	}
 }

README.md

@@ -1,38 +1,69 @@
-# create-svelte
+<p align="center">
+<a href="https://islamzaoui.top"><img src=https://github.com/islamzaoui/portfolio/blob/main/static/pwa-512x512.png width=96 hieght=96 style="border-radius: 9999px; object-fit: cover;" /></a>
+</p>
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+<h1 align="center">Islam Zaoui</h1>
 
-## Creating a project
+<p align="center">
+Simply Awesome <b>Blazingly Fast</b> Portfolio built with <b>SvelteKit</b> and <b>❤</b>
+</p>
 
-If you're seeing this, you've probably already done this step. Congrats!
+<p align="center"><a href="https://pagespeed.web.dev/analysis?url=https://islamzaoui.top/&form_factor=desktop"><img style="float:middle" width="auto" alt="PAGESPEED" src="https://github.com/islamzaoui/portfolio/blob/main/github-metrics.svg"></a></p>
+
+## Used Technologies
+
+- **SvelteKit**: A framework for building web applications.
+- **TypeScript**: A superset of JavaScript that adds static types.
+- **Tailwind CSS**: A utility-first CSS framework for styling.
+- **Vite**: A build tool that provides a fast development environment.
+- **Paraglide JS**: For internationalization and localization.
+- **Markdoc**: A preprocessor for markdown documents.
+
+## Features
+
+- **Responsive Design**: Optimized for both desktop and mobile devices.
+- **Fast Loading Times**: Built with performance in mind.
+- **SEO Friendly**: Includes meta tags and structured data for better search engine visibility.
+- **Multi-language Support**: Available in English and Arabic.
+- **Contact Form**: Allows users to reach out directly through the website.
+- **Dynamic Content**: Fetches and displays blog posts, projects, and experiences dynamically.
+
+## Get Started
+
+### Clone Repository
 
 ```bash
-# create a new project in the current directory
-npm create svelte@latest
+git clone https://github.com/IslamZaoui/portfolio.git
+```
+
+### Rename `.env.example` to `.env`
 
-# create a new project in my-app
-npm create svelte@latest my-app
+```plaintext
+# Private
+STATIC_FORM_KEY = "your static form key"
 ```
 
-## Developing
+you can get your key from [StaticForm](https://www.staticforms.xyz/)
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+### Install Dependencies
 
 ```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+bun install
 ```
 
-## Building
+you can use yarn or pnpm
 
-To create a production version of your app:
+### Run Development Server
 
 ```bash
-npm run build
+bun dev
 ```
 
-You can preview the production build with `npm run preview`.
+## Acknowledges
+
+- [ansubkhan](https://ansubkhan.com/) for the inspiration
+- [shadcn-svelte](https://github.com/shadcn-svelte) for the best UI library
+
+## License
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+This project is licensed under the GNU GPLv3 License. See the [LICENSE](LICENSE) file for more details.

src/lib/components/layout/links/nav-links.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
+	import { writable, type Unsubscriber } from 'svelte/store';
 	import { page } from '$app/stores';
 	import * as m from '@i18n';
 	import { i18n } from '@/i18n';
 	import { fly } from 'svelte/transition';
+	import { onDestroy } from 'svelte';
 
 	$: nav = [
 		{
@@ -34,20 +35,29 @@
 
 	let selectedIndex = writable(0);
 	let navRefs: HTMLAnchorElement[] = [];
-	const position = writable({ width: 0, left: 0 });
+	const position = writable({ width: 0, left: 0, opacity: 0 });
+
+	let pageUnsubscribe: Unsubscriber;
+	let selectedIndexUnsubscribe: Unsubscriber;
 
 	$: if (nav) {
-		page.subscribe(() => {
+		pageUnsubscribe = page.subscribe(() => {
 			$selectedIndex = nav.findIndex((item) => item.selected);
 		});
 
-		selectedIndex.subscribe((index) => {
+		selectedIndexUnsubscribe = selectedIndex.subscribe((index) => {
 			position.set({
 				width: navRefs[index]?.offsetWidth,
-				left: navRefs[index]?.offsetLeft
+				left: navRefs[index]?.offsetLeft,
+				opacity: navRefs[index] ? 1 : 0
 			});
 		});
 	}
+
+	onDestroy(() => {
+		pageUnsubscribe?.();
+		selectedIndexUnsubscribe?.();
+	});
 </script>
 
 <nav class="relative mb-2 mt-6 flex w-fit gap-2" in:fly={{ duration: 200, y: 20 }}>
@@ -57,14 +67,14 @@
 			bind:this={navRefs[i]}
 			{title}
 			class:text-background={selected}
-			class="relative z-10 p-2 px-3 text-sm font-medium"
+			class="relative z-10 p-2 px-3 text-sm font-medium transition-colors duration-300"
 		>
 			{name}
 		</a>
 	{/each}
 
 	<span
 		class="transition-position absolute bottom-0 top-0 z-0 rounded-xl bg-foreground duration-300"
-		style="width: {$position.width}px; left: {$position.left}px"
+		style="width: {$position.width}px; left: {$position.left}px; opacity: {$position.opacity}"
 	/>
 </nav>

src/lib/markdoc/nodes/Fence.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { Button } from '@/components/ui/button';
-	import { codeToHtml } from '../shiki';
+	import { availableLanguages, codeToHtml } from '../shiki';
 	import copy from 'lucide-svelte/icons/copy';
 	import check from 'lucide-svelte/icons/check';
 	import { fade } from 'svelte/transition';
@@ -20,13 +20,7 @@
 	 */
 	export let process;
 
-	let html = '';
-
-	try {
-		html = codeToHtml(content, language);
-	} catch {
-		process = false;
-	}
+	let html = codeToHtml(content, availableLanguages.includes(language) ? language : 'plaintext');
 
 	let copyState = false;
 
@@ -41,7 +35,7 @@
 
 <section class="not-prose relative w-full" dir="ltr">
 	<div class="absolute right-0 top-3 flex w-full items-center justify-between px-4">
-		<span class="text-lg font-bold text-primary">{language}</span>
+		<span class="text-lg font-bold text-white">{language}</span>
 		<Button
 			size="icon"
 			variant="ghost"
@@ -69,22 +63,10 @@
 
 <style lang="postcss">
 	:global(.shiki) {
-		@apply rounded-xl p-4 pb-8 pt-14;
+		@apply rounded-xl p-4 pb-8 pt-16;
 	}
 
 	:global(.shiki code) {
-		@apply text-wrap;
-		counter-reset: step;
-		counter-increment: step 0;
-	}
-
-	:global(.shiki code .line::before) {
-		content: counter(step);
-		counter-increment: step;
-		width: 1rem;
-		margin-right: 1.5rem;
-		display: inline-block;
-		text-align: right;
-		color: rgba(115, 138, 148, 0.4);
+		@apply text-wrap break-words;
 	}
 </style>

src/lib/markdoc/shiki.ts

@@ -19,6 +19,8 @@ const shiki = createHighlighterCoreSync({
 	engine: createJavaScriptRegexEngine()
 });
 
+export const availableLanguages = shiki.getLoadedLanguages()
+
 export const codeToHtml = (content: string, language: string) => {
 	return shiki.codeToHtml(content, {
 		lang: language,

src/routes/+layout.svelte

@@ -43,6 +43,5 @@
 		<slot slot="page" />
 		<Layout.Footer slot="footer" />
 	</Layout.Root>
-
 	<GoToTop />
 </ParaglideJS>

src/routes/uses/+page.svelte

@@ -15,7 +15,7 @@
 <section class="w-full space-y-4">
 	{#each Object.entries(data.uses) as [title, tools]}
 		<h3 class="text-xl font-semibold">{title}</h3>
-		<ul class="ml-5 list-disc space-y-3">
+		<ul class="mx-9 list-disc space-y-3">
 			{#each tools as tool}
 				<li>
 					<svelte:element