Obfuscated mail and socials
This commit is contained in:
parent
13c52582c4
commit
de6c8eb073
|
@ -0,0 +1,32 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import socials from '$lib/socialsObjects';
|
||||||
|
export let mail: string = socials[0].href;
|
||||||
|
export let clazz: string = '';
|
||||||
|
export let iconClazz: string = '';
|
||||||
|
export let h: number = 16;
|
||||||
|
export let w: number = 16;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={` ${clazz}`}>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" lang="en-GB" aria-labelledby="title">
|
||||||
|
<title id="title">Send me a mail!</title>
|
||||||
|
|
||||||
|
<defs />
|
||||||
|
|
||||||
|
<a href="mailto:{mail}" target="" rel="noreferrer" aria-label="Send me a mail!">
|
||||||
|
<rect class="fill-current text-transparent" width="100%" height="100%" />
|
||||||
|
|
||||||
|
<foreignObject x="0" y="0" width="100%" height="100%">
|
||||||
|
<div class="email-icon-wrapper">
|
||||||
|
<i class={`${iconClazz} `} />
|
||||||
|
</div>
|
||||||
|
</foreignObject>
|
||||||
|
</a>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
.email-icon-wrapper {
|
||||||
|
@apply flex items-center justify-center w-full h-full;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,14 +1,24 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import MatrixLogo from './logos/MatrixLogo.svelte';
|
import MatrixLogo from '$lib/components/logos/MatrixLogo.svelte';
|
||||||
import GiteaLogo from './logos/GiteaLogo.svelte';
|
import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
|
||||||
import { socialLinks } from '$lib/config';
|
import socials from '$lib/socialsObjects';
|
||||||
|
import ObfuscatedEmail from '$lib/components/ObfuscatedEmail.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-rows-auto gap-1 max-h-28">
|
<div class="flex flex-rows-auto gap-1 max-h-28">
|
||||||
{#each socialLinks as link}
|
{#each socials as link}
|
||||||
|
{#if link.title === 'Email'}
|
||||||
|
<ObfuscatedEmail
|
||||||
|
mail={socials[0].href}
|
||||||
|
clazz="logo-item w-[43px]"
|
||||||
|
h={48}
|
||||||
|
w={48}
|
||||||
|
iconClazz={socials[0].icon + ' text-3xl md:text-5xl'}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
<a
|
<a
|
||||||
class="logo-item"
|
class="logo-item"
|
||||||
href={link.href}
|
href={link.title === 'Email' ? `mailto:${link.href}` : link.href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel={link.title === 'Mastodon' ? 'me' : 'noreferrer'}
|
rel={link.title === 'Mastodon' ? 'me' : 'noreferrer'}
|
||||||
aria-label={link.title}
|
aria-label={link.title}
|
||||||
|
@ -21,5 +31,6 @@
|
||||||
<i class={link.icon + ' text-3xl md:text-5xl'} />
|
<i class={link.icon + ' text-3xl md:text-5xl'} />
|
||||||
{/if}
|
{/if}
|
||||||
</a>
|
</a>
|
||||||
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,28 +1,27 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import * as conf from '$lib/config';
|
|
||||||
import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
|
import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
|
||||||
|
import socials from '$lib/socialsObjects';
|
||||||
|
import ObfuscatedEmail from '../ObfuscatedEmail.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex space-x-4">
|
<div class="flex space-x-4">
|
||||||
<a
|
<a
|
||||||
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
||||||
href={conf.socialLinks[2].href}
|
href={socials[3].href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
title="Gitea - private github"
|
title="Gitea - private github"
|
||||||
><GiteaLogo clazz="w-6" />
|
><GiteaLogo clazz="w-6" />
|
||||||
</a><a
|
</a><a
|
||||||
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
||||||
href={conf.socialLinks[0].href}
|
href={socials[1].href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
title="LinkedIn"
|
title={socials[1].title}
|
||||||
><i class="fa-brands fa-linkedin" />
|
><i class={socials[1].icon} />
|
||||||
</a><a
|
</a><ObfuscatedEmail
|
||||||
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
mail={socials[0].href}
|
||||||
href="mailto:{conf.email}"
|
clazz="btn btn-icon variant-soft-primary hover:variant-filled-primary h-[43px]"
|
||||||
target=""
|
iconClazz={socials[0].icon}
|
||||||
rel="noreferrer"
|
/>
|
||||||
title="Email"
|
|
||||||
><i class="fa-solid fa-envelope" />
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,30 +1,51 @@
|
||||||
import { dev } from '$app/environment';
|
import { dev } from '$app/environment';
|
||||||
|
|
||||||
export const title = "Matt's Portfolio";
|
/* Website config */
|
||||||
export const description =
|
const siteTitle = 'The portfolio and blog of Matt Morin, projects, thoughts and ideas.';
|
||||||
|
const siteShortTitle = "Matt's Portfolio";
|
||||||
|
const description =
|
||||||
'I code, I think, I write. My thoughts go into the world of Free & Open Source Software, AI and philosophy of mind, Climate Change, Cybersecurity.';
|
'I code, I think, I write. My thoughts go into the world of Free & Open Source Software, AI and philosophy of mind, Climate Change, Cybersecurity.';
|
||||||
export const url = dev ? 'http://localhost:5174' : 'https://mattmor.in';
|
const siteUrl = dev ? 'http://localhost:5174' : 'https://mattmor.in';
|
||||||
export const author = 'Matt Morin';
|
const author = 'Matt Morin';
|
||||||
export const backgroundColor = '#111827';
|
const backgroundColor = '#111827';
|
||||||
export const themeColor = '#3b82f6';
|
const themeColor = '#3b82f6';
|
||||||
export const logo = '/Logo.png';
|
const logo = '/Logo.png';
|
||||||
export const keywords = 'Dev, FOSS, Nix, Philosopher, DevOps, Climate';
|
const keywords = 'Dev, FOSS, Nix, Philosopher, DevOps, Climate';
|
||||||
export const ogLanguage = 'en_US';
|
const ogLanguage = 'en_US';
|
||||||
export const siteLanguage = 'en-US';
|
const siteLanguage = 'en-US';
|
||||||
|
const defaultOgImage = '';
|
||||||
|
const defaultOgSquareImage = '';
|
||||||
|
const defaultTwitterImage = '';
|
||||||
|
|
||||||
// prettier-ignore
|
// prettier-ignore
|
||||||
export const socialLinks = [
|
const website = { siteTitle, siteShortTitle, description, siteUrl, author, backgroundColor, themeColor, logo, keywords, ogLanguage, siteLanguage, defaultOgImage, defaultOgSquareImage, defaultTwitterImage };
|
||||||
{ title: 'LinkedIn', href: 'https://linkedin.com/in/mattmor-in', icon: 'fa-brands fa-linkedin'},
|
|
||||||
{ title: 'Matrix', href: '', icon: './MatrixLogo' },
|
/* Social Nicknames */
|
||||||
{ title: 'Gitea', href: 'https://git.mattmor.in', icon: './GiteaLogo' },
|
const GHNick = 'matthieu42morin';
|
||||||
{ title: 'Mastodon', href: 'https://mastodon.social/@matt_mor', icon: 'fa-brands fa-mastodon'},
|
const LINick = 'mattmor-in';
|
||||||
{ title: 'RSS feed', href: '/blog/feed', icon: 'fa-regular fa-square-rss' },
|
const MatrixServer = '';
|
||||||
{ title: 'email', href: 'matt.b.morin@protonmail.com', icon: 'fa-regular mail'}
|
const MatrixNick = '';
|
||||||
];
|
const MastodonServer = 'mastodon.social';
|
||||||
|
const MastodonNick = '@matt_mor';
|
||||||
|
|
||||||
|
const socialNicks = { GHNick, LINick, MatrixNick, MastodonNick };
|
||||||
|
|
||||||
|
/* Social links */
|
||||||
|
const Email = 'matt.b.morin@protonmail.com';
|
||||||
|
const Github = `https://github.com/${GHNick}`;
|
||||||
|
const LinkedIn = `https://linkedin.com/in/${LINick}`;
|
||||||
|
const Matrix = `https://${MatrixServer}/${MatrixNick}`;
|
||||||
|
const Gitea = 'https://git.mattmor.in';
|
||||||
|
const Mastodon = `https://${MastodonServer}/${MastodonNick}`;
|
||||||
|
const RSS = '/blog/feed';
|
||||||
|
|
||||||
|
const socialLinks = { Email, Github, LinkedIn, Matrix, Gitea, Mastodon, RSS };
|
||||||
|
|
||||||
// Routes
|
// Routes
|
||||||
export const NavRoutes = [
|
const NavRoutes = [
|
||||||
{ title: 'Home', href: '/' },
|
{ title: 'Home', href: '/' },
|
||||||
{ title: 'Blog', href: '/blog' },
|
{ title: 'Blog', href: '/blog' },
|
||||||
{ title: 'Projects', href: '/projects' }
|
{ title: 'Projects', href: '/projects' }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export { website, socialNicks, socialLinks, NavRoutes };
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const cookies = {
|
||||||
|
NECESSARY: 'mattmor-necessary',
|
||||||
|
ANALYTICAL: 'mattmor-analytical',
|
||||||
|
TARGETING: 'mattmor-targeting',
|
||||||
|
VISITED: 'mattmor-marketing-website-visited'
|
||||||
|
};
|
||||||
|
export const COPYRIGHT_ENTITY = '\u00a9'; // (c)
|
||||||
|
export const H_ELLIPSIS_ENTITY = '\u2026'; // ...
|
||||||
|
export const VERTICAL_LINE_ENTITY = '\u007c'; // |
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { socialLinks } from './config';
|
||||||
|
|
||||||
|
const socials = [
|
||||||
|
{ title: 'Email', href: socialLinks.Email, icon: 'fa-solid fa-envelope' },
|
||||||
|
{ title: 'LinkedIn', href: socialLinks.LinkedIn, icon: 'fa-brands fa-linkedin' },
|
||||||
|
{ title: 'Matrix', href: socialLinks.Matrix, icon: 'MatrixLogo' },
|
||||||
|
{ title: 'Gitea', href: socialLinks.Gitea, icon: 'GiteaLogo' },
|
||||||
|
{ title: 'Mastodon', href: socialLinks.Mastodon, icon: 'fa-brands fa-mastodon' },
|
||||||
|
{ title: 'RSS feed', href: socialLinks.RSS, icon: 'fa-solid fa-square-rss' }
|
||||||
|
];
|
||||||
|
|
||||||
|
export default socials;
|
Loading…
Reference in New Issue