From 2cfaf2fb8a0ec43ed1f93f353fe3a98c91709c2a Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Fri, 8 Dec 2023 17:52:50 +0100
Subject: [PATCH] progress

---
 src/routes/Projects.svelte           | 10 ++++----
 src/styles/projects.scss             | 35 +++++++++++++++++-----------
 static/assets/icons/next.svg         |  3 +++
 static/assets/logos/dashinit.svg     |  5 ++++
 static/assets/logos/explorecraft.svg | 16 +++++++++++++
 static/assets/logos/sangefault.svg   | 10 ++++++++
 6 files changed, 62 insertions(+), 17 deletions(-)
 create mode 100644 static/assets/icons/next.svg
 create mode 100644 static/assets/logos/dashinit.svg
 create mode 100644 static/assets/logos/explorecraft.svg
 create mode 100644 static/assets/logos/sangefault.svg

diff --git a/src/routes/Projects.svelte b/src/routes/Projects.svelte
index 48cbfc6..e14a0cb 100644
--- a/src/routes/Projects.svelte
+++ b/src/routes/Projects.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 
+	import IconNext from 'svelte-material-icons/ArrowRight.svelte'
+
 	function smoothScrollTo(elementId: string) {
 		const element = document.getElementById(elementId);
 		if (element) {
@@ -65,8 +67,8 @@
 		<h1 class="no-select">Projects</h1>
 	</header>
 	<content>
-		<div class="content-container">
-			<div class="container">
+		<div class="container">
+			<div class="grid">
 				<div class="one">
 					<button class="button inactive" />
 					<button class="button inactive" />
@@ -76,8 +78,8 @@
 				<div class="two">
 					<button class="button gitpot"></button>
 					<button class="button utility"></button>
-					<button class="button spectrumgal"></button>
-					<button class="button spacebot"></button>
+					<button class="button explorecraft"></button>
+					<button class="button dashinit"></button>
 				</div>
 				<div class="thr">
 					<button class="button inactive" />
diff --git a/src/styles/projects.scss b/src/styles/projects.scss
index c6f4866..c486bff 100644
--- a/src/styles/projects.scss
+++ b/src/styles/projects.scss
@@ -36,16 +36,16 @@
 		align-items: center;
 		justify-content: center;
 
-		.content-container {
+		.container {
 			height: 100%;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 
-			.container {
+			.grid {
 				display: grid;
-				grid-template-columns: 7em 7em 7em 7em;
-				grid-template-rows: 7em 7em 7em;
+				grid-template-columns: 8em 8em 8em 8em;
+				grid-template-rows: 8em 8em 8em;
 				gap: 2em 2em;
 				grid-template-areas:
 					'one one one one'
@@ -56,6 +56,7 @@
 				margin-bottom: -15%;
 				user-select: none;
 				cursor: default;
+				align-items: center;
 			}
 	
 			.one {
@@ -112,17 +113,25 @@
 				background-image: url('/assets/logos/utilityclient.svg');
 			}
 	
-			// .spectrumgal {
-			// 	grid-area: 🌕;
-			// }
+			.explorecraft {
+				background-image: url('/assets/logos/explorecraft.svg');
+			}
 	
-			// .spacebot {
-			// 	grid-area: 🤖;
-			// }
+			.dashinit {
+				background-image: url('/assets/logos/dashinit.svg');
+			}
 	
-			// .sangefault {
-			// 	grid-area: 🎨;
-			// }
+			.sangefault {
+				background-image: url('/assets/logos/sangefault.svg');
+			}
+
+			.next {
+				background-color: $space-cadet;
+				background-image: url('/assets/icons/next.svg');
+				background-size: 3em;
+				background-position: center;
+				background-repeat: no-repeat;
+			}
 			
 			.tip {
 				width: 10em;
diff --git a/static/assets/icons/next.svg b/static/assets/icons/next.svg
new file mode 100644
index 0000000..528cb9f
--- /dev/null
+++ b/static/assets/icons/next.svg
@@ -0,0 +1,3 @@
+<svg width="77" height="77" viewBox="0 0 77 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.464844 28.9489V48.1877H43.7523L26.9183 65.0217L38.5578 76.6612L76.6507 38.5683L38.5578 0.475342L26.9183 12.1149L43.7523 28.9489H0.464844Z" fill="white"/>
+</svg>
diff --git a/static/assets/logos/dashinit.svg b/static/assets/logos/dashinit.svg
new file mode 100644
index 0000000..6c84e18
--- /dev/null
+++ b/static/assets/logos/dashinit.svg
@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" fill="#F0F4EF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M155.414 392.552C166.016 399.897 178.328 403.57 192.35 403.57C201.584 403.57 210.048 402.075 217.743 399.086C225.438 396.011 232.235 391.869 238.135 386.658C244.12 381.363 249.036 375.384 252.883 368.722H254.422L249.036 401.008H319.316L362.921 138.619H292.127L275.455 238.552H274.429C272.976 231.89 270.24 225.783 266.221 220.231C262.203 214.594 256.773 210.11 249.934 206.778C243.179 203.362 234.928 201.654 225.181 201.654C212.186 201.654 199.232 205.113 186.322 212.031C173.497 218.95 162.126 229.84 152.208 244.702C142.375 259.564 135.493 278.867 131.56 302.612C127.798 325.332 128.182 344.165 132.714 359.113C137.331 374.06 144.898 385.206 155.414 392.552ZM237.789 288.753L236.178 254.074C235.92 248.525 228.826 246.387 225.545 250.869L204.882 279.091C203.423 281.083 201.125 282.289 198.656 282.358L166.282 283.257C160.554 283.416 158.405 290.835 163.162 294.031L189.795 311.922C191.901 313.337 193.21 315.669 193.322 318.204L194.919 354.51C195.166 360.141 202.422 362.24 205.637 357.611L226.225 327.969C227.685 325.868 230.062 324.593 232.62 324.538L264.258 323.87C269.965 323.749 272.179 316.392 267.486 313.142L241.222 294.952C239.174 293.533 237.905 291.241 237.789 288.753Z" fill="#0D1821"/>
+<path d="M338.905 106.837L342.53 129.551C342.922 132.011 342.145 134.513 340.429 136.318L326.297 151.176C322.363 155.312 326.025 162.066 331.638 161.024L351.539 157.329C354.055 156.862 356.641 157.628 358.498 159.388L375.836 175.836C379.925 179.715 386.602 176.185 385.7 170.621L381.843 146.828C381.436 144.323 382.244 141.774 384.019 139.96L398.389 125.276C402.397 121.18 398.785 114.353 393.144 115.361L372.66 119.024C370.229 119.458 367.733 118.745 365.9 117.09L348.665 101.538C344.54 97.8162 338.03 101.352 338.905 106.837Z" fill="#85D2BB"/>
+</svg>
diff --git a/static/assets/logos/explorecraft.svg b/static/assets/logos/explorecraft.svg
new file mode 100644
index 0000000..b4d7ddd
--- /dev/null
+++ b/static/assets/logos/explorecraft.svg
@@ -0,0 +1,16 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_103_2)">
+<rect width="512" height="512" fill="#C1EAE8"/>
+<path d="M128 336V320H144V336H160V352H208V368H352V352H368V336H384V352H376H368V360V368H360H352V376V384H280H208V376V368H184H160V360V352H152H144V344V336H136H128Z" fill="black" fill-opacity="0.25"/>
+<path d="M128 320V304H144V320H160V336H208V352H352V336H368V320H384V336H376H368V344V352H360H352V360V368H280H208V360V352H184H160V344V336H152H144V328V320H136H128Z" fill="black" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M128 216V272H136H144V288V304H152H160V312V320H184H208V328V336H232H256V328V320H240H224V312V304H208H192V296V288H184H176V280V272H168H160V264V256H152H144V208V160H136H128V216ZM368 256V288H360H352V304V320H336H320V304V288H328H336V280V272H328H320V280V288H312H304V304V320H296H288V328V336H320H352V328V320H360H368V304V288H376H384V256V224H376H368V256Z" fill="#38B067"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M144 208V256H152H160V264V272H168H176V280V288H184H192V296V304H208H224V312V320H232H240V312V304H248H256V280V256H264H272V288V320H280H288V304V288H296H304V280V272H320H336V280V288H328H320V304V320H336H352V304V288H360H368V272V256H360H352V248V240H320H288V248V256H280H272V248V240H264H256V232V224H248H240V216V208H232H224V200V192H208H192V184V176H176H160V168V160H152H144V208ZM192 248V256H200H208V264V272H216H224V288V304H232H240V288V272H232H224V264V256H216H208V248V240H200H192V248Z" fill="#4ABF78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M128 144V160H120H112V216V272H120H128V288V304H136H144V312V320H152H160V328V336H184H208V344V352H280H352V344V336H360H368V328V320H376H384V304V288H392H400V248V208H360H320V216V224H304H288V216V208H280H272V200V192H264H256V184V176H248H240V168V160H224H208V152V144H192H176V136V128H152H128V144ZM144 152V160H136H128V216V272H136H144V288V304H152H160V312V320H184H208V328V336H232H256V328V320H248H240V312V304H248H256V280V256H264H272V288V320H280H288V328V336H320H352V328V320H360H368V304V288H376H384V256V224H352H320V232V240H304H288V248V256H280H272V232V208H264H256V200V192H248H240V184V176H224H208V168V160H192H176V152V144H160H144V152ZM192 248V256H200H208V264V272H216H224V288V304H232H240V288V272H232H224V264V256H216H208V248V240H200H192V248ZM304 280V288H296H288V304V320H296H304V304V288H312H320V280V272H312H304V280Z" fill="#167A59"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M144 152V160H152H160V168V176H176H192V184V192H208H224V200V208H232H240V216V224H248H256V232V240H264H272V224V208H264H256V200V192H248H240V184V176H224H208V168V160H192H176V152V144H160H144V152ZM320 232V240H336H352V248V256H360H368V240V224H344H320V232Z" fill="#57C783"/>
+</g>
+<defs>
+<clipPath id="clip0_103_2">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/assets/logos/sangefault.svg b/static/assets/logos/sangefault.svg
new file mode 100644
index 0000000..adb8e9c
--- /dev/null
+++ b/static/assets/logos/sangefault.svg
@@ -0,0 +1,10 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="200" height="200" fill="url(#paint0_linear_1_2)"/>
+<path d="M100.908 141C95.8364 141 91.2556 140.034 87.1656 138.101C83.0757 136.131 79.7055 133.323 77.0552 129.676C74.4376 125.993 72.7526 121.69 72 116.767L82.6994 114.961C83.4192 118.134 84.6626 120.869 86.4294 123.167C88.229 125.464 90.4213 127.215 93.0061 128.418C95.591 129.622 98.4213 130.223 101.497 130.223C104.344 130.223 106.978 129.713 109.399 128.692C111.82 127.671 113.734 126.212 115.141 124.316C116.581 122.419 117.301 120.195 117.301 117.642C117.301 114.943 116.515 112.791 114.945 111.187C113.407 109.546 111.231 108.251 108.417 107.303L90.3067 101.34C85.8241 99.8815 82.1104 97.6569 79.1656 94.6664C76.2209 91.676 74.7485 87.318 74.7485 81.5924C74.7485 76.8879 75.8446 72.8399 78.0368 69.4483C80.229 66.0202 83.2229 63.431 87.0184 61.6805C90.8466 59.8935 95.1493 59 99.9264 59C104.671 59 108.941 59.9117 112.736 61.7352C116.564 63.5586 119.738 66.2026 122.258 69.6671C124.81 73.1316 126.56 77.2708 127.509 82.0847L116.515 84.1634C115.992 81.2095 114.912 78.6567 113.276 76.505C111.673 74.3169 109.677 72.6575 107.288 71.527C104.9 70.3965 102.315 69.8312 99.5337 69.8312C96.9816 69.8312 94.6421 70.3053 92.5153 71.2535C90.3885 72.2017 88.7035 73.5328 87.4601 75.2468C86.2168 76.9609 85.5951 78.8937 85.5951 81.0454C85.5951 83.9629 86.593 86.1875 88.589 87.7191C90.6176 89.2144 93.2843 90.4725 96.589 91.4937L109.644 95.5964C112.851 96.5811 115.714 97.7481 118.233 99.0974C120.785 100.447 123.043 102.58 125.006 105.498C127.002 108.379 128 112.171 128 116.876C128 121.982 126.773 126.358 124.319 130.005C121.898 133.615 118.626 136.35 114.503 138.21C110.413 140.07 105.881 141 100.908 141Z" fill="#00151F"/>
+<defs>
+<linearGradient id="paint0_linear_1_2" x1="0" y1="0" x2="200" y2="200" gradientUnits="userSpaceOnUse">
+<stop stop-color="#04A7EE"/>
+<stop offset="1" stop-color="#0CD2C1"/>
+</linearGradient>
+</defs>
+</svg>