Update website

Readme.md

@@ -0,0 +1,106 @@
+# EngineeringBuild Website
+
+Personal website for EngineeringBuild.
+
+This site is being built as a practical technical platform around telecom field work, networking, Linux, self-hosting, tools, notes, and small technical services.
+
+## Current Structure
+
+- `index.html` is the home page.
+- `main.css` contains the shared styling for the whole site.
+- `main.js` injects shared header and footer sections on selected pages.
+- `contact.html` has the contact form and shared footer.
+- `tools.html` uses the shared header and footer from `main.js`.
+- `services/` contains service pages.
+- `guides/` contains guide pages.
+- `img/` contains site images and icons.
+
+## Home Page Sections
+
+The home page currently has:
+
+- Header with dropdown menus
+- Hero section
+- What this site covers
+- Current focus
+- Featured areas
+- Final call to action
+- Footer
+
+The boxes in "What this site covers" and "Featured areas" are clickable and link to the relevant guide or tool page.
+
+## Shared Header And Footer
+
+`main.js` is used to copy shared layout pieces into pages.
+
+For Services and Tools pages:
+
+```html
+<div data-include="site-header"></div>
+<div data-include="site-footer"></div>
+<script src="../main.js"></script>
+```
+
+Use `script src="main.js"` for files in the root folder, such as `tools.html`.
+
+For Guide pages, keep the simple guide header for now and only include the footer:
+
+```html
+<div data-include="site-footer"></div>
+<script src="../main.js"></script>
+```
+
+## Footer Behaviour
+
+The footer is set up to stay at the bottom of short pages.
+
+If the page has more content, the footer naturally moves below the content.
+
+This is handled in `main.css` with:
+
+```css
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+main {
+  flex: 1;
+}
+
+.site-footer {
+  margin-top: auto;
+}
+```
+
+## Main Links
+
+- Email: `info@engineeringbuild.com`
+- Home: `index.html`
+- Contact: `contact.html`
+- Tools: `tools.html`
+
+Guide pages:
+
+- `guides/telecommunications.html`
+- `guides/networking.html`
+- `guides/linux.html`
+- `guides/embedded.html`
+
+Service pages:
+
+- `services/Network.html`
+- `services/servers.html`
+- `services/installation.html`
+- `services/survey.html`
+
+## Notes For Future Work
+
+- Add real content to each guide page.
+- Add real content to each service page.
+- Add a proper Tools page once tools/checklists are ready.
+- Decide whether Contact should also use the full shared header.
+- Add a copyright line if needed.
+- Add SEO descriptions for each individual page.
+- Check link casing before publishing, especially `services/Network.html`.

contact.html

@@ -45,6 +45,8 @@
     </section>
   </main>
 
+  <div data-include="site-footer"></div>
+
   <script>
     document.getElementById('contact-form').addEventListener('submit', function (event) {
       event.preventDefault();
@@ -56,5 +58,6 @@
       window.location.href = `mailto:info@engineeringbuild.com?subject=${subject}&body=${body}`;
     });
   </script>
+  <script src="main.js"></script>
 </body>
 </html>

guides/embedded.html

@@ -30,5 +30,7 @@
       </ul>
     </section>
   </main>
+  <div data-include="site-footer"></div>
+  <script src="../main.js"></script>
 </body>
 </html>

guides/linux.html

@@ -30,5 +30,7 @@
       </ul>
     </section>
   </main>
+  <div data-include="site-footer"></div>
+  <script src="../main.js"></script>
 </body>
 </html>

guides/networking.html

@@ -30,5 +30,7 @@
       </ul>
     </section>
   </main>
+  <div data-include="site-footer"></div>
+  <script src="../main.js"></script>
 </body>
 </html>

guides/telecommunications.html

@@ -30,5 +30,7 @@
       </ul>
     </section>
   </main>
+  <div data-include="site-footer"></div>
+  <script src="../main.js"></script>
 </body>
 </html>

index.html

@@ -61,5 +61,81 @@
       <a href="contact.html">Contact</a>
     </nav>
   </header>
+
+  <main>
+    <section class="hero-section">
+      <div class="hero-content">
+        <h1>EngineeringBuild</h1>
+        <p class="hero-lead">Practical telecom, networking, Linux, and self-hosted systems.</p>
+        <p class="hero-copy">A technical platform being built around real field experience, hands-on learning, and useful documentation.</p>
+        <div class="hero-actions">
+          <a class="button button-primary" href="guides/telecommunications.html">Read Guides</a>
+          <a class="button button-secondary" href="services/Network.html">View Services</a>
+        </div>
+      </div>
+    </section>
+
+    <section class="home-section">
+      <div class="home-content">
+        <h2>What this site covers</h2>
+        <ul class="coverage-list">
+          <li><a href="guides/telecommunications.html">Telecom field work</a></li>
+          <li><a href="guides/networking.html">Networking fundamentals</a></li>
+          <li><a href="guides/linux.html">Linux and self-hosting</a></li>
+          <li><a href="tools.html">Tools, checklists, and troubleshooting notes</a></li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="home-section">
+      <div class="home-content">
+        <h2>Current focus</h2>
+        <p class="home-copy">EngineeringBuild is currently focused on practical guides, field notes, and small technical services while developing into a broader technical support and consulting platform.</p>
+      </div>
+    </section>
+
+    <section class="home-section">
+      <div class="home-content">
+        <h2>Featured areas</h2>
+        <div class="featured-grid">
+          <a class="featured-card" href="guides/telecommunications.html">
+            <h3>Telecom</h3>
+            <p>Installation, commissioning, alarms, fibre/RF checks, documentation.</p>
+          </a>
+          <a class="featured-card" href="guides/networking.html">
+            <h3>Networking</h3>
+            <p>CCNA notes, VLANs, routing, switching, troubleshooting.</p>
+          </a>
+          <a class="featured-card" href="guides/linux.html">
+            <h3>Self-hosting</h3>
+            <p>Docker, Proxmox, Gitea, Nextcloud, Vaultwarden, monitoring.</p>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-section">
+      <div class="home-content">
+        <h2>Need practical technical help or want to follow the build?</h2>
+        <a class="button button-primary" href="mailto:info@engineeringbuild.com">info@engineeringbuild.com</a>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="footer-content">
+      <div class="footer-brand">
+        <a class="brand" href="index.html">EngineeringBuild</a>
+        <p>Practical telecom, networking, Linux, and self-hosted systems.</p>
+      </div>
+      <nav class="footer-links" aria-label="Footer">
+        <a href="guides/telecommunications.html">Guides</a>
+        <a href="services/Network.html">Services</a>
+        <a href="tools.html">Tools</a>
+        <a href="contact.html">Contact</a>
+      </nav>
+      <a class="footer-email" href="mailto:info@engineeringbuild.com">info@engineeringbuild.com</a>
+    </div>
+  </footer>
 </body>
 </html>

main.css

@@ -7,12 +7,19 @@ html {
 }
 
 body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   background: #fff;
   color: #111827;
 }
 
+main {
+  flex: 1;
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -108,6 +115,215 @@ a {
   background: #f3f4f6;
 }
 
+.hero-section {
+  padding: 72px 24px 80px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.hero-content {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.hero-content h1 {
+  margin: 0 0 16px;
+  font-size: 3rem;
+  line-height: 1.08;
+  letter-spacing: 0;
+}
+
+.hero-lead {
+  max-width: 680px;
+  margin: 0 0 14px;
+  font-size: 1.35rem;
+  line-height: 1.45;
+  color: #1f2937;
+}
+
+.hero-copy {
+  max-width: 680px;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.7;
+  color: #4b5563;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 28px;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 11px 16px;
+  border: 1px solid #111827;
+  border-radius: 8px;
+  font-size: 0.94rem;
+  font-weight: 700;
+}
+
+.button-primary {
+  background: #111827;
+  color: #fff;
+}
+
+.button-primary:hover {
+  background: #0f172a;
+}
+
+.button-secondary {
+  background: #fff;
+  color: #111827;
+}
+
+.button-secondary:hover {
+  background: #f3f4f6;
+}
+
+.home-section {
+  padding: 56px 24px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.home-content {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.home-content h2 {
+  margin: 0 0 22px;
+  font-size: 1.75rem;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.home-copy {
+  max-width: 720px;
+  margin: 0;
+  font-size: 1.05rem;
+  line-height: 1.7;
+  color: #4b5563;
+}
+
+.coverage-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.coverage-list a {
+  display: block;
+  height: 100%;
+  padding: 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+  color: #1f2937;
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.coverage-list a:hover,
+.featured-card:hover {
+  border-color: #cbd5e1;
+  background: #f9fafb;
+}
+
+.featured-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.featured-card {
+  display: block;
+  padding: 18px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.featured-card h3 {
+  margin: 0 0 10px;
+  font-size: 1.05rem;
+  line-height: 1.3;
+}
+
+.featured-card p {
+  margin: 0;
+  color: #4b5563;
+  line-height: 1.6;
+}
+
+.cta-section {
+  padding: 64px 24px;
+}
+
+.cta-section h2 {
+  max-width: 720px;
+  margin: 0 0 24px;
+  font-size: 1.85rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.site-footer {
+  margin-top: auto;
+  padding: 32px 24px;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 24px;
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.footer-brand {
+  display: grid;
+  gap: 10px;
+}
+
+.footer-brand p {
+  max-width: 480px;
+  margin: 0;
+  color: #4b5563;
+  line-height: 1.6;
+}
+
+.footer-links {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+  font-size: 0.92rem;
+  font-weight: 700;
+}
+
+.footer-links a:hover,
+.footer-email:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.footer-email {
+  grid-column: 1 / -1;
+  width: fit-content;
+  color: #4b5563;
+  font-weight: 700;
+}
+
 .contact-page {
   padding: 32px 24px 48px;
 }
@@ -198,6 +414,38 @@ a {
     gap: 12px;
   }
 
+  .hero-section {
+    padding: 48px 20px 56px;
+  }
+
+  .hero-content h1 {
+    font-size: 2.25rem;
+  }
+
+  .hero-lead {
+    font-size: 1.15rem;
+  }
+
+  .home-section {
+    padding: 42px 20px;
+  }
+
+  .coverage-list {
+    grid-template-columns: 1fr;
+  }
+
+  .featured-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .cta-section {
+    padding: 48px 20px;
+  }
+
+  .footer-content {
+    grid-template-columns: 1fr;
+  }
+
   .nav-panel {
     position: static;
     min-width: 0;

main.js

@@ -0,0 +1,83 @@
+function getSiteRoot() {
+  const path = window.location.pathname.toLowerCase();
+
+  if (path.includes('/services/') || path.includes('/guides/')) {
+    return '../';
+  }
+
+  return '';
+}
+
+function renderSiteHeader(root) {
+  return `
+    <header class="site-header">
+      <div class="brand-block">
+        <a class="brand" href="${root}index.html">EngineeringBuild</a>
+        <div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
+      </div>
+
+      <nav class="site-nav" aria-label="Primary">
+        <a href="${root}index.html">Home</a>
+
+        <div class="nav-group">
+          <button class="nav-trigger" type="button" aria-haspopup="true">Services</button>
+          <div class="nav-panel">
+            <a href="${root}services/Network.html">Network Planning</a>
+            <a href="${root}services/servers.html">Server Setup</a>
+            <a href="${root}services/installation.html">Installation</a>
+            <a href="${root}services/survey.html">Site Survey</a>
+          </div>
+        </div>
+
+        <div class="nav-group">
+          <button class="nav-trigger" type="button" aria-haspopup="true">Guides</button>
+          <div class="nav-panel">
+            <a href="${root}guides/telecommunications.html">Telecommunications</a>
+            <a href="${root}guides/networking.html">Networking</a>
+            <a href="${root}guides/linux.html">Linux</a>
+            <a href="${root}guides/embedded.html">Embedded</a>
+          </div>
+        </div>
+
+        <div class="nav-group">
+          <button class="nav-trigger" type="button" aria-haspopup="true">Tools</button>
+          <div class="nav-panel">
+            <a href="${root}tools.html">Coming soon</a>
+          </div>
+        </div>
+
+        <a href="${root}contact.html">Contact</a>
+      </nav>
+    </header>
+  `;
+}
+
+function renderSiteFooter(root) {
+  return `
+    <footer class="site-footer">
+      <div class="footer-content">
+        <div class="footer-brand">
+          <a class="brand" href="${root}index.html">EngineeringBuild</a>
+          <p>Practical telecom, networking, Linux, and self-hosted systems.</p>
+        </div>
+        <nav class="footer-links" aria-label="Footer">
+          <a href="${root}guides/telecommunications.html">Guides</a>
+          <a href="${root}services/Network.html">Services</a>
+          <a href="${root}tools.html">Tools</a>
+          <a href="${root}contact.html">Contact</a>
+        </nav>
+        <a class="footer-email" href="mailto:info@engineeringbuild.com">info@engineeringbuild.com</a>
+      </div>
+    </footer>
+  `;
+}
+
+const siteRoot = getSiteRoot();
+
+document.querySelectorAll('[data-include="site-header"]').forEach((target) => {
+  target.outerHTML = renderSiteHeader(siteRoot);
+});
+
+document.querySelectorAll('[data-include="site-footer"]').forEach((target) => {
+  target.outerHTML = renderSiteFooter(siteRoot);
+});

services/Network.html

@@ -7,15 +7,8 @@
   <link rel="stylesheet" href="../main.css" />
 </head>
 <body>
-  <header class="site-header">
+  <div data-include="site-header"></div>
-    <div class="brand-block">
+  <div data-include="site-footer"></div>
-      <a class="brand" href="../index.html">EngineeringBuild</a>
+  <script src="../main.js"></script>
-      <div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
-    </div>
-    <nav class="site-nav" aria-label="Primary">
-      <a href="../index.html">Home</a>
-      <a href="../contact.html">Contact</a>
-    </nav>
-  </header>
 </body>
 </html>

services/installation.html

@@ -7,15 +7,8 @@
   <link rel="stylesheet" href="../main.css" />
 </head>
 <body>
-  <header class="site-header">
+  <div data-include="site-header"></div>
-    <div class="brand-block">
+  <div data-include="site-footer"></div>
-      <a class="brand" href="../index.html">EngineeringBuild</a>
+  <script src="../main.js"></script>
-      <div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
-    </div>
-    <nav class="site-nav" aria-label="Primary">
-      <a href="../index.html">Home</a>
-      <a href="../contact.html">Contact</a>
-    </nav>
-  </header>
 </body>
 </html>

services/servers.html

@@ -7,15 +7,8 @@
   <link rel="stylesheet" href="../main.css" />
 </head>
 <body>
-  <header class="site-header">
+  <div data-include="site-header"></div>
-    <div class="brand-block">
+  <div data-include="site-footer"></div>
-      <a class="brand" href="../index.html">EngineeringBuild</a>
+  <script src="../main.js"></script>
-      <div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
-    </div>
-    <nav class="site-nav" aria-label="Primary">
-      <a href="../index.html">Home</a>
-      <a href="../contact.html">Contact</a>
-    </nav>
-  </header>
 </body>
 </html>

services/survey.html

@@ -7,15 +7,8 @@
   <link rel="stylesheet" href="../main.css" />
 </head>
 <body>
-  <header class="site-header">
+  <div data-include="site-header"></div>
-    <div class="brand-block">
+  <div data-include="site-footer"></div>
-      <a class="brand" href="../index.html">EngineeringBuild</a>
+  <script src="../main.js"></script>
-      <div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
-    </div>
-    <nav class="site-nav" aria-label="Primary">
-      <a href="../index.html">Home</a>
-      <a href="../contact.html">Contact</a>
-    </nav>
-  </header>
 </body>
 </html>

tools.html

@@ -7,15 +7,8 @@
   <link rel="stylesheet" href="main.css" />
 </head>
 <body>
-  <header class="site-header">
+  <div data-include="site-header"></div>
-    <div class="brand-block">
+  <div data-include="site-footer"></div>
-      <a class="brand" href="index.html">EngineeringBuild</a>
+  <script src="main.js"></script>
-      <div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
-    </div>
-    <nav class="site-nav" aria-label="Primary">
-      <a href="index.html">Home</a>
-      <a href="contact.html">Contact</a>
-    </nav>
-  </header>
 </body>
 </html>