a lot of changes and fixes and added the virtual reality section

pull/2/head
Midnight 2 years ago
parent 4628d0ad0d
commit ec5b7edc49

451
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -35,6 +35,7 @@
"dependencies": { "dependencies": {
"@fontsource/fira-mono": "^4.5.0", "@fontsource/fira-mono": "^4.5.0",
"@lukeed/uuid": "^2.0.0", "@lukeed/uuid": "^2.0.0",
"@tailwindcss/container-queries": "^0.1.0",
"cookie": "^0.4.1", "cookie": "^0.4.1",
"vanilla-tilt": "^1.7.2" "vanilla-tilt": "^1.7.2"
}, },

@ -4,6 +4,11 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@font-face {
font-family: 'Calderious';
src: url('/fonts/CALDERIOUS.ttf');
}
@font-face { @font-face {
font-family: 'Baron'; font-family: 'Baron';
src: url('/fonts/BaronNeue-Black.otf'); src: url('/fonts/BaronNeue-Black.otf');
@ -14,6 +19,10 @@
src: url('/fonts/BaronNeue-Regular.otf'); src: url('/fonts/BaronNeue-Regular.otf');
} }
.calderious {
font-family: 'Calderious', sans-serif;
}
:root { :root {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }

@ -9,5 +9,43 @@
</head> </head>
<body> <body>
<div>%svelte.body%</div> <div>%svelte.body%</div>
<script>
let getCookie = (cname) => {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(";");
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
};
function setLight() {
document.documentElement.classList.remove("dark");
document.querySelector("#theme").innerHTML = "☀️";
document.cookie = "theme=light";
}
function setDark() {
document.documentElement.classList.add("dark");
document.querySelector("#theme").innerHTML = "🌙";
document.cookie = "theme=dark";
}
let theme = getCookie("theme");
if (!theme) {
document.cookie = "theme=light";
} else {
if (theme == "light") setLight();
if (theme == "dark") setDark();
}
</script>
</body> </body>
</html> </html>

@ -4,7 +4,7 @@
</script> </script>
{#if type == "default"} {#if type == "default"}
<div class="grid lg:grid-cols-5 grid-cols-1 flex-wrap gap-3"> <div class="@container grid @lg:grid-cols-5 grid-cols-1 flex-wrap gap-3">
<Social <Social
url="https://twitter.com/midblep" url="https://twitter.com/midblep"
title="The Bird App" title="The Bird App"

@ -6,19 +6,19 @@
</script> </script>
<footer <footer
class="py-20 px-2 lg:px-10 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white shadow z-20 flex flex-col gap-10" class="@container py-20 px-2 @lg:px-10 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white shadow z-20 flex flex-col gap-10"
> >
<div class="absolute top-0 -mt-40" id="contact"></div>
<section <section
class="container relative overflow-hidden px-5 lg:px-0 flex flex-col lg:flex-row gap-10 h-full justify-between" class="container grid grid-cols-1 @xl:grid-cols-2 gap-20 justify-between"
id="contact" id="contact"
> >
<div class="absolute top-0 -mt-40" id="contact"></div> <Form />
<div class="flex gap-10 w-full"> <div class="@lg:flex justify-end items-start">
<Form /> <img src="/homepage/fullbody.png" class="w-[500px]" alt="contact" />
</div> </div>
<img src="/homepage/fullbody.png" class="lg:block hidden lg:h-[500px] z-10" alt="contact" />
</section> </section>
<hr class="container my-10 lg:my-10 opacity-10" /> <hr class="container my-10 lg:my-10 opacity-10" />
@ -29,6 +29,7 @@
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<h4 class="text-2xl font-bold">Bart Industries</h4> <h4 class="text-2xl font-bold">Bart Industries</h4>
<p class="text-sm">Copyright 2022 Pascal van Ginkel. All rights reserved.</p> <p class="text-sm">Copyright 2022 Pascal van Ginkel. All rights reserved.</p>
<p class="text-sm">Website made using SvelteKit, hosted on Vercel.</p>
</div> </div>
</section> </section>
</footer> </footer>

@ -13,7 +13,7 @@
href={url} href={url}
{title} {title}
target="_blank" target="_blank"
class="rounded-xl bg-opacity-50 hover:bg-opacity-100 bg-slate-300 dark:bg-slate-800 hover:bg-blue-400 dark:hover:bg-blue-600 hover:scale-110 duration-150 shadow" class="rounded-xl bg-opacity-50 hover:bg-opacity-100 bg-slate-300 dark:bg-slate-800 hover:bg-blue-400 dark:hover:bg-blue-600 hover:scale-95 duration-150 shadow"
> >
<div class="flex flex-wrap gap-1 items-center justify-{justify} p-3 lg:p-5"> <div class="flex flex-wrap gap-1 items-center justify-{justify} p-3 lg:p-5">
<span class="text-2xl lg:text-5xl">{icon}</span> <span class="text-2xl lg:text-5xl">{icon}</span>

@ -3,7 +3,7 @@
</script> </script>
<main <main
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" class="bg-gradient-to-r h-16 fixed w-full from-blue-700 to-blue-900 dark:bg-opacity-50 text-black dark:text-white z-40 overflow-hidden"
> >
<section class=""> <section class="">
<Nav /> <Nav />

@ -16,9 +16,9 @@
</a> </a>
<div class="hidden lg:flex h-16"> <div class="hidden lg:flex h-16">
<NavButton url="/" text="Home" /> <NavButton url="/" text="Home" />
<NavButton url="#blog" text="Blog" />
<NavButton url="#portfolio" text="Portfolio" /> <NavButton url="#portfolio" text="Portfolio" />
<NavButton url="#furry" text="Furry" /> <NavButton url="#furry" text="Furry" />
<NavButton url="#vr" text="Virtual Reality" />
<NavButton url="#contact" text="Contact" /> <NavButton url="#contact" text="Contact" />
</div> </div>
</div> </div>
@ -28,9 +28,9 @@
<div class="flex lg:hidden h-16"> <div class="flex lg:hidden h-16">
<NavDropdown text="🍔"> <NavDropdown text="🍔">
<NavButton url="/" text="Home" /> <NavButton url="/" text="Home" />
<NavButton url="#blog" text="Blog" />
<NavButton url="#portfolio" text="Portfolio" /> <NavButton url="#portfolio" text="Portfolio" />
<NavButton url="#furry" text="Furry" /> <NavButton url="#furry" text="Furry" />
<NavButton url="#vr" text="Virtual Reality" />
<NavButton url="#contact" text="Contact" /> <NavButton url="#contact" text="Contact" />
<hr class="bg-white" /> <hr class="bg-white" />
<ThemeSwitcher /> <ThemeSwitcher />

@ -32,7 +32,7 @@
</button> </button>
<div <div
class="fixed flex-col w-screen h-screen inset-0 bg-blue-600 hidden z-50" class="fixed flex-col w-screen h-screen inset-0 bg-gradient-to-br from-blue-700 to-blue-900 hidden z-50"
bind:this={dropdown} bind:this={dropdown}
> >
<NavButton text="Close Menu" on:click={toggle} /> <NavButton text="Close Menu" on:click={toggle} />

@ -1,6 +1,10 @@
<script> <script>
import Socials from "$lib/Socials.svelte"; import Socials from "$lib/Socials.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { fade, blur, fly, slide, scale } from "svelte/transition";
import { quintOut } from "svelte/easing";
let name = "Midnight";
const array = [ const array = [
"/banner1.png", "/banner1.png",
@ -22,6 +26,9 @@
"Livewire", "Livewire",
"NestJS", "NestJS",
"NodeJS", "NodeJS",
"Unity",
"Substance Painter",
"Blender",
"PostgreSQL", "PostgreSQL",
"TailwindCSS", "TailwindCSS",
"Bootstrap", "Bootstrap",
@ -53,6 +60,14 @@
"Vercel", "Vercel",
"Netlify", "Netlify",
"AWS S3", "AWS S3",
"Backblaze"
];
const names = [
"Pascal",
"Mid",
"Midblep",
"Midnight"
]; ];
onMount(() => { onMount(() => {
@ -71,41 +86,52 @@
document.getElementById('lists').appendChild(list); document.getElementById('lists').appendChild(list);
} }
let i = 0;
setInterval(() => {
name = names[i % 4];
i++;
}, 3000);
}); });
let randomBannerPic = array[Math.floor(Math.random() * array.length)]; let randomBannerPic = array[Math.floor(Math.random() * array.length)];
randomBannerPic = "/homepage/banner.png"; randomBannerPic = "/homepage/banner.png";
</script> </script>
<main class="flex flex-col lg:flex-row gap-5 items-center pt-5 pb-52 justify-between px-6 lg:px-20 relative z-0 overflow-hidden lg:h-screen"> <main class="relative overflow-hidden lg:h-screen @container">
<div class="absolute inset-0 w-full h-screen flex flex-col items-center gap-1 justify-center font-bold anim" id="lists"> <div class="absolute inset-0 w-full h-screen flex flex-col items-center gap-1 justify-center font-bold anim" id="lists">
</div> </div>
<div class="flex h-full pt-10 gap-20 px-5 lg:px-0"> <div class="flex h-full w-full @xl:p-20 gap-10 py-10 px-5 z-10">
<div class="hidden lg:block h-full lg:w-1/3 z-10"> <img
<img src={randomBannerPic}
src={randomBannerPic} alt="mid"
alt="mid" class="h-[80vh] w-auto @xl:block hidden z-10"
/> />
</div>
<div class="flex flex-col py-20 h-full gap-20 z-10">
<div class="flex flex-col h-full gap-10 lg:w-1/3 lg:min-w-[900px] z-10"> <div class="flex flex-col gap-10">
<span> <span>
<img src="/helloblue.png" alt="Hello!" class="h-20 popout" /> <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">
and I like to make things on the web
</span> </span>
</span>
<hr class="w-1/4" /> <span class="flex flex-wrap gap-2 items-end">
<h2 class="text-4xl font-extrabold">I'm</h2>
<span class="flex items-center">
{#key name}
<h2 class="text-4xl font-extrabold" in:scale>{name}</h2>
{/key}
<h2 class="text-4xl font-extrabold">,</h2>
</span>
<span class="text-3xl font-extralight">
and I like to make things on the web
</span>
</span>
</div>
<p class="text-gray-800 dark:text-gray-300 text-lg max-w-[900px]"> <p class="text-gray-800 dark:text-gray-300 text-lg max-w-[900px]">
Bart Industries is my public digital home. A collection of my socials, work experiences, I go by many names, which is why I named this place Bart Industries. It is my public digital home, a collection of my socials, work experiences,
past-time projects, artworks and hobbies, random blogposts, fursonas and anything else I feel proud enough of to share. past-time projects, artworks, hobbies, random blogposts, fursonas and anything else I feel I wanna share with the world.
<br/><br/> <br/><br/>
For my skills and experiences I implore you to visit my <a href="#portfolio" class="a">portfolio section</a>, For my skills and experiences I implore you to visit my <a href="#portfolio" class="a">portfolio section</a>,
I am always excited to explore new technologies and opportunities. I am always excited to explore new technologies and opportunities.
@ -114,34 +140,13 @@
you can reach out via one of my socials below or send me an email via the <a href="#contact" class="a">contact form</a>. you can reach out via one of my socials below or send me an email via the <a href="#contact" class="a">contact form</a>.
</p> </p>
<hr class="w-1/4" /> <Socials type="default" />
<div class="max-w-[700px]">
<Socials type="default" />
</div>
</div> </div>
</div> </div>
<span class="hidden lg:flex absolute left-0 bottom-0 w-full justify-center mb-20 z-50 text-8xl float text-blue-600"> <span class="hidden @2xl:flex absolute left-0 bottom-0 w-full justify-center mb-20 z-50 text-8xl float text-blue-600">
<img src="/downarrow.png" class="w-10" /> <img src="/downarrow.png" class="w-10" />
</span> </span>
<div class="w-screen absolute bottom-0 left-0 lg:-mb-20">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<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>
</main> </main>
<style> <style>

@ -2,14 +2,15 @@
export let buttonText = ""; export let buttonText = "";
export let buttonRedirect = "_blank"; export let buttonRedirect = "_blank";
export let buttonHref = null; export let buttonHref = null;
export let center = false;
let classes = "z-10 flex flex-col group relative"; let classes = "z-10 flex flex-col group relative h-full";
</script> </script>
<div class={classes}> <div class={classes}>
<span class="h-4 group-hover:-translate-y-1 bg-blue-600 rounded-t-xl duration-300"></span> <span class="h-4 group-hover:-translate-y-1 bg-blue-600 rounded-t-xl duration-300"></span>
<div class="flex-grow flex flex-col gap-5 w-full relative p-10 group-hover:-translate-y-1 duration-300 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700"> <div class="flex-grow {center ? "justify-center" : ""} flex flex-col gap-5 w-full relative px-10 py-5 group-hover:-translate-y-1 duration-300 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
<slot /> <slot />
</div> </div>
@ -17,11 +18,11 @@
<a <a
href={buttonHref} href={buttonHref}
target={buttonRedirect} target={buttonRedirect}
class="rounded-b-xl bg-white dark:bg-gray-800 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" class="rounded-b-xl bg-white dark:bg-black bg-opacity-50 py-3 px-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="px-5">{buttonText}</span> <span class="px-5">{buttonText}</span>
</a> </a>
{:else} {:else}
<span class="h-4 bg-opacity-50 group-hover:-translate-y-1 bg-white dark:bg-gray-800 rounded-b-xl duration-300"></span> <span class="h-4 bg-opacity-50 group-hover:-translate-y-1 bg-white dark:bg-black rounded-b-xl duration-300"></span>
{/if} {/if}
</div> </div>

@ -17,9 +17,9 @@
<main class="flex flex-col gap-10 w-full"> <main class="flex flex-col gap-10 w-full">
<img src="/homepage/contact.png" class="w-60 mb-2" alt="fullbody of mid" /> <img src="/homepage/contact.png" class="w-60 mb-2" alt="fullbody of mid" />
<article class="flex flex-col lg:flex-row gap-5 lg:gap-10"> <article class="flex flex-col gap-5 lg:gap-10">
<section <section
class="bg-slate-300 bg-opacity-50 dark:bg-slate-800 p-10 rounded-xl shadow w-full flex flex-col gap-5 lg:w-1/3" class="bg-slate-300 bg-opacity-50 dark:bg-slate-800 p-10 rounded-xl shadow flex flex-col gap-5 flex-grow"
> >
<form <form
@ -57,7 +57,7 @@
name="message" name="message"
class="py-1 px-2 rounded-lg shadow dark:bg-gray-600" class="py-1 px-2 rounded-lg shadow dark:bg-gray-600"
bind:value={message} bind:value={message}
rows="5" rows="10"
/> />
</div> </div>
@ -66,7 +66,7 @@
<button <button
type="submit" type="submit"
on:click={send} on:click={send}
class="bg-blue-600 py-2 px-3 rounded-lg font-bold text-white shadow button" class="bg-gradient-to-r from-blue-700 to-blue-900 py-2 px-3 rounded-lg font-bold text-white shadow button"
>Send</button >Send</button
> >
{:else} {:else}
@ -88,7 +88,7 @@
</form> </form>
</section> </section>
<div class="lg:w-1/3"><Socials type="grid" /></div> <Socials/>
</article> </article>
</main> </main>

@ -0,0 +1,200 @@
<script>
import Card from "./Card.svelte";
</script>
<section class="pb-20 z-20 relative">
<div class="absolute top-0 -mt-40" id="portfolio"></div>
<div class="@container 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 class="text-lg">
Below are some of the things I currently keep myself busy with.
</p>
</div>
<div class="grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-10 justify-between">
<Card
buttonHref="https://flamesoftware.net/"
buttonText="🔥 Visit early website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/logo.png"
class="h-8"
alt="flame"
/> Flame Software
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Flame Software is a Software-as-a-Service company that is developing a new communications app
that intends to revolutionize the way we talk and socialize online.
Our mission is to make the net more connected, more privacy focused, and more healthy for your nmind.
<br/><br/>
We are currently in our early development stage, where I work as the CTO to lay down the groundworks
for this new app, which will be built using a combination of languages like Rust and TypeScript.
</p>
</Card>
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit Puppy Pride"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/puppypride.png"
class="h-8"
alt="puppypride"
/> Puppy Pride
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am the core developer of the new Puppy Pride social
network since January 2021, and continue to support and expand
it to this day. The site was built from the ground up
using the TALL stack in PHP (Tailwindcss, Alpine, Livewire and Laravel)
and gave me a lot of experience working with not just PHP and every field inside Laravel,
but also a very large array of different kinds of features and business processes at each step of development.
<br /><br />
Puppy Pride is an adult themed England based social network for people into petplay.
The project is nearing its completion and will be released soon.
You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>.
</p>
</Card>
<Card
buttonHref="https://saxion.nl"
buttonText="🎓 Open Website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/saxion.png"
class="h-8 rounded-full"
alt="puppypride"
/> Saxion University
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am a year 3 student at the Saxion University of Applied Sciences in The Netherlands majoring in Software Engineering. The study keeps me plenty busy, but now I am combining the study with a Minor Entrepeneurship to build a SaaS product at my new company Flame Software.
<br/><br/>
Even though the university has taught me much about the business life and how to professionally work in teams, nearly all my programming knowledge is self taught at home.
</p>
</Card>
</div>
<div class="flex flex-col gap-5 pt-10">
<h2 class="font-bold text-4xl">Some of the stuff I made</h2>
<p class="text-lg">
Here is a nice collage of things I've done and made in the past that highlight some of my different areas of experience.
</p>
</div>
<div class="grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-10 justify-between">
<Card
buttonHref="https://sivkyne.xyz"
buttonText="🌐 Visit Website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/sivkyne.png"
class="h-8 rounded-full"
alt="siv kyne"
/> Siv Kyne
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I developed this website in exchange for artistic goods.
It is hosted on Vercel and built on top of SvelteKit.
It features a fully mobile compatible design that catches your eye from the moment you visit the homepage.
Great detail went into making sure no part of the site is boring, such as giving buttons that extra pop and even making a little blurred leaf pattern for the background on pages that get very long.
</p>
</Card>
<Card
buttonHref="https://invesvpo.com"
buttonText="🌐 Visit Website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/invesvpo.png"
class="h-10 -my-2"
alt="invesvpo"
/>
Invesvpo
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I made a website for a friend called Invesvpo, who wanted a place to show to people to redirect them to his social media, and also to tell them what kind of stuff he does.
It was created with the NextJS on React in 2021 by me entirely.
</p>
</Card>
<span class="row-span-3">
<Card
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
🧑‍💻
Player Stats
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Beyond practical knowledge, I also am a teamplayer. I love discovering new ways and technologies and like to share ideas and find new solutions to problems together.
<br/><br/>
In my study at Saxion I have done many projects, including ones for large companies such as AgroVision and Witteveen+Bos, where we worked in teams of people with different backgrounds to create a complete product.
</p>
<img src="/banner4.png" class="w-full -mb-10"/>
</Card>
</span>
<Card
buttonHref="https://trickthefox.com/"
buttonText="🌐 Visit Website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/trick.png"
class="h-8 rounded-full"
alt="trick"
/>
Trick The Fox
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Trick The Fox was made with NextJS using React in 2021. It had several updates over time later on and features some nice secrets.
It connects to an Airtable database to store simple data such as gallery entries, which can then be managed by the client with Airtable's easy spreadsheet-like interface.
Hosted with Vercel, this package is completely free to run and maintain thanks to Airtable's free tier and its only cost are that of the domain.
</p>
</Card>
<Card
buttonHref="https://dubbelnull.com/showcase"
buttonText="➡️ View DubbelNull showcase"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/dubbelnull.png"
class="h-10 -my-1 -ml-1"
alt="dubbelnull"
/> More at DubbelNull
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am the Lead Developer at DubbelNull and do most of
the programming and technological work there today. DubbelNull
primarily designs, creates and hosts websites for clients, but we also
maintain and operate our own servers. We focus on efficiency in communication and satisfaction
of the end result.
You can find several other examples of past happy clients on our website's showcase page.
</p>
</Card>
</div>
</div>
</section>

@ -1,37 +1,19 @@
<main class="container flex flex-col gap-20 py-20 relative"> <main class="@container container flex flex-col gap-20 relative">
<div class="absolute top-0 -mt-20" id="furry"></div> <div class="absolute top-0 -mt-40" id="furry"></div>
<section class="w-full h-full flex flex-col lg:flex-row px-5 lg:px-0 justify-between gap-10 lg:gap-20"> <section class="flex flex-col px-5 justify-between gap-10 lg:gap-20">
<!-- <div class="absolute inset-0 blur-xl overflow-hidden"> <article class="flex w-1/2 items-center text-center mx-auto flex-col col-span-2 gap-10">
<img src="/furry/Background.png" class="w-full scale-110" alt="background" /> <img src="/homepage/sona/midtitle.png" class="w-32 lg:w-60" alt="fullbody of mid" />
</div> -->
<article class="flex container mx-auto flex-col col-span-2 gap-10">
<div class="flex items-center gap-5 lg:gap-10">
<img src="/favicon.png" class="rounded-lg h-32 lg:h-40 shadow-xl skew-y-3 -skew-x-3 aspect-square hover:scale-95 duration-300" alt='background' />
<span>
<img src="/homepage/sona/midtitle.png" class="w-32 lg:w-40" alt="fullbody of mid" />
</span>
</div>
<h4 class="font-normal text-lg"> <h4 class="font-normal text-lg">
Mid <sup>(aka Midnight)</sup> is my primary fursona out of the many that I have accumulated over the years. He is a fictional character that I use and represent myself with online, one that I have grown comfortable with. I commission artists to create depictions of him to bring him to life, showing and using him on places like this website. Mid <sup>(aka Midnight)</sup> is my primary fursona out of the many that I have created over the years. He is a fictional anthropomorphic cat with black fur and blue hair and some unusually large whiskers. I use Mid to represent myself with online, an image I have grown comfortable with. I commission artists to create depictions of him to bring him to life, showing and using him on places like this website.
<br/><br/>
Mid is a cat with black fur and blue hair that stands twice as tall as the people around him. He loves coffee perhaps a bit too much, as any good programmer does, and likes to stay busy.
Some noticable traits are his unusually large whiskers, the white moon-shaped spot of fur on his chest, and his fluffy tail.
</h4> </h4>
</article> </article>
<section class="w-full h-full flex flex-col gap-5 text-center"> <article class="w-2/3 mx-auto grid grid-cols-4 gap-5">
<img src="/VRChat_1920x1080_2022-06-12_00-59-32.363.png" class="rounded-xl shadow-xl hover:-rotate-1 hover:scale-105 duration-300"/> <img src="/homepage/sona/blue.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<p class="text-sm text-zinc-700 dark:text-zinc-300">Picture from the SocialVR game VRChat showing the 3D model of Mid.</p> <img src="/homepage/sona/hotdog.jpeg" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona"/>
</section> <img src="/homepage/sona/pink.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona"/>
<img src="/homepage/sona/MidFingers.jpg" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona"/>
</article>
</section> </section>
<!-- <div class="flex w-full flex-col gap-5">
<div class="grid grid-cols-2 lg:grid-cols-10 gap-2 lg:gap-5">
<img src="/homepage/sona/midblep_2-2_sivkyne.png" class="rounded-xl aspect-square object-contain" alt="sona symbol" />
<img src="/homepage/sona/midblep_3.png" class="rounded-xl aspect-square" alt="sona symbol" />
<img src="/homepage/sona/midblep_7 (1).png" class="rounded-xl aspect-square" alt="sona symbol" />
<img src="/homepage/sona/midblep_2-6_sivkyne.png" class="rounded-xl aspect-square" alt="sona symbol" />
</div>
</div> -->
</main> </main>

@ -0,0 +1,130 @@
<script>
import { onMount } from "svelte";
import { slide } from "svelte/transition";
import Card from "./Card.svelte";
let texts = [
"keep on creating",
"love what you do",
"be yourself for yourself",
"overcome your challenges",
"push yourself forward",
"dare to dare",
"go out there and live"
];
let text = texts[0];
onMount(() => {
let i = 0;
text = texts[i % 7];
setInterval(() => {
text = texts[i % 7];
i++;
}, 3000);
});
</script>
<main class="@container container flex flex-col gap-20 relative">
<div class="absolute top-0 -mt-40" id="vr"></div>
<section class="w-full h-full flex flex-col px-5 justify-between gap-10 lg:gap-20">
<h2 class="calderious text-8xl text-blue-600">Virtual Reality</h2>
<article class="grid grid-cols-1 @xl:grid-cols-4 gap-5">
<img src="/homepage/vr/vr.png" class="rounded-xl shadow-lg @xl:object-cover @xl:aspect-[1/2] w-full h-full @xl:col-span-1 @xl:row-span-2" alt="couch" />
<img src="/homepage/vr/fancy.png" class="rounded-xl shadow-lg @xl:object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-1 @xl:row-span-1" alt="couch" />
<div class="@xl:object-cover @xl:aspect-[1/1] h-full w-full @xl:col-span-2 @xl:row-span-2">
<Card
center={true}
>
<h3 class="font-bold text-2xl">I love Virtual Reality ❤</h3>
<p>
I believe the Metaverse is alrady here, and it's been here for years. The reason people haven't realized is because the thing companies sell us is not what the metaverse is actually about:
<br/><br/>
<i class="text-lg">
VR is a world of the free where anything is possible. Entire cities erected from a few button clicks. Friendships and communities built on creativity and compassion.
A place where anyone can be what they truly want to be without limitation. A place where humanity's light shines brighter than anywhere else.
</i>
<br/><br/>
And big tech takes those who already built the metaverse for fools, and sells us a future that is the same dull office space we're already dragging ourselves through in the real world.
<br/><br/>
So I joined these passionate and creative minds and started making my own worlds and communities, building a digital home for myself. The pictures here are some of the moments and places the world of VR has allowed me to create and witness.
</p>
</Card>
</div>
<img src="/homepage/vr/mad.png" class="rounded-xl shadow-lg @xl:object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-1 @xl:row-span-1" alt="couch" />
<img src="/homepage/vr/couch.png" class="rounded-xl shadow-lg @xl:object-cover @xl:aspect-[3/2] w-full h-full @xl:col-span-3 @xl:row-span-2" alt="couch" />
<img src="/homepage/vr/doggo.png" class="rounded-xl shadow-lg @xl:object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-1 @xl:row-span-1" alt="couch" />
<img src="/homepage/vr/bsaber.png" class="rounded-xl shadow-lg @xl:object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-1 @xl:row-span-1" alt="couch" />
<img src="/homepage/vr/misty.png" class="rounded-xl shadow-lg @xl:object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-1 @xl:row-span-1" alt="couch" />
<img src="/homepage/vr/lights.png" class="rounded-xl shadow-lg @xl:object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-1 @xl:row-span-1" alt="couch" />
<div class="object-cover @xl:aspect-[2/1] h-full w-full @xl:col-span-2 @xl:row-span-1">
<Card
center={true}
>
<h3 class="font-bold text-2xl">Experience and skills</h3>
<p>
Because of my adventures in virtual reality I have gained knowledge surrounding things such as:
Game development (Unity), texturing (Substance Painter) and animating (Unity Animators).
Most of the avatars shown in the pictures are hand-made by me.
<br/><br/>
On top of that, I know my way around the world of VR.
Through my years of running events where people come together and celebrate VR I know the people and where to find them, and how to use VR to create success and push new frontiers.
</p>
</Card>
</div>
<img src="/homepage/vr/furality.png" class="rounded-xl shadow-lg object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-1 @xl:row-span-1" alt="couch" />
<img src="/homepage/vr/fun.png" class="rounded-xl shadow-lg object-cover @xl:aspect-[3/2] w-full h-full @xl:col-span-3 @xl:row-span-2" alt="couch" />
<div class="object-cover @xl:aspect-[1/1] h-full w-full @xl:col-span-1 @xl:row-span-1">
<Card
center={true}
>
<h3 class="font-bold text-2xl">🌍 Worldwide</h3>
<p>
The world of VR is much larger than it seems. Some of the world's largest companies in entertainment already realize its potential. Each year millions from all over the world come together in events and conventions such as Furality to celebrate.
</p>
</Card>
</div>
<img src="/homepage/vr/meet.png" class="rounded-xl shadow-lg object-cover @xl:aspect-[2/1] w-full h-full @xl:col-span-2 @xl:row-span-1" alt="couch" />
<img src="/homepage/vr/party.png" class="rounded-xl shadow-lg object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-1 @xl:row-span-1" alt="couch" />
<img src="/homepage/vr/guitar.png" class="rounded-xl shadow-lg object-cover @xl:aspect-[1/2] w-full h-full @xl:col-span-1 @xl:row-span-2" alt="couch" />
<img src="/homepage/vr/sly.png" class="rounded-xl shadow-lg object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-1 @xl:row-span-1" alt="couch" />
<img src="/homepage/vr/dog.png" class="rounded-xl shadow-lg object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-2 @xl:row-span-2" alt="couch" />
<img src="/homepage/vr/dj.png" class="rounded-xl shadow-lg object-cover @xl:aspect-[1/1] w-full h-full @xl:col-span-1 @xl:row-span-1" alt="couch" />
<div class="rounded-xl object-cover @xl:aspect-[2/1] w-full h-full col-span-2 @xl:row-span-1"></div>
<img src="/homepage/vr/table.png" class="rounded-xl shadow-lg object-cover @xl:aspect-[2/1] w-full h-full col-span-2 @xl:row-span-1" alt="couch" />
<div class="rounded-xl object-cover @xl:aspect-[1/1] w-full h-full col-span-1 @xl:row-span-1"></div>
<img src="/homepage/vr/bsaber.png" class="rounded-xl shadow-lg object-cover @xl:aspect-[1/1] w-full h-full col-span-1 @xl:row-span-1" alt="couch" />
</article>
<h3 class="italic py-20 font-light text-4xl text-center h-10">
{#key text}
<div in:slide>{text}</div>
{/key}
</h3>
</section>
</main>

@ -2,7 +2,9 @@
import Banner from "$lib/home/Banner.svelte"; import Banner from "$lib/home/Banner.svelte";
import Card from "$lib/home/Card.svelte"; import Card from "$lib/home/Card.svelte";
import Form from "$lib/home/Form.svelte"; import Form from "$lib/home/Form.svelte";
import Portfolio from "$lib/home/Portfolio.svelte";
import Sona from "$lib/home/Sona.svelte"; import Sona from "$lib/home/Sona.svelte";
import Virtual from "$lib/home/Virtual.svelte";
</script> </script>
<svelte:head> <svelte:head>
@ -12,216 +14,17 @@ import Sona from "$lib/home/Sona.svelte";
<main class="overflow-x-hidden flex flex-col gap-20"> <main class="overflow-x-hidden flex flex-col gap-20">
<Banner /> <Banner />
<section class="pb-40 -mt-20 z-20 relative bg-gray-200 dark:bg-gray-800"> <section class="bg-gray-200 dark:bg-gray-800 py-20">
<div class="absolute top-0 -mt-40" id="blog"></div> <Portfolio/>
<div class="container px-5 flex flex-col gap-10 justify-center">
<h2 class="text-2xl font-bold">🚧 Blog under construction 🏗️</h2>
<p>No posts available...</p>
</div>
</section> </section>
<section class="pb-20 z-20 relative"> <section class="py-20">
<div class="absolute top-0 -mt-40" id="portfolio"></div> <Sona/>
<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 class="text-lg">
Below are some of the things I work on and currently occupy the majority of my time.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 justify-between">
<Card
buttonHref="https://flamesoftware.net/"
buttonText="🔥 Visit early website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/logo.png"
class="h-8"
alt="flame"
/> Flame Software
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Flame Software is a Software-as-a-Service company that is developing a new communications app
that intends to revolutionize the way we talk and socialize online.
Our mission is to make the net more connected, more privacy focused, and more healthy for your mind.
<br/><br/>
We are currently in our early development stage, where I work as the CTO to lay down the groundworks
for this new app, which will be built using a combination of languages like Rust and TypeScript.
</p>
</Card>
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit Puppy Pride"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/puppypride.png"
class="h-8"
alt="puppypride"
/> Puppy Pride
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am the core developer of the new Puppy Pride social
network since January 2021, and continue to support and expand
it to this day. The site was built from the ground up
using the TALL stack in PHP (Tailwindcss, Alpine, Livewire and Laravel)
and gave me a lot of experience working with not just PHP and every field inside Laravel,
but also a very large array of different kinds of features and business processes at each step of development.
<br /><br />
Puppy Pride is an adult themed England based social network for people into petplay.
The project is nearing its completion and will be released soon.
You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>.
</p>
</Card>
<Card
buttonHref="https://saxion.nl"
buttonText="🎓 Open Website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/saxion.png"
class="h-8 rounded-full"
alt="puppypride"
/> Saxion University
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am a year 3 student at the Saxion University of Applied Sciences in The Netherlands majoring in Software Engineering. The study keeps me plenty busy, but now I am combining the study with a Minor Entrepeneurship to build a SaaS product at my new company Flame Software.
<br/><br/>
Even though the university has taught me much about the business life and how to professionally work in teams, nearly all my programming knowledge is self taught at home.
</p>
</Card>
</div>
<div class="flex flex-col gap-5 pt-10">
<h2 class="font-bold text-4xl">I make stunning pages that fit</h2>
<p class="text-lg">
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-3 gap-10 justify-between">
<Card
buttonHref="https://sivkyne.xyz"
buttonText="🌐 Visit Website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/sivkyne.png"
class="h-8 rounded-full"
alt="siv kyne"
/> Siv Kyne
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I developed this website in exchange for artistic goods.
It is hosted on Vercel and built on top of SvelteKit.
It features a fully mobile compatible design that catches your eye from the moment you visit the homepage.
Great detail went into making sure no part of the site is boring, such as giving buttons that extra pop and even making a little blurred leaf pattern for the background on pages that get very long.
</p>
</Card>
<Card
buttonHref="https://invesvpo.com"
buttonText="🌐 Visit Website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/invesvpo.png"
class="h-10 -my-2"
alt="invesvpo"
/>
Invesvpo
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I made a website for a friend called Invesvpo, who wanted a place to show to people to redirect them to his social media, and also to tell them what kind of stuff he does.
It was created with the NextJS on React in 2021 by me entirely.
</p>
</Card>
<span class="row-span-3">
<Card
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
🙋
Want your own?
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
My focus is on making people ''wow'' when they open your site with a design that is something truly unique and representing of you and your brand. <br/><br/>
Anything is possible! Your site can have your socials, a blog, an email contact form, a gallery, and anything else.
In some cases a site's upkeep can be entirely free forever, too! <br/><br/>
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 <a class="a" href="https://dubbelnull.com" target="_blank">contact me via my company DubbelNull</a>.
</p>
<img src="/banner4.png" class="w-full -mb-10"/>
</Card>
</span>
<Card
buttonHref="https://trickthefox.com/"
buttonText="🌐 Visit Website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/trick.png"
class="h-8 rounded-full"
alt="trick"
/>
Trick The Fox
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Trick The Fox was made with NextJS using React in 2021. It had several updates over time later on and features some nice secrets.
It connects to an Airtable database to store simple data such as gallery entries, which can then be managed by the client with Airtable's easy spreadsheet-like interface.
Hosted with Vercel, this package is completely free to run and maintain thanks to Airtable's free tier and its only cost are that of the domain.
</p>
</Card>
<Card
buttonHref="https://dubbelnull.com/showcase"
buttonText="➡️ View DubbelNull showcase"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/dubbelnull.png"
class="h-10 -my-1 -ml-1"
alt="dubbelnull"
/> More at DubbelNull
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am the Lead Developer at DubbelNull and do most of
the programming and technological work there today. DubbelNull
primarily designs, creates and hosts websites for clients, but we also
maintain and operate our own servers. We focus on efficiency in communication and satisfaction
of the end result.
You can find several other examples of past happy clients on our website's showcase page.
</p>
</Card>
</div>
</div>
</section> </section>
<hr class="container my-10 opacity-10" /> <hr class="container my-10 opacity-10" />
<section class="mb-40"> <section class="mb-40 py-20">
<Sona/> <Virtual/>
</section> </section>
</main> </main>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

@ -4,10 +4,11 @@ module.exports = {
theme: { theme: {
container: { container: {
center: true, center: true,
padding: '2rem',
screens: { screens: {
sm: '100%', sm: '100%',
md: '100%', md: '100%',
lg: '1000px', lg: '100%',
xl: '1500px', xl: '1500px',
'2xl': '1500px', '2xl': '1500px',
'3xl': '1500px' '3xl': '1500px'
@ -22,5 +23,5 @@ module.exports = {
} }
} }
}, },
plugins: [] plugins: [require('@tailwindcss/container-queries')]
}; };

Loading…
Cancel
Save