Fill in bare-bones project page

src/app.css

@@ -5,3 +5,15 @@
 .fullscreen {
     height: calc(100vh - 64px);
 }
+
+.container-parent {
+    @apply flex;
+    @apply justify-center;
+}
+
+.container {
+    @apply mx-14;
+    @apply p-4;
+    min-height: calc(100vh - 64px);
+    max-width: 1785px;
+}

src/routes/projects/+layout.svelte

@@ -1,7 +1,77 @@
 <script lang="ts">
     import { page } from '$app/stores';
+    import ProjectPaginator from '$lib/components/ProjectPaginator.svelte';
+    import ProjectViewer from "$lib/components/ProjectViewer.svelte";
+
+    // Projects
+    let projects = $page.data.projects;
+
+    // Title
+    $: title = "Projects";
+
+    // Filter
+    function onLangClick(lang: string) {
+        console.log(lang);
+    }
+
+    function onFrameworkClick(framework: string) {
+        console.log(framework);
+    }
+
+    function onTechClick(tech: string) {
+        console.log(tech);
+    }
+
+    function onGenreClick(genre: string) {
+        console.log(genre);
+    }
+
+    // Pagination
+    let length = 5;
+    let selected = 0;
+    function onClickLeft() {
+        if (selected > 0) {
+            selected--;
+        }
+    }
+
+    function onClickRight() {
+        if (selected < length - 1) {
+            selected++;
+        }
+    }
+
+    function onClickPage(page: number) {
+        selected = page;
+    }
 </script>
 
-{JSON.stringify($page.data.projects)}
+<div class="container-parent">
+    <div class="container">
+        <h1 class="text-4xl font-bold">{ title }</h1>
 
-<slot />
+        <slot />
+
+        <div class="grid grid-cols-2 mt-9 mb-5">
+            <div class="flex justify-center">
+                <div class="btn-group mr-5">
+                    <button class="btn btn-active">Applications</button>
+                    <button class="btn">Games</button>
+                    <button class="btn">All</button>
+                </div>
+                <button class="btn">Filter Projects</button>
+            </div>
+
+            <ProjectPaginator {length} {selected}
+                on:click-left={onClickLeft} on:click-right={onClickRight} on:click-page={(e) => onClickPage(e.detail.page)}
+            />
+        </div>
+
+        <ProjectViewer {projects}
+            on:click-lang={(e) => onLangClick(e.detail.lang)}
+            on:click-framework={(e) => onFrameworkClick(e.detail.framework)}
+            on:click-tech={(e) => onTechClick(e.detail.tech)}
+            on:click-genre={(e) => onGenreClick(e.detail.genre)}
+        />
+    </div>
+</div>

tailwind.config.js

@@ -8,5 +8,20 @@ export default {
     require("@tailwindcss/typography"),
     require("daisyui"),
   ],
+  daisyui: {
+    themes: [
+    {
+        'portfolio': {
+            ...require('daisyui/src/colors/themes')['[data-theme=black]'],
+
+            'base-100': '#121212',
+            'base-200': '#272727',
+            'base-300': '#373737',
+            // 'base-content': '#FFF',
+
+            // 'fontFamily': 'Roboto, sans-serif',
+        },
+    }],
+  },
 }