nicholas/personal-website
1
0
Fork 0
Code Actions Packages Activity

add links and styles

Browse Source
This commit is contained in:
nicholas
2025-03-29 17:07:43 -05:00
parent 63a54ac44a
commit 02710eb544
3 changed files with 134 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/styles.css
+107
View File
@@ -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);
}
assets/images/profile-image-ghibli.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

index.html
+26 -2
View File
@@ -1,11 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> </head>
<body> <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> </body>
</html> </html>