feat: create hayflow, a zola theme

static/particles.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 30,
+      "density": {
+        "enable": true,
+        "value_area": 750
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "polygon",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 3,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "window",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "push"
+      },
+      "resize": false
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}

static/style.css

@@ -0,0 +1,240 @@
+:root {
+	--light-purple: #b0a4e3;
+	--dark-purple: #1a222c;
+	--transition-duration: 500ms;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+html,
+body,
+.fullflex {
+	display: flex;
+	flex-direction: column;
+	width: 100vw;
+	min-width: 100vw;
+	max-width: 100vw;
+	min-height: 100vh;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	font-family: 'Roboto', sans-serif;
+	overflow: overlay;
+}
+
+#particles {
+	position: fixed;
+	height: 100vh;
+	z-index: -1;
+	background-color: #1a222c;
+}
+
+#splash {
+	color: white;
+	text-align: center;
+	margin: auto;
+}
+
+#name {
+	display: inline;
+	font-size: 7em;
+	transition: var(--transition-duration);
+}
+
+#name em {
+	color: var(--light-purple);
+	font-style: normal;
+	transition: var(--transition-duration);
+}
+
+#name:hover {
+	color: var(--light-purple);
+}
+
+#name:hover em {
+	color: white;
+}
+
+#roles p {
+	font-size: 2em;
+	margin-bottom: 0.7em;
+}
+
+#roles span {
+	transition: var(--transition-duration);
+}
+
+#roles span:hover {
+	color: var(--light-purple);
+}
+
+#links {
+	margin-bottom: 2em;
+}
+
+#links p a i {
+	color: white;
+	width: 1.73em;
+	height: 1.73em;
+	margin: 0 15px;
+	padding: 10px;
+	border-radius: 50%;
+	border: 2px solid var(--light-purple);
+	transition: var(--transition-duration);
+}
+
+#links p a i:hover {
+	border: 2px solid white;
+	color: var(--light-purple);
+	transform: rotate(30deg);
+}
+
+#internal_links p a {
+	margin: 2em;
+	color: white;
+	font-size: 1.5em;
+	text-underline-offset: 0.4em;
+	text-decoration: underline var(--dark-purple);
+	transition: var(--transition-duration);
+}
+
+#internal_links p a:hover {
+	color: var(--light-purple);
+	text-decoration-color: white;
+}
+
+.arrows {
+	position: absolute;
+	width: 100%;
+	text-align: center;
+	translate: 0 -50%;
+}
+
+.arrows .down {
+	--factor: -1;
+}
+
+.arrows i {
+	padding: 1%;
+	color: var(--light-purple);
+	animation-duration: 1s;
+	animation-name: arrow_anim;
+	animation-iteration-count: infinite;
+	animation-timing-function: cubic-bezier(.7, 0, 0, .7);
+}
+
+@keyframes arrow_anim {
+	50% {
+		transform: scale(1.2) translateY(calc(var(--factor, 1) * 50%));
+		color: var(--dark-purple);
+	}
+}
+
+.card {
+	margin: auto;
+	padding: 1.5em;
+	min-width: 30%;
+	max-width: 60%;
+
+	color: white;
+	text-align: justify;
+	text-align-last: center;
+	background-color: var(--dark-purple);
+
+	border-radius: 30px;
+	border: 2px solid var(--light-purple);
+	box-shadow: 0px 0px 15px 10px rgba(176, 164, 227, 0.25);
+}
+
+.card :is(h1, h2) {
+	text-align: center;
+	margin-bottom: 1em;
+	color: var(--light-purple);
+	transition: var(--transition-duration);
+}
+
+.card h2 {
+	margin: 0.5em;
+}
+
+.card p {
+	line-height: 1.5em;
+	margin-bottom: 1.5em;
+	transition: var(--transition-duration);
+}
+
+.card a {
+
+	transition: var(--transition-duration);
+}
+
+.card:hover :is(h1, h2) {
+	color: white;
+}
+
+.card:hover p {
+	color: var(--light-purple);
+}
+
+.card:hover a {
+	color: white;
+}
+
+.columns {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+	align-content: space-around;
+}
+
+.columns div {
+	margin: 1%;
+}
+
+.columns i {
+	margin: 0 0.25em 0.5em 0.25em;
+	transition: var(--transition-duration);
+}
+
+.columns i:hover {
+	color: var(--light-purple);
+}
+
+.list {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-bottom: 3%;
+}
+
+.list p {
+	margin: 0;
+}
+
+.list a {
+	color: var(--light-purple);
+}
+
+.list a.list_link {
+	padding: 0.5em;
+	margin: 0 1%;
+	text-decoration: none;
+	color: var(--light-purple);
+	border-radius: 5px;
+	border: 2px solid var(--light-purple);
+	transition: var(--transition-duration);
+}
+
+.list a.list_link:hover {
+	border-color: white;
+	background-color: var(--light-purple);
+	color: white;
+}