# Personal Website
This is all of the code for my personal website :)
+
+Inspired by YSAP
--- /dev/null
+<!DOCTYPE html>
+
+<!--
+ about.html
+ Copyright (c) 2025 Arthur Taft. All Rights Reserved.
+-->
+
+<html>
+ <head>
+ <title>about | arthurtaft.net</title>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" href="styles.css">
+ </head>
+ <body>
+ <div id="main-cont">
+ <div id="top-nav">
+ <ul class="nav-list">
+ <li class="nav-item"><a class="nav-link" href="/">home</a></li>
+ <li class="nav-item"><a class="nav-link" href="/blog">blog</a></li>
+ <li class="nav-item"><a class="nav-link" href="/resume">resume</a></li>
+ <li class="nav-item"><a class="nav-link" href="/contact">contact</a></li>
+ <li class="nav-item"><a class="nav-link" href="/about">about me</a></li>
+ </ul>
+ </div>
+ <div id="title-div">
+ <h1 class="page-title">arthurtaft.net</h1>
+ </div>
+ <div id="container">
+ <h2 class="main-header">I love Gentoo Linux</h1>
+ </div>
+ </div>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+
+<!--
+ blog.html
+ Copyright (c) 2025 Arthur Taft. All Rights Reserved.
+-->
+
+<html>
+ <head>
+ <title>blog | arthurtaft.net</title>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" href="styles.css">
+ </head>
+ <body>
+ <div id="main-cont">
+ <div id="top-nav">
+ <ul class="nav-list">
+ <li class="nav-item"><a class="nav-link" href="/">home</a></li>
+ <li class="nav-item"><a class="nav-link" href="/blog">blog</a></li>
+ <li class="nav-item"><a class="nav-link" href="/resume">resume</a></li>
+ <li class="nav-item"><a class="nav-link" href="/contact">contact</a></li>
+ <li class="nav-item"><a class="nav-link" href="/about">about me</a></li>
+ </ul>
+ </div>
+ <div id="title-div">
+ <h1 class="page-title">arthurtaft.net</h1>
+ </div>
+ <div id="container">
+ <h2 class="main-header">I love Gentoo Linux</h1>
+ </div>
+ </div>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+
+<!--
+ contact.html
+ Copyright (c) 2025 Arthur Taft. All Rights Reserved.
+-->
+
+<html>
+ <head>
+ <title>contact | arthurtaft.net</title>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" href="styles.css">
+ </head>
+ <body>
+ <div id="main-cont">
+ <div id="top-nav">
+ <ul class="nav-list">
+ <li class="nav-item"><a class="nav-link" href="/">home</a></li>
+ <li class="nav-item"><a class="nav-link" href="/blog">blog</a></li>
+ <li class="nav-item"><a class="nav-link" href="/resume">resume</a></li>
+ <li class="nav-item"><a class="nav-link" href="/contact">contact</a></li>
+ <li class="nav-item"><a class="nav-link" href="/about">about me</a></li>
+ </ul>
+ </div>
+ <div id="title-div">
+ <h1 class="page-title">arthurtaft.net</h1>
+ </div>
+ <div id="container">
+ <h2 class="main-header">I love Gentoo Linux</h1>
+ </div>
+ </div>
+ </body>
+</html>
<!DOCTYPE html>
+
+<!--
+ index.html
+ Copyright (c) 2025 Arthur Taft. All Rights Reserved.
+-->
+
<html>
<head>
- <title>home | arthurtaft.EXT</title>
+ <title>home | arthurtaft.net</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main-cont">
<div id="top-nav">
- <ul>
- <li><a href="/">home</a></li>
- <li><a href="/blog">blog</a></li>
- <li><a href="/resume">resume</a></li>
- <li><a href="/contact">contact</a></li>
- <li><a href="/about">about me</a></li>
+ <ul class="nav-list">
+ <li class="nav-item"><a class="nav-link" href="/">home</a></li>
+ <li class="nav-item"><a class="nav-link" href="/blog">blog</a></li>
+ <li class="nav-item"><a class="nav-link" href="/resume">resume</a></li>
+ <li class="nav-item"><a class="nav-link" href="/contact">contact</a></li>
+ <li class="nav-item"><a class="nav-link" href="/about">about me</a></li>
</ul>
</div>
+ <div id="title-div">
+ <h1 class="page-title">arthurtaft.net</h1>
+ </div>
<div id="container">
- <h1>Bazinga</h1>
+ <h2 class="main-header">I love Gentoo Linux</h1>
</div>
</div>
</body>
--- /dev/null
+<!DOCTYPE html>
+
+<!--
+ resume.html
+ Copyright (c) 2025 Arthur Taft. All Rights Reserved.
+-->
+
+<html>
+ <head>
+ <title>resume | arthurtaft.net</title>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" href="styles.css">
+ </head>
+ <body>
+ <div id="main-cont">
+ <div id="top-nav">
+ <ul class="nav-list">
+ <li class="nav-item"><a class="nav-link" href="/">home</a></li>
+ <li class="nav-item"><a class="nav-link" href="/blog">blog</a></li>
+ <li class="nav-item"><a class="nav-link" href="/resume">resume</a></li>
+ <li class="nav-item"><a class="nav-link" href="/contact">contact</a></li>
+ <li class="nav-item"><a class="nav-link" href="/about">about me</a></li>
+ </ul>
+ </div>
+ <div id="title-div">
+ <h1 class="page-title">arthurtaft.net</h1>
+ </div>
+ <div id="container">
+ <h2 class="main-header">I love Gentoo Linux</h1>
+ </div>
+ </div>
+ </body>
+</html>
+/*
+ * styles.css
+ * Copyright (c) 2025 Arthur Taft. All Rights Reserved.
+*/
+
:root {
/* COLORS */
--rosewater: #f5e0dc;
}
/* Style Reset */
-html, main, body, ul, h1, h2, p {
+* {
padding: 0;
margin: 0;
}
+/* Set width so things actually fit */
html {
background-color: var(--base);
display: flex;
width: 100%;
}
+/* Main page content */
#main-cont {
display: flex;
flex-direction: column;
- align-items: start;
+ align-items: center;
}
+/* Navbar rules */
#top-nav {
+ display: flex;
+ flex-direction row;
margin-bottom: 1%;
- align-self: center;
- width: 30%;
+ margin-left: 25%;
+ margin-right: 25%;
}
-#top-nav ul {
+#top-nav .nav-title {
+ margin-right: 5rem;
+}
+
+#top-nav .nav-list {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
-h1 {
+#top-nav .nav-item {
+}
+
+#top-nav .nav-link {
+ display: block;
+ padding: 0.5rem 1rem;
+}
+
+#top-nav .nav-link:hover {
+ background-color: var(--surface-1);
+}
+
+/* Title rules */
+#title-div {
+ align-self: start;
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ margin-left: 25%;
+ margin-bottom: 1%;
+}
+
+#title-div .page-title {
color: var(--green);
}
+/* Misc container rules (anything goes here) */
+#container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#container .main-header {
+ color: var(--lavender);
+}
+
+/* Link rules that enforce theme */
a {
font-size: 1.25rem;
+ text-decoration: none;
}
a:link {
a:visited {
color: var(--blue);
}
-
-a:hover {
- color: var(--peach);
- text-decoration: none;
-}