CivoraTech — Infographic & Presentation

Short description

This small static site contains three linked HTML pages that present a problem analysis of the Sri Lanka Post (SLP) produced for the ICET Industry Minds program. The pages are intended for presentation and internal review.

Files (top-level)

• index.html — Summary / infographic view
• presentation.html — Slide-like presentation (fixed top nav)
• problems.html — Detailed problem deep dive (P1–P5)
• Assets/img/ — Images used by the pages (logos are here)
• Assets/css/styles.css — Shared project CSS (card hover, chart fade-in, print tweaks)

What I changed (summary)

• Added a consistent top navigation bar and footer links to all pages so visitors can move between the three pages.
• Inserted CivoraTech and Sri Lanka Post logos into header and footer (images loaded from Assets/img/).
• Fixed Markdown-style bolds that were visible in the HTML (replaced **bold** with proper HTML <span class="font-bold">…</span> so "What:"/"Why:" sections render correctly).

How to view (quick)

1. Open the project folder in your file manager.
2. Double-click index.html (or right-click -> Open with -> your browser) to view the Summary page.
3. From there use the nav links to access presentation.html (slide view) and problems.html (detailed view).

Notes on assets & fonts

• Logos used:
  • Assets/img/CivoraTech Final logo.png
  • Assets/img/SLPOSTlogocrop.png
• The pages load Tailwind CDN and Google Fonts; they require an internet connection to fetch those resources. Chart.js is also loaded from CDN.

Recommended browser for presenting

Use the latest Chrome or Edge for the best rendering and Chart.js performance. The presentation page uses a fixed header so open it in a normal browser window (not the file preview in a text editor) for the intended effect.

Small QA checklist (what I recommend you verify before Friday)

• Open presentation.html and index.html in your browser and confirm the logos appear.
• Each page's top navigation links to the other two pages.
• Charts render (requires internet to load Chart.js CDN). If charts do not display, check the browser console for errors.
• Text formatting: there should be no visible **bold** markers anywhere.

Next suggested improvements (optional)

• Consolidated shared CSS is already added at Assets/css/styles.css (linked from every page).
• Make the presentation keyboard-navigable (left/right to move between sections) using a small JS helper — I can add this if you want.
• Generate a printable PDF of the slides using the browser "Print" → "Save as PDF" settings; add a print stylesheet to improve the result.

If anything looks wrong

Reply here with a screenshot and the page name (e.g., "presentation.html — logos missing") and I will fix the paths or styles.

Contact

If you'd like other visual changes (color scheme, typography, slide transitions), tell me which direction you prefer and I will implement them.