Updated author informations, updated location of included files, structured the website to the new layout, removed local fontawesome and moved to cloud CDN

lib/css/clean-blog.css

@@ -0,0 +1,420 @@
+/*!
+ * Start Bootstrap - Clean Blog v5.0.2 (https://startbootstrap.com/template-overviews/clean-blog)
+ * Copyright 2013-2018 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-clean-blog/blob/master/LICENSE)
+ */
+
+body {
+  font-size: 20px;
+  color: #212529;
+  font-family: 'Lora', 'Times New Roman', serif;
+}
+
+p {
+  line-height: 1.5;
+  margin: 30px 0;
+}
+
+p a {
+  text-decoration: underline;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 800;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #212529;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+}
+
+a:focus, a:hover {
+  color: #0085A1;
+}
+
+blockquote {
+  font-style: italic;
+  color: #868e96;
+}
+
+.section-heading {
+  font-size: 36px;
+  font-weight: 700;
+  margin-top: 60px;
+}
+
+.caption {
+  font-size: 14px;
+  font-style: italic;
+  display: block;
+  margin: 0;
+  padding: 10px;
+  text-align: center;
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+::-moz-selection {
+  color: #fff;
+  background: #0085A1;
+  text-shadow: none;
+}
+
+::selection {
+  color: #fff;
+  background: #0085A1;
+  text-shadow: none;
+}
+
+img::-moz-selection {
+  color: #fff;
+  background: transparent;
+}
+
+img::selection {
+  color: #fff;
+  background: transparent;
+}
+
+img::-moz-selection {
+  color: #fff;
+  background: transparent;
+}
+
+#mainNav {
+  position: absolute;
+  border-bottom: 1px solid #e9ecef;
+  background-color: white;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+#mainNav .navbar-brand {
+  font-weight: 800;
+  color: #343a40;
+}
+
+#mainNav .navbar-toggler {
+  font-size: 12px;
+  font-weight: 800;
+  padding: 13px;
+  text-transform: uppercase;
+  color: #343a40;
+}
+
+#mainNav .navbar-nav > li.nav-item > a {
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+@media only screen and (min-width: 992px) {
+  #mainNav {
+    border-bottom: 1px solid transparent;
+    background: transparent;
+  }
+  #mainNav .navbar-brand {
+    padding: 10px 20px;
+    color: #fff;
+  }
+  #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
+    color: rgba(255, 255, 255, 0.8);
+  }
+  #mainNav .navbar-nav > li.nav-item > a {
+    padding: 10px 20px;
+    color: #fff;
+  }
+  #mainNav .navbar-nav > li.nav-item > a:focus, #mainNav .navbar-nav > li.nav-item > a:hover {
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  #mainNav {
+    -webkit-transition: background-color 0.2s;
+    transition: background-color 0.2s;
+    /* Force Hardware Acceleration in WebKit */
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    -webkit-backface-visibility: hidden;
+  }
+  #mainNav.is-fixed {
+    /* when the user scrolls down, we hide the header right above the viewport */
+    position: fixed;
+    top: -67px;
+    -webkit-transition: -webkit-transform 0.2s;
+    transition: -webkit-transform 0.2s;
+    transition: transform 0.2s;
+    transition: transform 0.2s, -webkit-transform 0.2s;
+    border-bottom: 1px solid white;
+    background-color: rgba(255, 255, 255, 0.9);
+  }
+  #mainNav.is-fixed .navbar-brand {
+    color: #212529;
+  }
+  #mainNav.is-fixed .navbar-brand:focus, #mainNav.is-fixed .navbar-brand:hover {
+    color: #0085A1;
+  }
+  #mainNav.is-fixed .navbar-nav > li.nav-item > a {
+    color: #212529;
+  }
+  #mainNav.is-fixed .navbar-nav > li.nav-item > a:focus, #mainNav.is-fixed .navbar-nav > li.nav-item > a:hover {
+    color: #0085A1;
+  }
+  #mainNav.is-visible {
+    /* if the user changes the scrolling direction, we show the header */
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+header.masthead {
+  margin-bottom: 50px;
+  background: no-repeat center center;
+  background-color: #868e96;
+  background-attachment: scroll;
+  position: relative;
+  background-size: cover;
+}
+
+header.masthead .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: #212529;
+  opacity: 0.5;
+}
+
+header.masthead .page-heading,
+header.masthead .post-heading,
+header.masthead .site-heading {
+  padding: 200px 0 150px;
+  color: white;
+}
+
+@media only screen and (min-width: 768px) {
+  header.masthead .page-heading,
+  header.masthead .post-heading,
+  header.masthead .site-heading {
+    padding: 200px 0;
+  }
+}
+
+header.masthead .page-heading,
+header.masthead .site-heading {
+  text-align: center;
+}
+
+header.masthead .page-heading h1,
+header.masthead .site-heading h1 {
+  font-size: 50px;
+  margin-top: 0;
+}
+
+header.masthead .page-heading .subheading,
+header.masthead .site-heading .subheading {
+  font-size: 24px;
+  font-weight: 300;
+  line-height: 1.1;
+  display: block;
+  margin: 10px 0 0;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+@media only screen and (min-width: 768px) {
+  header.masthead .page-heading h1,
+  header.masthead .site-heading h1 {
+    font-size: 80px;
+  }
+}
+
+header.masthead .post-heading h1 {
+  font-size: 35px;
+}
+
+header.masthead .post-heading .meta,
+header.masthead .post-heading .subheading {
+  line-height: 1.1;
+  display: block;
+}
+
+header.masthead .post-heading .subheading {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 10px 0 30px;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+header.masthead .post-heading .meta {
+  font-size: 20px;
+  font-weight: 300;
+  font-style: italic;
+  font-family: 'Lora', 'Times New Roman', serif;
+}
+
+header.masthead .post-heading .meta a {
+  color: #fff;
+}
+
+@media only screen and (min-width: 768px) {
+  header.masthead .post-heading h1 {
+    font-size: 55px;
+  }
+  header.masthead .post-heading .subheading {
+    font-size: 30px;
+  }
+}
+
+.post-preview > a {
+  color: #212529;
+}
+
+.post-preview > a:focus, .post-preview > a:hover {
+  text-decoration: none;
+  color: #0085A1;
+}
+
+.post-preview > a > .post-title {
+  font-size: 30px;
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+.post-preview > a > .post-subtitle {
+  font-weight: 300;
+  margin: 0 0 10px;
+}
+
+.post-preview > .post-meta {
+  font-size: 18px;
+  font-style: italic;
+  margin-top: 0;
+  color: #868e96;
+}
+
+.post-preview > .post-meta > a {
+  text-decoration: none;
+  color: #212529;
+}
+
+.post-preview > .post-meta > a:focus, .post-preview > .post-meta > a:hover {
+  text-decoration: underline;
+  color: #0085A1;
+}
+
+@media only screen and (min-width: 768px) {
+  .post-preview > a > .post-title {
+    font-size: 36px;
+  }
+}
+
+.floating-label-form-group {
+  font-size: 14px;
+  position: relative;
+  margin-bottom: 0;
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.floating-label-form-group input,
+.floating-label-form-group textarea {
+  font-size: 1.5em;
+  position: relative;
+  z-index: 1;
+  padding: 0;
+  resize: none;
+  border: none;
+  border-radius: 0;
+  background: none;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+  font-family: 'Lora', 'Times New Roman', serif;
+}
+
+.floating-label-form-group input::-webkit-input-placeholder,
+.floating-label-form-group textarea::-webkit-input-placeholder {
+  color: #868e96;
+  font-family: 'Lora', 'Times New Roman', serif;
+}
+
+.floating-label-form-group label {
+  font-size: 0.85em;
+  line-height: 1.764705882em;
+  position: relative;
+  z-index: 0;
+  top: 2em;
+  display: block;
+  margin: 0;
+  -webkit-transition: top 0.3s ease, opacity 0.3s ease;
+  transition: top 0.3s ease, opacity 0.3s ease;
+  vertical-align: middle;
+  vertical-align: baseline;
+  opacity: 0;
+}
+
+.floating-label-form-group .help-block {
+  margin: 15px 0;
+}
+
+.floating-label-form-group-with-value label {
+  top: 0;
+  opacity: 1;
+}
+
+.floating-label-form-group-with-focus label {
+  color: #0085A1;
+}
+
+form .form-group:first-child .floating-label-form-group {
+  border-top: 1px solid #dee2e6;
+}
+
+footer {
+  padding: 50px 0 65px;
+}
+
+footer .list-inline {
+  margin: 0;
+  padding: 0;
+}
+
+footer .copyright {
+  font-size: 14px;
+  margin-bottom: 0;
+  text-align: center;
+}
+
+.btn {
+  font-size: 14px;
+  font-weight: 800;
+  padding: 15px 25px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  border-radius: 0;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.btn-primary {
+  background-color: #0085A1;
+  border-color: #0085A1;
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+  color: #fff;
+  background-color: #00657b !important;
+  border-color: #00657b !important;
+}
+
+.btn-lg {
+  font-size: 16px;
+  padding: 25px 35px;
+}

lib/css/hidden-scrollbar-GUI.css

@@ -0,0 +1,6 @@
+html,body {
+    scrollbar-width: none;
+}
+::-webkit-scrollbar {
+    width: 0;
+}

lib/js/clean-blog.js

@@ -0,0 +1,41 @@
+(function($) {
+  "use strict"; // Start of use strict
+
+  // Floating label headings for the contact form
+  $("body").on("input propertychange", ".floating-label-form-group", function(e) {
+    $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
+  }).on("focus", ".floating-label-form-group", function() {
+    $(this).addClass("floating-label-form-group-with-focus");
+  }).on("blur", ".floating-label-form-group", function() {
+    $(this).removeClass("floating-label-form-group-with-focus");
+  });
+
+  // Show the navbar when the page is scrolled up
+  var MQL = 992;
+
+  //primary navigation slide-in effect
+  if ($(window).width() > MQL) {
+    var headerHeight = $('#mainNav').height();
+    $(window).on('scroll', {
+        previousTop: 0
+      },
+      function() {
+        var currentTop = $(window).scrollTop();
+        //check if user is scrolling up
+        if (currentTop < this.previousTop) {
+          //if scrolling up...
+          if (currentTop > 0 && $('#mainNav').hasClass('is-fixed')) {
+            $('#mainNav').addClass('is-visible');
+          } else {
+            $('#mainNav').removeClass('is-visible is-fixed');
+          }
+        } else if (currentTop > this.previousTop) {
+          //if scrolling down...
+          $('#mainNav').removeClass('is-visible');
+          if (currentTop > headerHeight && !$('#mainNav').hasClass('is-fixed')) $('#mainNav').addClass('is-fixed');
+        }
+        this.previousTop = currentTop;
+      });
+  }
+
+})(jQuery); // End of use strict

lib/js/clean-blog.min.js

@@ -0,0 +1,7 @@
+/*!
+ * Start Bootstrap - Clean Blog v5.0.2 (https://startbootstrap.com/template-overviews/clean-blog)
+ * Copyright 2013-2018 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-clean-blog/blob/master/LICENSE)
+ */
+
+!function(o){"use strict";o("body").on("input propertychange",".floating-label-form-group",function(i){o(this).toggleClass("floating-label-form-group-with-value",!!o(i.target).val())}).on("focus",".floating-label-form-group",function(){o(this).addClass("floating-label-form-group-with-focus")}).on("blur",".floating-label-form-group",function(){o(this).removeClass("floating-label-form-group-with-focus")});if(992<o(window).width()){var s=o("#mainNav").height();o(window).on("scroll",{previousTop:0},function(){var i=o(window).scrollTop();i<this.previousTop?0<i&&o("#mainNav").hasClass("is-fixed")?o("#mainNav").addClass("is-visible"):o("#mainNav").removeClass("is-visible is-fixed"):i>this.previousTop&&(o("#mainNav").removeClass("is-visible"),s<i&&!o("#mainNav").hasClass("is-fixed")&&o("#mainNav").addClass("is-fixed")),this.previousTop=i})}}(jQuery);

lib/js/onePageApp-contactForm.js

@@ -0,0 +1,25 @@
+(function ($) {
+    $(function () {
+        $('#contact-form-send').click(function () {
+            $.ajax({
+                url: 'contactme/webform.php',
+                method: 'POST',
+                datatype: 'JSON',
+                data: {
+                    name: $('#contact-form-name').val(),
+                    email: $('#contact-form-email').val(),
+                    message: $('#contact-form-message').val()
+                },
+                success: function () {
+                    console.log( 'I ran the ajax request successfully' ); // debug purposes
+                }
+            });
+        });
+        $("#scrolldown-button").click(function() {
+            $('html,body').animate({
+                scrollTop: $("#contact-form").offset().top
+            }, 'slow');
+        });
+        $("#contact-form-message").css('overflow', 'hidden').autogrow({vertical: true, horizontal: false, flickering: false});
+    });
+})(jQuery);

lib/js/onePageApp-sections-control.js

@@ -0,0 +1,45 @@
+(function($) {
+    current_section = -1;
+    function getPageContent (section) {
+        if ( section != current_section ) {
+            $.ajax({
+                url: 'index.php',
+                method: 'POST',
+                datatype: 'JSON',
+                data: {
+                    section_id: section,
+                },
+                success: function ( data ) {
+                    if ( data.status == 200 ) {
+                        $('#page-title').html(data.pageTitle);
+                        $('#user-content').html(data.html);
+                        if ( section == 3 ) {
+                            $('#content-contact-form').click(function () { getPageContent (5) });
+                        }
+                    }
+                    else {
+                        console.log("[" + data.status + "] " + data.errorCode + ": " + data.errorText);
+                    }
+                    current_section = section
+                },
+                error: function (jqXHR, exception) {
+                    console.log(jqXHR.status + ": " +  jqXHR.responseText + " | - | " + exception);
+                },
+            });
+        }
+    }
+    $(function() {
+        $('#navbar-home').click(function () { getPageContent (1) } );
+        $('#navbar-description').click(function () { getPageContent (2) });
+        $('#navbar-work').click(function () { getPageContent (3) });
+        $('#navbar-ideas').click(function () { getPageContent (4) });
+        $('#navbar-contact-form').click(function () { getPageContent (5) });
+        $('#navbar-contact-email').click(function () { window.location.href = "mailto:bryanpedini@bryanpedini.it"; });
+        $('ul.nav li.dropdown').hover(function () {
+            $(this).find('.dropdown-menu').stop(true, true).fadeIn(500);
+        }, function () {
+            $(this).find('.dropdown-menu').stop(true, true).fadeOut(500);
+        });
+        getPageContent(0);
+    });
+})(jQuery);

lib/php/contactme.php

@@ -0,0 +1,32 @@
+<?php
+    function check_email ( $email ) {
+        return filter_var ( $email, FILTER_VALIDATE_EMAIL );
+    }
+    
+    function post_call ( $url, $data ) {
+        $options = [
+            'http' => [
+                'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
+                'method'  => 'POST',
+                'content' => http_build_query ( $data )
+            ]
+        ];
+        $context  = stream_context_create ( $options );
+        $result = file_get_contents ( $url, false, $context );
+        if ( $result === FALSE ) { /* Handle error */ } // TODO: next thing to do
+    }
+
+    if ( isset ( $_POST [ 'name' ] ) && isset ( $_POST [ 'email' ] ) && isset ( $_POST [ 'message' ] ) && check_email ( $_POST [ 'email' ] ) === false ) {
+        $message = [
+            'name' => $_POST [ 'name' ],
+            'email' => $_POST [ 'email' ],
+            'message' => $_POST [ 'email' ]
+        ];
+        $message_json = json_encode ( $message );
+        post_call ( 'https://telegram.bryanpedini.it/bots/personal-website-contactform.php', $message_json );
+        /*
+            if you need anything specific about telegram bots or you want to request me a custom made telegram bot,
+            please contact me at info@telegram.bryanpedini.it
+        */
+    }
+?>

lib/php/serve_index.php

@@ -0,0 +1,52 @@
+<?php
+    $section_page_titles = [
+        0 => '',
+        1 => 'Home',
+        2 => 'About myself',
+        3 => 'What I\'ve done so far',
+        4 => 'Who I would like to be',
+        5 => 'Web Form contact'
+    ];
+    if ( ! isset ( $_POST ['section_id'] ) ) {
+        $requested_section_title = 'Home';
+    }
+    else {
+        if ( ! in_array ( $_POST ['section_id'], array_keys( $section_page_titles ) ) ) {
+            $page_content_array = [
+                'status' => 400,
+                'errorCode' => 'Bad Request',
+                'errorText' => 'Requested section \'' . $_POST [ 'section_id' ] . '\' does not exist: do not attempt to compromise the website.',
+            ];
+            $page_content_json = json_encode ( $page_content_array );
+            header('Content-Type: application/json');
+            echo $page_content_json;
+            exit;
+        }
+        $requested_section = $_POST ['section_id'];
+        if ( $requested_section == 0 ) {
+            if ( isset ( $_SESSION [ 'section_id' ] ) ) {
+                $requested_section = $_SESSION [ 'section_id' ];
+            }
+            else {
+                $requested_section = 1;
+            }
+        }
+        $_SESSION [ 'section_id' ] = $requested_section;
+        $requested_section_title = $section_page_titles [ $requested_section ];
+        $section_templates = [
+            1 => file_get_contents ( 'lib/php/templates/home.html' ),
+            2 => file_get_contents ( 'lib/php/templates/description.html' ),
+            3 => file_get_contents ( 'lib/php/templates/projects.html' ),
+            4 => file_get_contents ( 'lib/php/templates/ideas.html' ),
+            5 => file_get_contents ( 'lib/php/templates/contact-form.html' ),
+        ];
+        $page_content_array = [
+            'status' => 200,
+            'pageTitle' => $requested_section_title.' | Bryan Pedini',
+            'html' => $section_templates [ $requested_section ]
+        ];
+        $page_content_json = json_encode($page_content_array);
+        header('Content-Type: application/json');
+        echo $page_content_json;
+        exit;
+    }

lib/php/switch_action.php

@@ -0,0 +1,35 @@
+<?php
+    switch ( $_SERVER [ 'QUERY_STRING' ] ) {
+        case "/login":
+            if ( isset ( $_SESSION [ 'user_id' ] ) ) {
+                header ( "Location: " . $environment [ 'installation_path' ] );
+                exit;
+            }
+            if ( isset ( $_POST [ 'username' ] ) && isset ( $_POST [ 'password' ] ) ) {
+                //TODO: maybe implement two factor authentication, if possible
+                include ( $environment [ 'installation_path' ] . '/lib/php/user_login.php' );
+                exit;
+            }
+            include ( $environment [ 'installation_path' ] . '/lib/php/templates/login.php' );
+            break;
+        case "/insert":
+            if ( ! isset ( $_SESSION [ 'user_id' ] ) || $_SESSION [ 'user_permission_level' ] != 0 ) {
+                header ( "Location: " . $environment [ 'installation_path' ] . "/login" );
+                exit;
+            }
+            if ( isset ( $_POST [ 'new_article' ] ) ) {
+                //TODO: insert the new article into the database, previous validation of course!
+                $_SESSION [ 'section_id'] = 0; //TODO: get the ID of the last article just inserted and redirect the editor to the new article for preview.
+                header ( "Location: " . $environment [ 'installation_path' ] );
+                exit;
+            }
+            include ( $environment [ 'installation_path' ] . '/lib/php/templates/insert.php' );
+            break;
+        case "/contactme":
+            if ( ! isset ( $_POST [ 'contact_message' ] ) ) {
+                header ( "Location: " . $environment [ 'installation_path' ] );
+                exit;
+            }
+            include ( $environment [ 'installation_path' ] . '/lib/php/contactme.php' );
+            break;
+    }

lib/php/templates/contact-form.html

@@ -0,0 +1,44 @@
+<style>
+    #contact-form {
+        font-family: 'Roboto Condensed', sans-serif;
+    }
+</style>
+<header class="masthead" style="background-image: url(lib/img/bg-5.jpg)">
+    <div class="overlay"></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-md-10 mx-auto">
+                <div class="page-heading">
+                    <h1>Why keeping all your questions for you?</h1>
+                    <span class="subheading">Just ask them here!</span>
+                    <a href="#contact-form" id="scrolldown-button">
+                        <i class="fas fa-chevron-circle-down fa-3x fa-inverse" style="line-height: 2;"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
+<div class="container">
+    <div class="row">
+        <div class="col-lg-8 col-md-10 mx-auto">
+            <form class="form-horizontal" id="contact-form">
+                <div class="form-group">
+                    <label for="contact-form-name">Name</label>
+                    <input type="text" class="form-control" id="contact-form-name" placeholder="John Doe">
+                </div>
+                <div class="form-group">
+                    <label for="contact-form-email">Email</label>
+                    <input type="email" class="form-control" id="contact-form-email" placeholder="john.doe@example.com">
+                </div>
+                <div class="form-group">
+                    <label for="contact-form-message">Your Message:</label>
+                    <textarea class="form-control" id="contact-form-message" rows="3"></textarea> 
+                </div>
+                <button type="submit" class="btn btn-default btn-outline-secondary" id="contact-form-send">Get in touch with me</button>
+            </form>
+        </div>
+    </div>
+</div>
+<script src="lib/vendor/jquery.ns-autogrow/jquery.ns-autogrow.min.js"></script>
+<script src="lib/js/onePageApp-contactForm.js"></script>

lib/php/templates/description.html

@@ -0,0 +1,56 @@
+<header class="masthead" style="background-image: url(lib/img/bg-2.jpg)">
+    <div class="overlay"></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-md-10 mx-auto">
+                <div class="page-heading">
+                    <h1>About Me</h1>
+                    <span class="subheading">This is what I do</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
+<div class="container">
+    <div class="row">
+        <div class="col-lg-8 col-md-10 mx-auto">
+            <div class="post-preview">
+                <h1 class="post-title">2018 / 2019 - my current position</h1>
+                <h4 class="post-subtitle">Where I am now and why I'm there: I.I.S. F.Corni - Modena (Italy)</h4>
+                <p class="post-meta">
+                    It's because I love my school, there's why...<br>
+                    I think that even you wouldn't like to learn in a school you don't like, right?
+                </p>
+            </div>
+            <hr>
+            <div class="post-preview">
+                <h1 class="post-title">What I do there</h1>
+                <h4 class="post-subtitle">My work at school, my life by now</h4>
+                <p class="post-meta">
+                    I'm one of the two administrators of the course cluster, the machine(s) that holds all the informations the students of the entire IT course desire to put there, safely crypted and redundant.<br>
+                    I would love to rework the entire networking of my school, all tho I think this isn't possible yet.
+                </p>
+            </div>
+            <hr>
+            <div class="post-preview">
+                <h1 class="post-title">Why so much efford</h1>
+                <h4 class="post-subtitle">I believe that everything you do makes experience</h4>
+                <p class="post-meta">
+                    Did anyone ever asked me to take up my home media streaming server? NO!<br>
+                    And I think that everyone of us, one time or another, made a quite huge mistake;<br>
+                    And we learned from it, no matter how long it take, or how big it was: we won't commit the same mistake twice;<br>
+                    Everything is experience.
+                </p>
+            </div>
+            <hr>
+            <div class="post-preview">
+                <h1 class="post-title">What I plan to do next</h1>
+                <p class="post-meta">
+                    Why are you asking that now?<br>
+                    I'm still 18 (at January 2019) and I don't know even what I want to do at the end of this school year; maybe ask the same question in a few years.<br>
+                    Please visit my "Future Ideas" page for more informations about what COULD come next. Thanks!
+                </p>
+            </div>
+        </div>
+    </div>
+</div>

lib/php/templates/home.html

@@ -0,0 +1,13 @@
+<header class="masthead" style="background-image:  url(lib/img/bg-1.jpg)">
+    <div class="overlay"></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-9 col-md-10 mx-auto">
+                <div class="site-heading">
+                    <h1>Bryan Joshua Pedini</h1>
+                    <span class="subheading">An eighteen years old guy from Italy, with just some great ideas</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>

lib/php/templates/ideas.html

@@ -0,0 +1,49 @@
+<header class="masthead" style="background-image: url(lib/img/bg-4.jpg)">
+    <div class="overlay"></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-md-10 mx-auto">
+                <div class="page-heading">
+                    <h1>I want to...</h1>
+                    <span class="subheading">Random thoughts or brilliant ideas?</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
+<div class="container">
+    <div class="row">
+        <div class="col-lg-8 col-md-10 mx-auto">
+            <div class="post-preview">
+                <a href="#">
+                    <h1 class="post-title">
+                        Placeholder
+                    </h1>
+                    <h4 class="post-subtitle">
+                        Yes, this is published, and still work in progress
+                    </h4>
+                </a>
+                <p class="post-meta">
+                    You're right: after more than 5 different revisions, ten plus days of hard coding almost every day, something like half a hundred small tweaking for performance and graphical details, and an outer man which had never seen the site before judgin' it for completeness...<br>
+                    This website has become public available, the source code is online, you are visiting it just right now, and I still don't have ideas to put here;<br>
+                    Or maybe all of the previous one that were here before became reality and you can enjoy their awesomeness somewhere else on one of my thousands of websites...<br>
+                    Maybe...
+                </p>
+            </div>
+            <div class="post-preview">
+                <a href="https://git.bryanpedini.it/bryanpedini/www.bryanpedini.it">
+                    <h1 class="post-title">
+                        Website translation
+                    </h1>
+                    <h4 class="post-subtitle">
+                        A little more serious here instead
+                    </h4>
+                </a>
+                <p class="post-meta">
+                    I would like to translate my entire website to French, Dutch, Spanish, English (done), and Italian (not a big deal, my mothertongue).<br>
+                    If anyone knows a little bit of PHP, database integration with it, SQL language (all tho it's the least important one), or have any good idea in mind, feel free to send a suggestion to my Telegram bot <a href="https://t.me/bryanpedini_suggestions_bot">@bryanpedini_suggestions_bot</a>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>

lib/php/templates/index.php

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <meta name="description" content="">
+        <meta name="author" content="Bryan Pedini">
+        <title id="page-title"><?=$requested_section_title?> | Bryan Pedini</title>
+        <link href="https://static.bjphoster.com/images/icons/bryanpedini.it/favicon.png" rel="icon" type="image/png">
+        <link href="lib/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+        <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+        <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
+        <link href="lib/css/clean-blog.min.css" rel="stylesheet">
+        <link href="lib/css/hidden-scrollbar-GUI.css" rel="stylesheet">
+    </head>
+    <body>
+        <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
+            <div class="container">
+                <a class="navbar-brand" href="#" id="navbar-home">Bryan Pedini</a>
+                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+                    Menu <i class="fas fa-bars"></i>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarResponsive">
+                    <ul class="navbar-nav ml-auto">
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About me</a>
+                            <ul class="dropdown-menu">
+                            <li class="dropdown-item"><a href="#" id="navbar-description">A brief description</a></li>
+                            <li class="dropdown-divider"></li>
+                            <li class="dropdown-item"><a href="#" id="navbar-work">My current projects</a></li>
+                            <li class="dropdown-item"><a href="#" id="navbar-ideas">My future ideas</a></li>
+                        </ul>
+                        </li>
+                        <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact me</a>
+                        <div class="dropdown-menu">
+                            <a href="#" class="dropdown-item" id="navbar-contact-form">Web form</a>
+                            <a href="#" class="dropdown-item" id="navbar-contact-email">Email</a>
+                        </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        <div id="user-content">
+
+        </div>
+        <footer>
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-8 col-md-10 mx-auto">
+                        <ul class="list-inline text-center">
+                            <li class="list-inline-item">
+                                <a href="https://www.instagram.com/bryanpedini/">
+                                    <span class="fa-stack fa-lg">
+                                        <i class="fas fa-circle fa-stack-2x"></i>
+                                        <i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
+                                    </span>
+                                </a>
+                            </li>
+                            <li class="list-inline-item">
+                                <a href="https://git.bryanpedini.it/">
+                                    <span class="fa-stack fa-lg">
+                                        <i class="fas fa-circle fa-stack-2x"></i>
+                                        <i class="fab fa-git fa-stack-1x fa-inverse"></i>
+                                    </span>
+                                </a>
+                            </li>
+                            <li class="list-inline-item">
+                                <a href="https://dev.bryanpedini.it/">
+                                    <span class="fa-stack fa-lg">
+                                        <i class="fas fa-circle fa-stack-2x"></i>
+                                        <i class="fab fa-dev fa-stack-1x fa-inverse"></i>
+                                    </span>
+                                </a>
+                            </li>
+                        </ul>
+                        <p class="copyright text-muted">&copy; Bryan Pedini <?php echo date("Y"); ?> - All rights reserved.<br>Send me an email at <a href="mailto:copyright@bryanpedini.it">this</a> link for copyright and permissions questions.</p>
+                    </div>
+                </div>
+            </div>
+        </footer>
+        <script src="lib/vendor/jquery/jquery.min.js"></script>
+        <script src="lib/vendor/bootstrap/js/bootstrap.min.js"></script>
+        <script src="lib/js/clean-blog.min.js"></script>
+        <script src="lib/js/onePageApp-sections-control.js"></script>
+    </body>
+</html>

lib/php/templates/insert.php

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <meta name="description" content="">
+        <meta name="author" content="Bryan Pedini">
+        <title>Insert new article | Bryan Pedini</title>
+        <link href="https://static.bjphoster.com/images/icons/bryanpedini.it/favicon.png" rel="icon" type="image/png">
+    </head>
+    <body>
+        <!-- TODO: Insert a template with an online editor which saves data onto the database -->
+    </body>
+</html>

lib/php/templates/login.php

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <meta name="description" content="">
+        <meta name="author" content="Bryan Pedini">
+        <title>Admin Login | Bryan Pedini</title>
+        <link href="https://static.bjphoster.com/images/icons/bryanpedini.it/favicon.png" rel="icon" type="image/png">
+    </head>
+    <body>
+        <!-- TODO: Add a login template with username and password, with two factor authentication too, if possible -->
+    </body>
+</html>

lib/php/templates/projects.html

@@ -0,0 +1,47 @@
+<header class="masthead" style="background-image: url(lib/img/bg-3.jpg)">
+    <div class="overlay"></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-md-10 mx-auto">
+                <div class="page-heading">
+                    <h1>Finished projects</h1>
+                    <span class="subheading">This is what I did</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
+<div class="container">
+    <div class="row">
+        <div class="col-lg-8 col-md-10 mx-auto">
+            <div class="post-preview">
+                <a href="https://git.bryanpedini.it/bryanpedini/www.bryanpedini.it">
+                    <h1 class="post-title">
+                        This: my website
+                    </h1>
+                    <h4 class="post-subtitle">
+                        Yes, it's free and public available to download, edit and publish under your own name, prior asking me, of course.
+                    </h4>
+                </a>
+                <p class="post-meta">
+                    You can clone my project on another git based repository hosting website, fork your own website from there, and edit whatever you like to.<br>
+                    Just ask me on my <a href="#" id="content-contact-form">web form</a> or <a href="mailto:copyright@bryanpedini.it">email me</a> if you're interested.
+                </p>
+            </div>
+            <hr>
+            <div class="post-preview">
+                <a href="https://dev.bryanpedini.it/">
+                    <h1 class="post-title">
+                        Any other content?
+                    </h1>
+                    <h4 class="post-subtitle">
+                        There must be something else, right?
+                    </h4>
+                </a>
+                <p class="post-meta">
+                    In fact, you can visit <a href="https://git.bryanpedini.it">my private git repository hosting service</a> or <a href="https://dev.bryanpedini.it">my development website</a> to find more, the last of which is entirely dedicated just on this topic!
+                </p>
+            </div>
+        </div>
+    </div>
+</div>

lib/php/user_login.php

@@ -0,0 +1,12 @@
+<?php
+    $user = [
+        'username' => $_POST [ 'username' ],
+        'password' => $_POST [ 'password' ],
+    ];
+    if ( false ) {
+        //TODO: ask the database if the user exists and check if the password is correct then
+    }
+    else {
+        header ( "Location /" ); //TODO: modify with json response with "Wrong username or password" message
+        exit;
+    }

lib/vendor/jquery.ns-autogrow/jquery.ns-autogrow.js

@@ -0,0 +1,139 @@
+/*!
+  Non-Sucking Autogrow 1.1.6
+  license: MIT
+  author: Roman Pushkin
+  https://github.com/ro31337/jquery.ns-autogrow
+*/
+(function() {
+  var getVerticalScrollbarWidth;
+
+  (function($, window) {
+    return $.fn.autogrow = function(options) {
+      if (options == null) {
+        options = {};
+      }
+      if (options.horizontal == null) {
+        options.horizontal = true;
+      }
+      if (options.vertical == null) {
+        options.vertical = true;
+      }
+      if (options.debugx == null) {
+        options.debugx = -10000;
+      }
+      if (options.debugy == null) {
+        options.debugy = -10000;
+      }
+      if (options.debugcolor == null) {
+        options.debugcolor = 'yellow';
+      }
+      if (options.flickering == null) {
+        options.flickering = true;
+      }
+      if (options.postGrowCallback == null) {
+        options.postGrowCallback = function() {};
+      }
+      if (options.verticalScrollbarWidth == null) {
+        options.verticalScrollbarWidth = getVerticalScrollbarWidth();
+      }
+      if (options.horizontal === false && options.vertical === false) {
+        return;
+      }
+      return this.filter('textarea').each(function() {
+        var $e, $shadow, fontSize, heightPadding, minHeight, minWidth, update;
+        $e = $(this);
+        if ($e.data('autogrow-enabled')) {
+          return;
+        }
+        $e.data('autogrow-enabled');
+        minHeight = $e.height();
+        minWidth = $e.width();
+        heightPadding = $e.css('lineHeight') * 1 || 0;
+        $e.hasVerticalScrollBar = function() {
+          return $e[0].clientHeight < $e[0].scrollHeight;
+        };
+        $shadow = $('<div class="autogrow-shadow"></div>').css({
+          position: 'absolute',
+          display: 'inline-block',
+          'background-color': options.debugcolor,
+          top: options.debugy,
+          left: options.debugx,
+          'max-width': $e.css('max-width'),
+          'padding': $e.css('padding'),
+          fontSize: $e.css('fontSize'),
+          fontFamily: $e.css('fontFamily'),
+          fontWeight: $e.css('fontWeight'),
+          lineHeight: $e.css('lineHeight'),
+          resize: 'none',
+          'word-wrap': 'break-word'
+        }).appendTo(document.body);
+        if (options.horizontal === false) {
+          $shadow.css({
+            'width': $e.width()
+          });
+        } else {
+          fontSize = $e.css('font-size');
+          $shadow.css('padding-right', '+=' + fontSize);
+          $shadow.normalPaddingRight = $shadow.css('padding-right');
+        }
+        update = (function(_this) {
+          return function(event) {
+            var height, val, width;
+            val = _this.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n /g, '<br/>&nbsp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\n$/, '<br/>&nbsp;').replace(/\n/g, '<br/>').replace(/ {2,}/g, function(space) {
+              return Array(space.length - 1).join('&nbsp;') + ' ';
+            });
+            if (/(\n|\r)/.test(_this.value)) {
+              val += '<br />';
+              if (options.flickering === false) {
+                val += '<br />';
+              }
+            }
+            $shadow.html(val);
+            if (options.vertical === true) {
+              height = Math.max($shadow.height() + heightPadding, minHeight);
+              $e.height(height);
+            }
+            if (options.horizontal === true) {
+              $shadow.css('padding-right', $shadow.normalPaddingRight);
+              if (options.vertical === false && $e.hasVerticalScrollBar()) {
+                $shadow.css('padding-right', "+=" + options.verticalScrollbarWidth + "px");
+              }
+              width = Math.max($shadow.outerWidth(), minWidth);
+              $e.width(width);
+            }
+            return options.postGrowCallback($e);
+          };
+        })(this);
+        $e.change(update).keyup(update).keydown(update);
+        $(window).resize(update);
+        return update();
+      });
+    };
+  })(window.jQuery, window);
+
+  getVerticalScrollbarWidth = function() {
+    var inner, outer, w1, w2;
+    inner = document.createElement('p');
+    inner.style.width = "100%";
+    inner.style.height = "200px";
+    outer = document.createElement('div');
+    outer.style.position = "absolute";
+    outer.style.top = "0px";
+    outer.style.left = "0px";
+    outer.style.visibility = "hidden";
+    outer.style.width = "200px";
+    outer.style.height = "150px";
+    outer.style.overflow = "hidden";
+    outer.appendChild(inner);
+    document.body.appendChild(outer);
+    w1 = inner.offsetWidth;
+    outer.style.overflow = 'scroll';
+    w2 = inner.offsetWidth;
+    if (w1 === w2) {
+      w2 = outer.clientWidth;
+    }
+    document.body.removeChild(outer);
+    return w1 - w2;
+  };
+
+}).call(this);

lib/vendor/jquery.ns-autogrow/jquery.ns-autogrow.min.js

@@ -0,0 +1,7 @@
+/*!
+  Non-Sucking Autogrow 1.1.6
+  license: MIT
+  author: Roman Pushkin
+  https://github.com/ro31337/jquery.ns-autogrow
+*/
+(function(){var e;!function(t,l){return t.fn.autogrow=function(i){if(null==i&&(i={}),null==i.horizontal&&(i.horizontal=!0),null==i.vertical&&(i.vertical=!0),null==i.debugx&&(i.debugx=-1e4),null==i.debugy&&(i.debugy=-1e4),null==i.debugcolor&&(i.debugcolor="yellow"),null==i.flickering&&(i.flickering=!0),null==i.postGrowCallback&&(i.postGrowCallback=function(){}),null==i.verticalScrollbarWidth&&(i.verticalScrollbarWidth=e()),i.horizontal!==!1||i.vertical!==!1)return this.filter("textarea").each(function(){var e,n,r,o,a,c,d;if(e=t(this),!e.data("autogrow-enabled"))return e.data("autogrow-enabled"),a=e.height(),c=e.width(),o=1*e.css("lineHeight")||0,e.hasVerticalScrollBar=function(){return e[0].clientHeight<e[0].scrollHeight},n=t('<div class="autogrow-shadow"></div>').css({position:"absolute",display:"inline-block","background-color":i.debugcolor,top:i.debugy,left:i.debugx,"max-width":e.css("max-width"),padding:e.css("padding"),fontSize:e.css("fontSize"),fontFamily:e.css("fontFamily"),fontWeight:e.css("fontWeight"),lineHeight:e.css("lineHeight"),resize:"none","word-wrap":"break-word"}).appendTo(document.body),i.horizontal===!1?n.css({width:e.width()}):(r=e.css("font-size"),n.css("padding-right","+="+r),n.normalPaddingRight=n.css("padding-right")),d=function(t){return function(l){var r,d,s;return d=t.value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\n /g,"<br/>&nbsp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/\n$/,"<br/>&nbsp;").replace(/\n/g,"<br/>").replace(/ {2,}/g,function(e){return Array(e.length-1).join("&nbsp;")+" "}),/(\n|\r)/.test(t.value)&&(d+="<br />",i.flickering===!1&&(d+="<br />")),n.html(d),i.vertical===!0&&(r=Math.max(n.height()+o,a),e.height(r)),i.horizontal===!0&&(n.css("padding-right",n.normalPaddingRight),i.vertical===!1&&e.hasVerticalScrollBar()&&n.css("padding-right","+="+i.verticalScrollbarWidth+"px"),s=Math.max(n.outerWidth(),c),e.width(s)),i.postGrowCallback(e)}}(this),e.change(d).keyup(d).keydown(d),t(l).resize(d),d()})}}(window.jQuery,window),e=function(){var e,t,l,i;return e=document.createElement("p"),e.style.width="100%",e.style.height="200px",t=document.createElement("div"),t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.visibility="hidden",t.style.width="200px",t.style.height="150px",t.style.overflow="hidden",t.appendChild(e),document.body.appendChild(t),l=e.offsetWidth,t.style.overflow="scroll",i=e.offsetWidth,l===i&&(i=t.clientWidth),document.body.removeChild(t),l-i}}).call(this);