quickcards, mainpage refactor, content fill
This commit is contained in:
parent
dc948269b9
commit
2acd807a49
|
@ -1,26 +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>
|
||||
<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 hone my problem solving and coding skills all the time. I try to learn the underlying
|
||||
mechanics and use abstractions where relevant.
|
||||
</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">Creativity & Presentation</h3>
|
||||
<p class="opacity-75">
|
||||
I try to create better, novel ways to approach problems and give my best to present them
|
||||
in a clear and concise manner.
|
||||
</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">Teamwork & Stakeholders</h3>
|
||||
<p class="opacity-75">
|
||||
From my experience with a wide range of roles I understand the how to communication with
|
||||
stakeholders across an organization.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -1,48 +1,27 @@
|
|||
<script lang="ts">
|
||||
import SkillContainer from '$lib/components/SkillContainer.svelte';
|
||||
import SkillContainer from '$lib/components/skills/SkillContainer.svelte';
|
||||
import HeroSection from '$lib/components/home/HeroSection.svelte';
|
||||
import QuickCards from '$lib/components/home/QuickCards.svelte';
|
||||
|
||||
|
||||
import * as conf from '$lib/config';
|
||||
import { website } from '$lib/config';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Matt Morin</title>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="description" content={conf.description} />
|
||||
<meta property="og:title" content={conf.title} />
|
||||
<meta name="description" content={website.description} />
|
||||
<meta property="og:title" content={website.siteTitle} />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:description" content={conf.description} />
|
||||
<meta property="og:url" content={conf.url} />
|
||||
<meta property="og:description" content={website.description} />
|
||||
<meta property="og:url" content={website.url} />
|
||||
<meta property="og:image" content="/images/profile-pic.png" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="mt-24 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> -->
|
||||
|
||||
<div class="mt-24 container h-full mx-auto flex-col justify-center items-center md:w-3/4 space-y-8">
|
||||
<HeroSection />
|
||||
|
||||
<SkillContainer />
|
||||
<QuickCards />
|
||||
|
||||
|
||||
<SkillContainer />
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue