Feat(dioxus): finished tech category, footer, contact, and started home and tech cards

assets/styling/contact.css

@@ -0,0 +1,74 @@
+#contact {
+	display: flex;
+	flex-direction: row;
+	gap: 2svw;
+	align-items: center;
+}
+
+#contact img {
+	flex: 1 1 50%;
+	border-radius: 100%;
+	max-width: 40%;
+	object-fit: cover;
+	display: block;
+}
+
+#contact div {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}
+
+#contact div ul {
+	display: flex;
+	flex-direction: column;
+}
+
+#contact div ul div {
+	display: flex;
+	flex-direction: row;
+}
+
+#contact a {
+	text-decoration: none;
+	color: inherit;
+}
+
+#contact h4 {
+	text-align: center;
+	margin-bottom: 0px;
+}
+
+#contact div ul {
+	list-style-type: none;
+	gap: 1svh;
+	padding: 0px;
+}
+
+#contact div ul li {
+	justify-content: flex-start;
+
+	border: 1px solid whitesmoke;
+}
+
+#contact div ul li a {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+#contact div ul li a div {
+	display: flex;
+	flex-direction: column;
+}
+
+#contact ul li p {
+	padding: 0px;
+	margin: 0px;
+}
+
+#contact ul li img {
+	height: 80px;
+	object-fit: contain;
+	border-radius: 0px;
+}

assets/styling/ender.css

@@ -0,0 +1,28 @@
+footer {
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+
+	background-color: #d3d3d3;
+}
+
+footer div {
+	display: flex;
+	flex-direction: row;
+	flex: 1 1 2;
+	justify-content: space-between;
+}
+
+footer img {
+	height: 100px;
+}
+
+footer a {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	border: 1px solid lightgray;
+	text-decoration: none;
+	color: inherit;
+}

assets/styling/main.css

@@ -1,42 +1,50 @@
 body {
-    background-color: #0f1116;
-    color: #ffffff;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 20px;
+	background-color: #0f1116;
+	color: #ffffff;
+	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+	margin: 20px;
+}
+h2 {
+	width: 80%;
+	border-bottom: var(--underlineTitle);
+	margin: 2svh 0px;
+	margin-left: 2svw;
+	padding-left: 2svw;
+	padding-bottom: 1svh;
 }
 
 #hero {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 }
 
 #links {
-    width: 400px;
-    text-align: left;
-    font-size: x-large;
-    color: white;
-    display: flex;
-    flex-direction: column;
+	width: 400px;
+	text-align: left;
+	font-size: x-large;
+	color: white;
+	display: flex;
+	flex-direction: column;
 }
 
 #links a {
-    color: white;
-    text-decoration: none;
-    margin-top: 20px;
-    margin: 10px 0px;
-    border: white 1px solid;
-    border-radius: 5px;
-    padding: 10px;
+	color: white;
+	text-decoration: none;
+	margin-top: 20px;
+	margin: 10px 0px;
+	border: white 1px solid;
+	border-radius: 5px;
+	padding: 10px;
 }
 
 #links a:hover {
-    background-color: #1f1f1f;
-    cursor: pointer;
+	background-color: #1f1f1f;
+	cursor: pointer;
 }
 
 #header {
-    max-width: 1200px;
-}
+	max-width: 1200px;
+}

assets/styling/standardColoursandFonts.css

@@ -0,0 +1,3 @@
+:root {
+	--underlineTitle: 4px solid purple;
+}

assets/styling/techs.css

@@ -10,7 +10,7 @@
 .tech-cat h3 {
 	display: flex;
 	width: 80%;
-	border-bottom: 4px solid purple;
+	border-bottom: var(--underlineTitle);
 	margin: 2svh 0px;
 	margin-left: 4svw;
 	padding-left: 2svw;