Madmin
/
old-portfolio-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hero animation and daisyUI fix, adding cv, improvements

This commit is contained in:
matthieu42morin 2024-04-29 05:08:49 +02:00
parent 9ff7e8c734
commit b219773768
1 changed files with 106 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/lib/components/home/HeroSection.svelte Normal file
View File

@ -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&#39;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>