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

blueify

Browse Source
pull/2/head
Midnight 2 years ago
parent b77fb3d22c
commit 21fc61e44a
9 changed files with 115 additions and 54 deletions
Show Stats Download Patch File Download Diff File

2
src/app.css
Unescape View File

@ -43,7 +43,7 @@ hr {
}
.a {
color: orange;
color: #2563EB;
}
.a:hover {

2
src/lib/footer/Social.svelte
Unescape View File

@ -10,7 +10,7 @@
<a
href={url}
{title}
class="rounded-xl bg-opacity-10 bg-slate-400 hover:bg-orange-100 dark:hover:bg-orange-700 hover:scale-110 duration-150"
class="rounded-xl bg-opacity-10 bg-slate-400 hover:bg-blue-300 dark:hover:bg-blue-600 hover:scale-110 duration-150"
>
<div class="aspect-square flex flex-col items-center justify-center p-5">
<span class="text-5xl ">{icon}</span>

4
src/lib/header/Button.svelte
Unescape View File

@ -4,7 +4,7 @@
export let type;
export let disabled;
let classes = "h-full py-2 px-10 flex justify-center items-center lowercase group";
let classes = "h-full py-2 px-10 flex justify-center items-center uppercase group";
switch (type) {
case "title":
@ -14,7 +14,7 @@
default:
classes +=
" hover:bg-white hover:bg-opacity-30 text-white font-bold text-lg duration-300";
" hover:bg-white hover:bg-opacity-20 text-white font-bold text-lg duration-300";
break;
}

2
src/lib/header/Header.svelte
Unescape View File

@ -3,7 +3,7 @@
</script>
<main
class="bg-gradient-to-l h-16 fixed w-full from-orange-500 to-amber-500 dark:bg-opacity-50 text-black dark:text-white z-40 overflow-hidden"
class="bg-gradient-to-r h-16 fixed w-full from-blue-700 to-blue-300 dark:bg-opacity-50 text-black dark:text-white z-40 overflow-hidden"
>
<section class="">
<Nav />

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

@ -1,5 +1,8 @@
<script>
import { browser } from "$app/env";
import Socials from "$lib/Socials.svelte";
import { onMount } from "svelte";
const array = [
"/banner1.png",
@ -12,47 +15,108 @@
"/banner8.png",
];
const words = [
"JavaScript",
"TypeScript",
"MySQL",
"Laravel",
"PHP",
"Livewire",
"NestJS",
"NodeJS",
"PostgreSQL",
"TailwindCSS",
"Bootstrap",
"Fontawesome",
"Sass",
"Webpack",
"Redis",
"Svelte",
"SvelteKit",
"Python",
"Java",
"JavaFX"
];
onMount(() => {
for(let j = 0; j < 12; j++) {
let list = document.createElement('div');
list.classList.add('flex', 'gap-5');
for (let i = 0; i < 20; i++) {
const word = words[Math.floor(Math.random() * words.length)];
let element = document.createElement('span');
element.innerHTML = word;
list.appendChild(element);
}
document.getElementById('lists').appendChild(list);
}
});
let randomBannerPic = array[Math.floor(Math.random() * array.length)];
randomBannerPic = "/banner.png";
</script>
<main class="flex gap-5 items-center justify-between px-6 lg:px-20">
<div class="hidden lg:block h-full w-1/2">
<img
src={randomBannerPic}
alt="mid"
/>
<main class="flex gap-5 items-center pt-5 pb-60 justify-between px-6 lg:px-20 relative z-0 overflow-hidden">
<div class="absolute inset-0 w-full h-full flex flex-col items-center gap-2 justify-center font-bold anim" id="lists">
</div>
<div class="container flex gap-5 items-center pt-5 pb-20 justify-between px-6 lg:px-20">
<div class="hidden lg:block h-full w-1/2 z-10">
<img
src={randomBannerPic}
alt="mid"
/>
</div>
<div class="flex flex-col gap-5 justify-center w-3/5">
<span>
<img src="/hello.png" alt="Hello!" class="h-20 popout" />
</span>
<div class="flex flex-col gap-5 justify-center w-3/5 z-10">
<span>
<img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
</span>
<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
<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
</span>
</span>
</span>
<hr class="w-1/3 my-2" />
<hr class="w-1/3 my-2" />
<span class="my-2">
<p class="text-gray-800 dark:text-gray-300 lg:w-3/4">
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>.
</p>
</span>
<span class="my-2">
<p class="text-gray-800 dark:text-gray-300 lg:w-3/4">
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>.
</p>
</span>
<Socials />
<Socials />
</div>
</div>
</main>
<style>
.anim {
opacity: 2%;
overflow: hidden;
animation: anim;
animation-duration: 60s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes anim {
0% {
transform: scale(5) translate(100px, -100px) rotate(-45deg);
}
100% {
transform: scale(5) translate(-100px, 100px) rotate(-45deg);
}
}
.popout {
animation: popout;
animation-duration: 1s;

3
src/routes/__error.svelte
Unescape View File

@ -1,3 +0,0 @@
<main>
<h1>Error</h1>
</main>

40
src/routes/index.svelte
Unescape View File

@ -8,27 +8,27 @@
<title>Home | Bart Industries</title>
</svelte:head>
<main class="relative">
<section class="container py-10">
<Banner />
</section>
<main>
<Banner />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="-mt-20">
<path
class="block dark:hidden"
fill="rgba(229, 231, 235, 1)"
fill-opacity="1"
d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
/>
<path
class="hidden dark:block"
fill="rgba(31, 41, 55, 1)"
fill-opacity="1"
d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
/>
</svg>
<div class="relative h-80 -mt-80 overflow-hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute inset-0 h-96 w-full scale-x-150">
<path
class="block dark:hidden"
fill="rgba(229, 231, 235, 1)"
fill-opacity="1"
d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
/>
<path
class="hidden dark:block"
fill="rgba(31, 41, 55, 1)"
fill-opacity="1"
d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
/>
</svg>
</div>
<section class="bg-gray-200 dark:bg-gray-800 -mt-1">
<section class="bg-gray-200 dark:bg-gray-800 pt-20 z-20">
<div class="container px-5 flex flex-col gap-10 justify-center">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 justify-between">
@ -225,7 +225,7 @@
<section
class="container px-5 lg:px-0 pb-20 flex flex-col lg:flex-row gap-10 justify-between items-center lg:items-start"
>
<img src="/contact.png" class="lg:w-1/3 h-full" alt="contact" />
<img src="/contactblue.png" class="lg:w-1/3 h-full" alt="contact" />
<div class="lg:w-1/3" id="contact">
<Form />

BIN
static/contactblue.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
static/helloblue.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

Write Preview
Loading…
Cancel
Save