<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Harrison Erd</title>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="icon" href="https://harrisonerd.com/favicon.ico" />
<style>
body {
margin: 0;
padding: 0;
font-family: "Ubuntu", sans-serif;
background: #fafafa;
color: #111;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
/* fade in */
opacity: 0;
animation: fadeIn 1.5s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.header {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
animation: subtleFloat 6s ease-in-out infinite;
}
/* slow float effect */
@keyframes subtleFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}
.avatar {
width: 140px;
height: 140px;
border-radius: 25%;
object-fit: cover;
box-shadow: 0 4px 12px rgba(0,0,0,0.10);
animation: breathe 6s ease-in-out infinite;
}
/* ultra subtle breathing glow */
@keyframes breathe {
0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
50% { box-shadow: 0 6px 18px rgba(0,0,0,0.14); }
}
.name {
font-size: 64px;
font-weight: 700;
letter-spacing: -1px;
animation: fadeSlide 1.4s ease forwards;
}
@keyframes fadeSlide {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
.links {
margin-top: 25px;
display: flex;
gap: 28px;
align-items: center;
justify-content: center;
}
.icon-link {
width: 34px;
height: 34px;
opacity: 0.85;
transition: opacity 0.25s, transform 0.25s;
}
.icon-link:hover {
opacity: 1;
transform: scale(1.18) translateY(-3px);
}
svg {
width: 34px;
height: 34px;
fill: #000;
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body {
background: #0b0b0b;
color: #ffffff;
}
svg {
fill: #ffffff;
}
.avatar {
box-shadow: 0 6px 18px rgba(255,255,255,0.08);
}
}
</style>
</head>
<body>
<div class="header">
<img class="avatar" src="https://harrisonerd.com/avatar.png" alt="Avatar" />
<div class="name">Harrison Erd</div>
</div>
<!-- Icon Links -->
<div class="links">
<!-- Git Repos -->
<a class="icon-link" href="https://gitman.io/patx" target="_blank" aria-label="Projects">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-git" viewBox="0 0 16 16">
<path d="M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.03 1.03 0 0 0 0-1.457"/>
</svg>
</a>
<!-- Email -->
<a class="icon-link" href="mailto:[email protected]" aria-label="Email">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-at-fill" viewBox="0 0 16 16">
<path d="M2 2A2 2 0 0 0 .05 3.555L8 8.414l7.95-4.859A2 2 0 0 0 14 2zm-2 9.8V4.698l5.803 3.546zm6.761-2.97-6.57 4.026A2 2 0 0 0 2 14h6.256A4.5 4.5 0 0 1 8 12.5a4.49 4.49 0 0 1 1.606-3.446l-.367-.225L8 9.586zM16 9.671V4.697l-5.803 3.546.338.208A4.5 4.5 0 0 1 12.5 8c1.414 0 2.675.652 3.5 1.671"/>
<path d="M15.834 12.244c0 1.168-.577 2.025-1.587 2.025-.503 0-1.002-.228-1.12-.648h-.043c-.118.416-.543.643-1.015.643-.77 0-1.259-.542-1.259-1.434v-.529c0-.844.481-1.4 1.26-1.4.585 0 .87.333.953.63h.03v-.568h.905v2.19c0 .272.18.42.411.42.315 0 .639-.415.639-1.39v-.118c0-1.277-.95-2.326-2.484-2.326h-.04c-1.582 0-2.64 1.067-2.64 2.724v.157c0 1.867 1.237 2.654 2.57 2.654h.045c.507 0 .935-.07 1.18-.18v.731c-.219.1-.643.175-1.237.175h-.044C10.438 16 9 14.82 9 12.646v-.214C9 10.36 10.421 9 12.485 9h.035c2.12 0 3.314 1.43 3.314 3.034zm-4.04.21v.227c0 .586.227.8.581.8.31 0 .564-.17.564-.743v-.367c0-.516-.275-.708-.572-.708-.346 0-.573.245-.573.791"/>
</svg>
</a>
</div>
</body>
</html>