Mid
/
bartindustries
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

tiny updates

Browse Source
pull/2/head
Midnight 3 years ago
parent f167f937ec
commit 5c9fb2517a
4 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File

23
src/lib/home/Banner.svelte
Unescape View File

@ -90,7 +90,7 @@
<span class="flex flex-wrap gap-2 items-end">
<h2 class="text-4xl font-extrabold">I'm Midnight,</h2>
<span class="text-3xl font-extralight">
i like to make things on the web
I like to make things on the web
</span>
</span>
@ -101,13 +101,20 @@
Bart Industries is a collection of everything I've done such as my projects, involvements and ambitions,
but also other things such as my furry side, stories and everything else I feel like sharing.
<br/><br/>
I am open for work opportunities,
If you want to reach out you can use one of the methods below or <a href="#contact" class="a">use the contact form</a>.
I am open for opportunities,
if you want to reach out you can use one of the methods below or <a href="#contact" class="a">the contact form</a>.
</p>
</span>
<Socials />
</div>
<div class="hidden lg:flex 3xl:hidden absolute left-0 bottom-0 w-full justify-center mb-40 z-50 text-8xl float scale-x-110 text-blue-600">
🠗
<div class="absolute inset-0 flex justify-center -mt-5 font-bold text-black dark:text-white text-lg">
See What I've Made
</div>
</div>
</div>
</main>
@ -117,7 +124,7 @@
opacity: 2%;
overflow: hidden;
animation: anim;
animation-duration: 200s;
animation-duration: 120s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@ -165,7 +172,7 @@
.float {
animation: float;
animation-duration: 3s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@ -173,15 +180,15 @@
@keyframes float {
0% {
padding-top: 0px;
padding-bottom: 10px;
padding-bottom: 20px;
}
50% {
padding-top: 10px;
padding-bottom: 0px;
padding-bottom: 10px;
}
100% {
padding-top: 0px;
padding-bottom: 10px;
padding-bottom: 20px;
}
}
</style>

37
src/lib/home/Card.svelte
Unescape View File

@ -1,42 +1,25 @@
<script>
export let color = "bg-gradient-to-br from-gray-200 to-gray-400 dark:bg-gradient-to-br dark:from-gray-500 dark:to-gray-700";
export let rotation = "";
export let buttonText;
export let buttonRedirect = "";
export let buttonHref;
let skew;
</script>
switch (rotation) {
case "left":
skew = "skew-x-1 lg:skew-x-6";
break;
<div class="z-10 flex flex-col group">
<span class="h-4 group-hover:-translate-y-1 bg-blue-600 rounded-t-xl duration-300"></span>
case "right":
skew = "-skew-x-1 lg:-skew-x-6";
break;
}
</script>
<div class="flex-grow flex flex-col gap-2 w-full relative p-10 group-hover:-translate-y-1 duration-300 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700">
<slot />
</div>
<div class="flex flex-col gap-2 w-full relative py-8 px-8 lg:px-12 lg:py-10 group hover:-translate-y-1 duration-300">
<div
class="{skew} {color} absolute inset-0 z-0 w-full shadow-lg rounded-xl flex flex-col justify-end group-hover:shadow-xl duration-300"
>
{#if buttonText != null && buttonHref != null}
<a
href={buttonHref}
target={buttonRedirect}
class="rounded-b-xl bg-white bg-opacity-50 p-5 hover:bg-opacity-100 duration-150 text-base lg:text-lg font-bold dark:text-black z-40"
class="rounded-b-xl bg-white dark:bg-gray-900 bg-opacity-50 p-5 group-hover:-translate-y-1 hover:bg-opacity-100 dark:hover:bg-blue-600 hover:bg-blue-200 duration-300 text-base lg:text-lg font-bold z-40"
>
<span class="p-5 z-10">{buttonText}</span>
<span class="px-5">{buttonText}</span>
</a>
{:else}
<span class="h-10 bg-opacity-50 group-hover:-translate-y-1 bg-white dark:bg-gray-900 rounded-b-xl duration-300"></span>
{/if}
</div>
<div class="z-10 flex flex-col gap-5 flex-grow">
<slot />
{#if buttonText != null && buttonHref != null}
<span class="h-16 lg:h-10" />
{/if}
</div>
</div>

30
src/routes/index.svelte
Unescape View File

@ -28,8 +28,16 @@
</svg>
</div>
<section class="bg-gray-200 dark:bg-gray-800 pt-20 z-20">
<section class="bg-gray-200 dark:bg-gray-800 z-20">
<div class="container px-5 flex flex-col gap-10 justify-center">
<div class="flex flex-col gap-5">
<h2 class="font-bold text-4xl">I do a lot of things</h2>
<p>
Like any aspiring developer my ambitions are great, and so I tend to be part of a lot of places.
<br/>
Below are some of the things I do and develop for, resulting in experience with a range of technologies and people.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 justify-between">
<Card
@ -126,7 +134,16 @@
</Card>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 justify-between">
<hr class="my-10 opacity-10" />
<div class="flex flex-col gap-5">
<h2 class="font-bold text-4xl">I make stunning pages that fit</h2>
<p>
I love to make personalized websites for small creators and businesses that truly show their personality to the world with unique design.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-10 justify-between">
<Card
buttonHref="https://sivkyne.xyz"
buttonRedirect="_blank"
@ -197,10 +214,15 @@
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
More soon...
🙋
Want your own?
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am still working on this website, and adding my previous works to this as I go. I have done many more things than this though!
My focus is on making people ''wow'' when they open the site and design something truly unique that represents you and your style.
Smaller websites can feature a range of things such as your socials, blog, contact form, CMS pages, gallery, and much more. In certain cases, their upkeep can be entirely free forever!
I am open to requests so if you want to explore the possibilities of having your own website and what one can do for you, please feel free to <a class="a" href="#contact">contact me</a>.
<br/><br/>
If you are a larger business, have complicated needs or desire a more formal agreement please contact me via my company DubbelNull.
</p>
</Card>
</div>

3
tailwind.config.cjs
Unescape View File

@ -8,6 +8,9 @@ module.exports = {
extend: {
borderWidth: {
screen: '500px'
},
screens: {
'3xl': '2000px'
}
}
},

Write Preview
Loading…
Cancel
Save