Changes to homepage

pull/2/head
Midnight 2 years ago
parent 52f8f5a8ba
commit 1576298bc7

@ -1,8 +1,14 @@
<script> <script>
import Social from "./footer/Social.svelte"; import Social from "./footer/Social.svelte";
export let text = false;
</script> </script>
<div class="flex w-full gap-3"> <div class="grid {text ? "grid-cols-4" : "lg:grid-cols-6 grid-cols-3"} flex-wrap gap-3">
{#if text}
<div class="col-span-2 items-center justify-center flex text-xl font-bold rounded-xl bg-opacity-50 bg-slate-300 dark:bg-slate-800 duration-150 shadow">
Social Profiles
</div>
{/if}
<Social <Social
url="https://twitter.com/midblep" url="https://twitter.com/midblep"
title="The Bird App" title="The Bird App"
@ -11,10 +17,16 @@
/> />
<Social <Social
url="https://gitlab.com/midblep" url="https://gitlab.com/midblep"
title="I don't use GitHub" title="GitLab"
icon="🦊" icon="🦊"
text="GitLab" text="GitLab"
/> />
<Social
url="https://github.com/midblep"
title="Very new, mostly empty"
icon="🐙"
text="GitHub"
/>
<Social <Social
url="https://discord.com/users/191525900880183296" url="https://discord.com/users/191525900880183296"
title="Mid#0001" title="Mid#0001"
@ -27,4 +39,9 @@
icon="✉️" icon="✉️"
text="E-Mail" text="E-Mail"
/> />
{#if text}
<div class="col-span-1 items-center justify-center flex text-xl font-bold rounded-xl bg-opacity-50 bg-slate-300 dark:bg-slate-800 duration-150 shadow">
// EOL
</div>
{/if}
</div> </div>

@ -2,8 +2,7 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { getCookie } from "./helpers/cookies"; import { getCookie } from "./helpers/cookies";
let classes = let classes = "h-full py-2 px-10 text-white flex justify-center items-center uppercase group hover:bg-white hover:bg-opacity-20 font-bold text-lg duration-300";
"h-full py-2 px-5 flex justify-center items-center group hover:bg-white hover:bg-opacity-30 text-white text-lg duration-300";
function switchTheme() { function switchTheme() {
if (document.documentElement.classList.contains("dark")) { if (document.documentElement.classList.contains("dark")) {
@ -15,13 +14,13 @@
function setLight() { function setLight() {
document.documentElement.classList.remove("dark"); document.documentElement.classList.remove("dark");
document.querySelector("#theme").innerHTML = "Set to Dark"; document.querySelector("#theme").innerHTML = "☀️";
document.cookie = "theme=light"; document.cookie = "theme=light";
} }
function setDark() { function setDark() {
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
document.querySelector("#theme").innerHTML = "Set to Light"; document.querySelector("#theme").innerHTML = "🌙";
document.cookie = "theme=dark"; document.cookie = "theme=dark";
} }

@ -1,29 +1,34 @@
<script> <script>
import Form from "$lib/home/Form.svelte";
import Socials from "$lib/Socials.svelte"; import Socials from "$lib/Socials.svelte";
import ThemeSwitcher from "$lib/ThemeSwitcher.svelte"; import ThemeSwitcher from "$lib/ThemeSwitcher.svelte";
import Social from "./Social.svelte"; import Social from "./Social.svelte";
</script> </script>
<main <footer
class="py-10 px-2 lg:px-10 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white shadow z-20" 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"
> >
<section
class="container relative overflow-hidden px-5 lg:px-0 flex flex-col lg:flex-row gap-10 h-full justify-between"
id="contact"
>
<div class="absolute top-0 -mt-40" id="contact"></div>
<div class="flex gap-10 w-full">
<Form />
</div>
<img src="/homepage/fullbody.png" class="lg:block hidden lg:h-[500px] z-10" alt="contact" />
</section>
<hr class="container" />
<section <section
class="container flex flex-col-reverse lg:flex-row justify-between gap-10" class="container flex flex-col-reverse lg:flex-row justify-between gap-10"
> >
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<h4 class="text-xl font-bold baron-light">Bart Industries</h4> <h4 class="text-xl font-bold baron-light">Bart Industries</h4>
<hr />
<p class="text-xs">Copyright 2022 Mid // Midblep. All rights reserved.</p> <p class="text-xs">Copyright 2022 Mid // Midblep. All rights reserved.</p>
</div> </div>
<!-- <div class="flex flex-col gap-5 lg:items-end">
<Socials />
<div class="text-amber-500 flex gap-2 items-center font-bold">
<span class="text-xs">Theme:</span>
<span class="bg-gray-100 dark:bg-gray-800"
><ThemeSwitcher /></span
>
</div>
</div> -->
</section> </section>
</main> </footer>

@ -16,10 +16,10 @@
</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 disabled={true} url="/blog" text="Blog" /> <NavButton url="#portfolio" text="Portfolio" />
<NavButton disabled={true} url="/portfolio" text="Portfolio" /> <NavButton url="#blog" text="Blog" />
<NavButton disabled={true} url="/esu" text="ESU" /> <NavButton url="#furry" text="Furry" />
<NavButton url="/furry" text="Furry" /> <NavButton url="#contact" text="Contact" />
</div> </div>
</div> </div>
<div class="hidden lg:flex h-16"> <div class="hidden lg:flex h-16">
@ -28,10 +28,10 @@
<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 disabled={true} url="/blog" text="Blog" /> <NavButton url="#portfolio" text="Portfolio" />
<NavButton disabled={true} url="/portfolio" text="Portfolio" /> <NavButton url="#blog" text="Blog" />
<NavButton disabled={true} url="/esu" text="ESU" /> <NavButton url="#furry" text="Furry" />
<NavButton url="/furry" text="Furry" /> <NavButton url="#contact" text="Contact" />
<hr class="bg-white" /> <hr class="bg-white" />
<ThemeSwitcher /> <ThemeSwitcher />
</NavDropdown> </NavDropdown>

@ -49,7 +49,10 @@
"Blade", "Blade",
"JSX", "JSX",
"Pug", "Pug",
"Wordpress" "Wordpress",
"Vercel",
"Netlify",
"AWS S3"
]; ];
onMount(() => { onMount(() => {
@ -74,41 +77,44 @@
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-60 justify-between px-6 lg:px-20 relative z-0 overflow-hidden"> <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">
<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="container flex gap-5 items-center pt-5 pb-20 justify-between px-6 lg:px-20"> <div class="flex lg:mx-20 gap-10 items-center pt-5 pb-96 px-6 lg:px-20">
<div class="hidden lg:block h-full w-1/2 z-10"> <div class="hidden lg:block h-full w-1/3 z-10">
<img <img
src={randomBannerPic} src={randomBannerPic}
alt="mid" alt="mid"
/> />
</div> </div>
<div class="flex flex-col gap-5 justify-center lg:w-3/5 z-10"> <div class="flex flex-col gap-10 justify-center lg:w-4/12 z-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>
<span class="flex flex-wrap gap-2 items-end"> <span class="flex flex-wrap gap-2 items-end">
<h2 class="text-4xl font-extrabold">I'm Midnight,</h2> <h2 class="text-4xl font-extrabold relative">I'm Midnight,</h2>
<span class="text-3xl font-extralight"> <span class="text-3xl font-extralight">
I like to make things on the web and I like to make things on the web
</span> </span>
</span> </span>
<hr class="w-1/3 my-2" /> <hr class="w-1/4" />
<span class="my-2"> <p class="text-gray-800 dark:text-gray-300 text-lg">
<p class="text-gray-800 dark:text-gray-300 lg:w-3/4"> Bart Industries is an online collection of me such as my socials, work experiences,
Bart Industries is a collection of everything I've done such as my projects, involvements and ambitions, past-time projects, artworks and hobbies, random blogposts, fursonas and anything else I feel proud enough of to share.
but also other things such as my furry side, stories, socials, blogposts and everything else I feel like sharing. <br/><br/>
<br/><br/> For my skills and experiences I implore you to visit my <a href="#portfolio" class="a">portfolio section</a>, but
I am open for opportunities, I am always excited to explore other technologies and have new experiences.
if you want to reach out you can use one of the methods below or <a href="#contact" class="a">the contact form</a>. <br/><br/>
</p> I am open to new opportunities and am always eager to work,
</span> you can reach out using one of the methods below or <a href="#contact" class="a">the contact form</a>.
</p>
<hr class="w-1/4" />
<Socials /> <Socials />
</div> </div>
@ -117,6 +123,23 @@
<img src="/downarrow.png" class="w-10" /> <img src="/downarrow.png" class="w-10" />
</span> </span>
</div> </div>
<div class="w-screen absolute bottom-0 left-0">
<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>

@ -9,7 +9,7 @@
<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-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"> <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-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
<slot /> <slot />
</div> </div>

@ -14,80 +14,82 @@
} }
</script> </script>
<main class="flex flex-col gap-10"> <main class="flex flex-col gap-10 w-full">
<img src="/homepage/contact.png" class="w-1/2" alt="fullbody of mid" /> <img src="/homepage/contact.png" class="w-60 mb-2" alt="fullbody of mid" />
<section <article class="flex gap-10">
class="bg-slate-200 dark:bg-gray-800 p-10 rounded-xl shadow w-full flex flex-col gap-5" <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"
<form
class="flex flex-col gap-5"
action="https://api.staticforms.xyz/submit"
method="post"
> >
<input
type="hidden"
name="accessKey"
value="f237579b-85d1-414f-846c-409b8c8f57f0"
/>
<input type="text" name="honeypot" style="display: none;" />
<input type="hidden" name="redirectTo" value={variables.appUrl} />
<div class="flex flex-col"> <form
<label for="email" value="E-Mail" class="text-lg font-bold" class="flex flex-col gap-5"
>E-Mail</label action="https://api.staticforms.xyz/submit"
> method="post"
>
<input <input
id="email" type="hidden"
name="email" name="accessKey"
type="text" value="f237579b-85d1-414f-846c-409b8c8f57f0"
class="py-1 px-2 rounded-lg shadow dark:bg-gray-600"
bind:value={email}
/> />
</div> <input type="text" name="honeypot" style="display: none;" />
<input type="hidden" name="redirectTo" value={variables.appUrl} />
<div class="flex flex-col"> <div class="flex flex-col">
<label for="message" value="E-Mail" class="text-lg font-bold" <label for="email" value="E-Mail" class="text-lg font-bold"
>Message</label >E-Mail</label
> >
<textarea <input
id="message" id="email"
name="message" name="email"
class="py-1 px-2 rounded-lg shadow dark:bg-gray-600" type="text"
bind:value={message} class="py-1 px-2 rounded-lg shadow dark:bg-gray-600"
rows="5" bind:value={email}
/> />
</div> </div>
<div class="flex flex-col">
<label for="message" value="E-Mail" class="text-lg font-bold"
>Message</label
>
<textarea
id="message"
name="message"
class="py-1 px-2 rounded-lg shadow dark:bg-gray-600"
bind:value={message}
rows="5"
/>
</div>
<div class="flex flex-col"> <div class="flex flex-col">
{#if email != "" && message != ""} {#if email != "" && message != ""}
<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-blue-600 py-2 px-3 rounded-lg font-bold text-white shadow button"
>Send</button >Send</button
> >
{:else} {:else}
<button <button
disabled disabled
type="none" type="none"
on:click={send} on:click={send}
title="Fill in the fields before submitting" title="Fill in the fields before submitting"
class="bg-white dark:bg-black bg-opacity-50 dark:bg-opacity-50 py-2 px-3 rounded-lg font-bold shadow text-gray-400" class="bg-white dark:bg-black bg-opacity-50 dark:bg-opacity-20 py-2 px-3 rounded-lg font-bold shadow text-gray-400"
> >
Send Send
</button> </button>
{/if} {/if}
</div> </div>
{#if notify} {#if notify}
<p class="text-green-500 font-bold text-lg">{notify}</p> <p class="text-green-500 font-bold text-lg">{notify}</p>
{/if} {/if}
</form> </form>
</section> </section>
<Socials /> <div class="w-1/3"><Socials text={true} /></div>
</article>
</main> </main>
<style> <style>

@ -1,33 +1,37 @@
<main class="flex flex-col gap-20 min-h-screen"> <main class="container flex flex-col gap-20 py-20 relative">
<section class="w-full h-full"> <div class="absolute top-0 -mt-20" id="furry"></div>
<section class="w-full h-full flex justify-between gap-20">
<!-- <div class="absolute inset-0 blur-xl overflow-hidden"> <!-- <div class="absolute inset-0 blur-xl overflow-hidden">
<img src="/furry/Background.png" class="w-full scale-110" alt="background" /> <img src="/furry/Background.png" class="w-full scale-110" alt="background" />
</div> --> </div> -->
<article class="flex container mx-auto py-20 flex-col col-span-2 gap-10 items-center italic"> <article class="flex container mx-auto flex-col col-span-2 gap-10">
<div class="flex items-center gap-5 lg:gap-10"> <div class="flex items-center gap-5 lg:gap-10">
<img src="/furry/MidFingers.jpg" class="rounded-full h-32 lg:h-40 shadow-xl aspect-square" alt='background' /> <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> <span>
<img src="/homepage/sona/midtitle.png" class="w-32 lg:w-40" alt="fullbody of mid" /> <img src="/homepage/sona/midtitle.png" class="w-32 lg:w-40" alt="fullbody of mid" />
</span> </span>
</div> </div>
<h4 class="w-10/12 lg:w-1/2 text-center font-normal"> <h4 class="font-normal text-lg">
Mid <sup>(aka Midnight)</sup> is my primary fursona. He is a fictional character that I use and represent myself with online. 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.
If you are wondering what a furry or fursona is, go check <a href="https://www.whatisfurry.org/" target="blank" class="text-blue-600 dark:text-blue-300 hover:underline">whatisfurry.org</a>.
<br/><br/>
Mid is a cat with black fur and blue hair that stands twice as tall as the people around him.
Some noticable traits are his unusually large whiskers, the white spot on his chest, and his fluffy tail. He also loves coffee, as any good programmer should.
<br/><br/> <br/><br/>
A library of arts of Mid and other characters will be added to explore some time soon. 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>
<div class="flex justify-center w-full flex-col gap-5">
<div class="w-10/12 lg:w-1/2 mx-auto grid grid-cols-2 lg:grid-cols-4 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>
</article> </article>
<section class="w-full h-full flex flex-col gap-5 text-center">
<img src="/VRChat_1920x1080_2022-06-12_00-59-32.363.png" class="rounded-xl shadow-xl hover:-rotate-2 hover:scale-105 duration-300"/>
<p class="text-sm text-zinc-700 dark:text-zinc-300">Picture from the SocialVR game VRChat showing the 3D model of Mid.</p>
</section>
</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>

@ -9,131 +9,80 @@ import Sona from "$lib/home/Sona.svelte";
<title>Home | Bart Industries</title> <title>Home | Bart Industries</title>
</svelte:head> </svelte:head>
<main class="overflow-x-hidden"> <main class="overflow-x-hidden flex flex-col gap-20">
<Banner /> <Banner />
<div class="relative h-56 lg:h-80 -mt-80 overflow-hidden scale-x-150"> <section class="bg-gray-200 pb-40 -mt-20 dark:bg-gray-800 z-20 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute inset-0 h-96 w-full scale-x-150"> <div class="absolute top-0 -mt-40" id="blog"></div>
<path <div class="container px-5 flex flex-col gap-10 justify-center">
class="block dark:hidden" Latest posts
fill="rgba(229, 231, 235, 1)" </div>
fill-opacity="1" </section>
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 pt-10 dark:bg-gray-800 z-20" id="works"> <section class="pb-20 z-20 relative">
<div class="absolute top-0 -mt-40" id="portfolio"></div>
<div class="container px-5 flex flex-col gap-10 justify-center"> <div class="container px-5 flex flex-col gap-10 justify-center">
<div class="flex flex-col gap-5"> <div class="flex flex-col gap-5">
<h2 class="font-bold text-4xl">I do a lot of things</h2> <h2 class="font-bold text-4xl">I do a lot of things</h2>
<p> <p class="text-lg">
Like any aspiring developer my ambitions are great, and so I tend to be part of a lot of places. Below are some of the things I work on and currently occupy the majority of my time.
<br/>
Below are some of the things I do and develop for, resulting in experience with a range of technologies and people.
</p> </p>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 justify-between"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 justify-between">
<Card <Card
buttonHref="https://puppypride.social" buttonHref="https://flamesoftware.net/"
buttonText="🌐 Visit Puppy Pride" buttonText="🔥 Visit early website"
> >
<h3 <h3
class="text-xl font-bold inline-flex items-center gap-3" class="text-xl font-bold inline-flex items-center gap-3"
> >
<img <img
src="/puppypride.png" src="/logo.png"
class="h-8" class="h-8"
alt="puppypride" alt="flame"
/> Puppy Pride /> Flame Software
</h3> </h3>
<p class="text-sm text-gray-800 dark:text-gray-100"> <p class="text-sm text-gray-800 dark:text-gray-100">
I was the developer of the new Puppy Pride social Flame Software is a Software-as-a-Service company that is developing a new communications app
network over the course of 2021, and continue to support and expand that intends to revolutionize the way we talk and socialize online.
it to this day. The site was built from the ground up Our mission is to make the net more connected, more privacy focused, and more healthy for your mind.
using the TALL stack in PHP. We are currently in our early development stage, where I work as the CTO to lay down the groundworks
<br /><br /> for this new app, which will be built using a combination of languages like Rust and TypeScript.
The site sports a whole array of social features including
blogging, picture albums, statuses, user profiles, forums,
events, groups with roles and custom pages, location data,
instant messaging, various networking tools like friending
and blocking, notifications through channels like push and
mail, live feed, subscriptions and viewcounts, comment
sections, likes and followers, and much more.
<br /><br />
The project is nearing 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> </p>
</Card> </Card>
<Card <Card
buttonHref="https://discord.gg/ygw4DNnKvt" buttonHref="https://puppypride.social"
buttonText="🚪 Join the Discord" buttonText="🌐 Visit Puppy Pride"
> >
<h3 <h3
class="text-xl font-bold inline-flex items-center gap-3" class="text-xl font-bold inline-flex items-center gap-3"
> >
<img <img
src="/moonlitden.png" src="/puppypride.png"
class="h-8" class="h-8"
alt="moonlitden" alt="puppypride"
/> The Moonlit Den /> Puppy Pride
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Successor to the wildly popular Wumpus' Universe, a
cornerstone of Discord's early fanatic community, The
Moonlit Den is a small piece of what it once was. Today,
it continues to do much of the same it always did,
becoming more sophisticated and professional as it's
main sponsor DubbelNull improves.
<br /><br />
Moonlit Den is a generalistic Discord community aimed at
being a friendly place to make your home online. We run various
gameservers, have game nights together, and overall just
like to chat about whatever.
</p>
</Card>
<Card
buttonHref="https://dubbelnull.com"
buttonText="➡️ Go to DubbelNull.com"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/dubbelnull.png"
class="h-10 -my-2"
alt="dubbelnull"
/> DubbelNull
</h3> </h3>
<p class="text-sm text-gray-800 dark:text-gray-100"> <p class="text-sm text-gray-800 dark:text-gray-100">
I am the founder and CTO of DubbelNull, and do most of I am the core developer of the new Puppy Pride social
the programming and technological work there today. We network since January 2021, and continue to support and expand
run our own server architecture and sponsor several it to this day. The site was built from the ground up
communities to do what they want, such as run their using the TALL stack in PHP (Tailwindcss, Alpine, Livewire and Laravel)
gameservers, websites, scripts and services. 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 /> <br /><br />
DubbelNull currently offers specialized website design and Puppy Pride is an adult themed England based social network for people into petplay.
construction of any type, be it a webapp or simple portfolio. The project is nearing its completion and will be released soon.
We focus on efficiency in communication and satisfaction You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>.
of the end result.
</p> </p>
</Card> </Card>
</div> </div>
<hr class="my-10 opacity-10" /> <div class="flex flex-col gap-5 pt-10">
<div class="flex flex-col gap-5">
<h2 class="font-bold text-4xl">I make stunning pages that fit</h2> <h2 class="font-bold text-4xl">I make stunning pages that fit</h2>
<p> <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. I love to make personalized websites for small creators and businesses that truly show their personality to the world with unique design.
</p> </p>
</div> </div>
@ -223,45 +172,34 @@ import Sona from "$lib/home/Sona.svelte";
</Card> </Card>
<Card <Card
buttonHref="https://dubbelnull.com/showcase"
buttonText="➡️ View DubbelNull showcase"
> >
<h3 <h3
class="text-xl font-bold inline-flex items-center gap-3" class="text-xl font-bold inline-flex items-center gap-3"
> >
Upcoming: Sona Factory <img
src="/dubbelnull.png"
class="h-10 -my-1 -ml-1"
alt="dubbelnull"
/> More at DubbelNull
</h3> </h3>
<p class="text-sm text-gray-800 dark:text-gray-100"> <p class="text-sm text-gray-800 dark:text-gray-100">
I am currently working on developing a portfolio site called Sona Factory, I am the Lead Developer at DubbelNull and do most of
featuring an open folder directory containing arts and works, a gallery and contact form, the programming and technological work there today. DubbelNull
and unique page designs for various characters displayed on the site called fursonas. 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> </p>
</Card> </Card>
</div> </div>
</div> </div>
</section> </section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"> <hr class="container my-10 opacity-10" />
<path
class="block dark:hidden"
fill="rgba(229, 231, 235, 1)"
fill-opacity="1"
d="M0,320L34.3,288C68.6,256,137,192,206,186.7C274.3,181,343,235,411,229.3C480,224,549,160,617,128C685.7,96,754,96,823,112C891.4,128,960,160,1029,170.7C1097.1,181,1166,171,1234,160C1302.9,149,1371,139,1406,133.3L1440,128L1440,0L1405.7,0C1371.4,0,1303,0,1234,0C1165.7,0,1097,0,1029,0C960,0,891,0,823,0C754.3,0,686,0,617,0C548.6,0,480,0,411,0C342.9,0,274,0,206,0C137.1,0,69,0,34,0L0,0Z"
/>
<path
class="hidden dark:block"
fill="rgba(31, 41, 55, 1)"
fill-opacity="1"
d="M0,320L34.3,288C68.6,256,137,192,206,186.7C274.3,181,343,235,411,229.3C480,224,549,160,617,128C685.7,96,754,96,823,112C891.4,128,960,160,1029,170.7C1097.1,181,1166,171,1234,160C1302.9,149,1371,139,1406,133.3L1440,128L1440,0L1405.7,0C1371.4,0,1303,0,1234,0C1165.7,0,1097,0,1029,0C960,0,891,0,823,0C754.3,0,686,0,617,0C548.6,0,480,0,411,0C342.9,0,274,0,206,0C137.1,0,69,0,34,0L0,0Z"
/>
</svg>
<section
class="relative container overflow-hidden px-5 lg:px-0 flex mb-40 flex-col lg:flex-row gap-10 h-full justify-center items-center"
id="contact"
>
<div class="lg:w-1/3 z-10">
<Form />
</div>
<img src="/homepage/fullbody.png" class="lg:block hidden lg:w-1/3 h-full z-10" alt="contact" /> <section class="mb-40">
<Sona/>
</section> </section>
</main> </main>

@ -1,4 +1,5 @@
<script> <script>
import Card from "$lib/home/Card.svelte";
import Socials from "$lib/Socials.svelte"; import Socials from "$lib/Socials.svelte";
</script> </script>
@ -17,8 +18,31 @@
<div class="container"> <div class="container">
<section class="py-20 flex gap-10 flex-col items-between"> <section class="py-20 flex gap-10 flex-col items-between">
<section class="w-1/2 h-96"> <section class="w-1/3 flex flex-col gap-5">
<h2 class="font-bold text-4xl">The Moonlit Den</h2> <h2 class="font-bold text-4xl">Puppy Pride</h2>
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit Puppy Pride"
>
<p class="text-sm text-gray-800 dark:text-gray-100">
I was the developer of the new Puppy Pride social
network over the course of 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.
<br /><br />
The site sports a whole array of social features including
blogging, picture albums, statuses, user profiles, forums,
events, groups with roles and custom pages, location data,
instant messaging, various networking tools like friending
and blocking, notifications through channels like push and
mail, live feed, subscriptions and viewcounts, comment
sections, likes and followers, and much more.
<br /><br />
The project is nearing 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>
</section> </section>
<section class="w-1/2 h-96"> <section class="w-1/2 h-96">

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Loading…
Cancel
Save