hero animation and daisyUI fix, adding cv, improvements
This commit is contained in:
parent
9ff7e8c734
commit
b219773768
|
@ -0,0 +1,106 @@
|
|||
<script lang="ts">
|
||||
import QuickLinks from '$lib/components/home/QuickLinks.svelte';
|
||||
import { social } from '$lib/config/site';
|
||||
</script>
|
||||
|
||||
<section class="grid grid-cols-1 lg:grid-cols-2 items-center mx-4">
|
||||
<!-- Text and links-->
|
||||
<div class="order-1 max-w-3/4 space-y-8">
|
||||
<h1 class="text-4xl">Hello, I'm Matt.</h1>
|
||||
|
||||
<p class="text-xl opacity-75">
|
||||
A 🧠 that consumes ⚡️ and produces 👾 bug$... No sorry, produces code that works 100%
|
||||
of the time. Really.
|
||||
|
||||
<br /> Usually, this creature you are reading about exhibits "passion" for innovation
|
||||
and change. It gets dopamine and reward stimuli from solving problems ~~~ the "Ahaa"
|
||||
moments ~~~ <br />although the 👾 bugs produce different emotions sometimes.
|
||||
|
||||
<br />Matt's main professional exploits are:
|
||||
<br /><br /><span
|
||||
class=" text-4xl bg-gradient-to-r from-primary via-secondary to-accent dark:from-primary dark:via-secondary dark:to-accent text-transparent bg-clip-text"
|
||||
>DevOps, Web, AI & IoT</span
|
||||
>
|
||||
</p>
|
||||
<QuickLinks />
|
||||
</div>
|
||||
<!-- Logo and buttons-->
|
||||
<div class="order-2 hidden lg:block">
|
||||
<figure class="items-center flex flex-relative flex-col">
|
||||
<div class="relative">
|
||||
<div class="img-bg"></div>
|
||||
<img
|
||||
class="mask mask-squircle w-64 overflow-hidden"
|
||||
src="/assets/maskable@512.png"
|
||||
alt="Profile"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
<div class="flex justify-center space-x-2 m-4">
|
||||
<a
|
||||
class="btn btn-accent z-10"
|
||||
href={social.Gitea}
|
||||
target="_blank"
|
||||
rel="personal"
|
||||
>
|
||||
Look at my code
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-accent z-10"
|
||||
href="https://git.mattmor.in/Madmin/Academic-cv/src/branch/master/matt_morin_cv_academic.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 btn-primary"
|
||||
href={social.Gitea}
|
||||
target="_blank"
|
||||
rel="personal-mob"
|
||||
>
|
||||
Look at my code
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-primary"
|
||||
href="https://git.mattmor.in/Madmin/Academic-cv/src/branch/master/matt_morin_cv_academic.pdf"
|
||||
target="_blank"
|
||||
rel="cv-mob"
|
||||
>
|
||||
Download my CV
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
.img-bg {
|
||||
@apply absolute inset-0 z-0 rounded-full blur-[100px] transition-all;
|
||||
animation:
|
||||
pulse 5s cubic-bezier(0, 0.3, 1, 1) infinite,
|
||||
glow 5s linear infinite;
|
||||
}
|
||||
@keyframes glow {
|
||||
0% {
|
||||
@apply bg-primary;
|
||||
}
|
||||
33% {
|
||||
@apply bg-secondary;
|
||||
}
|
||||
66% {
|
||||
@apply bg-accent;
|
||||
}
|
||||
100% {
|
||||
@apply bg-primary;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue