add links and styles

2025-03-29 17:07:43 -05:00
parent 25eb86d021
commit 1ee76978a7
3 changed files with 134 additions and 3 deletions
@@ -0,0 +1,107 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    color: white;
+}
+
+body {
+    background-color: #252627;
+}
+
+.main {
+    box-sizing: border-box;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 4rem;
+    padding-bottom: 2rem;
+}
+
+.profile-container {
+    max-width: 580px;
+    width: 100%;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.profile-picture-container {
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1rem;
+    border-radius: 50%;
+    width: 96px;
+    height: 96px;
+}
+
+.profile-picture {
+    object-fit: cover;
+    width: 100%;
+    height: auto;
+}
+
+.profile-title {
+    font-weight: 100;
+}
+
+.profile-description h2 {
+    font-weight: lighter;
+}
+
+.links {
+    color: #a9a9b3;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-top: 2rem;
+    list-style: none;
+}
+
+.link {
+    background-color: #292a2d;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    color: black;
+    min-height: 64px;
+    border-radius: 1px;
+    padding-right: 44px;
+    padding-left: 44px;
+    color: inherit;
+    text-decoration: none;
+    border: 3px solid white;
+    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.9);
+    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+
+}
+
+.link:hover,
+.link:focus {
+    color: white;
+    background-color: transparent;
+    transform: translateY(6px);
+    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.9);
+}
@@ -1,11 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Home</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+    <script src="assets/js/main.js"></script>
+    <title>Nicholas Ward</title>
 </head>
+
 <body>
-    web server is running.
+    <div class="main">
+        <div class="profile-container">
+            <div class="info">
+                <div class="profile-picture-container">
+                    <img class="profile-picture" src="assets/images/profile-image-ghibli.png"/>
+                </div>
+                <div class="profile-title">
+                    <h1>Nicholas Ward</h1>
+                </div>
+                <div class="profile-description">
+                    <h2>Software Developer, et cetera</h2>
+                </div>
+            </div>
+            <div class="links">
+                <a class="link" href="https://log.uuard.com">Web Log</a>
+                <a class="link" href="https://git.uuard.com/">Git Repository</a>
+            </div>
+        </div>
+    </div>
+
 </body>
-</html>
+
+</html>