Madmin
/
old-portfolio-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Header, Socials update, some nice touches

This commit is contained in:
matthieu42morin 2024-02-12 19:53:37 +01:00
parent ab61a720f3
commit 7813a2a6c5
8 changed files with 195 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app.html
View File

@ -3,10 +3,11 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link <link rel="icon" href="/Logo.png" />
<!-- <link
rel="icon" rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 18 16'><text x='0' y='14'>🚀</text></svg>" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 18 16'><text x='0' y='14'>🚀</text></svg>"
/> /> -->
<link rel="preload" href="/fonts/Quicksand.ttf" as="font" type="font/ttf" crossorigin /> <link rel="preload" href="/fonts/Quicksand.ttf" as="font" type="font/ttf" crossorigin />
<!-- Dropin replacement for FontAwesome--> <!-- Dropin replacement for FontAwesome-->
<!-- <link <!-- <link

37
src/lib/components/MainDrawer.svelte Normal file
View File

@ -0,0 +1,37 @@
<script lang="ts">
import { getDrawerStore, Drawer } from '@skeletonlabs/skeleton';
const drawerStore = getDrawerStore();
import { NavRoutes } from '$lib/config';
import { page } from '$app/stores';
import { browser } from '$app/environment';
// what is my url?
$: classesDrawer = $drawerStore.id === 'mobile-nav' ? 'md:hidden' : '';
</script>
<Drawer class={classesDrawer}>
{#if $drawerStore.id === 'demo'}
<!-- Doc Sidebar -->
{:else if $drawerStore.id === 'mobile-nav'}
<!-- Drawer nav only -->
<nav
class="z-50 flex flex-col gap-2 border border-surface-100-800-token bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-lg rounded-bl-container-token rounded-br-container-token p-2 shadow-xl"
>
{#each NavRoutes as route}
<a
href={route.href}
class="btn md:btn-sm hover:variant-soft-primary {route.href ===
$page.url.pathname
? 'variant-filled-primary'
: ''}">{route.title}</a
>
{/each}
</nav>
{:else}
<!-- Fallback Error -->
<div class="w-full h-full flex justify-center items-center">
<div class="text-center space-y-2">
<p>Invalid <code class="code">$drawerStore.id</code> provided.</p>
</div>
</div>
{/if}
</Drawer>

120
src/lib/components/MainHeader.svelte
View File

@ -1,45 +1,85 @@
<script lang="ts"> <script lang="ts">
import { AppBar, LightSwitch } from '@skeletonlabs/skeleton'; import { LightSwitch, AppBar, Avatar, getDrawerStore, Drawer } from '@skeletonlabs/skeleton';
import * as config from '$lib/config'; import type { DrawerSettings } from '@skeletonlabs/skeleton';
const drawerStore = getDrawerStore();
// Components
import { getImageLink } from '$lib/images';
import { page } from '$app/stores';
import { NavRoutes } from '$lib/config';
function triggerStyled() {
const drawerSettings: DrawerSettings = {
position: 'top',
id: 'mobile-nav',
// Provide your property overrides:
bgDrawer: 'overflow-y-auto ',
bgBackdrop:
'z-50 bg-gradient-to-tr from-primary-500/50 via-secondary-500/50 to-tertiary-500/50',
width: 'w-full h-auto ',
rounded: 'rounded-bl-container-token rounded-br-container-token'
// Metadata
// meta: 'wtf'
};
drawerStore.open(drawerSettings);
}
// Local
const imgPlaceholder = getImageLink({ id: 'linky', w: 128, h: 128 });
</script> </script>
<AppBar> <section
<!-- Left-side Header --> class="!max-w-7xl mx-auto grid grid-cols-[1fr_auto_auto]
<svelte:fragment slot="lead"> md:grid-cols-[48px_1fr_48px] md:place-items-center items-center gap-4 p-4"
<a href="/"> >
<div class="items-center align-middle flex gap-2"> <a href="/" title="Return to Homepage">
<img src="/images/Logo.png" alt="Logo" class="w-8 h-8" /> <Avatar src={'/images/profile-pic.png'} width="w-16" rounded={'rounded-full'} />
</a>
<strong class="text-3xl uppercase">{config.title}</strong> <section id="mobile-nav" class="hidden md:block">
</div> <nav
</a> class="flex flex-col md:flex-row gap-2 border md:border-0 border-surface-100-800-token bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-lg rounded-bl-container-token rounded-br-container-token md:rounded-token p-2 shadow-xl"
</svelte:fragment> >
{#each NavRoutes as route}
<a
href={route.href}
class="btn md:btn-sm hover:variant-soft-primary {route.href ===
$page.url.pathname
? 'variant-filled-primary'
: ''}"
>
{route.title}
</a>
{/each}
</nav>
</section>
<!-- Right-side Header --> <section class="block md:hidden" id="mobile-nav">
<svelte:fragment slot="trail"> <button class="btn variant-filled-primary" on:click={triggerStyled}>
<!-- Links --> <i class="fa-solid fa-bars" /> <span>Menu</span>
<a href="/blog">Blog</a> </button>
<a href="/projects">Projects</a> </section>
<a href="/about">About</a> <LightSwitch />
<!-- Social --> </section>
<section class="hidden sm:inline-flex space-x-1">
<a <!-- Compare this snippet from src/lib/components/MainHeader.svelte:
class="btn-icon hover:variant-soft-primary"
href="https://github.com/matthieu42morin" id: 'demo',
target="_blank" // // Property Overrides
rel="noreferrer" // position: 'top',
> // bgDrawer: 'bg-purple-900 text-white',
<i class="fa-brands fa-github text-lg" /> // bgBackdrop: 'zbg-gradient-to-tr from-indigo-500/50 via-purple-500/50 to-pink-500/50',
</a> // width: 'w-full md:w-[480px]',
<a // padding: 'p-4',
class="btn-icon hover:variant-soft-primary" // rounded: 'rounded-xl',
href="https://discord.gg/EXqV7W8MtY" // // Metadata
target="_blank" // meta: 'Styled Drawer'
rel="noreferrer" class="drawer-backdrop fixed top-0 left-0 right-0 bottom-0 flex bg-surface-backdrop-token items-start z-40 "
> <div class="drawer overflow-y-auto transition-transform bg-transparent shadow-xl
<i class="fa-brands fa-linkedin text-lg" />
</a> w-full w-auto rounded-bl-container-token rounded-br-container-token "
</section> data-testid="drawer" role="dialog" aria-modal="true" aria-labelledby=""
<LightSwitch /> aria-describedby="" style="">
</svelte:fragment> <nav class="flex flex-col md:flex-row gap-2 border md:border-0 border-surface-100-800-token
</AppBar> bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-lg rounded-bl-container-token rounded-br-container-token
md:rounded-token p-2 shadow-xl"> -->

72
src/lib/components/SocialsCloud.svelte
View File

@ -1,85 +1,25 @@
<script lang="ts"> <script lang="ts">
import MatrixLogo from './logos/MatrixLogo.svelte'; import MatrixLogo from './logos/MatrixLogo.svelte';
import GiteaLogo from './logos/GiteaLogo.svelte'; import GiteaLogo from './logos/GiteaLogo.svelte';
// Social Icons import { socialLinks } from '$lib/config';
const socialLinks = [
{
title: 'LinkedIn',
href: 'https://www.linkedin.com/in/matthieu-morin-7524731a9/',
icon: 'fa-brands fa-linkedin'
},
{ title: 'Matrix', href: '', icon: './MatrixLogo' },
{ title: 'Gitea', href: 'https://git.mattmor.in', icon: './GiteaLogo' },
{ title: 'X (Twitter)', href: 'https://x.com/SkeletonUI', icon: 'fa-brands fa-x-twitter' },
{ title: 'RSS', href: '/blog/feed', icon: 'fa-regular fa-square-rss' }
];
</script> </script>
<div class="grid grid-cols-5 gap-1 max-h-[128px]"> <div class="flex flex-rows-auto gap-1 max-h-28">
{#each socialLinks as link} {#each socialLinks as link}
<a <a
class="logo-item" class="logo-item"
href={link.href} href={link.href}
target="_blank" target="_blank"
rel="noreferrer" rel={link.title === 'Mastodon' ? 'me' : 'noreferrer'}
aria-label={link.title} aria-label={link.title}
> >
{#if link.icon === './GiteaLogo'} {#if link.title === 'Gitea'}
<GiteaLogo /> <GiteaLogo />
{:else if link.icon === './MatrixLogo'} {:else if link.title === 'Matrix'}
<MatrixLogo /> <MatrixLogo />
{:else} {:else}
<i class={link.icon + ' text-3xl md:text-6xl'} /> <i class={link.icon + ' text-3xl md:text-5xl'} />
{/if} {/if}
</a> </a>
{/each} {/each}
<!-- <div class="col-span-2 lg:col-span-1 p-4">
</div>
<a
class="logo-item"
href="https://www.linkedin.com/in/matthieu-morin-7524731a9/"
target="_blank"
rel="noreferrer"
>
<img class="max-h-[64px]" src="/logos/LI-Logo.png" alt="Matt's LinkedIn Acount" />
</a>
<a
class="logo-item"
href="https://git.mattmor.in"
target="_blank"
rel="noreferrer"
aria-label="My personal Git instance"
>
<GiteaLogo />
<p class="text-base md:text-xl text-token">My selfhosted Gitea</p>
</a>
<div
class="flex sm:flex-row flex-col LogoCloud grid-cols-3 md:grid-cols-3 lg:grid-cols-auto gap-1 max-h-[128px]"
>
<a
class="logo-item"
href="https://git.mattmor.in"
target="_blank"
rel="noreferrer"
aria-label="My personal Git instance"
>
<i class="fa-brands fa-x-twitter text-6xl" />
</a>
<a
class="logo-item"
href="https://git.mattmor.in"
target="_blank"
rel="noreferrer"
aria-label="My matrix"
>
<MatrixLogo />
</a>
<a class="logo-item" href="/blog/feed" target="_blank" rel="noreferrer" aria-label="Feed">
<i class="fa-solid text-6xl" />
</a>
</div> -->
</div> </div>

2
src/lib/components/logos/GiteaLogo.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
let clazz = 'w-12 md:w-16'; let clazz = 'w-8 md:w-14';
</script> </script>
<svg class={clazz} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" <svg class={clazz} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"

2
src/lib/components/logos/MatrixLogo.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { modeCurrent } from '@skeletonlabs/skeleton'; import { modeCurrent } from '@skeletonlabs/skeleton';
let clazz = 'w-6 md:w-16'; let clazz = 'w-6 md:w-12';
let fillStyle = 'fill: #000000'; let fillStyle = 'fill: #000000';
$: { $: {
fillStyle = $modeCurrent ? 'fill: #000000' : 'fill: #ffffff'; fillStyle = $modeCurrent ? 'fill: #000000' : 'fill: #ffffff';

21
src/lib/config.ts
View File

@ -1,10 +1,27 @@
import { dev } from '$app/environment'; import { dev } from '$app/environment';
export const title = "Matt's Matrix"; export const title = "Matt's Propaganda Machine";
export const description = 'A blog about SvelteKit, Svelte, and other things.'; export const description =
'A blog, portfolio of Matt Morin - a complex organism radically living on planet Earth, staring into the abyss and trying to code his way out of it.';
export const url = dev ? 'http://localhost:5174' : 'https://mattmor.in'; export const url = dev ? 'http://localhost:5174' : 'https://mattmor.in';
export const author = 'Matt Morin'; export const author = 'Matt Morin';
export const email = 'mailto:matt.b.morin@pm.me'; export const email = 'mailto:matt.b.morin@pm.me';
export const LinkedIn = 'https://www.linkedin.com/in/matthieu-morin/'; export const LinkedIn = 'https://www.linkedin.com/in/matthieu-morin/';
export const github = 'https://github.com/matthieu42morin'; export const github = 'https://github.com/matthieu42morin';
// prettier-ignore
export const socialLinks = [
{ title: 'LinkedIn', href: 'https://www.linkedin.com/in/matthieu-morin-7524731a9/', icon: 'fa-brands fa-linkedin'},
{ title: 'Matrix', href: '', icon: './MatrixLogo' },
{ title: 'Gitea', href: 'https://git.mattmor.in', icon: './GiteaLogo' },
{ title: 'Mastodon', href: 'https://mastodon.social/@matt_mor', icon: 'fa-brands fa-mastodon'},
{ title: 'RSS feed', href: '/blog/feed', icon: 'fa-regular fa-square-rss' }
];
// Routes
export const NavRoutes = [
{ title: 'Home', href: '/' },
{ title: 'Blog', href: '/blog' },
{ title: 'Projects', href: '/projects' }
];

54
src/routes/+layout.svelte
View File

@ -6,10 +6,35 @@
import '@fortawesome/fontawesome-free/css/brands.css'; import '@fortawesome/fontawesome-free/css/brands.css';
import '@fortawesome/fontawesome-free/css/solid.css'; import '@fortawesome/fontawesome-free/css/solid.css';
// Shell components // Stores
import { page } from '$app/stores';
import { initializeStores } from '@skeletonlabs/skeleton';
initializeStores();
// Drawer
import { getDrawerStore } from '@skeletonlabs/skeleton';
import MainDrawer from '$lib/components/MainDrawer.svelte';
const drawerStore = getDrawerStore();
// Shell
import { AppShell } from '@skeletonlabs/skeleton'; import { AppShell } from '@skeletonlabs/skeleton';
import MainFooter from '$lib/components/MainFooter.svelte'; $: positionClasses = $drawerStore.open ? 'animate-pulse' : '';
import MainHeader from '$lib/components/MainHeader.svelte'; import MainHeader from '$lib/components/MainHeader.svelte';
import MainFooter from '$lib/components/MainFooter.svelte';
// Turn off Drawer on md and up
let windowWidth: number;
if (browser) {
windowWidth = window.innerWidth;
const setWindowWidth = () => {
windowWidth = window.innerWidth;
if (windowWidth >= 768) {
drawerStore.close();
}
};
window.addEventListener('resize', setWindowWidth);
}
// Floating UI for Popups // Floating UI for Popups
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom'; import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
@ -21,7 +46,6 @@
//Cookie, Identifiers and store //Cookie, Identifiers and store
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { page } from '$app/stores';
import { isEurope, removeTrailingSlash } from '$lib/utils/helpers'; import { isEurope, removeTrailingSlash } from '$lib/utils/helpers';
// Cookie implementatiion TODO component // Cookie implementatiion TODO component
@ -64,7 +88,7 @@
//@ts-expect-error - startViewTransition of View Transitions API, types don’t exist yet. //@ts-expect-error - startViewTransition of View Transitions API, types don’t exist yet.
if (!document.startViewTransition) return; if (!document.startViewTransition) return;
return new Promise((resolve) => { return new Promise<void>((resolve) => {
//@ts-expect-error - startViewTransition of View Transitions API, types don’t exist yet. //@ts-expect-error - startViewTransition of View Transitions API, types don’t exist yet.
document.startViewTransition(async () => { document.startViewTransition(async () => {
resolve(); resolve();
@ -77,6 +101,7 @@
import hljs from 'highlight.js'; import hljs from 'highlight.js';
import 'highlight.js/styles/nord.css'; import 'highlight.js/styles/nord.css';
import { storeHighlightJs } from '@skeletonlabs/skeleton'; import { storeHighlightJs } from '@skeletonlabs/skeleton';
import { browser } from '$app/environment';
storeHighlightJs.set(hljs); storeHighlightJs.set(hljs);
</script> </script>
@ -89,9 +114,10 @@
<!-- <Analytics /> <!-- <Analytics />
--> -->
<MainDrawer />
<!-- App Shell --> <!-- App Shell -->
<AppShell> <AppShell class="transition-transform {positionClasses} " regionPage="relative" slotPageHeader="">
<svelte:fragment slot="header"> <svelte:fragment slot="pageHeader">
<MainHeader /> <MainHeader />
</svelte:fragment> </svelte:fragment>
<!-- Page Route Content --> <!-- Page Route Content -->
@ -100,6 +126,22 @@
<MainFooter /> <MainFooter />
</svelte:fragment> </svelte:fragment>
</AppShell> </AppShell>
<!-- <CookieConsent /> <!-- <CookieConsent />
<Segment /> --> <Segment /> -->
<style lang="postcss">
animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 0.8;
}
50% {
opacity: 0.2;
}
}
</style>