Skills display
This commit is contained in:
matthieu42morin
parent
242ae655a6
commit
a4620a399a
|
|
@ -1,12 +1,19 @@
|
||||||
const skills = {
|
type Skill = {
|
||||||
programming: ['Svelte', 'TypeScript', 'React.js', 'Svelte.js', 'Go', 'Electron'],
|
title: string;
|
||||||
Devops: [],
|
list: string[];
|
||||||
Linux: ['', ''],
|
|
||||||
IoT: ['Raspberry Pi', 'Arduino', 'ESP32', 'ESP8266', 'lots of sensors','MQTT', 'LoRa', 'BLE', 'NFC', 'RFID', 'WiFi', ],
|
|
||||||
databases: ['MongoDB', 'PostgreSQL'],
|
|
||||||
Tools: [],
|
|
||||||
languages: ['Italian', 'English'],
|
|
||||||
other: ['Figma', 'UI design']
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default skills;
|
// prettier-ignore
|
||||||
|
const skills: Skill[] = [
|
||||||
|
{title:'Langs/Frameworks', list: ['Svelte', 'SvelteKit', 'JavaScript/TypeScript', 'Python', 'C/C++']},
|
||||||
|
{title:'Devops', list: ['Git', 'Terraform', 'Ansible', 'Docker', 'Docker Compose', 'K8s']},
|
||||||
|
{title:'Linux', list: ['Debian', 'Ubuntu', 'Arch Linux', 'Alpine', 'Raspbian']},
|
||||||
|
{title:'SysAdmin', list: ['Systemd', 'nginx', 'User acc management', 'basic networking tools, ...']},
|
||||||
|
{title:'Databases', list: ['PostgreSQL', 'MariaDB', 'SQLite' ]},
|
||||||
|
{title:'Cloud', list: ['AWS', 'Azure', 'DigitalOcean', 'Vercel', 'Hetzner Cloud']},
|
||||||
|
{title:'IoT', list: ['Raspberry Pi', 'Arduino', 'ESP32', 'ESP8266', '...sensors', 'MQTT', 'LoRa', 'BLE', 'NFC', 'WiFi', ]},
|
||||||
|
{title:'Languages', list: ['English', 'Czech', 'French', 'German']},
|
||||||
|
{title:'other', list: ['Figma', 'UI/UX', 'Wireframing', 'Prototyping', 'Adobe InDesign, Illustrator, Inkscape, ...',]}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default skills;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import skills from '$content/skills';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="card flex flex-col items-center justify-center mx-auto w-3/4 bg-surface-50 bg-opacity-50 p-8 m-8"
|
||||||
|
id="skills"
|
||||||
|
>
|
||||||
|
<h2 class="h2 m-2">My skillset</h2>
|
||||||
|
{#each skills as skill}
|
||||||
|
<div class="text-lg font-bold m-2">{skill.title}</div>
|
||||||
|
<div class="flex flex-wrap justify-center space-x-2 m-2">
|
||||||
|
{#each skill.list as s}
|
||||||
|
<div class="chip variant-outline-primary">{s}</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { Avatar } from '@skeletonlabs/skeleton';
|
||||||
|
import SkillContainer from '$lib/components/SkillContainer.svelte';
|
||||||
|
|
||||||
|
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' }
|
||||||
|
];
|
||||||
|
import * as config from '$lib/config';
|
||||||
|
import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Matt Morin</title>
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta name="description" content={config.description} />
|
||||||
|
<meta property="og:title" content={config.title} />
|
||||||
|
<meta property="og:type" content="article" />
|
||||||
|
<meta property="og:description" content={config.description} />
|
||||||
|
<meta property="og:url" content={config.url} />
|
||||||
|
<meta property="og:image" content="/images/profile-pic.png" />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="container h-full mx-auto flex-col justify-center items-center md:w-3/4">
|
||||||
|
<!-- <div class="space-y-10 mt-4 text-center flex flex-col items-center">
|
||||||
|
<h1 class="h1">I make the wheels turn.</h1>
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<section class="img-bg" />
|
||||||
|
<img
|
||||||
|
src="/images/profile-pic.png"
|
||||||
|
class="w-8 h-8 md:h-[200px] md:w-[200px]"
|
||||||
|
alt="Profile picture"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
|
||||||
|
<img
|
||||||
|
src="/animations/infinity-loop-icon.svg"
|
||||||
|
alt="Icon"
|
||||||
|
class="w-16 md:w-32 lg:w-48 h-full rounded-full"
|
||||||
|
/>
|
||||||
|
<h2 class="h2">My github contributions</h2>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<section class="grid grid-cols-1 md:grid-cols-2 space-y-4 mx-4">
|
||||||
|
<!-- Logo and buttons-->
|
||||||
|
<div class="order-2">
|
||||||
|
<figure>
|
||||||
|
<section class="img-bg w-32 aspect-square md:w-[400px]" />
|
||||||
|
<img
|
||||||
|
class="rounded-full hidden md:w-24 md:block aspect-square overflow-hidden shadow-xl"
|
||||||
|
src="/images/profile-pic.png"
|
||||||
|
alt="Profile picture"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<div class="flex justify-center space-x-2">
|
||||||
|
<a class="btn variant-ghost-primary" href="/blog" target="_blank" rel="noreferrer">
|
||||||
|
Look at my blog
|
||||||
|
</a>
|
||||||
|
<a class="btn variant-ghost-primary" href="/blog" target="_blank" rel="noreferrer">
|
||||||
|
Download my CV
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Text and links-->
|
||||||
|
<div class="order-1 max-w-2xl 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 design to devops. 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-400 via-secondary-400 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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<SkillContainer />
|
||||||
|
|
||||||
|
<section data-svelte-h="svelte-191ndy9">
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 text-center md:text-left">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<span class="font-heading-token text-7xl">20+</span>
|
||||||
|
<p class="text-primary-500">Years Experience</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<span class="font-heading-token text-7xl">100+</span>
|
||||||
|
<p class="text-primary-500">Contributions</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<span class="font-heading-token text-7xl">10k+</span>
|
||||||
|
<p class="text-primary-500">Commits</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<span class="font-heading-token text-7xl">3k+</span>
|
||||||
|
<p class="text-primary-500">GitHub Stars</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.quick-link {
|
||||||
|
@apply btn btn-icon variant-soft-primary hover:variant-filled-primary;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue