WIP!
This commit is contained in:
Benjamin Palko
parent
d476d0a350
commit
0d02a0ab57
7 changed files with 155 additions and 40 deletions
132
src/lib/components/WIP.svelte
Normal file
132
src/lib/components/WIP.svelte
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
<div class="hazard-border flex w-full flex-col justify-around">
|
||||||
|
<div class="scroll-parent hazard w-full -skew-2 overflow-hidden px-8">
|
||||||
|
<div class="scroll-element primary flex justify-around">
|
||||||
|
<b>Under Construction</b>
|
||||||
|
<b>Caution</b>
|
||||||
|
<b>Work In Progress</b>
|
||||||
|
<b>Under Construction</b>
|
||||||
|
<b>Caution</b>
|
||||||
|
</div>
|
||||||
|
<div class="scroll-element secondary flex justify-around">
|
||||||
|
<b>Under Construction</b>
|
||||||
|
<b>Caution</b>
|
||||||
|
<b>Work In Progress</b>
|
||||||
|
<b>Under Construction</b>
|
||||||
|
<b>Caution</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scroll-parent hazard w-full skew-2 overflow-hidden px-8">
|
||||||
|
<div class="scroll-element -primary flex justify-around">
|
||||||
|
<b>Caution</b>
|
||||||
|
<b>Work In Progress</b>
|
||||||
|
<b>Under Construction</b>
|
||||||
|
<b>Caution</b>
|
||||||
|
<b>Work In Progress</b>
|
||||||
|
</div>
|
||||||
|
<div class="scroll-element -secondary flex justify-around">
|
||||||
|
<b>Caution</b>
|
||||||
|
<b>Work In Progress</b>
|
||||||
|
<b>Under Construction</b>
|
||||||
|
<b>Caution</b>
|
||||||
|
<b>Work In Progress</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scroll-parent hazard w-full -skew-2 overflow-hidden px-8">
|
||||||
|
<div class="scroll-element primary flex justify-around">
|
||||||
|
<b>Work In Progress</b>
|
||||||
|
<b>Under Construction</b>
|
||||||
|
<b>Caution</b>
|
||||||
|
<b>Work In Progress</b>
|
||||||
|
<b>Under Construction</b>
|
||||||
|
</div>
|
||||||
|
<div class="scroll-element secondary flex justify-around">
|
||||||
|
<b>Work In Progress</b>
|
||||||
|
<b>Under Construction</b>
|
||||||
|
<b>Caution</b>
|
||||||
|
<b>Work In Progress</b>
|
||||||
|
<b>Under Construction</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.scroll-parent {
|
||||||
|
position: relative;
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-element {
|
||||||
|
position: absolute;
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
left: 0%;
|
||||||
|
top: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
animation: primary 10s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
animation: secondary 10s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-primary {
|
||||||
|
animation: -primary 10s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-secondary {
|
||||||
|
animation: -secondary 10s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes primary {
|
||||||
|
from {
|
||||||
|
left: 0%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes secondary {
|
||||||
|
from {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes -primary {
|
||||||
|
from {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes -secondary {
|
||||||
|
from {
|
||||||
|
left: 0%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hazard-border {
|
||||||
|
border: solid 20px;
|
||||||
|
border-image: repeating-linear-gradient(-75deg, #ffb101, #ffb101 10px, black 10px, black 20px)
|
||||||
|
20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hazard {
|
||||||
|
color: black;
|
||||||
|
background: #ffb101;
|
||||||
|
border-top: solid 20px;
|
||||||
|
border-bottom: solid 20px;
|
||||||
|
border-image: repeating-linear-gradient(-75deg, #ffb101, #ffb101 10px, black 10px, black 20px)
|
||||||
|
20;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<div class="h-screen w-screen p-12">
|
<div class="h-screen w-screen p-12">
|
||||||
<div class="bg-base-200 flex min-h-full flex-col rounded-4xl p-8">
|
<div class="bg-base-200 flex min-h-full flex-col rounded-4xl p-8">
|
||||||
<Navbar {pages} route={page.route} />
|
<Navbar {pages} route={page.route} />
|
||||||
<div class="flex-1 p-8">{@render children()}</div>
|
<div class="flex flex-1 items-stretch p-8">{@render children()}</div>
|
||||||
<div>
|
<div>
|
||||||
<Footer links={socialLinks} />
|
<Footer links={socialLinks} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Links } from '$lib/constants';
|
import Wip from '$lib/components/WIP.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col items-center gap-4 text-center">
|
<Wip />
|
||||||
<div class={'text-center md:hidden'}>
|
|
||||||
<h1 class={'text-4xl'}>Benjamin Palko</h1>
|
|
||||||
<p class={'text-xl text-blue-200'}>Software Engineer</p>
|
|
||||||
</div>
|
|
||||||
<img alt="me" class="h-72 w-2/3 rounded-lg object-cover" src="/waterfall.jpg" />
|
|
||||||
<h3 class={'text-xl md:text-center md:text-2xl'}>Hello there and welcome to my website!</h3>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
My name is Ben, I'm a Canadian 🍁 living out of Ottawa, Ontario (in an Igloo ☃️). I work as a
|
|
||||||
Software Developer full-time and work a pretty wide range of projects in my personal time. Catch
|
|
||||||
me working on C++ building the base for a game engine one day, and practicing my drawing skills
|
|
||||||
another day.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
I started with an internship at a small company in my hometown which after graduation became a
|
|
||||||
full time position. I wanted to move back to Ottawa so I found myself a job at Mitel and moved
|
|
||||||
back in 2020 just in time for lockdown. My time at Mitel was great and I worked with some
|
|
||||||
amazing people, eventually I was referred to another company by a former colleague and decided
|
|
||||||
to take up the opportunity that presented itself to me.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
While Software Development is my main career there are many things I love to do in my off time.
|
|
||||||
One such thing has been developing games on the side, So far I have participated in 2 GameJams!
|
|
||||||
You can check out my submissions at my{' '}
|
|
||||||
<a class={'text-blue-400 hover:underline'} href={Links.itch} target={'_blank'}>
|
|
||||||
itch.io page
|
|
||||||
</a>
|
|
||||||
.
|
|
||||||
</p>
|
|
||||||
<img src={'/climber.jpg'} alt={'Climber'} class={'h-72 w-2/3 rounded-lg object-cover'} />
|
|
||||||
<p>
|
|
||||||
I am also an amateur rock climber and been climbing for the past year, I love going to the gym
|
|
||||||
to wind down with some exercise 🧗♂️. Another interest I have is dirt biking, I'm still a complete
|
|
||||||
novice getting and my feet wet but it can be quite the rush flying through the forest on narrow
|
|
||||||
trails.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script>
|
||||||
|
import Wip from '$lib/components/WIP.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Wip />
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script>
|
||||||
|
import Wip from '$lib/components/WIP.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Wip />
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script>
|
||||||
|
import Wip from '$lib/components/WIP.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Wip />
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script>
|
||||||
|
import Wip from '$lib/components/WIP.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Wip />
|
||||||
Loading…
Add table
Add a link
Reference in a new issue