]> Arthur Taft Gitweb - website.git/commitdiff
add html pages
authorArthur Taft <[email protected]>
Fri, 21 Nov 2025 09:08:03 +0000 (02:08 -0700)
committerArthur Taft <[email protected]>
Fri, 21 Nov 2025 09:08:03 +0000 (02:08 -0700)
README.md
static/about.html [new file with mode: 0644]
static/blog.html [new file with mode: 0644]
static/contact.html [new file with mode: 0644]
static/index.html
static/resume.html [new file with mode: 0644]
static/styles.css

index 4e1e5d7329efc30e1a038f1113efc60544d3f07b..3c03ff7e626691476f5b3d0f34bd5b038af4531b 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
 # Personal Website
 
 This is all of the code for my personal website :)
 # Personal Website
 
 This is all of the code for my personal website :)
+
+Inspired by YSAP
diff --git a/static/about.html b/static/about.html
new file mode 100644 (file)
index 0000000..7ac9ce9
--- /dev/null
@@ -0,0 +1,33 @@
+<!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>
diff --git a/static/blog.html b/static/blog.html
new file mode 100644 (file)
index 0000000..71ab32c
--- /dev/null
@@ -0,0 +1,33 @@
+<!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>
diff --git a/static/contact.html b/static/contact.html
new file mode 100644 (file)
index 0000000..117d3e0
--- /dev/null
@@ -0,0 +1,33 @@
+<!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>
index 3f4887a85bc5754853e33a306cad6b5df8578e4d..c8667fca3dee19ef35ed27d7f2b56fabbc6e1b9a 100644 (file)
@@ -1,23 +1,32 @@
 <!DOCTYPE html>
 <!DOCTYPE html>
+
+<!-- 
+    index.html 
+    Copyright (c) 2025 Arthur Taft. All Rights Reserved.
+-->
+
 <html>
     <head>
 <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">
         <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>
                 </ul>
             </div>
+            <div id="title-div">
+                <h1 class="page-title">arthurtaft.net</h1>
+            </div>
             <div id="container">
             <div id="container">
-                <h1>Bazinga</h1>
+                <h2 class="main-header">I love Gentoo Linux</h1>
             </div>
         </div>
     </body>
             </div>
         </div>
     </body>
diff --git a/static/resume.html b/static/resume.html
new file mode 100644 (file)
index 0000000..8510c06
--- /dev/null
@@ -0,0 +1,33 @@
+<!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>
index 651213294fa5c9f4997f105e05a7a501167f517b..30d16d77d9b696ab43aad76f5998909bc4d26cec 100644 (file)
@@ -1,3 +1,8 @@
+/*
+ * styles.css
+ * Copyright (c) 2025 Arthur Taft. All Rights Reserved.
+*/
+
 :root {
     /* COLORS */
     --rosewater: #f5e0dc;
 :root {
     /* COLORS */
     --rosewater: #f5e0dc;
 }
 
 /* Style Reset */
 }
 
 /* Style Reset */
-html, main, body, ul, h1, h2, p {
+* {
     padding: 0;
     margin: 0;
 }
 
     padding: 0;
     margin: 0;
 }
 
+/* Set width so things actually fit */
 html {
     background-color: var(--base);
     display: flex;
 html {
     background-color: var(--base);
     display: flex;
@@ -45,31 +51,74 @@ body {
     width: 100%;
 }
 
     width: 100%;
 }
 
+/* Main page content */
 #main-cont {
     display: flex;
     flex-direction: column;
 #main-cont {
     display: flex;
     flex-direction: column;
-    align-items: start;
+    align-items: center;
 }
 
 }
 
+/* Navbar rules */
 #top-nav {
 #top-nav {
+    display: flex;
+    flex-direction row;
     margin-bottom: 1%;
     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;
 }
 
     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);
 }
 
     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;
 a {
     font-size: 1.25rem;
+    text-decoration: none;
 }
 
 a:link {
 }
 
 a:link {
@@ -79,8 +128,3 @@ a:link {
 a:visited {
     color: var(--blue);
 }
 a:visited {
     color: var(--blue);
 }
-
-a:hover {
-    color: var(--peach);
-    text-decoration: none;
-}