title: "Final Website Project Presentation"
slides:
  - number: 1
    heading: "Project Overview & Vision"
    paragraphs:
      - "This presentation showcases a <strong>personal publishing platform</strong> designed for technical professionals. It serves as both a comprehensive <strong>portfolio</strong> and a continuously expanding <strong>knowledge base</strong>."
      - "Our primary goal is to demonstrate strong <strong>software architecture skills</strong>, clear technical <strong>communication</strong> and practical <strong>development experience</strong> through real-world applications and content."

  - number: 2
    heading: "Website Showcase: Core & Content"
    images:
      - src: /static/images/home.png
        alt: "Homepage Screenshot"
      - src: /static/images/logging.png
        alt: "Log Viewer / Admin Interface Screenshot"
    listItems:
      - text: "Explore the <strong>Homepage</strong> to see introductory content and the foundational layout."
      - text: "View a sample of the <strong>Log Viewer / Admin Interface</strong>, demonstrating backend utility."

  - number: 3
    heading: "Website Showcase: Navigation & Interaction"
    images:
      - src: /static/images/nav-bar.png
        alt: "Navigation Bar Screenshot"
      - src: /static/images/contact.png
        alt: "Contact Page"
      - src: /static/images/newsletter.png
        alt: "Newsletter Signup"
    listItems:
      - text: "Discover the main site <strong>Navigation Bar</strong>, highlighting menu behavior and accessibility."
      - text: "See user interaction elements like the <strong>Contact Page</strong> and <strong>Newsletter Signup</strong> form."

  - number: 4
    heading: "Website Showcase: Essential Elements & Utilities"
    images:
      - src: /static/images/footer.png
        alt: "Footer"
      - src: /static/images/table-of-contents.png
        alt: "Admin Interface Screenshot"
      - src: /static/images/construction.png
        alt: "'Under Construction' Page"
    listItems:
      - text: "Review consistent elements like the <strong>Footer</strong>."
      - text: "Examine the dynamic <strong>Table of Contents</strong>"
      - text: "Note utility pages such as the 'Under Construction' placeholder."

  - number: 5
    heading: "Website Showcase: Documentation" # NEW HEADING
    images:
      - src: /static/images/documentation.png # NEW IMAGE
        alt: "Documentation Homepage Screenshot"
    listItems:
      - text: "Explore the dedicated <strong>Documentation Portal</strong>, offering comprehensive guides and technical insights."
      - text: "The documentation enhances usability and serves as a valuable resource for understanding system functionalities."

  - number: 6
    heading: "Website Showcase: Sitemap Pages"
    images:
      - src: /static/images/sitemap.png
        alt: "Sitemap PNG Page"
      - src: /static/images/sitemap-xml.png
        alt: "Sitemap XML Page"
    listItems:
      - text: "Explore the <strong>Sitemap (HTML & XML)</strong> illustrating site structure for search engines."

  - number: 7
    heading: "Website Showcase: Error Pages"
    images:
      - src: /static/images/error404.png
        alt: "Custom Error 404 Page"
      - src: /static/images/error403.png
        alt: "Custom Error 403 Page"
      - src: /static/images/error500.png
        alt: "Custom Error 500 Page"
    listItems:
      - text: "Custom <strong>Error Pages (404, 403, 500)</strong> demonstrate robust error handling."

  - number: 8
    heading: "Design Philosophy: Layout & Color"
    listItems:
      - text: "<strong>Clean & Efficient Layout:</strong> A two-column structure (sidebar on left, main content on right) prioritizes legibility and quick access to categorized topics."
      - text: "<strong>Harmonious Color Scheme:</strong> Neutral grayscale tones are accented with selective colors for links and interactive elements. Support for both light and dark modes ensures optimal readability."

  - number: 9
    heading: "Design Philosophy: Navigation & Interaction"
    listItems:
      - text: "<strong>Intuitive Navigation:</strong> A top-level horizontal menu with an 'About' dropdown offers primary access, complemented by a sidebar for chronological and tag-based Browse of blog posts."
      - text: "<strong>Seamless User Interaction:</strong> Integrated contact, comment, and newsletter forms are designed to be unobtrusive, easy to find, and simple to use."
      - text: "<strong>Cross-Browser & Responsive:</strong> Rigorously tested across Chrome, Firefox, and Edge, the design ensures proper rendering and functionality on both desktop and mobile devices."

  - number: 10
    heading: "Technical Architecture"
    listItems:
      - text: "<strong>Frontend Stack:</strong> Built with <strong>HTML5</strong> and <strong>CSS3</strong> for structure and styling. Dynamic content is populated using <strong>Handlebars templates</strong> for server-side rendering."
      - text: "<strong>Backend Logic:</strong> Powered by <strong>Node.js</strong> and <strong>Express</strong>. Content is managed via <strong>Markdown files</strong>, converted to structured HTML at runtime."
      - text: "<strong>Security & Proxy Layer:</strong> An <strong>NGINX reverse proxy</strong> handles incoming requests and routing. <strong>Authelia</strong> provides optional authentication for administrative tools."
      - text: "<strong>Dynamic Content System:</strong> Blog posts are automatically indexed by tag, topic, and publication date. Archive pages and an RSS feed are dynamically generated from content metadata."

  - number: 11
    heading: "Challenges & Solutions"
    listItems:
      - text: "<strong>Challenge: Adapting to Assignment Scope (Static vs. Dynamic):</strong> The initial requirement was static HTML/CSS, but the project evolved into a full backend stack with routing and templating.<br /><strong>Resolution:</strong> Ensured all output HTML and CSS remain clean, standards-compliant, and semantically structured, meeting the spirit of the original requirement while exceeding its scope."
      - text: "<strong>Challenge: Complex Proxy & Authentication Integration:</strong> Configuring the NGINX reverse proxy and integrating upstream authentication demanded meticulous coordination across multiple layers.<br /><strong>Resolution:</strong> Isolated session management through Authelia and maintained a stateless design within the application to prevent session coupling and enhance robustness."
      - text: "<strong>Challenge: Balancing Functionality with Maintainability:</strong> Avoiding unnecessary complexity was crucial to preserve clarity and support future scalability.<br /><strong>Resolution:</strong> Employed semantic HTML, modular templates, and clear component boundaries, establishing a solid foundation for long-term growth and ease of maintenance."

  - number: 12
    heading: "Conclusion & Project Impact"
    paragraphs:
      - "This project significantly <strong>exceeds the base assignment requirements</strong>, delivering a fully functional and extensible web platform."
      - "It features comprehensive backend integration, secure routing, and dynamic content generation."
      - "The site adeptly demonstrates foundational HTML/CSS practices while seamlessly incorporating modern development tooling."
      - "<strong>Tailored for a technical audience</strong>, this platform exemplifies performance, clarity, and real-world applicability in software development."

  - number: 13
    heading: "Thank You!"
    paragraphs:
      - "I hope you enjoyed the presentation."
      - '<button id="returnButton" href="#" class="reveal-button">Return to Website</button>'