From fffbaaf3b06cd8b6d3dbcc48cd97ad51314b65bb Mon Sep 17 00:00:00 2001 From: Pratik Date: Sun, 7 Jun 2026 23:58:45 +1000 Subject: [PATCH] Update website --- Readme.md | 106 ++++++++++++++ contact.html | 3 + guides/embedded.html | 2 + guides/linux.html | 2 + guides/networking.html | 2 + guides/telecommunications.html | 2 + index.html | 76 ++++++++++ main.css | 248 +++++++++++++++++++++++++++++++++ main.js | 83 +++++++++++ services/Network.html | 13 +- services/installation.html | 13 +- services/servers.html | 13 +- services/survey.html | 13 +- tools.html | 13 +- 14 files changed, 539 insertions(+), 50 deletions(-) diff --git a/Readme.md b/Readme.md index e69de29..80b344e 100644 --- a/Readme.md +++ b/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 +
+
+ +``` + +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 +
+ +``` + +## 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`. diff --git a/contact.html b/contact.html index 469d55f..6cc3e21 100644 --- a/contact.html +++ b/contact.html @@ -45,6 +45,8 @@ +
+ + diff --git a/guides/embedded.html b/guides/embedded.html index 6a87e8f..6f37106 100644 --- a/guides/embedded.html +++ b/guides/embedded.html @@ -30,5 +30,7 @@ +
+ diff --git a/guides/linux.html b/guides/linux.html index c9572b3..252f502 100644 --- a/guides/linux.html +++ b/guides/linux.html @@ -30,5 +30,7 @@ +
+ diff --git a/guides/networking.html b/guides/networking.html index 3ec3335..312084e 100644 --- a/guides/networking.html +++ b/guides/networking.html @@ -30,5 +30,7 @@ +
+ diff --git a/guides/telecommunications.html b/guides/telecommunications.html index 120142b..e563f4b 100644 --- a/guides/telecommunications.html +++ b/guides/telecommunications.html @@ -30,5 +30,7 @@ +
+ diff --git a/index.html b/index.html index fe391e7..575359e 100644 --- a/index.html +++ b/index.html @@ -61,5 +61,81 @@ Contact + +
+
+
+

EngineeringBuild

+

Practical telecom, networking, Linux, and self-hosted systems.

+

A technical platform being built around real field experience, hands-on learning, and useful documentation.

+
+ Read Guides + View Services +
+
+
+ +
+
+

What this site covers

+ +
+
+ +
+
+

Current focus

+

EngineeringBuild is currently focused on practical guides, field notes, and small technical services while developing into a broader technical support and consulting platform.

+
+
+ +
+
+

Featured areas

+
+ +

Telecom

+

Installation, commissioning, alarms, fibre/RF checks, documentation.

+ + +

Networking

+

CCNA notes, VLANs, routing, switching, troubleshooting.

+ + +

Self-hosting

+

Docker, Proxmox, Gitea, Nextcloud, Vaultwarden, monitoring.

+ +
+
+
+ +
+
+

Need practical technical help or want to follow the build?

+ info@engineeringbuild.com +
+
+
+ + diff --git a/main.css b/main.css index d20defa..061081c 100644 --- a/main.css +++ b/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; diff --git a/main.js b/main.js index e69de29..c1f4dd9 100644 --- a/main.js +++ b/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 ` +
+
+ EngineeringBuild +
Telecommunications, Networking, Linux, Embedded
+
+ + +
+ `; +} + +function renderSiteFooter(root) { + return ` + + `; +} + +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); +}); diff --git a/services/Network.html b/services/Network.html index 031cefb..7dedf48 100644 --- a/services/Network.html +++ b/services/Network.html @@ -7,15 +7,8 @@ -
-
- EngineeringBuild -
Telecommunications, Networking, Linux, Embedded
-
- -
+
+
+ diff --git a/services/installation.html b/services/installation.html index 4a7e9c5..7aa7fd4 100644 --- a/services/installation.html +++ b/services/installation.html @@ -7,15 +7,8 @@ -
-
- EngineeringBuild -
Telecommunications, Networking, Linux, Embedded
-
- -
+
+
+ diff --git a/services/servers.html b/services/servers.html index cdf036d..d2593b1 100644 --- a/services/servers.html +++ b/services/servers.html @@ -7,15 +7,8 @@ -
-
- EngineeringBuild -
Telecommunications, Networking, Linux, Embedded
-
- -
+
+
+ diff --git a/services/survey.html b/services/survey.html index 646cb9f..399fbdf 100644 --- a/services/survey.html +++ b/services/survey.html @@ -7,15 +7,8 @@ -
-
- EngineeringBuild -
Telecommunications, Networking, Linux, Embedded
-
- -
+
+
+ diff --git a/tools.html b/tools.html index 2085222..c0c7f2a 100644 --- a/tools.html +++ b/tools.html @@ -7,15 +7,8 @@ -
-
- EngineeringBuild -
Telecommunications, Networking, Linux, Embedded
-
- -
+
+
+