petruspistor/petruspistor.com
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started over again from scratch, added Icon

Browse Source
This commit is contained in:
petruspistor
2025-08-22 00:54:40 +00:00
parent 1ee6b819b1
commit ed359ec018
2 changed files with 31 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
index.html
View File

@@ -1,47 +1,15 @@
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="description" content="Deaf-led community builder & creator advocate. Projects, socials, and contact.">
<link href="https://fonts.googleapis.com/css2?family=Iceland&display=swap" rel="stylesheet">
<link rel="icon" href="/resources/img/pp.jpg" type="image/jpeg">
<meta name="color-scheme" content="dark light">
<meta property="og:title" content="Petrus Pistor — Peter Baker">
<meta property="og:description" content="Deaf-led community builder & creator advocate.">
<meta property="og:image" content="/resources/img/pb_16_9_under512kb.webp">
<!-- Your stylesheet MUST be inside the head, before <body> -->
<link rel="stylesheet" href="/resources/css/index.css">
<meta charset="en">
<title>Peter Baker</title>
</head>
<body>
<header class="site-header" role="banner">
<h1 class="site-title">Peter Baker</h1>
<picture>
<source srcset="/resources/img/pb_16_9_under512kb.webp" type="image/webp">
<img src="/resources/img/pb.png" alt="Portrait of Peter Baker" width="1280" height="372" loading="eager" decoding="async">
</picture>
</header>
<nav class="site-nav" aria-label="Primary">
<ul>
<li><a href="#content">Content</a></li>
<li><a href="#social">Social</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main id="main" class="content">
</main>
</body>
</html>

49
resources/css/index.css
View File

@@ -83,49 +83,50 @@ height:auto
}
.site-title {
font-family:"Iceland",sans-serif;
font-size:clamp(2.4rem,6vw,6rem);
line-height:1;
margin:.75rem 0 0;
color: #FFD700;
text-align:center;
text-shadow:0 4px 12px rgba(0,0,0,.6);
opacity:0;
transform:translateY(calc(-1*var(--nav-h))) scale(.98);
animation:popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards,
underlineDelay 1ms linear 900ms forwards;
opacity: 1;
transform: none;
}
.site-title::after{
content:""; display:block; height:3px; width:0%;
margin:.6rem auto 0;
background:linear-gradient(90deg,#b8860b,#ffd700,#b8860b);
border-radius:999px;
animation:underlineGrow 700ms ease-out 1200ms forwards;
/* Animate only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
.site-title {
opacity: 0;
transform: translateY(calc(-1 * var(--nav-h))) scale(.98);
animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards;
}
.site-title::after {
content: "";
display: block;
height: 3px;
width: 0;
margin: .6rem auto 0;
animation: underlineGrow 700ms ease-out 1200ms forwards;
}
}
/* ===== Keyframes ===== */
@keyframes popFromNav {
0% {
opacity:0;
transform:translateY(calc(-1*var(--nav-h))) scale(.98)
}
}
60% {
opacity:1;
transform:translateY(-8px) scale(1.02)
}
100% {
opacity:1;
transform:translateY(0) scale(1)
}
@keyframes underlineGrow{
to
{
@keyframes underlineGrow {
to {
width:54%
}
}
@keyframes underlineDelay{} /* just to offset ::after timing */
/* ===== Content container ===== */
@@ -141,6 +142,7 @@ padding:0 1rem
@media (max-width:800px){
:root {
--nav-h:56px
}
}
.site-title::after {
height:2px
@@ -163,5 +165,6 @@ width:60%
animation:none !important;
opacity:1 !important;
transform:none !important
}
}
}