Changes to homepage

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

@ -1,8 +1,14 @@
<script>
import Social from "./footer/Social.svelte";
export let text = false;
</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
url="https://twitter.com/midblep"
title="The Bird App"
@ -11,10 +17,16 @@
/>
<Social
url="https://gitlab.com/midblep"
title="I don't use GitHub"
title="GitLab"
icon="🦊"
text="GitLab"
/>
<Social
url="https://github.com/midblep"
title="Very new, mostly empty"
icon="🐙"
text="GitHub"
/>
<Social
url="https://discord.com/users/191525900880183296"
title="Mid#0001"
@ -27,4 +39,9 @@
icon="✉️"
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>

@ -2,8 +2,7 @@
import { onMount } from "svelte";
import { getCookie } from "./helpers/cookies";
let classes =
"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";
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";
function switchTheme() {
if (document.documentElement.classList.contains("dark")) {
@ -15,13 +14,13 @@
function setLight() {
document.documentElement.classList.remove("dark");
document.querySelector("#theme").innerHTML = "Set to Dark";
document.querySelector("#theme").innerHTML = "☀️";
document.cookie = "theme=light";
}
function setDark() {
document.documentElement.classList.add("dark");
document.querySelector("#theme").innerHTML = "Set to Light";
document.querySelector("#theme").innerHTML = "🌙";
document.cookie = "theme=dark";
}

@ -1,29 +1,34 @@
<script>
import Form from "$lib/home/Form.svelte";
import Socials from "$lib/Socials.svelte";
import ThemeSwitcher from "$lib/ThemeSwitcher.svelte";
import Social from "./Social.svelte";
</script>
<main
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"
<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"
>
<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
class="container flex flex-col-reverse lg:flex-row justify-between gap-10"
>
<div class="flex flex-col gap-3">
<h4 class="text-xl font-bold baron-light">Bart Industries</h4>
<hr />
<p class="text-xs">Copyright 2022 Mid // Midblep. All rights reserved.</p>
</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>
</main>
</footer>

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

@ -49,7 +49,10 @@
"Blade",
"JSX",
"Pug",
"Wordpress"
"Wordpress",
"Vercel",
"Netlify",
"AWS S3"
];
onMount(() => {
@ -74,41 +77,44 @@
randomBannerPic = "/homepage/banner.png";
</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>
<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">
<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/3 z-10">
<img
src={randomBannerPic}
alt="mid"
/>
</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>
<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>
<h2 class="text-4xl font-extrabold relative">I'm Midnight,</h2>
<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>
<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 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, socials, blogposts and everything else I feel like sharing.
<br/><br/>
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>
<p class="text-gray-800 dark:text-gray-300 text-lg">
Bart Industries is an online collection of me such as my socials, work experiences,
past-time projects, artworks and hobbies, random blogposts, fursonas and anything else I feel proud enough of to share.
<br/><br/>
For my skills and experiences I implore you to visit my <a href="#portfolio" class="a">portfolio section</a>, but
I am always excited to explore other technologies and have new experiences.
<br/><br/>
I am open to new opportunities and am always eager to work,
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 />
</div>
@ -117,6 +123,23 @@
<img src="/downarrow.png" class="w-10" />
</span>
</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>
<style>

@ -9,7 +9,7 @@
<div class={classes}>
<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 />
</div>

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

@ -1,33 +1,37 @@
<main class="flex flex-col gap-20 min-h-screen">
<section class="w-full h-full">
<main class="container flex flex-col gap-20 py-20 relative">
<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">
<img src="/furry/Background.png" class="w-full scale-110" alt="background" />
</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">
<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>
<img src="/homepage/sona/midtitle.png" class="w-32 lg:w-40" alt="fullbody of mid" />
</span>
</div>
<h4 class="w-10/12 lg:w-1/2 text-center font-normal">
Mid <sup>(aka Midnight)</sup> is my primary fursona. He is a fictional character that I use and represent myself with online.
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.
<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.
<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>
<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>
<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>
<!-- <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>

@ -9,131 +9,80 @@ import Sona from "$lib/home/Sona.svelte";
<title>Home | Bart Industries</title>
</svelte:head>
<main class="overflow-x-hidden">
<main class="overflow-x-hidden flex flex-col gap-20">
<Banner />
<div class="relative h-56 lg:h-80 -mt-80 overflow-hidden scale-x-150">
<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 pb-40 -mt-20 dark:bg-gray-800 z-20 relative">
<div class="absolute top-0 -mt-40" id="blog"></div>
<div class="container px-5 flex flex-col gap-10 justify-center">
Latest posts
</div>
</section>
<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="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 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://puppypride.social"
buttonText="🌐 Visit Puppy Pride"
buttonHref="https://flamesoftware.net/"
buttonText="🔥 Visit early website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/puppypride.png"
src="/logo.png"
class="h-8"
alt="puppypride"
/> Puppy Pride
alt="flame"
/> Flame Software
</h3>
<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>.
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.
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://discord.gg/ygw4DNnKvt"
buttonText="🚪 Join the Discord"
buttonHref="https://puppypride.social"
buttonText="🌐 Visit Puppy Pride"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
>
<img
src="/moonlitden.png"
src="/puppypride.png"
class="h-8"
alt="moonlitden"
/> The Moonlit Den
</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
alt="puppypride"
/> Puppy Pride
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am the founder and CTO of DubbelNull, and do most of
the programming and technological work there today. We
run our own server architecture and sponsor several
communities to do what they want, such as run their
gameservers, websites, scripts and services.
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 />
DubbelNull currently offers specialized website design and
construction of any type, be it a webapp or simple portfolio.
We focus on efficiency in communication and satisfaction
of the end result.
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>
</div>
<hr class="my-10 opacity-10" />
<div class="flex flex-col gap-5">
<div class="flex flex-col gap-5 pt-10">
<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.
</p>
</div>
@ -223,45 +172,34 @@ import Sona from "$lib/home/Sona.svelte";
</Card>
<Card
buttonHref="https://dubbelnull.com/showcase"
buttonText="➡️ View DubbelNull showcase"
>
<h3
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>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am currently working on developing a portfolio site called Sona Factory,
featuring an open folder directory containing arts and works, a gallery and contact form,
and unique page designs for various characters displayed on the site called fursonas.
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>
<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,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>
<hr class="container my-10 opacity-10" />
<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>
</main>

@ -1,4 +1,5 @@
<script>
import Card from "$lib/home/Card.svelte";
import Socials from "$lib/Socials.svelte";
</script>
@ -17,8 +18,31 @@
<div class="container">
<section class="py-20 flex gap-10 flex-col items-between">
<section class="w-1/2 h-96">
<h2 class="font-bold text-4xl">The Moonlit Den</h2>
<section class="w-1/3 flex flex-col gap-5">
<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 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