added keystatic cms

.gitignore

@@ -0,0 +1,26 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+*lock.json
+.vscode/

README.md

@@ -0,0 +1,48 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -0,0 +1,22 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import tailwindcss from '@tailwindcss/vite';
+import svelte from '@astrojs/svelte';
+import react from '@astrojs/react';
+import markdoc from '@astrojs/markdoc';
+import keystatic from '@keystatic/astro';
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()]
+  },
+
+  integrations: [
+    svelte({ extensions: ['.svelte'] }),
+    react(),
+    markdoc(),
+    keystatic()
+  ]
+});

keystatic.config.ts

@@ -0,0 +1,50 @@
+import { config, fields, collection } from '@keystatic/core';
+
+export default config({
+  storage: {
+    kind: 'local',
+  },
+
+  collections: {
+    posts: collection({
+      label: 'Posts',
+      slugField: 'title',
+      path: 'src/content/posts/*',
+      format: { contentField: 'content' },
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        link: fields.url({ label: "Link" }),
+        content: fields.markdoc({
+          label: 'Content',
+        }),
+      },
+    }),
+    projects: collection({
+      label: 'Projects',
+      slugField: 'title',
+      path: 'src/content/projects/*',
+      format: { contentField: 'content' },
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        demo: fields.url({ label: "Demo" }),
+        source: fields.url({ label: "Source" }),
+        content: fields.markdoc({
+          label: 'Content',
+        }),
+      },
+    }),
+    about: collection({
+      label: 'About',
+      slugField: 'name',
+      path: 'src/content/about/*',
+      format: { contentField: 'content' },
+      schema: {
+        name: fields.text({ label: "Name" }),
+        location: fields.text({ label: "Location" }),
+        content: fields.markdoc({
+          label: 'Content',
+        }),
+      },
+    }),
+  },
+});

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "shaggy-star",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/markdoc": "^0.12.10",
+    "@astrojs/react": "^4.2.1",
+    "@astrojs/svelte": "^7.0.5",
+    "@keystatic/astro": "^5.0.6",
+    "@keystatic/core": "^0.5.46",
+    "@tailwindcss/vite": "^4.0.9",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "astro": "^5.4.1",
+    "flowbite": "^3.1.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "svelte": "^5.20.5",
+    "tailwindcss": "^4.0.9",
+    "typescript": "^5.8.2"
+  }
+}

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/assets/background.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

src/components/About.astro

@@ -0,0 +1,83 @@
+---
+import { getCollection } from "astro:content";
+import type { AboutEntry } from "../types/about";
+import "../styles/global.css";
+
+const about: AboutEntry[] = await getCollection("about");
+---
+
+<div class="grid justify-center">
+    <div
+        class="max-w-sm bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-blue-700 dark:border-gray-500"
+    >
+        <a href="#">
+            <img
+                class="rounded-t-lg"
+                src="/docs/images/blog/image-1.jpg"
+                alt=""
+            />
+        </a>
+        <div class="p-5">
+            
+            {
+                about.map((element) => (
+                    <a href="#">
+                        <h5
+                            class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
+                        >
+                            {element.data.name}
+                        </h5>
+                    </a>
+                    <div class="grid auto-cols-max grid-flow-col">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            height="24px"
+                            viewBox="0 -960 960 960"
+                            width="24px"
+                            fill="#e8eaed"
+                        >
+                            <path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z" />
+                        </svg>
+
+                        <p class="mb-3 font-normal text-gray-700 dark:text-white">
+                            {element.data.location}
+                        </p>
+                    </div>
+                ))
+            }
+
+            <p class="mb-3 font-normal text-gray-700 dark:text-white">
+                Interests
+            </p>
+
+            <span
+                class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-900 dark:text-blue-300"
+                >Full stack</span
+            >
+            <span
+                class="bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-red-900 dark:text-red-300"
+                >Web</span
+            >
+            <span
+                class="bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-green-900 dark:text-green-300"
+                >LLM</span
+            >
+            <span
+                class="bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-yellow-900 dark:text-yellow-300"
+                >Svelte</span
+            >
+            <span
+                class="bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-indigo-900 dark:text-indigo-300"
+                >React</span
+            >
+            <span
+                class="bg-purple-100 text-purple-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-purple-900 dark:text-purple-300"
+                >Docker</span
+            >
+            <span
+                class="bg-pink-100 text-pink-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-pink-900 dark:text-pink-300"
+                >JVM</span
+            >
+        </div>
+    </div>
+</div>

src/components/AboutCard.svelte

@@ -0,0 +1,32 @@
+<div class="grid justify-center">
+<div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-blue-700 dark:border-gray-500">
+    <a href="#">
+        <img class="rounded-t-lg" src="/docs/images/blog/image-1.jpg" alt="" />
+    </a>
+    <div class="p-5">
+        <a href="#">
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">My Name</h5>
+        </a>
+        <div class="grid auto-cols-max grid-flow-col">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>
+                
+            <p class="mb-3 font-normal text-gray-700 dark:text-white">
+                Location
+            </p>
+        </div>
+        
+        <p class="mb-3 font-normal text-gray-700 dark:text-white">
+            Interests
+        </p>
+        
+        <span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-900 dark:text-blue-300">Full stack</span>
+        <span class="bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-red-900 dark:text-red-300">Web</span>
+        <span class="bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-green-900 dark:text-green-300">LLM</span>
+        <span class="bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">Svelte</span>
+        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-indigo-900 dark:text-indigo-300">React</span>
+        <span class="bg-purple-100 text-purple-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-purple-900 dark:text-purple-300">Docker</span>
+        <span class="bg-pink-100 text-pink-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-pink-900 dark:text-pink-300">JVM</span>
+    </div>
+</div>
+
+</div>

src/components/Blog.svelte

@@ -0,0 +1,24 @@
+<!-- Blog Posts Section -->
+<section class="blog-posts mt-5">
+    <h2 class="text-3xl font-bold mb-4 dark:text-white">Blog Posts</h2>
+    <div class="grid grid-cols-1 gap-6">
+        <article class="bg-white dark:bg-indigo-700 rounded-lg shadow-md p-4">
+            <h3 class="text-lg font-bold mb-2 dark:text-white">Post 1 Title</h3>
+            <p class="text-gray-600 dark:text-white">This is the first blog post.</p>
+            <a
+                href="#"
+                class="inline-block bg-blue-600 mt-3 hover:bg-blue-700 text-white py-2 px-4 rounded"
+                >Read</a
+            >
+        </article>
+        <article class="bg-white rounded-lg shadow-md p-4 dark:bg-indigo-700">
+            <h3 class="text-lg font-bold mb-2 dark:text-white">Post 2 Title</h3>
+            <p class="text-gray-600 dark:text-white">This is the second blog post.</p>
+            <a
+                href="#"
+                class="inline-block bg-blue-600 mt-3 hover:bg-blue-700 text-white py-2 px-4 rounded"
+                >Read</a
+            >
+        </article>
+    </div>
+</section>

src/components/BlogList.astro

@@ -0,0 +1,26 @@
+---
+import { getCollection } from "astro:content";
+import type { PostEntry } from "../types/posts";
+import "../styles/global.css";
+
+const posts: PostEntry[] = await getCollection('posts');
+---
+
+<!-- Projects Section -->
+<section class="projects mt-5">
+    <h2 class="text-3xl font-bold mb-4 dark:text-white">Blog Posts</h2>
+    <div class="grid grid-cols-1 gap-6">
+        {posts.map((post) => (
+            <article class="bg-white dark:bg-indigo-700 rounded-lg shadow-md p-4">
+                <h3 class="text-lg font-bold mb-2 dark:text-white">{post.data.title}</h3>
+                <p class="text-gray-600 dark:text-white">{post.body}</p>
+                <a
+                    href={post.data.link}
+                    class="inline-block bg-blue-600 mt-3 hover:bg-blue-700 text-white py-2 px-4 rounded"
+                    >Read</a>
+            </article>
+        ))}
+    </div>
+</section>
+
+

src/components/ContactCard.svelte

@@ -0,0 +1,44 @@
+<div class="grid justify-center">
+    <div
+        class="max-w-sm bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700"
+    >
+        <a href="#">
+            <img
+                class="rounded-t-lg"
+                src="/docs/images/blog/image-1.jpg"
+                alt=""
+            />
+        </a>
+        <div class="p-5">
+            <a href="#">
+                <h5
+                    class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
+                >
+                    Contact me via e-mail
+                </h5>
+            </a>
+            <!-- replace email -->
+            <a
+                href="mailto:youremail@example.com"
+                class="flex items-center bg-blue-600 mt-3 hover:bg-blue-700 text-white py-2 px-4 rounded"
+                ><svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="24px"
+                    viewBox="0 -960 960 960"
+                    width="24px"
+                    fill="#e8eaed"
+                >
+                    <path
+                        d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"
+                    />
+                </svg>
+                Send a mail
+            </a>
+        </div>
+
+        <!-- replace qr code -->
+        <img class="h-auto max-w-lg rounded-lg" src="/public/vCard.png" alt="image description">
+
+
+    </div>
+</div>

src/components/Navbar.svelte

@@ -0,0 +1,9 @@
+<nav class="bg-white dark:bg-gray-900 fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600">
+  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+  <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
+  </a>
+  <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
+      <a href="/contact" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Contact</a>
+  </div>
+</nav>

src/components/ProjectList.astro

@@ -0,0 +1,24 @@
+---
+import { getCollection } from "astro:content";
+import type { ProjectEntry } from "../types/projects";
+
+import "../styles/global.css";
+
+const projects: ProjectEntry[] = await getCollection('projects');
+
+---
+
+<!-- Projects Section -->
+<section class="projects mt-5">
+    <h2 class="text-3xl font-bold mb-4 dark:text-white">Projects</h2>
+    <div class="grid grid-cols-1 gap-6">
+        {projects.map((project) => (
+            <article class="bg-white dark:bg-purple-700 rounded-lg shadow-md p-4">
+                <h3 class="text-lg font-bold mb-2 dark:text-white">{project.data.title}</h3>
+                <p class="text-gray-600 dark:text-white">{project.body}</p>
+                <a href={project.data.demo} class="inline-block bg-blue-600 mt-3 hover:bg-blue-700 text-white py-2 px-4 rounded">Demo</a>
+                <a href={project.data.source} class="inline-block bg-orange-600 mt-3 hover:bg-orange-700 text-white py-2 px-4 rounded">Source</a>
+            </article>
+        ))}
+    </div>
+</section>

src/components/Projects.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { getCollection, getEntry } from "astro:content";
+    import { onMount } from "svelte";
+
+    interface ProjectsEntry {
+        data: {
+            title: string;
+            demo: string;
+            source: string;
+        };
+        body: string;
+        filePath: string;
+        digest: string;
+        deferredRender: boolean;
+        collection: string;
+        slug: string;
+        render: (render: any) => void; // assuming render is a function
+    }
+
+    let projects: ProjectsEntry[];
+
+    onMount(async () => {
+        
+        console.log("test");
+        projects = await getCollection('projects');
+        console.log(projects);
+    });
+
+</script>
+
+<!-- Projects Section -->
+<section class="projects mt-5">
+    <h2 class="text-3xl font-bold mb-4 dark:text-white">Projects</h2>
+    <div class="grid grid-cols-1 gap-6">
+        {#each projects as project}
+            <article class="bg-white dark:bg-purple-700 rounded-lg shadow-md p-4">
+                <h3 class="text-lg font-bold mb-2 dark:text-white">{project.data.title}</h3>
+                <p class="text-gray-600 dark:text-white">This is the first project.</p>
+                <a
+                    href="#"
+                    class="inline-block bg-blue-600 mt-3 hover:bg-blue-700 text-white py-2 px-4 rounded"
+                    >Demo</a
+                >
+                <a
+                    href="#"
+                    class="inline-block bg-orange-600 mt-3 hover:bg-orange-700 text-white py-2 px-4 rounded"
+                    >Source</a
+                >
+            </article>
+        {/each}
+        <article class="bg-white rounded-lg shadow-md p-4 dark:bg-purple-700">
+            <h3 class="text-lg font-bold mb-2 dark:text-white">Project 2 Title</h3>
+            <p class="text-gray-600 dark:text-white">This is the second project.</p>
+            <a
+                href="#"
+                class="inline-block bg-blue-600 mt-3 hover:bg-blue-700 text-white py-2 px-4 rounded"
+                >Demo</a
+            >
+            <a
+                href="#"
+                class="inline-block bg-orange-600 mt-3 hover:bg-orange-700 text-white py-2 px-4 rounded"
+                >Source</a
+            >
+        </article>
+    </div>
+</section>

src/content/about/Oliver.mdoc

@@ -0,0 +1,5 @@
+---
+location: Somewhere
+name: Oliver
+---
+test

src/content/posts/test.mdoc

@@ -0,0 +1,5 @@
+---
+title: test
+link: http://localhost:4321/projects
+---
+test2

src/content/projects/video-transcriber.mdoc

@@ -0,0 +1,6 @@
+---
+title: Video Transcriber
+demo: http://192.168.178.82:8282/
+source: http://192.168.178.77:10880/Liontix/video-transcriber-frontend
+---
+This project is a frontend web app that transcribes youtube videos.

src/layouts/Layout.astro

@@ -0,0 +1,26 @@
+---
+import "../styles/global.css";
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro Basics</title>
+	</head>
+	<body class="dark:bg-gray-800">
+		<slot />
+	</body>
+</html>
+
+<style>
+	html,
+	body {
+		margin: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>

src/pages/contact.astro

@@ -0,0 +1,13 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Navbar from "../components/Navbar.svelte";
+import ContactCard from "../components/ContactCard.svelte";
+---
+
+<Layout>
+    <Navbar />
+	<div class="m-10"></div>
+	<main class="container mx-auto pt-12">
+        <ContactCard />
+    </main>
+</Layout>

src/pages/index.astro

@@ -0,0 +1,23 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Navbar from '../components/Navbar.svelte';
+import ProjectList from '../components/ProjectList.astro';
+import Blog from '../components/Blog.svelte';
+import AboutCard from '../components/AboutCard.svelte';
+import Projects from '../components/Projects.svelte';
+import BlogList from '../components/BlogList.astro';
+import About from '../components/About.astro';
+// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
+// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
+---
+
+<Layout>
+	<Navbar />
+	<div class="m-10"></div>
+	<main class="container mx-auto pt-12">
+		<About />
+		<div class="m-5"></div>
+		<ProjectList />
+		<BlogList />
+	</main>
+</Layout>

src/pages/projects.astro

@@ -0,0 +1,11 @@
+---
+import { getCollection } from "astro:content";
+import type { ProjectEntry } from "../types/projects";
+
+import "../styles/global.css";
+import About from "../components/About.astro";
+
+const projects = await getCollection('about');
+console.log(projects)
+---
+<About />

src/styles/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/types/about.ts

@@ -0,0 +1,13 @@
+export interface AboutEntry {
+    data: {
+      name: string;
+      location: string;
+    };
+    body: string;
+    filePath: string;
+    digest: string;
+    deferredRender: boolean;
+    collection: string;
+    slug: string;
+    render: (render: any) => void;
+}  

src/types/posts.ts

@@ -0,0 +1,14 @@
+export interface PostEntry {
+    data: {
+      title: string;
+      link: string;
+    };
+    body: string;
+    filePath: string;
+    digest: string;
+    deferredRender: boolean;
+    collection: string;
+    slug: string;
+    render: (render: any) => void;
+  }
+  

src/types/projects.ts

@@ -0,0 +1,15 @@
+export interface ProjectEntry {
+    data: {
+      title: string;
+      demo: string;
+      source: string;
+    };
+    body: string;
+    filePath: string;
+    digest: string;
+    deferredRender: boolean;
+    collection: string;
+    slug: string;
+    render: (render: any) => void;
+  }
+  

svelte.config.js

@@ -0,0 +1,6 @@
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),  
+	extensions: ['.svelte'],
+}

tailwind.config.cjs

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: [
+		'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+		'./node_modules/flowbite/**/*.js'
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [
+		require('flowbite/plugin')
+	],
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}