Create personal website blogpost

content/articles/personal-website.md

@@ -1,10 +1,120 @@
 ---
 title: "Personal Website"
-description: "Stuff go here."
+description: "Open-source content management system."
+navigation: false
 ---
 
-# Test!
+<small>Open-source content management system.<br>
+Repository at
+[GitHub](https://github.com/riyyi/website),
+[GitLab](https://gitlab.com/riyyi/website) or
+[Gitea](https://git.riyyi.com/riyyi/website).
+</small>
 
-This is another article.
+This is the CMS that is used for this website! It's written in PHP 7, MySQL and
+jQuery, with the libraries Klein.php and Mailer.
 
-![database design](/img/personal-website/database-design.png)
+Features:
+
+- PHP 7
+- Composer
+  - [Klein.php](https://github.com/klein/klein.php)
+  - [Mailer](https://github.com/txthinking/Mailer)
+- MVC design pattern
+- MySQL database for storing data
+- CMS with CRUD functions for managing data
+- ORM for mapping between PHP classes and data
+- Login system
+  - Stay logged in using cookies
+  - Forget password with a generated link send using mail
+- Security mitigations
+  - Password hashing using BCrypt
+  -  Per-user cryptographically secure generated salt
+  -  SQL injection protection using prepared statements
+  -  XSS
+    - Cookies set to 'HttpOnly'
+    - Escape rendered user input using: `htmlentities(ENT_QUOTES | ENT_HTML5, 'UTF-8');`
+  - CSRF
+    - Cookies 'SameSite' set to 'Strict'
+    - Token for each session used in POST/PUT/DELETE requests
+- Bootstrap
+- jQuery
+
+Directory structure:
+
+```
+.
+├── app
+│   ├── classes
+│   │   └── <classes>
+│   ├── controllers
+│   │   └── <controllers>
+│   ├── helper.php
+│   ├── model
+│   │   └── <models>
+│   ├── seed.php
+│   ├── traits
+│   │   └── Log.php
+│   └── views
+│       └── <views>
+├── composer.json
+├── config.php
+├── config.php.example
+├── public
+│   ├── index.php
+│   └── <files>
+├── route.php
+├── syncconfig.sh
+├── syncconfig.sh.example
+└── sync.sh
+```
+
+<div class="row">
+<div class="col-12 col-lg-6">
+
+Pictured below is the EER (Enhanced entity-relationship) diagram of the MySQL database:
+![website database design](/img/personal-website/database-design.png "website database design")
+
+</div>
+</div>
+
+Some of the pages of the CMS.
+
+<div class="row">
+<div class="col-12 col-lg-6">
+
+Admin menu.
+![admin menu](/img/personal-website/admin-menu.png "admin menu")
+
+</div>
+<div class="col-12 col-lg-6">
+
+CRUD index page, displaying all the entries of this table, including pagination.
+![crud index page](/img/personal-website/crud-index.png "crud index page")
+
+</div>
+<div class="col-12 col-lg-6">
+
+CRUD edit page, editing an entry.
+![crud edit page](/img/personal-website/crud-edit.png "crud edit page")
+
+</div>
+<div class="col-12 col-lg-6">
+
+CRUD show page, show all values of an entry.
+![crud show page](/img/personal-website/crud-show.png "crud show page")
+
+</div>
+<div class="col-12 col-lg-6">
+
+Login page.
+![login page](/img/personal-website/login.png "login page")
+
+</div>
+<div class="col-12 col-lg-6">
+
+Password reset page, showing a flash message.
+![password reset page](/img/personal-website/reset-password.png "password reset page")
+
+</div>
+</div>