Add the blog

src/lib/blog/Post.svelte

@@ -8,13 +8,13 @@
     <img src={image} class="rounded-xl w-full aspect-[2/1] lg:aspect-[4/1] object-cover" />
 
     <div class="flex flex-col gap-2 lg:gap-5">
-        <h1 class="text-2xl lg:text-6xl font-bold lg:tracking-widest">{title}</h1>
+        <h1 class="text-2xl lg:text-6xl font-bold lg:tracking-wide">{title}</h1>
         <div class="flex gap-5 text-sm opacity-50">Posted {date} by Pascal</div>
     </div>
 
     <hr class="opacity-10 w-1/2 lg:w-1/4"/>
 
-    <div class="prose dark:prose-invert max-w-[800px]">
+    <div class="prose dark:prose-invert max-w-[1000px]">
         <slot/>
     </div>
 

src/lib/blog/Preview.svelte

@@ -5,12 +5,16 @@
     export let date = "";
     export let image = "";
     export let featured: boolean = false;
+    export let isNew: boolean = false;
 </script>
 
 {#if featured}
-    <a href={url} class="flex flex-col gap-2 w-[600px] flex-none p-3 hover:bg-opacity-50 bg-opacity-0 dark:bg-opacity-0 hover:dark:bg-opacity-50 dark:bg-black bg-white duration-200 rounded-xl">
+    <a href={url} class="flex flex-col gap-2 w-full lg:w-[600px] flex-none p-3 hover:bg-opacity-50 bg-opacity-0 dark:bg-opacity-0 relative hover:dark:bg-opacity-50 dark:bg-black bg-white duration-200 rounded-xl">
         {#if image.length > 0}
-            <img src={image} class="rounded-lg w-full aspect-[2/1] object-cover" />
+            <img src={image} class="rounded-lg w-full aspect-[2/1] object-cover" alt={title} />
+        {/if}
+        {#if isNew}
+            <div class="absolute top-0 right-0 text-xl bg-blue-500 text-white font-bold px-5 rounded-full blob">New!</div>
         {/if}
         <h4 class="font-bold text-lg w-full text-justify">{title}</h4>
         <p class="text-xs lg:text-sm">
@@ -19,11 +23,35 @@
         <sub class="text-xs">{date}</sub>
     </a>
 {:else}
-    <a href={url} class="flex flex-col gap-2 w-full min-w-[300px] flex-none p-3 hover:bg-opacity-50 bg-opacity-0 dark:bg-opacity-0 hover:dark:bg-opacity-50 dark:bg-black bg-white duration-200 rounded-xl">
+    <a href={url} class="flex flex-col gap-2 w-[300px] relative flex-none p-3 hover:bg-opacity-50 bg-opacity-0 dark:bg-opacity-0 hover:dark:bg-opacity-50 dark:bg-black bg-white duration-200 rounded-xl">
         {#if image.length > 0}
-            <img src={image} class="rounded-lg w-full aspect-[2/1] object-cover" />
+            <img src={image} class="rounded-lg w-full aspect-[2/1] object-cover" alt={title} />
+        {/if}
+        {#if isNew}
+            <div class="absolute top-2 right-0 bg-blue-500 text-white font-bold px-5 rounded-full blob">New!</div>
         {/if}
         <h4 class="font-bold text-lg w-full text-justify">{title}</h4>
         <sub class="text-xs">{date}</sub>
     </a>
 {/if}
+
+<style>
+    .blob {
+        animation-name: blob;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+    }
+
+    @keyframes blob {
+        0% {
+            transform: scale(1) rotate(10deg);
+        }
+        50% {
+            transform: scale(1.1) rotate(10deg);
+        }
+        100% {
+            transform: scale(1) rotate(10deg);
+        }
+    }
+</style>

src/lib/blog/blog.ts

@@ -4,4 +4,5 @@ interface BlogPost {
 	image: string;
 	date: string;
 	content: string;
+	isNew: boolean;
 }

src/lib/home/Banner.svelte

@@ -137,14 +137,15 @@
 			</div>
 
 			<p class="text-gray-800 dark:text-gray-300 text-lg max-w-[900px]">
-				I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands.
+				I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands. I am an entrepeneur with the dream of creating the next generation of chatting freedom online with my company Flame Software.
-				Be it making a website, building a computer, or designing a new protocol, I love making things with tech!
 				<br/><br/>
 				Bart Industries is my public digital home. It's a collection of my socials, work experiences and past projects, artworks, hobbies and interests, fursonas and anything else I feel like sharing with the world.
 				<br/><br/>
-				To know more about me you can visit the <a href="#about" class="a">about section</a>.
+				You can read some of the stuff I've written about at the <a href="#blog" class="a">blog section</a>.
 				<br/>
-				For some of my skills and experiences you can visit my <a href="#portfolio" class="a">portfolio section</a>.
+				You can read about some of my skills and experiences at the <a href="#portfolio" class="a">portfolio section</a>.
+				<br/>
+				For some more information about me as a person you can visit the <a href="#about" class="a">about section</a>.
 				<br/>
 				If you want to contact me you can reach out via one of my socials below or <a href="mailto:pascalvanginkel@outlook.com" class="a">send me an email</a>.
 			</p>
@@ -156,6 +157,9 @@
 	<!-- <span class="hidden @4xl: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" />
 	</span> -->
+
+	<svg class="dark:hidden block absolute left-0 bottom-0 right-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#e5e7eb" fill-opacity="1" d="M0,96L48,96C96,96,192,96,288,112C384,128,480,160,576,176C672,192,768,192,864,213.3C960,235,1056,277,1152,266.7C1248,256,1344,192,1392,160L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
+	<svg class="hidden dark:block absolute left-0 bottom-0 right-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1f2937" fill-opacity="1" d="M0,96L48,96C96,96,192,96,288,112C384,128,480,160,576,176C672,192,768,192,864,213.3C960,235,1056,277,1152,266.7C1248,256,1344,192,1392,160L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
 </main>
 
 <style>

src/lib/home/Blog.svelte

@@ -4,13 +4,38 @@
 	import { onMount } from "svelte";
 
     let posts: BlogPost[] = [
-        {
+        // {
-            image: "/blog/releasingpuppypride.png",
+        //     image: "/blog/releasingpuppypride.png",
-            title: "Releasing Puppy Pride",
+        //     title: "Releasing Puppy Pride",
-            content: "It has taken me a while to develop, actually over 2.5 years of solo fullstack development with zero experience, but I finally managed to release and deploy the new Puppy Pride social network. There have definitely been ups an downs, and in this post I'd like to touch a little on what it took to get here and the lessons I learned along the way.",
+        //     content: "It has taken me a while to develop, actually over 2.5 years of solo fullstack development with zero experience, but I finally managed to release and deploy the new Puppy Pride social network. There have definitely been ups an downs, and in this post I'd like to touch a little on what it took to get here and the lessons I learned along the way.",
-            url: "/blog/releasing-puppy-pride",
+        //     url: "/blog/releasing-puppy-pride",
-            date: "August 1st 2023"
+        //     date: "August 1st 2023",
-        }
+        //     isNew: true,
+        // },
+        // {
+        //     image: "/blog/thepowerofvr.png",
+        //     title: "The power of VR",
+        //     content: "This website is a testament to my love of VR, I have a whole section dedicated to it after all. But in this post I'd like to touch a little more on why that is, on why I've created such a deep bond with a world that isn't even real to most, or at best a failed dream of out of touch billionares.",
+        //     url: "/blog/the-power-of-vr",
+        //     date: "August 1st 2023",
+        //     isNew: true,
+        // },
+        // {
+        //     image: "/blog/myinternshipatagroit.png",
+        //     title: "My internship at Agro IT",
+        //     content: "My year 3 internship as part of my study at Saxion University, I chose to work for Agro IT, a small company that creates software solutions for several types of businesses. At the end of it, I was asked to launch what I made and was offered a job. In this post I'd like to touch a little more on what went right or wrong, and what the lessons were I learned while working there.",
+        //     url: "/blog/my-internship-at-agro-it",
+        //     date: "August 1st 2023",
+        //     isNew: true,
+        // },
+        // {
+        //     image: "/blog/centeringadiv.png",
+        //     title: "Centering a div",
+        //     content: "On the web...",
+        //     url: "/blog/centering-a-div",
+        //     date: "August 1st 2023",
+        //     isNew: true,
+        // }
     ];
 
     onMount(() => {
@@ -56,10 +81,10 @@
 
         <h2 class="text-center w-full text-4xl lg:text-6xl tracking-[0.2em] lg:tracking-[1em] font-bold">&lt;-- BLOG --&gt;</h2>
 
-        <div class="flex gap-5 overflow-visible">
+        <div class="flex flex-col lg:flex-row gap-5 overflow-visible">
 
             <span>
-                <Preview url={posts[0].url} title={posts[0].title} preview={posts[0].content.substring(0, 255) + ( posts[0].content.length > 255 ? "..." : "")} date={posts[0].date} image={posts[0].image} featured={true} />
+                <Preview url={posts[0].url} title={posts[0].title} preview={posts[0].content.substring(0, 255) + ( posts[0].content.length > 255 ? "..." : "")} date={posts[0].date} image={posts[0].image} featured={true} isNew={posts[0].isNew} />
             </span>
 
             {#if posts.length == 1}
@@ -68,7 +93,7 @@
                 <div class="grid grid-flow-col grid-rows-2 grid-cols-[repeat(12, 400px)] w-full gap-5 overflow-x-scroll pb-5 scrollbar scrollbar-thumb-white dark:scrollbar-thumb-black scrollbar-h-3 scrollbar-track-transparent scrollbar-thumb-rounded-full items">
                     {#each posts as post, key}
                         {#if key != 0}
-                            <Preview url={post.url} title={post.title} date={post.date} image={post.image} featured={false} />
+                            <Preview url={post.url} title={post.title} date={post.date} image={post.image} featured={false} isNew={post.isNew} />
                         {/if}
                     {/each}
                 </div>
@@ -80,6 +105,8 @@
     <section class="relative container flex flex-col gap-5 lg:gap-20">
         <div class="absolute top-0 -mt-40" id="blog"></div>
 
-        <h2 class="text-center w-full text-4xl lg:text-6xl tracking-[0.2em] font-bold">No blogposts</h2>
+        <h2 class="text-center w-full text-4xl lg:text-6xl tracking-[0.2em] lg:tracking-[1em] font-bold">&lt;-- BLOG --&gt;</h2>
+
+        <p class="p-10 text-sm opacity-50 text-center w-full">No posts to show...</p>
     </section>
 {/if}

src/lib/home/Portfolio.svelte

@@ -65,12 +65,20 @@
 </script>
 <section class="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="@container container px-5 flex flex-col gap-5 justify-center">
-        <div class="flex flex-col gap-5">
+        <div class="flex justify-between relative items-center bg-gradient-to-r from-blue-700 dark:from-blue-700 dark:to-gray-900 to-gray-100 p-5 rounded-xl text-white">
-            <h2 class="font-bold text-4xl">Portfolio</h2>
+            <div class="flex flex-col gap-1">
-            <p class="text-lg">
+                <h2 class="font-bold text-4xl lg:text-6xl">Portfolio</h2>
-                Explore some of my past works, experiences, skills and jobs
+                <p>
-            </p>
+                    A list of some of my most notable works, experiences, skills and jobs
+                </p>
+            </div>
+            <div class="absolute lg:flex hidden right-5 gap-5">
+                <img src="/homepage/sona/mid thinking.png" class="h-20 rounded-xl" alt="sticker" />
+                <img src="/homepage/sona/mid smug.png" class="h-20 rounded-xl" alt="sticker" />
+                <img src="/homepage/sona/mid blep.png" class="h-20 rounded-xl" alt="sticker" />
+                <img src="/homepage/sona/mid angry.png" class="h-20 rounded-xl" alt="sticker" />
+            </div>
         </div>
 
         <div class="grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-5 justify-between">
@@ -240,7 +248,7 @@
 
                 <div class="flex flex-col gap-2">
                     <span class="flex justify-between items-end"><b class="text-lg">Agro IT</b><p class="text-sm">2023</p></span>
-                    <p class="text-sm text-gray-800 dark:text-gray-100">Agro IT is an agricultural software company in The Netherlands. In my 5 month long internship I developed a new modern web app that connected to their existing rVDM suites.</p>
+                    <p class="text-sm text-gray-800 dark:text-gray-100">Agro IT is an agricultural software company in The Netherlands. In my 5 month long internship I developed a new modern web app that connected to their existing APIs and made it possible for customers to use their systems from anywhere.</p>
                 </div>
 
                 <div class="flex flex-col gap-2">

src/lib/home/Sona.svelte

@@ -56,20 +56,17 @@
 
 		<img src="/homepage/sona/car.jpeg" class="rounded-xl object-cover @6xl:aspect-[3/2] @6xl:col-span-2" alt="car image" />
 
-		<img src="/homepage/drone.jpeg" class="rounded-xl object-cover @6xl:aspect-[3/2] @6xl:col-span-3 @6xl:row-span-2" alt="drone shot" />
+		<img src="/homepage/drone.jpeg" class="rounded-xl object-cover @6xl:aspect-[2/1] @6xl:col-span-2" alt="drone shot" />
 
 		<Card>
 			<b class="text-xl">🛩️ Drones</b>
 			<p>
 				I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty.
+				<br/><br/>
+				More recently I've made some videos for Allroadevents.nl during a few offroading trips.
 			</p>
 		</Card>
 
-		<Card>
+		<img src="/homepage/drone2.jpeg" class="rounded-xl h-full object-cover" alt="drone shot" />
-			<b class="text-xl">🥽 Virtual Reality</b>
-			<p>
-				One of my biggest gaming passions is the world of VR, a place I've made my second home. More about that can be found in the <a href="#vr" class="a">Virtual Reality</a> section.
-			</p>
-		</Card>
 	</section>
 </main>

src/lib/home/Virtual.svelte

@@ -29,7 +29,7 @@
 						<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.
+						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 allowId me to create and witness.
 					</p>
 				</Card>
 			</div>
@@ -72,7 +72,7 @@
 				>
 					<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.
+						Despite the "Metaverse" seemingly failing, the world of VR is huge. Companies like Disney already take it seriously, and every year millions of people from all over the world come together in events to celebrate it.
 					</p>
 				</Card>
 			</div>

src/routes/blog/centering-a-div.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Post from "$lib/blog/Post.svelte";
+</script>
+
+<Post date="August 1st 2023" title="Centering a div" image="/blog/myinternshipatagroit.png">
+    <b class="text-lg">
+        My year 3 internship as part of my study at Saxion University, I chose to work for Agro IT, a small company that creates software solutions for several types of businesses. At the end of it, I was asked to launch what I made and was offered a job. In this post I'd like to touch a little more on what went right or wrong, and what the lessons were I learned while working there.
+    </b>
+</Post>

src/routes/blog/my-internship-at-agro-it.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Post from "$lib/blog/Post.svelte";
+</script>
+
+<Post date="August 1st 2023" title="My internship at Agro IT: a retrospective" image="/blog/myinternshipatagroit.png">
+    <b class="text-lg">
+        My year 3 internship as part of my study at Saxion University, I chose to work for Agro IT, a small company that creates software solutions for several types of businesses. At the end of it, I was asked to launch what I made and was offered a job. In this post I'd like to touch a little more on what went right or wrong, and what the lessons were I learned while working there.
+    </b>
+</Post>

src/routes/blog/releasing-puppy-pride.svelte

@@ -1,9 +1,8 @@
 <script>
 	import Post from "$lib/blog/Post.svelte";
-
 </script>
 
-<Post date="August 1st 2023" title="Releasing Puppy Pride; a lesson about experience, Laravel, and deadlines" image="/blog/releasingpuppypride.png">
+<Post date="August 1st 2023" title="Releasing Puppy Pride: lessons about experience, Laravel, and deadlines" image="/blog/releasingpuppypride.png">
     <b class="text-lg">
         It has taken me a while to develop, actually over 2.5 years of solo fullstack development with zero experience, but I finally managed to release and deploy the new Puppy Pride social network. There have definitely been ups an downs, and in this post I'd like to touch a little on what it took to get here and the lessons I learned along the way.
     </b>

src/routes/blog/the-power-of-vr.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Post from "$lib/blog/Post.svelte";
+</script>
+
+<Post date="August 1st 2023" title="The power of VR, and why it's probably not what you think" image="/blog/thepowerofvr.png">
+    <b class="text-lg">
+        This website is a testament to my love of VR, I have a whole section dedicated to it after all. But in this post I'd like to touch a little more on why that is, on why I've created such a deep bond with a world that isn't even real to most, or at best a failed dream of out of touch billionares.
+    </b>
+</Post>

src/routes/index.svelte

@@ -13,11 +13,16 @@
 	<title>Bart Industries</title>
 </svelte:head>
 
-<main class="overflow-x-hidden flex flex-col gap-40">
+<main class="overflow-x-hidden flex flex-col">
 	<Banner />
 
-	<section class="bg-gradient-to-br bg-gray-200 -mt-40 dark:bg-gray-800 py-20">
+	<section class="flex flex-col">
-		<Blog/>
+		<div class="bg-gradient-to-br bg-gray-200 dark:bg-gray-800 py-20">
+			<Blog/>
+		</div>
+
+		<svg class="hidden dark:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1f2937" fill-opacity="1" d="M0,224L48,186.7C96,149,192,75,288,69.3C384,64,480,128,576,133.3C672,139,768,85,864,101.3C960,117,1056,203,1152,234.7C1248,267,1344,245,1392,234.7L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
+		<svg class="dark:hidden block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#e5e7eb" fill-opacity="1" d="M0,224L48,186.7C96,149,192,75,288,69.3C384,64,480,128,576,133.3C672,139,768,85,864,101.3C960,117,1056,203,1152,234.7C1248,267,1344,245,1392,234.7L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
 	</section>
 
 	<div class="backg flex flex-col gap-40 pb-40 bg-top bg-cover">