Fennex

Site for a company specialized in the creation of websites, ecommerce and web applications, it s just a CV of the projects it has worked on.
This site is developed started from a template, it is written with HTML, CSS and JQuery with the use of some libraries and is completely responsive

File structure

• root HTML pages
• css Only css files
• fonts Fonts of the site
• images All images, icons and logos of the site, divided in subfolders:
  • profiles
  • projects (also divided into projects)
  • fennec (assets like logo)
• js Only javascript files including internal js, libraries and a file for DB

Libraries

• jQuery It is a JavaScript library that makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler
• particles A lightweight, dependency-free and responsive javascript plugin that generate a particle backgrounds
• skel A lightweight framework for building responsive sites and web apps
• fontawesome Internet's icon library and toolkit

Database

Not having a server side it was decided to make a database with a js file (db.js).
The tables are simple arrays of objects and for each there is a js file that manages it.

• projects Projects we made as a company
• profiles The components of the company

To insert an element into DB just add an object to array into db.js file
Here an example of projects array (table of DB):

var projects = [
  {
    insert: new Date("2018/06/29 19:50"),
    img: "images/projects/people/img01.png",
    title: "People.",
    demo: "http://demo.fennex.it/people",
    description:
      "Sito semplice e moderno realizzato per l'universit&agrave; IUAV di Venezia. Il sito a fatto guadagnare un bel 30 e lode alla nostra amica. <span class='icon fa-smile-o'></span>",
    features: ["Completamente responsive", "Bootstrap 4"],
  },
  {
    insert: new Date("2018/07/10 20:04"),
    img: "images/projects/michelangeli/img01.png",
    title: "Michelangeli",
    demo: "http://michelangeli.fennex.it",
    description:
      "Sito per la vendita di prodotti artigianali. Michelangeli pu&ograve; sembrare un semplice mercatino d'artigianato, ma non lasciatevi ingannare! nei suoi prodotti c'&egrave; tutto l'amore di una mamma! <span class='icon fa-heart'></span>",
    features: ["Completamente responsive", "Vetrina prodotti"],
  },
];

HTML structure

The site is made creating the skeleton in HTML and then including parts and information by javascript

• home page The home page contains the overview of the site and is divided in:
  • header The menu navigation
  • section That contains the overview of the main topics:
    • profiles Information about developers
    • projects General information about projects
• detail This is the page that shows a project with all of its informations
• footer Included in each page contains the contact informations
• contact us Page for the contact informations

Demo link

https://davide-murro.github.io/fennex/

Screenshots