The Ministry of Defence Zambia

This is the my initial proposed fully responsive vision of the new ministerial website of defence for the goverment of Zambia. The website was built using basic HTML, CSS, and Vanilla JavaScript. Then upstaged the website to a JAMStack website, JAMstack is a term that describes a modern web development architecture based on JavaScript, APIs, and Markup (JAM). The advantages of JAMStack are that it is an architecture designed to make the web faster, more secure, and easier to scale.

With JAMStack, the entire front-end is prebuilt into highly optimized static pages and assets during a build process. This process of pre-rendering results in sites which can be served directly from a Content Delivery Network (CDN), reducing the cost, complexity and risk, of dynamic servers as critical infrastructure.

Since this is a static site, it needs a static site generator, amongst all the many popular tools for generating static sites I went with Eleventy.

1. Eleventy works with multiple template languages and in our case I've gone with:
   • HTML .html
   • Markdown .md
   • JavaScript .11ty.js
   • Liquid .liquid
   • Nunjucks .njk
2. Eleventy is not a JavaScript framework—that means zero boilerplate client-side JavaScript.

The starting folders used by [Xavier K Muneku] in the src short for source are:

1. _data -> It contains mainly .js and .json files for some of the site's most important internal and external data.
2. _includes -> Has all the different utilty components or templates, that can be used when needed. The choice of templating language is Nunjucks .njk.
3. admin -> It has the two most essential files config.yml and index.html which serve to connect the website to its back-end.
4. assets -> Holds all of the website's documents, images and icon.
5. CSS -> Has the style.css stylesheet for the site.
6. script -> Has all the JavaScript files for the desired content manipulation on the website.
7. pages -> Contains all the diferent pages for the website. Here the files are saved either in Markdown .md or Nunjucks .njk.
8. index.njk -> Serves as the landing page for the website.

The _site folder on the other hand is generated by Eleventy automatically every time we build the site. The folder also holds all the final served files we see on the browser.

Then the node_modeles folder is automatically generated once we install Eleventy and has all the dependencies needed to run Eleventy.

The .eleventy.js has all the configurations needed to configure Eleventy for our own project’s needs.

The package-lock.json file describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

The package.json file is the heart of any Eleventy project. It records important metadata about a project which is required before publishing to NPM, and also defines functional attributes of a project that npm uses to install dependencies, run scripts, and identify the entry point to our package.

Here is a preview of the landing page:

Desktop version

Mobile version

• This is to show that the site is fully responsive.

• 

• Link to the website -> ministry-of-defence-zambia

Author -> Xavier Kamwamba Muneku

• Link my portfolio website -> Web Dev Portfolio