Stevan/links.stevanfreeborn.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: finish initial design

Browse Source
This commit is contained in:
Stevan Freeborn
2025-11-24 05:34:46 -06:00
parent b0bb2e1536
commit cd62990e54
2 changed files with 40 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/assets/css/style.css
+22 -3
View File
@@ -74,7 +74,7 @@ body {
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 2rem;
padding: 1rem; padding: 1rem;
} }
@@ -85,6 +85,20 @@ body {
align-items: center; align-items: center;
} }
.image-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.bio {
display: flex;
flex-direction: column;
gap: 0.25rem;
text-align: center;
max-width: 40rem;
}
.links-container { .links-container {
flex: 1; flex: 1;
} }
@@ -93,10 +107,12 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
width: 100%;
max-width: 40rem;
} }
.profile-picture { .profile-picture {
width: 100px; width: 250px;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
border-radius: 50%; border-radius: 50%;
box-shadow: 8px -4px 14px 4px rgba(0,0,0,0.36), -4px 8px 14px 4px rgba(0,0,0,0.36); box-shadow: 8px -4px 14px 4px rgba(0,0,0,0.36), -4px 8px 14px 4px rgba(0,0,0,0.36);
@@ -104,10 +120,13 @@ body {
.link { .link {
display: flex; display: flex;
padding: 0.25rem 1rem; align-items: center;
gap: 0.25rem;
padding: 0.5rem 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
color: var(--bg-color); color: var(--bg-color);
background-color: var(--text-color); background-color: var(--text-color);
font-size: 1.125rem;
} }
@media (hover: hover) { @media (hover: hover) {
internal/assets/templates/index.gohtml
+18 -6
View File
@@ -15,24 +15,36 @@
<div class="image-container"> <div class="image-container">
<img class="profile-picture" src="https://github.com/StevanFreeborn.png" <img class="profile-picture" src="https://github.com/StevanFreeborn.png"
alt="A man with short brown hair, a grey hoodie, and a white t-shirt smiles at the camera. He has a white earbud in his left ear. The background is a blurred office setting with warm lighting visible through glass partitions." /> alt="A man with short brown hair, a grey hoodie, and a white t-shirt smiles at the camera. He has a white earbud in his left ear. The background is a blurred office setting with warm lighting visible through glass partitions." />
<div> <div class="bio">
<h1>Stevan Freeborn</h1> <h1>Stevan Freeborn</h1>
<p>Stuff about me...</p> <p>I'm a 32-year old dad of 2 who enjoys drinking coffee, lifting weights, and solving problems with code.</p>
</div> </div>
</div> </div>
<nav class="links-container"> <nav class="links-container">
<ul> <ul>
<li> <li>
<a class="link" href="https://youtube.stevanfreeborn.com">YouTube</a> <a class="link" href="https://youtube.stevanfreeborn.com">
<i class="fa-brands fa-square-youtube fa-lg"></i>
<span>YouTube</span>
</a>
</li> </li>
<li> <li>
<a class="link" href="https://github.stevanfreeborn.com">GitHub</a> <a class="link" href="https://github.stevanfreeborn.com">
<i class="fa-brands fa-square-github fa-lg"></i>
<span>GitHub</span>
</a>
</li> </li>
<li> <li>
<a class="link" href="https://blog.stevanfreeborn.com">Blog</a> <a class="link" href="https://blog.stevanfreeborn.com">
<i class="fa-solid fa-square-rss fa-lg"></i>
<span>Blog</span>
</a>
</li> </li>
<li> <li>
<a class="link" href="https://linkedin.stevanfreeborn.com">LinkedIn</a> <a class="link" href="https://linkedin.stevanfreeborn.com">
<i class="fa-brands fa-square-linkedin fa-lg"></i>
<span>LinkedIn</span>
</a>
</li> </li>
</ul> </ul>
</nav> </nav>