Merge pull request #78 from bartvdbraak/feat/layout-changes
Layout changes
BIN
src/lib/assets/ticketdashboard.png
Normal file
After Width: | Height: | Size: 661 KiB |
|
@ -1 +0,0 @@
|
|||
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
|
Before Width: | Height: | Size: 963 B |
BIN
src/lib/assets/videowall-logo.png
Normal file
After Width: | Height: | Size: 45 KiB |
Before Width: | Height: | Size: 696 KiB After Width: | Height: | Size: 696 KiB |
Before Width: | Height: | Size: 272 KiB After Width: | Height: | Size: 272 KiB |
|
@ -2,6 +2,7 @@
|
|||
import { AppBar, LightSwitch, ProgressBar, drawerStore } from '@skeletonlabs/skeleton';
|
||||
import GitHub from './icons/GitHub.svelte';
|
||||
import Hamburger from './icons/Hamburger.svelte';
|
||||
import LinkedIn from './icons/LinkedIn.svelte';
|
||||
|
||||
export let progress: number;
|
||||
|
||||
|
@ -12,20 +13,26 @@
|
|||
|
||||
<AppBar>
|
||||
<svelte:fragment slot="lead">
|
||||
<button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
|
||||
<button aria-label="Toggle navigation menu" class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
|
||||
<span>
|
||||
<Hamburger />
|
||||
</span>
|
||||
</button>
|
||||
<img src="./icon.svg" alt="Logo" srcset="" class="pr-2" />
|
||||
<code class="code">hellob.art</code>
|
||||
<h2 class="code">hellob.art</h2>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="trail">
|
||||
<a
|
||||
href="https://linkedin.com/in/bartvdbraak"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn-icon btn-icon-sm hover:variant-soft-primary"><LinkedIn /><span class="sr-only">LinkedIn Profile of Bart van der Braak</span></a
|
||||
>
|
||||
<a
|
||||
href="https://github.com/bartvdbraak"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn-icon variant-primary"><GitHub /></a
|
||||
class="btn-icon btn-icon-sm hover:variant-soft-primary"><GitHub /><span class="sr-only">GitHub Profile of Bart van der Braak</span></a
|
||||
>
|
||||
<LightSwitch />
|
||||
</svelte:fragment>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<nav class="list-nav p-3">
|
||||
<ul>
|
||||
{#each routes as route}
|
||||
<li>
|
||||
<li class="pb-2">
|
||||
<a class="{classesActive(route.url)}" href={route.url} on:click={drawerClose}>{route.label}</a>
|
||||
</li>
|
||||
{/each}
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<a class="card bg-initial card-hover overflow-hidden" href={link}>
|
||||
<header>
|
||||
<img src={headerImage} class="bg-black/50 w-full aspect-[21/9] object-cover" alt="Post" />
|
||||
<img src={headerImage} class="bg-black/50 w-full aspect-[21/9] object-cover object-top" alt="Post" />
|
||||
</header>
|
||||
<div class="p-4 space-y-4">
|
||||
<h6 class="h6">{headerSubTitle}</h6>
|
||||
|
|
|
@ -1,105 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import * as THREE from 'three';
|
||||
|
||||
let camera: THREE.PerspectiveCamera,
|
||||
scene: THREE.Scene,
|
||||
renderer: THREE.WebGLRenderer,
|
||||
cube: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial>;
|
||||
|
||||
const renderContainerId = 'render';
|
||||
|
||||
const toolsData = [
|
||||
{ name: 'Git', info: 'Short note about Git and its usage.' },
|
||||
{ name: 'DBeaver', info: 'Short note about DBeaver and its usage.' },
|
||||
{ name: 'Notion', info: 'Short note about Notion and its usage.' },
|
||||
{ name: 'Insomnia', info: 'Short note about Insomnia and its usage.' },
|
||||
{ name: 'Cyberduck', info: 'Short note about Cyberduck and its usage.' },
|
||||
{ name: 'Mullvad VPN', info: 'Short note about Mullvad VPN and its usage.' },
|
||||
{ name: 'Maccy', info: 'Short note about Maccy and its usage.' }
|
||||
];
|
||||
|
||||
onMount(() => {
|
||||
init();
|
||||
addTools();
|
||||
animate();
|
||||
});
|
||||
|
||||
const init = () => {
|
||||
scene = new THREE.Scene();
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
const renderContainer = document.getElementById(renderContainerId);
|
||||
if (renderContainer) {
|
||||
renderContainer.appendChild(renderer.domElement);
|
||||
}
|
||||
|
||||
camera.position.z = 5;
|
||||
};
|
||||
|
||||
const addTool = (name: string, x: number, y: number, z: number) => {
|
||||
const geometry = new THREE.BoxGeometry();
|
||||
const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
|
||||
cube = new THREE.Mesh(geometry, material);
|
||||
cube.position.set(x, y, z);
|
||||
scene.add(cube);
|
||||
|
||||
cube.userData.name = name;
|
||||
cube.userData.info = toolsData.find((tool) => tool.name === name)?.info || '';
|
||||
|
||||
cube.addEventListener('click', () => {
|
||||
alert(`${cube.userData.name}: ${cube.userData.info}`);
|
||||
});
|
||||
};
|
||||
|
||||
const addTools = () => {
|
||||
addTool('Git', -2, 0, 0);
|
||||
addTool('DBeaver', 0, 0, 0);
|
||||
addTool('Notion', 2, 0, 0);
|
||||
addTool('Insomnia', -2, 2, 0);
|
||||
addTool('Cyberduck', 0, 2, 0);
|
||||
addTool('Mullvad VPN', 2, 2, 0);
|
||||
addTool('Maccy', 0, 4, 0);
|
||||
};
|
||||
|
||||
const render = () => {
|
||||
renderer.clear();
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
|
||||
const isMeshType = (object?: THREE.Object3D): object is THREE.Mesh => {
|
||||
return object?.type === 'Mesh';
|
||||
};
|
||||
|
||||
const animate = () => {
|
||||
if (!browser) {
|
||||
return;
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
scene.traverse((object: THREE.Object3D) => {
|
||||
if (isMeshType(object) && object.isMesh) {
|
||||
object.rotation.x += 0.005;
|
||||
object.rotation.y += 0.005;
|
||||
}
|
||||
});
|
||||
|
||||
render();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#render {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="render" />
|
1
src/lib/components/icons/LinkedIn.svelte
Normal file
|
@ -0,0 +1 @@
|
|||
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM349.3 793.7H230.6V411.9h118.7v381.8zm-59.3-434a68.8 68.8 0 1 1 68.8-68.8c-.1 38-30.9 68.8-68.8 68.8zm503.7 434H675.1V608c0-44.3-.8-101.2-61.7-101.2-61.7 0-71.2 48.2-71.2 98v188.9H423.7V411.9h113.8v52.2h1.6c15.8-30 54.5-61.7 112.3-61.7 120.2 0 142.3 79.1 142.3 181.9v209.4z"></path></svg>
|
After Width: | Height: | Size: 555 B |