a

assets/css/_functions.scss

@@ -0,0 +1,19 @@
+@mixin centerer($horizontal: true, $vertical: true) {
+    position: absolute;
+
+    @if ($horizontal and $vertical) {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    @else if ($horizontal) {
+        left: 50%;
+        transform: translate(-50%, 0);
+    }
+
+    @else if ($vertical) {
+        top: 50%;
+        transform: translate(0, -50%);
+    }
+}

assets/css/main.css

@@ -0,0 +1,79 @@
+/* #box {
+	background-color: aquamarine;
+	height: 80vh;
+	margin: 2%;
+	//	border-radius: 20px 0px 20px 0px;
+	border-radius: 0px 20px 0px 20px;
+} */
+body {
+  background-color: black;
+  color: white;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color: white;
+}
+
+#box {
+  position: absolute;
+  z-index: 999;
+  border: 25px solid white;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  -webkit-transition: border-color 0.5s ease-in-out;
+  transition: border-color 0.5s ease-in-out;
+}
+
+a:hover ~ #box .colorBorder {
+  border-color: red;
+}
+
+.title {
+  font-size: 6vw;
+  margin: 0;
+  text-align: center;
+}
+
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.portfolio,
+.lore,
+.art {
+  font-size: 3vw;
+}
+
+@-webkit-keyframes LinkHover {
+  from {
+    color: white;
+  }
+  to {
+    color: red;
+  }
+}
+
+@keyframes LinkHover {
+  from {
+    color: white;
+  }
+  to {
+    color: red;
+  }
+}
+/*# sourceMappingURL=main.css.map */

assets/css/main.css.map

@@ -0,0 +1,10 @@
+{
+    "version": 3,
+    "mappings": "AACA;;;;;;IAMI;AAIJ,AAAA,IAAI,CAAC;EACJ,gBAAgB,EAAE,KAAY;EAC9B,KAAK,EAAE,KAAkB;CACzB;;AAED,AAAA,CAAC,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CACV;;AACD,AAAA,CAAC,CAAC;EACD,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,KAAK;CACZ;;AAED,AAAA,IAAI,CAAC;EACJ,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,gBAAgB;EACxB,UAAU,EAAE,UAAU;EACtB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,cAAc,EAAE,IAAI;EACpB,UAAU,EAAE,6BAA6B;CACzC;;AAED,AAAA,CAAC,AAAA,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;EAC3B,YAAY,EA9BE,GAAG;CA+BjB;;AACD,AAAA,MAAM,CAAC;EACN,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,CAAC;EACT,UAAU,EAAE,MAAM;CAClB;;AAED,AAAA,OAAO,CAAC;EC9CJ,QAAQ,EAAE,QAAQ;EAGd,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,qBAAqB;CD2CvC;;AAED,AAAA,UAAU;AACV,KAAK;AACL,IAAI,CAAC;EACJ,SAAS,EAAE,GAAG;CACd;;AAED,UAAU,CAAV,SAAU;EACT,IAAI;IACH,KAAK,EAAE,KAAK;;EAGb,EAAE;IACD,KAAK,EAtDQ,GAAG",
+    "sources": [
+        "main.scss",
+        "_functions.scss"
+    ],
+    "names": [],
+    "file": "main.css"
+}

assets/css/main.scss

@@ -0,0 +1,67 @@
+@import '_functions.scss';
+/* #box {
+	background-color: aquamarine;
+	height: 80vh;
+	margin: 2%;
+	//	border-radius: 20px 0px 20px 0px;
+	border-radius: 0px 20px 0px 20px;
+} */
+
+$accent-color: red;
+
+body {
+	background-color: rgb(0, 0, 0);
+	color: rgb(255, 255, 255);
+}
+
+* {
+	margin: 0;
+	padding: 0;
+}
+a {
+	text-decoration: none;
+	color: white;
+}
+
+#box {
+	position: absolute;
+	z-index: 999;
+	border: 25px solid white;
+	box-sizing: border-box;
+	width: 100vw;
+	height: 100vh;
+	right: 0;
+	bottom: 0;
+	pointer-events: none;
+	transition: border-color 0.5s ease-in-out;
+}
+
+a:hover ~ #box .colorBorder {
+	border-color: $accent-color;
+}
+.title {
+	font-size: 6vw;
+	margin: 0;
+	text-align: center;
+}
+
+.center {
+	@include centerer();
+}
+
+.portfolio,
+.lore,
+.art {
+	font-size: 3vw;
+}
+
+@keyframes LinkHover {
+	from {
+		color: white;
+		//border: 25px solid white;
+	}
+	to {
+		color: $accent-color;
+		//border: 25px solid $accent-color;
+	}
+}

assets/js/main.js

@@ -0,0 +1,17 @@
+let portfolio = document.getElementsByClassName('portfolio');
+let art = document.getElementsByClassName('art');
+let lore = document.getElementsByClassName('lore');
+let box = document.getElementById('box');
+
+let links = [ portfolio[0], art[0], lore[0] ];
+
+links.forEach((link) => {
+	link.addEventListener('mouseover', (e) => {
+		console.log('hovered');
+		box.classList.add('colorBorder');
+	});
+	link.addEventListener('mouseleave', (e) => {
+		console.log('left');
+		box.classList.remove('colorBorder');
+	});
+});