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

deleted template from w3school and put much simplier template with chatgpt's help

Browse Source
This commit is contained in:
petruspistor
2025-08-21 04:17:14 +00:00
parent 1434b4a5f8
commit 6bfa021fdb
2 changed files with 121 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
index.html
View File

@@ -1,77 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Peter the Baker</title>
<html lang="eng"> <!-- Optional: system fonts for speed; swap later if you like -->
<head> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<title>Peter the Baker</title> <link rel="stylesheet" href="/resources/css/index.css" />
<meta charset="UTF-8"> </head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <body>
<link rel="stylesheet" type="text/css" media="screen" href="/resources/css/index.css"> <a class="skip-link" href="#main">Skip to content</a>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Iceland">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body, h1,h2,h3,h4,h5,h6 {font-family: "Iceland", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
/* Set the width of the sidebar to 120px */
.w3-sidebar {width: 120px;background: #222;}
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
#main {margin-left: 120px}
/* Remove margins from "page content" on small screens */
@media only screen and (max-width: 600px) {#main {margin-left: 0}}
</style>
</head>
<body class="w3-black">
<!-- Icon Bar (Sidebar - hidden on small screens) --> <header class="site-header">
<!-- Sidebar --> <img class="avatar" src="/resources/img/pb.png" alt="Portrait of Peter Baker" width="200" height="200" class="responsive"/>
<nav class="w3-sidebar w3-bar-block w3-small w3-hide-small w3-center"> <h1 class="site-title">Peter Baker</h1>
<!-- Avatar / Logo at very top of sidebar -->
<img src="/resources/img/pb_16_9_under512kb.webp" style="width:100%" alt="Avatar">
<a href="#" class="w3-bar-item w3-button w3-padding-large">
<i class="fa fa-home w3-xxlarge"></i>
<p>HOME</p>
</a>
<a href="#about" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
<i class="fa fa-user w3-xxlarge"></i>
<p>SOCIAL</p>
</a>
<a href="#photos" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
<i class="fa fa-eye w3-xxlarge"></i>
<p>PISTORIUM</p>
</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
<i class="fa fa-envelope w3-xxlarge"></i>
<p>CONTACT</p>
</a>
</nav>
<!-- Page Content -->
<div class="w3-padding-large" id="main">
<!-- Header/Home -->
<header class="w3-containerbody, h1,h2,h3,h4,h5,h6 {font-family: "Iceland", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
/* Set the width of the sidebar to 120px */
.w3-sidebar {width: 120px;background: #181303;}
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
#main {margin-left: 120px}
/* Remove margins from "page content" on small screens */
@media only screen and (max-width: 600px) {#main {margin-left: 0}}
w3-center w3-black" id="home">
<h1 class="w3-jumbo"><span class="w3-hide-small">I'm</span> Peter Baker</h1>
<p>Photographer and Web Designer.</p>
<img src="/resources/img/pb_16_9_under512kb.webp" alt="Petrus Pistor" class="w3-image" style="max-width:100%; height:auto;">
</header> </header>
</div> <nav class="site-nav" aria-label="Primary">
<!-- About Section --> <ul>
<div class="w3-content w3-justify w3-text-grey w3-padding-64" id="about"> <li><a href="#social">Social</a></li>
<h2 class="w3-text-light-grey">My Name</h2> <li><a href="#projects">Projects</a></li>
<hr style="width:200px" class="w3-opacity"> <li><a href="#contact">Contact</a></li>
<p>Some text about me. Some text about me. I am lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </ul>
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur </nav>
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p> <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>
</html>

157
resources/css/index.css
View File

@@ -1,83 +1,94 @@
@import 'https://fonts.googleapis.com/css?family=Iceland|Cairo&display=swap' /* Basic reset & layout */
/* W3.CSS 5.02 - Cleaned Version */ * { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Base Reset */ body {
html, body { font-family: Verdana, sans-serif; font-size: 15px; line-height: 1.5; margin: 0; overflow-x: hidden; box-sizing: border-box } font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
*, *:before, *:after { box-sizing: inherit } color: #efefef;
background: #2c2c2c;
h1,h2,h3,h4,h5,h6 { line-height: 1.5;
font-family: "Segoe UI", Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
} }
h1 { font-size: 36px } h2 { font-size: 30px } h3 { font-size: 24px }
h4 { font-size: 20px } h5 { font-size: 18px } h6 { font-size: 16px }
a { background: transparent; color: inherit; text-decoration: none } /* Accessibility: visible focus */
img { max-width: 100%; height: auto; vertical-align: middle; border: 0 } :focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }
.skip-link {
/* Tables */ position: absolute; left: -9999px; top: -9999px;
.w3-table, .w3-table-all { border-collapse: collapse; width: 100% }
.w3-table-all { border: 1px solid #ccc }
.w3-table td, .w3-table th,
.w3-table-all td, .w3-table-all th {
padding: 8px; text-align: left; vertical-align: top
} }
.w3-bordered tr, .w3-table-all tr { border-bottom: 1px solid #ddd } .skip-link:focus { left: 1rem; top: 1rem; background:#111; color:#fff; padding:.5rem .75rem; border-radius:.5rem; }
.w3-striped tbody tr:nth-child(even),
.w3-table-all tr:nth-child(even) { background: #f1f1f1 }
/* Buttons */ /* Header with centered image at the very top */
.w3-button, .w3-btn { .site-header {
display: inline-block; padding: 8px 16px; display: grid;
border: none; cursor: pointer; background: inherit; color: inherit; place-items: center;
text-align: center; white-space: nowrap; padding: 3rem 1rem 2rem;
user-select: none; -webkit-user-select: none; gap: .5rem;
background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));
} }
.w3-button:hover { background: #ccc; color: #000 } .site-header .avatar {
display: block;
/* Lists */ border-radius: 50%;
.w3-ul { list-style: none; margin: 0; padding: 0 } border: 4px solid rgba(255,255,255,.15);
.w3-ul li { padding: 8px 16px; border-bottom: 1px solid #ddd } max-width: 40vw; /* keeps it reasonable on mobile */
.w3-ul li:last-child { border-bottom: none } height: auto;
}
/* Containers */ .site-title {
.w3-container, .w3-panel { padding: 0.01em 16px } margin: .25rem 0 0;
.w3-panel { margin: 16px 0 } font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
letter-spacing: .5px;
/* Grid */ }
.w3-row:after, .w3-row-padding:after, .w3-clear:after { .site-tagline {
content: ""; display: table; clear: both margin: 0;
color: #cfcfcf;
font-size: clamp(.95rem, .5vw + .8rem, 1.1rem);
} }
.w3-col { float: left; width: 100% }
@media (min-width:601px) { .w3-col.m6 { width: 50% } }
@media (min-width:993px) { .w3-col.l4 { width: 33.33% } }
/* Cards */ /* Horizontal nav under header */
.w3-card { box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.12) } .site-nav {
.w3-card-4 { box-shadow: 0 4px 10px rgba(0,0,0,0.2), 0 4px 20px rgba(0,0,0,0.19) } 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);
}
/* Utilities */ /* Content */
.w3-hide { display: none !important } .content {
.w3-show { display: block !important } max-width: 900px;
.w3-center { text-align: center !important } margin: 2rem auto;
.w3-left { float: left !important } padding: 0 1rem 3rem;
.w3-right { float: right !important } }
.w3-round { border-radius: 4px } .content h2 { margin-top: 2rem; font-size: 1.35rem; }
.w3-circle { border-radius: 50% }
/* Colors (sample subset) */ /* Footer */
.w3-red { background: #f44336 !important; color: #fff !important } .site-footer {
.w3-green { background: #4CAF50 !important; color: #fff !important } border-top: 1px solid rgba(255,255,255,.07);
.w3-blue { background: #2196F3 !important; color: #fff !important } color: #bdbdbd;
.w3-yellow { background: #ffeb3b !important; color: #000 !important } padding: 1.5rem 1rem 3rem;
.w3-black { background: #000 !important; color: #fff !important } text-align: center;
.w3-white { background: #fff !important; color: #000 !important } }
.w3-grey, .w3-gray { background: #9e9e9e !important; color: #000 !important }
/* Text Colors */ /* Responsive tweaks */
.w3-text-red { color: #f44336 !important } @media (min-width: 768px) {
.w3-text-green { color: #4CAF50 !important } .site-header { padding: 4rem 1rem 2.25rem; }
.w3-text-blue { color: #2196F3 !important } .site-nav ul { gap: 1.25rem; }
.w3-text-black { color: #000 !important } }
.w3-text-white { color: #fff !important }