feat: add "other" button with dynamic link list for additional projects and services

css/index.css

@@ -716,3 +716,103 @@ button:hover {
 button:focus {
 	outline: none;
 }
+
+
+/* "other" – half-size twin of the "about me" button, opens a link list above itself */
+#Other_wrap {
+	position: relative;
+	display: inline-block;
+	margin-top: 18px;
+}
+
+#Other_btn {
+	width: 90px;
+	height: 20px;
+	padding: 0;
+	font-size: 10px;
+	line-height: 1;
+	border-width: 1px;
+	box-shadow: 2px 2px 0 #6f619e,
+		-2px -2px 0 #6f619e,
+		-2px 2px 0 #6f619e,
+		2px -2px 0 #6f619e;
+}
+
+#Other_btn:hover,
+#Other_btn[aria-expanded="true"] {
+	box-shadow: 10px 2px 0 #6f619e, -10px -2px 0 #6f619e;
+}
+
+#Other_list {
+	display: none;
+	position: absolute;
+	bottom: calc(100% + 10px); /* low enough to fully cover the "about me" button while open */
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 5;
+	width: 300px;
+	max-width: calc(100vw - 32px);
+	box-sizing: border-box;
+	padding: 15px 20px;
+	background-color: rgba(0, 0, 0, 0.95);
+	-webkit-backdrop-filter: blur(6px);
+	backdrop-filter: blur(6px);
+	border-radius: 15px;
+	color: rgb(238, 238, 255);
+	text-align: left;
+	font-family: Lucida Console, Lucida Sans Typewriter, monaco, Bitstream Vera Sans Mono, monospace;
+	font-size: 15px;
+	line-height: 25px;
+}
+
+#Other_list .other-section {
+	margin-top: 12px;
+	font-size: 11px;
+	letter-spacing: .15em;
+	text-transform: uppercase;
+	color: #a99fd0;
+}
+
+#Other_list .other-section:first-child {
+	margin-top: 0;
+}
+
+#Other_list ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+#Other_list a {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	gap: 10px;
+	margin: 0 -8px;
+	padding: 1px 8px;
+	border-radius: 6px;
+	transition: background-color 0.2s ease;
+}
+
+#Other_list a:hover,
+#Other_list a:focus-visible {
+	background-color: rgba(111, 97, 158, 0.55);
+	outline: none;
+}
+
+#Other_list .other-note {
+	font-size: 12px;
+	color: rgba(238, 238, 255, 0.55);
+}
+
+#Other_list_arrow {
+	position: absolute;
+	left: 50%;
+	bottom: -7px;
+	width: 0;
+	height: 0;
+	margin-left: -8px;
+	border-left: 8px solid transparent;
+	border-right: 8px solid transparent;
+	border-top: 7px solid rgba(0, 0, 0, 0.95);
+}