Chris Skorka
Login

Web

chris.skorka.info

This very website is my personal custom website with built in theming, content management and user authentication functionality. I've create this to present my portfolio and to showcase my software development skill.

Theming

Theming is fully supported. Multiple themes can be installed at a time and switched between from the administration page. This current theme allows the user to change the primary colour and switch dark mode on or off. The selected colour-preferences are applied system wide and give a nice level of customisation to any user.

      

Content Management System (CMS)

The CMS creates, edits and deletes pages, menus, uploaded content and site preferences. The following are the key features of this CMS:

Page Editor
  • Can be created edited and deleted.
  • Multiple page formats are available.
  • Includes in-browser WYSIWYG editor.
Menus
  • May contain up to 3 levels.
  • Edited by dragging and dropping menu items into the desired order and hierarchy.
  • The first level items are displayed at the top of the page.
  • Sub level items are available in drop downs.
Manage Media
  • Files can be uploaded and deleted.
  • When possible, a thumbnail is generated.
  • Images, videos and text files can be previewed in the browser.
Website Configurations
  • Set website name.
  • Manage metadata entries.
  • Select website theme.

Page Editors

There are several page types to choose from:
  • Article: Create and edit pages in on online word processor.
  • Custom: Enter custom HTML, CSS, JS an PHP code.
  • Flash: Select a flash file.
  • IFrame: Enter a website URL to be embedded as the page content.
  • MarkDown: Enter markdown text to be rendered.

Article pages and WYSIWYG editor

The article page editor lets you create and format regular web pages with ease. It provides all the standard formatting options you would expect from a word processor. The content is rendered in the editor as it would appear on the final page. It supports a vast number of shortcut key combinations to control basic formatting (bold, italic, etc), text justification, indentation, list creation, undo and redo.

  

MarkDown pages

The MarkDown page mode rendered MD code into a HTML page using the Parsedown package and the highlight.js package to perform code syntax highlighting.
It supports all the core functionality of the MarkDown language and generates the HTML source code accordingly.

  

User Authentication

The system features a user authentication systems and access control to pages. 
Passwords are stored in the form of password hashes and salts that are randomly generated for each user. The hashes are computed using the PBKDF2 algorithm with the SHA-256 hashing function.
The website can be viewed from 3 types of accounts: 
  • No account: can view unrestricted pages only. Restricted pages show a 404 warning.
  • User account: can view user only pages
  • Admin account: can view all pages, edit and modify the system.
Currently the website has no content or features that would require a user login other than website administration pages.

Modularity

This system is fully modular with themes, page templates and page types (article, flash game, ect) being modules. A new page type/editor pair could easily be created and integrated into the system in the future. A new theme could be created and installed and the administrator can simply switch between them in the admin page.

The back end builds the web page out of components. Key components include:
  • Overall page template
  • Navigation
  • Page content
    • Article, custom, flash, iFrame, markdown content components
    • Article, custom, flash, iFrame, markdown editors
  • Notifications
  • Media previews

Component's HTML and CSS sources may include placeholder strings that will be filled with the corresponding component or variable value.

Other Web Development Projects