restructure components at home and root
This commit is contained in:
parent
b7e974ed11
commit
3c0d24afcb
|
@ -0,0 +1,105 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import QuickLinks from '$lib/components/home/QuickLinks.svelte';
|
||||||
|
</script>
|
||||||
|
<section class="grid grid-cols-1 lg:grid-cols-2 mx-4">
|
||||||
|
<!-- Text and links-->
|
||||||
|
<div class="order-1 max-w-3/4 space-y-8">
|
||||||
|
<h1 class="h1">Hello, I'm Matt.</h1>
|
||||||
|
|
||||||
|
<p class="text-xl opacity-75" data-svelte-h="svelte-169iyno">
|
||||||
|
A dev with an array of skills from from frontend and devops to design. I have a
|
||||||
|
strong passion for innovation and change in tech, automation and solving 👾 problems
|
||||||
|
.
|
||||||
|
<br />From wearing a lot of 🤠 hats in past projects and startups I became a
|
||||||
|
generalist, now I am actively deepening my knowledge in software:
|
||||||
|
<span
|
||||||
|
class=" text-4xl bg-gradient-to-r from-primary-800 via-secondary-900 to-tertiary-900 dark:from-primary-400 dark:via-secondary-400 dark:to-tertiary-400 text-transparent bg-clip-text"
|
||||||
|
>DevOps, CyberSec and AI.</span
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<QuickLinks />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Logo and buttons-->
|
||||||
|
<div class="order-2 hidden lg:block">
|
||||||
|
<figure class="items-center">
|
||||||
|
<img
|
||||||
|
class="rounded-10 w-64 overflow-hidden"
|
||||||
|
src="/images/profile-pic.png"
|
||||||
|
alt="Profile"
|
||||||
|
/>
|
||||||
|
<section class="img-bg w-64">
|
||||||
|
<img
|
||||||
|
class="rounded-10 w-64 overflow-hidden"
|
||||||
|
src="/images/profile-pic.png"
|
||||||
|
alt="Profile"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</figure>
|
||||||
|
<div class="flex justify-center space-x-2 m-4">
|
||||||
|
<a
|
||||||
|
class="btn variant-ghost-primary"
|
||||||
|
href="https://git.mattmor.in"
|
||||||
|
target="_blank"
|
||||||
|
rel="personal"
|
||||||
|
>
|
||||||
|
Look at my code
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="btn variant-ghost-primary"
|
||||||
|
href="/CV_Matthieu_Morin.pdf"
|
||||||
|
target="_blank"
|
||||||
|
rel="cv"
|
||||||
|
>
|
||||||
|
Get my CV
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="order-2 flex justify-center lg:hidden space-x-2 m-4">
|
||||||
|
<a
|
||||||
|
class="btn variant-ghost-primary"
|
||||||
|
href="https://git.mattmor.in"
|
||||||
|
target="_blank"
|
||||||
|
rel="personal-mob"
|
||||||
|
>
|
||||||
|
Look at my code
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="btn variant-ghost-primary"
|
||||||
|
href="/CV_Matthieu_Morin.pdf"
|
||||||
|
target="_blank"
|
||||||
|
rel="cv-mob"
|
||||||
|
>
|
||||||
|
Download my CV
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
figure {
|
||||||
|
@apply flex relative flex-col;
|
||||||
|
}
|
||||||
|
.img-bg {
|
||||||
|
@apply absolute z-[-1] rounded-full blur-[100px] transition-all;
|
||||||
|
animation: pulse 5s cubic-bezier(0, 30, 150, 1) infinite, glow 5s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes glow {
|
||||||
|
0% {
|
||||||
|
@apply bg-primary-400/50;
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
@apply bg-secondary-400/50;
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
@apply bg-tertiary-400/50;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
@apply bg-primary-400/50;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes pulse {
|
||||||
|
50% {
|
||||||
|
transform: scale(1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,26 @@
|
||||||
|
<section class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-8" data-svelte-h="svelte-1u9sn7t">
|
||||||
|
<div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
|
||||||
|
<i class="fa-solid fa-screwdriver-wrench text-4xl text-primary-500" />
|
||||||
|
<h3 class="h3">Development</h3>
|
||||||
|
<p class="opacity-75">
|
||||||
|
I possess a wide range of skills that enable me to develop visually appealing and
|
||||||
|
interactive user interfaces for web applications.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
|
||||||
|
<i class="fa-solid fa-palette text-4xl text-primary-500" />
|
||||||
|
<h3 class="h3">Design</h3>
|
||||||
|
<p class="opacity-75">
|
||||||
|
Over the years, I have honed my ability to create visually appealing interfaces that
|
||||||
|
are both user-friendly and intuitive.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
|
||||||
|
<i class="fa-solid fa-users text-4xl text-primary-500" />
|
||||||
|
<h3 class="h3">User Experience</h3>
|
||||||
|
<p class="opacity-75">
|
||||||
|
I understand the importance of creating a seamless UX for end-users. Which includes
|
||||||
|
a solid understanding user behavior.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
|
@ -0,0 +1,28 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import * as conf from '$lib/config';
|
||||||
|
import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
|
||||||
|
</script>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a
|
||||||
|
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
||||||
|
href={conf.socialLinks[2].href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
title="Gitea - private github"
|
||||||
|
><GiteaLogo clazz="w-6" />
|
||||||
|
</a><a
|
||||||
|
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
||||||
|
href={conf.socialLinks[0].href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
title="LinkedIn"
|
||||||
|
><i class="fa-brands fa-linkedin" />
|
||||||
|
</a><a
|
||||||
|
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
||||||
|
href="mailto:{conf.email}"
|
||||||
|
target=""
|
||||||
|
rel="noreferrer"
|
||||||
|
title="Email"
|
||||||
|
><i class="fa-solid fa-envelope" />
|
||||||
|
</a>
|
||||||
|
</div>
|
|
@ -1,6 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import GiteaLogo from './logos/GiteaLogo.svelte';
|
import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
|
||||||
import SocialsCloud from './SocialsCloud.svelte';
|
import SocialsCloud from '$lib/components/SocialsCloud.svelte';
|
||||||
|
|
||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
</script>
|
</script>
|
|
@ -19,7 +19,7 @@
|
||||||
width: 'w-full h-auto ',
|
width: 'w-full h-auto ',
|
||||||
rounded: 'rounded-bl-container-token rounded-br-container-token'
|
rounded: 'rounded-bl-container-token rounded-br-container-token'
|
||||||
// Metadata
|
// Metadata
|
||||||
// meta: 'wtf'
|
// meta: ''
|
||||||
};
|
};
|
||||||
drawerStore.open(drawerSettings);
|
drawerStore.open(drawerSettings);
|
||||||
}
|
}
|
||||||
|
@ -61,25 +61,3 @@
|
||||||
</section>
|
</section>
|
||||||
<LightSwitch />
|
<LightSwitch />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Compare this snippet from src/lib/components/MainHeader.svelte:
|
|
||||||
|
|
||||||
id: 'demo',
|
|
||||||
// // Property Overrides
|
|
||||||
// position: 'top',
|
|
||||||
// bgDrawer: 'bg-purple-900 text-white',
|
|
||||||
// bgBackdrop: 'zbg-gradient-to-tr from-indigo-500/50 via-purple-500/50 to-pink-500/50',
|
|
||||||
// width: 'w-full md:w-[480px]',
|
|
||||||
// padding: 'p-4',
|
|
||||||
// rounded: 'rounded-xl',
|
|
||||||
// // Metadata
|
|
||||||
// meta: 'Styled Drawer'
|
|
||||||
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
|
|
||||||
|
|
||||||
w-full w-auto rounded-bl-container-token rounded-br-container-token "
|
|
||||||
data-testid="drawer" role="dialog" aria-modal="true" aria-labelledby=""
|
|
||||||
aria-describedby="" style="">
|
|
||||||
<nav 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"> -->
|
|
|
@ -13,14 +13,14 @@
|
||||||
|
|
||||||
// Drawer
|
// Drawer
|
||||||
import { getDrawerStore } from '@skeletonlabs/skeleton';
|
import { getDrawerStore } from '@skeletonlabs/skeleton';
|
||||||
import MainDrawer from '$lib/components/MainDrawer.svelte';
|
import MainDrawer from '$lib/components/main/MainDrawer.svelte';
|
||||||
const drawerStore = getDrawerStore();
|
const drawerStore = getDrawerStore();
|
||||||
|
|
||||||
// Shell
|
// Shell
|
||||||
import { AppShell } from '@skeletonlabs/skeleton';
|
import { AppShell } from '@skeletonlabs/skeleton';
|
||||||
$: positionClasses = $drawerStore.open ? 'animate-pulse' : '';
|
$: positionClasses = $drawerStore.open ? 'animate-pulse' : '';
|
||||||
import MainHeader from '$lib/components/MainHeader.svelte';
|
import MainHeader from '$lib/components/main/MainHeader.svelte';
|
||||||
import MainFooter from '$lib/components/MainFooter.svelte';
|
import MainFooter from '$lib/components/main/MainFooter.svelte';
|
||||||
|
|
||||||
// Turn off Drawer on md and up
|
// Turn off Drawer on md and up
|
||||||
let windowWidth: number;
|
let windowWidth: number;
|
||||||
|
|
|
@ -1,17 +1,20 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import SkillContainer from '$lib/components/SkillContainer.svelte';
|
import SkillContainer from '$lib/components/SkillContainer.svelte';
|
||||||
import * as config from '$lib/config';
|
import HeroSection from '$lib/components/home/HeroSection.svelte';
|
||||||
import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
|
import QuickCards from '$lib/components/home/QuickCards.svelte';
|
||||||
|
|
||||||
|
|
||||||
|
import * as conf from '$lib/config';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Matt Morin</title>
|
<title>Matt Morin</title>
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta name="description" content={config.description} />
|
<meta name="description" content={conf.description} />
|
||||||
<meta property="og:title" content={config.title} />
|
<meta property="og:title" content={conf.title} />
|
||||||
<meta property="og:type" content="article" />
|
<meta property="og:type" content="article" />
|
||||||
<meta property="og:description" content={config.description} />
|
<meta property="og:description" content={conf.description} />
|
||||||
<meta property="og:url" content={config.url} />
|
<meta property="og:url" content={conf.url} />
|
||||||
<meta property="og:image" content="/images/profile-pic.png" />
|
<meta property="og:image" content="/images/profile-pic.png" />
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
@ -37,157 +40,9 @@
|
||||||
<h2 class="h2">My github contributions</h2>
|
<h2 class="h2">My github contributions</h2>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<section class="grid grid-cols-1 lg:grid-cols-2 space-y-4 mx-4">
|
<HeroSection />
|
||||||
<!-- Text and links-->
|
|
||||||
<div class="order-1 max-w-3/4 space-y-8">
|
|
||||||
<h1 class="h1">Hello, I'm Matt.</h1>
|
|
||||||
|
|
||||||
<p class="text-2xl opacity-75" data-svelte-h="svelte-169iyno">
|
|
||||||
A dev with an array of skills from from frontend and devops to design. I have a
|
|
||||||
strong passion for innovation and change in tech, automation and solving 👾 problems
|
|
||||||
.
|
|
||||||
<br />From wearing a lot of 🤠 hats in past projects and startups I became a
|
|
||||||
generalist, now I am actively deepening my knowledge in software:
|
|
||||||
<span
|
|
||||||
class=" text-4xl bg-gradient-to-r from-primary-800 via-secondary-900 to-tertiary-900 dark:from-primary-400 dark:via-secondary-400 dark:to-tertiary-400 text-transparent bg-clip-text"
|
|
||||||
>DevOps, CyberSec and AI.</span
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
<div class="flex space-x-4">
|
|
||||||
<a
|
|
||||||
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
|
||||||
href={config.socialLinks[2].href}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
title="Gitea - private github"
|
|
||||||
><GiteaLogo clazz="w-6" />
|
|
||||||
</a><a
|
|
||||||
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
|
||||||
href={config.socialLinks[0].href}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
title="LinkedIn"
|
|
||||||
><i class="fa-brands fa-linkedin" />
|
|
||||||
</a><a
|
|
||||||
class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
|
|
||||||
href="mailto:{config.email}"
|
|
||||||
target=""
|
|
||||||
rel="noreferrer"
|
|
||||||
title="Email"
|
|
||||||
><i class="fa-solid fa-envelope" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Logo and buttons-->
|
|
||||||
<div class="order-2 hidden lg:block m-4">
|
|
||||||
<figure class="items-center">
|
|
||||||
<img
|
|
||||||
class="rounded-10 w-64 overflow-hidden"
|
|
||||||
src="/images/profile-pic.png"
|
|
||||||
alt="Profile"
|
|
||||||
/>
|
|
||||||
<section class="img-bg w-64">
|
|
||||||
<img
|
|
||||||
class="rounded-10 w-64 overflow-hidden"
|
|
||||||
src="/images/profile-pic.png"
|
|
||||||
alt="Profile"
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
</figure>
|
|
||||||
<div class="flex justify-center space-x-2 m-4">
|
|
||||||
<a
|
|
||||||
class="btn variant-ghost-primary"
|
|
||||||
href="https://git.mattmor.in"
|
|
||||||
target="_blank"
|
|
||||||
rel="personal"
|
|
||||||
>
|
|
||||||
Look at my code
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
class="btn variant-ghost-primary"
|
|
||||||
href="/CV_Matthieu_Morin.pdf"
|
|
||||||
target="_blank"
|
|
||||||
rel="cv"
|
|
||||||
>
|
|
||||||
Download my CV
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="order-2 flex justify-center lg:hidden space-x-2 m-4">
|
|
||||||
<a
|
|
||||||
class="btn variant-ghost-primary"
|
|
||||||
href="https://git.mattmor.in"
|
|
||||||
target="_blank"
|
|
||||||
rel="personal-mob"
|
|
||||||
>
|
|
||||||
Look at my code
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
class="btn variant-ghost-primary"
|
|
||||||
href="/CV_Matthieu_Morin.pdf"
|
|
||||||
target="_blank"
|
|
||||||
rel="cv-mob"
|
|
||||||
>
|
|
||||||
Download my CV
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<SkillContainer />
|
<SkillContainer />
|
||||||
|
|
||||||
<section class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-8" data-svelte-h="svelte-1u9sn7t">
|
|
||||||
<div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
|
|
||||||
<i class="fa-solid fa-screwdriver-wrench text-4xl text-primary-500" />
|
|
||||||
<h3 class="h3">Development</h3>
|
|
||||||
<p class="opacity-75">
|
|
||||||
I possess a wide range of skills that enable me to develop visually appealing and
|
|
||||||
interactive user interfaces for web applications.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
|
|
||||||
<i class="fa-solid fa-palette text-4xl text-primary-500" />
|
|
||||||
<h3 class="h3">Design</h3>
|
|
||||||
<p class="opacity-75">
|
|
||||||
Over the years, I have honed my ability to create visually appealing interfaces that
|
|
||||||
are both user-friendly and intuitive.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="card variant-ringed-hollow p-4 md:p-8 space-y-4">
|
|
||||||
<i class="fa-solid fa-users text-4xl text-primary-500" />
|
|
||||||
<h3 class="h3">User Experience</h3>
|
|
||||||
<p class="opacity-75">
|
|
||||||
I understand the importance of creating a seamless UX for end-users. Which includes
|
|
||||||
a solid understanding user behavior.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="postcss">
|
</div>
|
||||||
figure {
|
|
||||||
@apply flex relative flex-col;
|
|
||||||
}
|
|
||||||
.img-bg {
|
|
||||||
@apply absolute z-[-1] rounded-full blur-[100px] transition-all;
|
|
||||||
animation: pulse 5s cubic-bezier(0, 30, 150, 1) infinite, glow 5s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes glow {
|
|
||||||
0% {
|
|
||||||
@apply bg-primary-400/50;
|
|
||||||
}
|
|
||||||
33% {
|
|
||||||
@apply bg-secondary-400/50;
|
|
||||||
}
|
|
||||||
66% {
|
|
||||||
@apply bg-tertiary-400/50;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
@apply bg-primary-400/50;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes pulse {
|
|
||||||
50% {
|
|
||||||
transform: scale(1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
Loading…
Reference in New Issue