Merge pull request #78 from bartvdbraak/feat/layout-changes

Layout changes
This commit is contained in:
Bart van der Braak 2023-07-31 02:13:52 +02:00 committed by GitHub
commit 0c70e05ecb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 161 additions and 149 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 661 KiB

Binary file not shown.

View file

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View file

Before

Width:  |  Height:  |  Size: 696 KiB

After

Width:  |  Height:  |  Size: 696 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 272 KiB

After

Width:  |  Height:  |  Size: 272 KiB

Before After
Before After

View file

@ -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>

View file

@ -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}

View file

@ -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>

View file

@ -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" />

View 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