parent
4628d0ad0d
commit
ec5b7edc49
File diff suppressed because it is too large
Load Diff
@ -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">
|
||||
<div class="absolute top-0 -mt-20" id="furry"></div>
|
||||
<main class="@container container flex flex-col gap-20 relative">
|
||||
<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">
|
||||
<!-- <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 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>
|
||||
<section class="flex flex-col px-5 justify-between gap-10 lg:gap-20">
|
||||
<article class="flex w-1/2 items-center text-center mx-auto flex-col col-span-2 gap-10">
|
||||
<img src="/homepage/sona/midtitle.png" class="w-32 lg:w-60" alt="fullbody of mid" />
|
||||
<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/>
|
||||
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.
|
||||
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.
|
||||
</h4>
|
||||
</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-1 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>
|
||||
<article class="w-2/3 mx-auto grid grid-cols-4 gap-5">
|
||||
<img src="/homepage/sona/blue.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
|
||||
<img src="/homepage/sona/hotdog.jpeg" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona"/>
|
||||
<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>
|
||||
|
||||
<!-- <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>
|
||||
@ -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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 3.0 MiB |
|
After Width: | Height: | Size: 2.9 MiB |
|
After Width: | Height: | Size: 3.1 MiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 3.1 MiB |
|
After Width: | Height: | Size: 2.6 MiB |
|
After Width: | Height: | Size: 3.1 MiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 3.2 MiB |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 3.4 MiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 3.0 MiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 2.7 MiB |
Loading…
Reference in new issue