🐱

assets/components.css

@@ -106,7 +106,7 @@ section::before {
 	}
 }
 
-section.typewriting a::after,
+.typewriting a::after,
 #donation a::after,
 #links a::after {
 	display: inline-block;

assets/home.css

@@ -17,13 +17,31 @@
 	background-color: var(--theme-background-alt);
 	border: 1px solid var(--theme-separator);
 	padding: var(--space-3) var(--space-4);
-	margin-bottom: var(--space-3);
+	margin-bottom: var(--space-2);
 	position: relative;
 	overflow: hidden;
 	border-radius: var(--radius-md);
 	transition: all var(--transition-fast);
 }
 
+.project-card::before {
+	overflow: hidden;
+	display: flex;
+	position: absolute;
+	left: 0;
+	top: -7rem;
+	content: "</;^//";
+	color: transparent;
+	font-size: 32rem;
+	letter-spacing: -0.075em;
+	line-height: 1;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	-webkit-text-stroke: 2px var(--theme-separator);
+	opacity: 8%;
+}
+
 .project-card:hover {
 	background-color: rgba(255, 255, 255, 0.025);
 	border-color: rgba(255, 255, 255, 0.125);
@@ -60,8 +78,8 @@
 }
 
 .project-card .author {
-	font-size: var(--font-size-xs);
+	font-size: calc(var(--font-size-sm) * 1.25);
-	margin-bottom: var(--space-2);
+	margin-bottom: var(--space-1);
 }
 
 .project-card .author strong {
@@ -299,7 +317,9 @@ u #friends::before {
 	top: 3rem;
 }
 
-#about h2::before {
+#about h2::before,
+#languages h2::before,
+#trivia h2::before {
 	background-color: var(--theme-foreground);
 	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 }
@@ -491,3 +511,28 @@ u #friends::before {
 .pfps:has(a:hover) a:not(:hover) {
 	transform: scale(0.92);
 }
+
+footer {
+	border-top: 1px solid var(--theme-separator);
+	padding: var(--section-spacing) 0;
+	color: var(--theme-foreground-bruh);
+	text-align: center;
+}
+
+footer a,
+.highlight {
+	color: var(--theme-foreground);
+}
+
+#languages ul,
+#trivia ul {
+	color: var(--theme-foreground-alt);
+	font-size: 0.9em;
+	padding-left: 2ch;
+}
+
+#languages li::marker,
+#trivia li::marker {
+	color: var(--theme-foreground);
+	content: "# ";
+}

assets/styles.css

@@ -1,3 +1,5 @@
+@import url(/fonts/iosevka-custom/import.css);
+
 *,
 *::before,
 *::after {
@@ -57,11 +59,16 @@ button,
 	cursor: pointer;
 }
 
-html, body {
+html,
+body {
 	font-size: var(--font-size-base);
 }
 
-html, body, pre, code, button {
+html,
+body,
+pre,
+code,
+button {
 	font-family:
 		"Iosevka Custom Web", "Iosevka Custom", "Iosevka", monospace, sans-serif;
 	line-height: 1.7;

components/Footer.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025 misties
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export default function Footer() {
+	return (
+		<footer class="section typewriting">
+			<p class="alt alt-font">
+				Made with <span class="highlight">❤</span> · Source code available at
+				{" "}
+				<a href="https://kyu.re/~web">git.acpi.at</a> under the{" "}
+				<a href="https://spdx.org/licenses/AGPL-3.0-or-later.html">
+					GNU Affero General Public License v3.0
+				</a>
+				, with all site content licensed under{" "}
+				<a href="https://creativecommons.org/licenses/by-sa/4.0/">
+					CC BY-SA 4.0
+				</a>
+				.
+			</p>
+			<br />
+			<p class="alt alt-font">
+				© 2025 <span class="highlight">favewa</span>{" "}
+				• Powered by FreeBSD and autism
+			</p>
+		</footer>
+	);
+}

components/Links.tsx

@@ -3,21 +3,24 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-export default function Links(
+export default function Links(props: {
-	props: { selected: "home" | "reports" | "misc" },
+	selected: "home" | "about" | "reports" | "misc";
-) {
+}) {
 	return (
 		<nav>
 			<ul>
 				<li class={props.selected === "home" ? "selected" : ""}>
 					<a href="/">home</a>
+				</li>{" "}
+				<li class={props.selected === "about" ? "selected" : ""}>
+					<a href="/about">about</a>
 				</li>
 				<li class={props.selected === "reports" ? "selected" : ""}>
 					<a href="/reports">reports</a>
 				</li>
-				<li class={props.selected === "misc" ? "selected" : ""}>
+				{/* <li class={props.selected === "misc" ? "selected" : ""}> */}
-					<a href="/misc">misc</a>
+				{/*   <a href="/misc">misc</a> */}
-				</li>
+				{/* </li> */}
 			</ul>
 		</nav>
 	);

routes/about.tsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025 favewa
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { Fm } from "@/components/Fm.tsx";
+import { Header } from "@/components/Header.tsx";
+import Links from "@/components/Links.tsx";
+import ProjectCard from "@/components/ProjectCard.tsx";
+import Code from "@/islands/Code.tsx";
+import Meow from "@/islands/Meow.tsx";
+import "@/assets/home.css";
+import Footer from "../components/Footer.tsx";
+
+export default function About() {
+	return (
+		<>
+			<Links selected="about" />
+			<section id="about">
+				<h2>About</h2>
+				<p>
+					Hi! I'm Lívia, a 18-year-old girl from Brazil passionate about open
+					access to information, technology, linguistics, functional
+					programming, and pretty much anything that involves understanding
+					technology, human language, or philosophical frameworks. I hope you
+					find something interesting here, and don't hesitate to reach out if
+					you feel like it. <span class="highlight">:3</span>
+				</p>
+				<p>
+					Beyond quirky technology, I <i>really</i>{" "}
+					like linguistics and philosophy enthusiast. I'm also autistic n' ADHD,
+					so I might struggle with humour once in a while. I really like
+					befriending new people and growing as a person every single day!!! If
+					you've read this far, thanks for stopping by!{" "}
+				</p>
+			</section>
+			<section id="languages">
+				<h2>languages</h2>
+				<ul style="text-align-last: left">
+					<li>
+						brazilian portuguese <span class="highlight">(native)</span>
+					</li>
+					<li>
+						«all over the place» english <span class="highlight">(C1)</span>
+					</li>
+					<li>
+						latin american spanish <span class="highlight">(A2)</span>
+					</li>
+				</ul>
+			</section>
+			<section id="trivia">
+				<h2>trivia</h2>
+				<ul>
+					<li>there are no easter eggs up here. go away</li>
+				</ul>
+			</section>
+			<Footer />
+		</>
+	);
+}

routes/index.tsx

@@ -10,6 +10,7 @@ import ProjectCard from "@/components/ProjectCard.tsx";
 import Code from "@/islands/Code.tsx";
 import Meow from "@/islands/Meow.tsx";
 import "@/assets/home.css";
+import Footer from "../components/Footer.tsx";
 
 export default function Home() {
 	return (
@@ -17,17 +18,24 @@ export default function Home() {
 			<Links selected="home" />
 			<Header class="home" />
 			<section id="about">
-				<h2>About</h2>
+				<h2>Summary</h2>
 				<p>
-					Advocate for open access to information and knowledge and aspiring
+					I'm an aspiring electrical engineer with a keen interest in open
-					electrical engineer with complementary interests in systems
+					access to information and knowledge. My technical work centers on
-					programming and linguistics.
+					functional programming, C99, and writing quirky TypeScript code that
+					explores its more obscure corners and unconventional patterns. I'm
+					drawn to atypical low-level technologies and have a particular
+					interest in the x86 and RISC-V ISAs.
 				</p>
 				<p>
-					On the side, I maintain a modest FreeBSD server where I self-host this
+					When I'm not studying circuits or coding, it's likely that I'm either
-					website and various services. This is nothing particularly impressive,
+					exploring linguistics or listening to music. My tastes shift
-					just a growing curiosity about systems administration.
+					constantly with my hyperfocus, ranging from indie, shoegaze, and J-Pop
+					to speedcore and various metal derivatives. I run a FreeBSD server
+					that hosts this site and various services, serving as my hands-on lab
+					for systems administration. <span class="highlight">^-^</span>
 				</p>
+				<a href="/about">→ Extended version</a>
 			</section>
 			<section id="links">
 				<h2>Links</h2>
@@ -109,17 +117,6 @@ export default function Home() {
 							license="BSD-3-Clause"
 						/>
 					</li>
-					<li>
-						<ProjectCard
-							author="w"
-							name="acpi.at"
-							description="personal website"
-							url="http://kyu.re/~web"
-							languageColor="#3178c6"
-							languageName="TypeScript"
-							license="AGPL-3.0-or-later"
-						/>
-					</li>
 					<li>
 						<ProjectCard
 							author="w"
@@ -243,6 +240,7 @@ export default function Home() {
 					</a>
 				</div>
 			</section>
+			<Footer />
 		</>
 	);
 }