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

Compare commits

base: petruspistor:6bfa021fdbad310f062b8e93ae3e07a94b0eefdf
Branches Tags
petruspistor:main
..
compare: petruspistor:main
Branches Tags
petruspistor:main

19 Commits
6bfa021fdb ... main

Author SHA1 Message Date
petruspistor
8edfd49eca update under construction 2025-08-25 09:37:45 +00:00
petruspistor
d273005d1c Modified HTML and CSS to display UC 2025-08-23 11:22:48 +00:00
petruspistor
1e33071913 added class=site-header and <p> 2025-08-22 04:42:14 +00:00
petruspistor
ed359ec018 Started over again from scratch, added Icon 2025-08-22 00:54:40 +00:00
petruspistor
1ee6b819b1 cleaned up CSS and easily to read 2025-08-21 23:05:06 +00:00
petruspistor
18d0d8315b cleaned up HTML codes and easily to read 2025-08-21 22:49:24 +00:00
petruspistor
92980ad4c3 added "content" in the nav 2025-08-21 22:31:45 +00:00
petruspistor
23fa3af9ed add font "Iceland" from google api in html 2025-08-21 22:26:14 +00:00
petruspistor
31c89b4c33 deleted skips in css, changed title position to top 2025-08-21 22:22:58 +00:00
petruspistor
790868bb5c changed title name to Peter Baker from Petrus Pistor 2025-08-21 22:17:25 +00:00
petruspistor
0ea4cbf51a deleted skip to content, fixed the nav 2025-08-21 22:11:38 +00:00
petruspistor
3e691bd97a fixed the unstyled list vibes 2025-08-21 22:08:51 +00:00
petruspistor
5200e5f421 deleted h1, and pops-title shows up in the sectionunder nav 2025-08-21 18:54:29 +00:00
petruspistor
f41fdf6606 fixed h1 and nav, h1 pops up from nav but tweak little 2025-08-21 07:49:05 +00:00
petruspistor
f6d9b3848c changed h1 and nav into one, and messed up. 2025-08-21 07:30:19 +00:00
petruspistor
8b93b19087 contining modify on h1 2025-08-21 07:26:20 +00:00
petruspistor
779c77bf66 added dark gold animation on h1 2025-08-21 06:07:20 +00:00
petruspistor
c482a91015 deleted avatar, modified header img as bkg, added animation on header h1 2025-08-21 05:55:33 +00:00
petruspistor
dbe803d3bc deleted main content sections like social, projects, and contact 2025-08-21 04:22:03 +00:00
3 changed files with 92 additions and 124 deletions
Expand all files Collapse all files

96
index.html
View File

@@ -1,42 +1,68 @@
<!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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peter the Baker</title> <title>Website Under Construction</title>
<style>
<!-- Optional: system fonts for speed; swap later if you like --> /* Global styles */
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> * {
<link rel="stylesheet" href="/resources/css/index.css" /> box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
/* Create a subtle diagonal caution stripe background */
background: repeating-linear-gradient(
-45deg,
#ffeb3b 0,
#ffeb3b 20px,
#f5c542 20px,
#f5c542 40px
);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.overlay {
background: rgba(255, 255, 255, 0.9);
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 500px;
text-align: center;
}
h1 {
margin-bottom: 20px;
font-size: 2.4rem;
color: #333;
}
p {
margin-bottom: 20px;
font-size: 1.2rem;
color: #555;
}
.contact {
font-size: 1rem;
color: #555;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head> </head>
<body> <body>
<a class="skip-link" href="#main">Skip to content</a> <div class="overlay">
<h1>Under Construction</h1>
<header class="site-header"> <p>I'm currently working on bringing you an amazing website. Please check back soon!</p>
<img class="avatar" src="/resources/img/pb.png" alt="Portrait of Peter Baker" width="200" height="200" class="responsive"/> <p class="contact">If you have any questions, feel free to <a href="mailto:connect+pp@petruspistor.com">contact me</a>.</p>
<h1 class="site-title">Peter Baker</h1> </div>
</header>
<nav class="site-nav" aria-label="Primary">
<ul>
<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">
<section id="social"><h2>Social</h2><p>Links coming soon.</p></section>
<section id="projects"><h2>Projects</h2><p>Stuff I’m building.</p></section>
<section id="contact"><h2>Contact</h2><p>Email or DM.</p></section>
</main>
<footer class="site-footer">
<small>© <span id="year"></span> Peter Baker</small>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body> </body>
</html> </html>

120
resources/css/index.css
View File

@@ -1,94 +1,36 @@
/* Basic reset & layout */ * {
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; } margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body { body {
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
color: #efefef;
background: #2c2c2c; display: flex;
line-height: 1.5; justify-content: center;
aligin-times: center;
background: linear-gradient(180deg, #f7d34b, #e0a82e);
/* fallback solid background */
background-color: #f7d34b;
font-family: Arial, san-serif;
} }
/* Accessibility: visible focus */ /* Center the Image */
:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }
.skip-link {
position: absolute; left: -9999px; top: -9999px;
}
.skip-link:focus { left: 1rem; top: 1rem; background:#111; color:#fff; padding:.5rem .75rem; border-radius:.5rem; }
/* Header with centered image at the very top */ .container img {
.site-header {
display: grid; max-width: 90%;
place-items: center; height: auto;
padding: 3rem 1rem 2rem; border: 6px solid #e0a82e;
gap: .5rem; border-radius: 12px;
background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.site-header .avatar {
display: block;
border-radius: 50%;
border: 4px solid rgba(255,255,255,.15);
max-width: 40vw; /* keeps it reasonable on mobile */
height: auto;
}
.site-title {
margin: .25rem 0 0;
font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
letter-spacing: .5px;
}
.site-tagline {
margin: 0;
color: #cfcfcf;
font-size: clamp(.95rem, .5vw + .8rem, 1.1rem);
}
/* Horizontal nav under header */
.site-nav {
position: sticky; /* optional: keeps it visible on scroll */
top: 0;
backdrop-filter: blur(6px);
background: rgba(20,20,20,.7);
border-top: 1px solid rgba(255,255,255,.07);
border-bottom: 1px solid rgba(255,255,255,.07);
}
.site-nav ul {
margin: 0 auto;
padding: .5rem 1rem;
list-style: none;
display: flex;
gap: 1rem;
justify-content: center;
max-width: 900px;
}
.site-nav a {
display: inline-block;
padding: .5rem .75rem;
border-radius: .5rem;
color: #efefef;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus-visible {
background: rgba(255,255,255,.08);
}
/* Content */
.content {
max-width: 900px;
margin: 2rem auto;
padding: 0 1rem 3rem;
}
.content h2 { margin-top: 2rem; font-size: 1.35rem; }
/* Footer */
.site-footer {
border-top: 1px solid rgba(255,255,255,.07);
color: #bdbdbd;
padding: 1.5rem 1rem 3rem;
text-align: center;
}
/* Responsive tweaks */
@media (min-width: 768px) {
.site-header { padding: 4rem 1rem 2.25rem; }
.site-nav ul { gap: 1.25rem; }
} }

BIN
resources/img/underconstruction.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB