Homepage

src/components/homepage/content.svelte

@@ -0,0 +1,37 @@
+<div class="px-5 md:px-0 col-span-7 md:col-span-5">
+	<h1
+		class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold"
+	>
+		Welcome to my website
+	</h1>
+	<br class="hidden lg:block" />
+	<p class="font-roboto_slab text-center lg:text-2xl text-md">The modern web meets 2000</p>
+	<hr />
+	<br />
+	<div class="md:text-center lg:px-40">
+		<p class="">
+			Welcome! This is my personal website that I made as a hobby project. You are entirely welcome!
+			I was inspired to make this page thanks to a couple of friends of mine, whose pages you can
+			check out under the "Galaxies" page.
+		</p>
+	</div>
+		<div class="flex gap-3 lg:px-20 xl:px-40 xl:mt-10">
+			<img
+				class="h-40 md:h-60 rounded "
+				src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-2.gif"
+				alt="Kagamine Rin excitedly jumping! yay!"
+			/>
+			<div class="w-full bg-slate-800 rounded-xl shadow">
+				<br />
+				<h2 class="font-semibold text-left ml-10">
+					Tech
+				</h2>
+				<ul class="ml-10 list-disc marker:text-blue-400">
+					<li>Kubernetes</li>
+					<li>Svelte</li>
+					<li>SvelteKit</li>
+					<li>Lot's of Japanese music</li>
+				</ul>
+			</div>
+		</div>
+</div>

src/components/homepage/rightbar.svelte

@@ -0,0 +1,12 @@
+<div class="hidden md:block col-start-7">
+	<img
+		class="w-auto "
+		src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-len1.webp"
+		alt="Rin and Len"
+	/>
+	<br />
+	<br />
+	<img class="rounded"
+	src="/images/literallyme.jpg" alt="literally me wink wink" />
+	<p class="text-center mt-2">yes, i love japanese stuff, how can you tell?</p>
+</div>

src/components/homepage/sidebar.svelte

@@ -7,12 +7,12 @@
 		</p>
 	</div>
 	<img
-		class="col-start-1"
+		class="col-start-1 rounded"
 		src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/kanata-1.gif"
 		alt="Amane Kanata"
 	/>
 	<img
-		class="col-start-2"
+		class="col-start-2 rounded"
 		src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/kanata-1.gif"
 		alt="Amane Kanata"
 	/>

src/components/legacy/oldblock.svelte

@@ -0,0 +1,52 @@
+<style>
+
+</style>
+<div class="block right contentblock">
+	<div>
+		<div>
+			<p class="p-h1">Welcome, internet surfer!</p>
+			<div style="position:absolute; top:10px; right:5px;">
+				<p class="small">Please sign my guestbook</p>
+				<img
+					src="/web/static/images/email3.gif"
+					alt=""
+					style="width:40px; position:absolute; bottom:0px; right:0px;"
+					data-hydrus="DONE"
+				/>
+			</div>
+			<img
+				src="/web/static/images/rin-len1.webp"
+				alt=""
+				height="230"
+				style="float:right; margin-bottom: 10px;"
+				data-hydrus="DONE"
+			/>
+			<p class="content-text">
+				Welcome to my webspace! Whether you stumbled across this page by accident or were linked
+				here, you're more than welcome! This is my personal project that I like to work on! I was
+				inspired by a couple friends of mine, please do check their webspaces out as well under
+				"Galaxies" on the left side there! If you like this page, there is a lot more, so have a
+				look around! You can also leave a nice message for me in the guestbook! There is no
+				registration (unlike the rest of the "modern" internet) so nothing of that sort! That said,
+				this website is my creative outlet and a way to introduce myself, so be kind please! Also
+				its code is entirely open-source and can be found
+				<a href="https://dutchellie.nl/DutchEllie/proper-website-2" data-hydrus="DONE"
+					>on my personal Gitea instance</a
+				> so if you like that sort of stuff, be my guest it's cool!
+			</p>
+			<br />
+			<p class="content-text">
+				<img
+					src="/web/static/images/rin-2.gif"
+					alt="Kagamine Rin drawing"
+					style="float:left; width:100px; margin-right: 20px;"
+					data-hydrus="DONE"
+				/>
+				There is a lot of stuff I want to add to this website! In fact, there is also a "staging" website,
+				which might contain new features! It can be found at
+				<a href="https://staging.quenten.nl" data-hydrus="DONE">staging.quenten.nl</a>. Don't worry
+				about the invalid SSL certificate, that's normal!
+			</p>
+		</div>
+	</div>
+</div>

src/components/maincontent.svelte

@@ -1,3 +1,3 @@
-<div class="h-full w-full grid grid-cols-7 gap-3">
+<div class="h-full w-full grid grid-cols-7 gap-3 overflow-auto">
 	<slot/>
 </div>

src/routes/__layout.svelte

@@ -1,21 +1,23 @@
 <script>
 	import '../app.css';
 	import Header from '../components/header.svelte';
-  import AlertHeader from '../components/alert-header.svelte';
+	import AlertHeader from '../components/alert-header.svelte';
 </script>
 
-<div class="flex flex-col bg-gradient-to-tr from-[#070F1A] to-[#0D234C] w-screen h-screen text-slate-100">
+<div
-  <!-- Possible alert header -->
+	class="flex flex-col bg-gradient-to-tr from-[#070F1A] to-[#0D234C] w-screen h-screen text-slate-100"
-  <!--<AlertHeader text='ALERT'/>-->
+>
+	<!-- Possible alert header -->
+	<!--<AlertHeader text='ALERT'/>-->
 	<!-- Header -->
 	<Header />
-  <!-- Main content -->
+	<!-- Main content -->
-		<slot />
+	<slot />
 </div>
 
 <!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6); 
 https://mycolor.space/gradient?ori=to+right+top&hex=%23051937&hex2=%235D88D6&sub=1
 -->
 <style>
-  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&display=swap');
+	@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&family=Roboto+Slab&display=swap');
 </style>

src/routes/index.svelte

@@ -1,11 +1,16 @@
 <script>
-	import Sidebar from "../components/homepage/sidebar.svelte";
+	import Content from '../components/homepage/content.svelte';
-import Maincontent from "../components/maincontent.svelte";
+import Sidebar from '../components/homepage/sidebar.svelte';
+	import Maincontent from '../components/maincontent.svelte';
+	import Rightbar from '../components/homepage/rightbar.svelte';
 </script>
+
 <svelte:head>
 	<title>Welcome</title>
 </svelte:head>
 
 <Maincontent>
-	<Sidebar/>
+	<Sidebar />
-</Maincontent>
+	<Content/>
+	<Rightbar/>
+</Maincontent>

static/images/grid.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#0f172a"
+  stroke-opacity="0.04">
+  <path d="M0 .5H31.5V32" />
+</svg>

tailwind.config.cjs

@@ -6,7 +6,8 @@ module.exports = {
     extend: {
       fontFamily: {
         sans: ['Roboto Flex', ...defaultTheme.fontFamily.sans],
-        montserrat: ['Montserrat', ...defaultTheme.fontFamily.sans]
+        montserrat: ['Montserrat', ...defaultTheme.fontFamily.sans],
+        roboto_slab: ['Roboto Slab', ...defaultTheme.fontFamily.serif] 
       },
       gridTemplateRows: {
         '12': 'repeat(12, minmax(0, 1fr))',
@@ -20,6 +21,22 @@ module.exports = {
     },
     minHeight: {
       '1/2': '50%',
+    },
+    screens: {
+      'sm': '640px',
+      // => @media (min-width: 640px) { ... }
+
+      'md': '768px',
+      // => @media (min-width: 768px) { ... }
+
+      'lg': '1024px',
+      // => @media (min-width: 1024px) { ... }
+
+      'xl': '1280px',
+      // => @media (min-width: 1280px) { ... }
+
+      '2xl': '1536px',
+      // => @media (min-width: 1536px) { ... }
     }
   },
   plugins: [],