Live Site

Information on using the Admin site can be found here

Thank you for viewing my project. wondrousWebWorks() is a portfolio for me as a full stack developer, including some information about me, my skills, experience, a contact section, a blog and project information. It also includes an admin page, where the site owner can manage the site and perform CRUD (Create, Read, Update and Delete) operations.

• wondrousWebWorks()
  • Content
  • User Experience
    • Project Goals
      • User Goals
      • User Stories
        • User Story A
        • User Story B
        • User Story C
        • User Story D
        • User Story E
      • Site Owner Goals
    • Design Choices
      • Fonts
      • Icons
      • Images
      • Colours
        • #1C1C1C (Eerie Black)
        • #E03C31 (sa-flag-red)
        • #007749 (sa-flag-green)
        • #0080ff (sa-flag-blue)
        • #FFB81C (sa-flag-gold)
        • #F7F7F7 (off-white)
  • Features
    • Existing Features
      • Animated Headings
      • Tablet-style Container
      • Animated Skills Listings
      • Project Card Animation and Tooltips
      • Collapsible Qualifications
      • Animated Experience Section
      • Animation Navigation Icons
      • Blog Post Card Text Reveal Effect
      • User Friendly Admin Interface
    • Features to Implement in Future
  • Using the Admin Site
    • Login Procedure
  • Information Architecture
    • Collection name: blog_posts
    • Collection name: portfolio
    • Collection name: qualifications
    • Collection name: skills
    • Collection name: technologies
    • Collection name: users
    • Collection name: work_experience
  • Technologies Used
    • Languages
    • Libraries, Frameworks & Tools
  • Wireframes
    • Changes for Both Landscape and Portrait Orientation
      • Landing Page (Projects section) - landscape and portrait
      • Landing Page (Experience section) - landscape and portrait
      • Admin Management Changes - landscape and portrait
      • Admin Skills - landscape and portrait
      • Admin Projects - landscape and portrait
    • Devices in Landscape Orientation
      • About Page - landscape
      • Portfolio Page - landscape
      • Contact Page - landscape
      • Blogs Page - landscape
      • Blog Post Page - landscape
      • Login Page - landscape
      • Admin Dashboard - landscape
    • Devices in Portrait Orientation
      • Landing Page (Skills Section) - portrait
        • Tablet Devices - portrait
        • Mobile Devices - portrait
      • About Page - portrait
      • Portfolio Page - portrait
      • Project Page - portrait
      • Contact Page - portrait
      • Blogs Page - portrait
        • Tablet Devices - portrait
      • Blog Post Page - portrait
        • Tablet Devices - portrait
        • Mobile Devices - portrait
      • Login Page - portrait
      • Admin Dashboard - portrait
  • Deployment
    • Local Installation
      • Requirements
      • Installation Instructions
    • Deploy to Heroku
      • Requirements
      • Deployment Instructions
  • Credits
  • Disclaimer

wondrousWebWorks() is created to be a profile for me as a developer. It serves to showcase my skills as a developer while allowing visitors to view my ever-expanding portfolio. The site provides some information about me and allows visitors to contact me for any queries or to request work should they so desire. wondrousWebworks() is created to be future proof, and as such featues an admin panel which allows the site admin to manipulate the site by performing CRUD (Create, Read, Update and Delete) operations to change the MongoDB collection and subsequently the site as desired. The site is designed to be visually appealing and intuitive to use.

• A multi-page site which allows the user view information about the developer with ease
• Information about the developer
• An indication of the developer's skill set and estimated proficiency at each skill
• A portfolio showcasing the developer's projects with project information and links to repositories and live sites
• The ability to contact the developer for queries or for work
• Easy navigation between all pages of the site

"As a first-time user of the site, I want the UX to be well designed so that I can navigate the site with ease."

"As someone wishing to see the developer's ability, I want to see good design practices so that I can assess their skill level."

"As an interest party, I want to be able to navigate to the developer's GitHub repositories and LinkedIn profile so I can get more detailed information about them."

"As a prospective employer, I want to be able to see a portfolio of projects so that I can assess the developer's experience and ability."

"As a prospective customer, I want to be able to contact the developer so that I can discuss them working on a project for/with me."

• Deliver on User Stories as far as possible
• Gain the interest of prospective employers or customers
• Create an ADMIN page which allows carrying out CRUD (Create, Read, Update, Delete) operations
• Create a site that is future proof and allows for the addition of additional skills, projects, blog posts, qualifications and work experience

I decided to use a dark theme with a selection of bright colours to provide good contrast and reduce eye strain for users and the site admin. The design is simple with good spacing so that the various sections of the portfolio would stand out and be visually striking in itself where required.

The following fonts were taken from Google Fonts and are reported to used together frequently.

• Baloo 2 - used for all headings as well as links in the navigation bar (navbar)
• Roboto Slab - used for all text which is not a heading or a link in the navbar

At first an effort was made to use Materialize icons only, but it soon became apparent that they were too limited to meet design expectations. As such, all icons were taken from Font Awesome.

The image for the Hero shot in the site header was taken from PNGTREE and chosen because it complements the site's chosen colour scheme. Images for Blog entries were taken from Pexels and selected to portray the general topic of each blog. Project images were generated using mockDrop. The wondrousWebWorks() logo was created by me.

Eerie black (#1C1C1C in hex) was chosen as background colour for the site body as the site was designed to be displayed in "dark mode". In order to make text legible, #F7F7F7 was chosen as text colour. All other colours were taken from the South African flag and named by me; a subtle homage to my origin. See below for more details. All colours complement each other very well, and provide a good level of contrast to increase legibility and highlight various areas of the page.

• Background colour for main site body and admin body

• Background colour of the call-to-action button in the page header
• Colour of the Contact icon in the fixed navigation shortcuts on the left of the screen
• Colour of the $ symbol in the About and About Summary sections
• One of three background colours of bars in Skills displays
• Background colour of the All Projects button on the home page
• Colour of the university and calendar icons in the Education section
• Colour of the left text border on the Project page
• Colour of the left text border on the Blog Post page
• Background colour of the Delete buttons on Admin management pages

• Background colour of navbar
• Colour of the LinkedIn icon in the fixed navigation shortcuts on the left of the screen
• Background colour of the 'user and host' name in the About and About Summary sections
• Colour of the bottom border below section headings
• One of three background colours of bars in Skills displays
• Colour of the deployed site icon in Project cards
• Background colour of the view buttons in the Education section
• Colour of the calendar icons in Experience cards
• Colour of even-numbered technologies of the Project page
• Background colour of the blog summary on Blog cards
• Background colour of the Add buttons on Admin management pages
• Background colour of the form submit buttons in form modals
• Background colour of all Manage buttons on the Admin dashboard

• Background colour of the more info buttons in the Education section
• Background-colour of all modal close buttons

• Colour of the GitHub icon in the fixed navigation shortcuts on the left of the screen
• Colour of the 'present working directory' in the About and About Summary sections
• Colour of the flashing rectangular icon in the About and About Summary sections
• One of three background colours of bars in Skills displays
• Colour of the GitHub icon in Project cards
• Colour of down caret icons in collapsible items
• Colour of the tag icons in Experience cards
• Colour of odd-numbered technologies of the Project page
• Colour of the blog date on the Blog Post page

• Used for all text, except blog post dates

Some features of the site can be viewed below. It is by no means a list of all features, but only those I deem noteworthy.

• The ability for the user to customize the About sections from the Admin page
• This is not really a feature, but I would like to redo the style.css page using SASS
• Convert the site to use Bootstrap instead of Materialize
• The ability to switch between light and dark modes

For the sake of testing, users can test the functionality of the Admin page by logging in with a guest account. As the site does not require users to register or create accounts, the login details for trhe deployed testing site are provided here instead.

NOTE Should you wish to deploy the site with your own data, use your login details instead.

NOTE Trying to access any Admin page by typing the URL into the browser's search bar will redirect the user to the Login page automatically and inform them of the need to be logged in to access that particular resource.

1. Navigate to either the admin or login page.
   • On the example deployed site they can be found here for Admin and here for Login page
   • If you wish to access it locally or where you have deployed the site, navigate to the Home page by clicking Home link in the navbar at the top of the page. Add either of the following to the end of the URL in the browser /admin or /login
2. Enter the following login details in the form input fields:
   • Email: [email protected]
   • Password: M@ryH@d@L1ttl3L@mb
3. Click on the login button

If the above steps are followed, the user should be logged in and redirected to the Admin Dashboard. A new link will appear in the navbar, Log out. Clicking on this will log the user out and login will be required if access to the Admin page is required again.

Information on using the Admin site can be found here

For this project, it was required to use a NoSQL database. MongoDB Atlas was chosen as it provides free datbase hosting in the cloud for minimal traffic and has hardly any downtime at all.

The collections required with information on each key:value pair's title, key and value data type is listed below. Please ensure that you use the collection and key names exactly as outlined.

NOTE: MongoDB automatically generates a unique ID for each document. It is part of every document and not something you have to create yourself.

A JSON representation of the blog_posts collection can be found here

A JSON representation of the portfolio collection can be found here

A JSON representation of the qualifications collection can be found here

A JSON representation of the skills collection can be found here

A JSON representation of the technologies collection can be found here

A JSON representation of the users collection can be found here

A JSON representation of the work_experience collection can be found here

• HTML
• CSS
• JavaScript
• Python

• Flask
• MongoDB (Atlas Cloud)
• Git
• Materialize
• Font Awesome
• Google Fonts
• Cloudinary
• CSS Minifier
• mockDrop

Balsamiq Mockups 3 was used to design all mockups. Wireframes for desktop, mobile and tablet can be viewed here. There are some differences between the wireframes and the end product due to user feedback during testing to improve the UX (User Experience). These changes are highlighted below.

The text in the page header and the page header button changes dynamically depending on which page is loaded. Other changes are listed below.

• Instead of using square buttons with text for the links to project GitHub reposities and Deployed Sites, the icons only were used without any text. A tooltip does provide more information on hover of the icons, though.

• A timeline was used to display work experience instead of the card system. This makes it easier to read while reflecting more modern design convention.

• An *Add button is displayed below the page heading
• Documents are not listed in a collapsible structure, but simply with the Edit and Delete buttons listed on the same row as each document
• Instead of loading separate pages for adding or updating documents, a form modal is triggered when clicking on either the Add or Edit buttons
• The submit button text is Update instead of Confirm Edit in forms for editing documents

• The Add Skill form no longer has an input field for Skill Image URL as it was too difficult to find consitent images for all skills used
• The Edit Skill form no longer has an input field for Skill Image URL

• Five textarea inputs are provided for Project Description paragraphs instead of seven

• The image is displayed below the opening paragraph text and to the right of the screen
• On the left of the image is a list with the developer's main qualities and characteristics

• The same changes as were made for the Project cards in the Projects section on the Landing Page

• The Name and Last Name fields were removed
• A Subject input field was added

• The Blog Title, Blog Date and Blog Summary are now displayed on the Blog Post's background image
• The Read button was removed while clicking on the card text will now direct the user to the appropriate blog post

• The image for the Blog Post is now on the right of the screen

• The navbar for the portfolio site is displayed at the top at the screen
• The page heading is Log In instead of Sign In
• The footer contains the same links as other pages for the portfolio site

• Horizontal navbar used at the top of the page instead of a side navigation bar
• The new navbar does not have links to Add or Manage any of the collections
• Instead of displaying the collections in a 2 x 1 x 2 arrangement, three collections (Skills, Projects, Qualifications) are listed in one row, while two collections (Blogs, Experience) are listed on another row
• Instead of having an Add button below each collection count, a Manage button is displayed which will direct the the user to the appropriate management page

• Four Skills are listed per row instead of three

• Two Skills are listed per row instead of three

• Below the opening paragraph text is a list with the developer's main qualities and characteristics
• The image is displayed below the list with the developer's main qualities and characteristics

• The same changes as were made for the Project cards in the Projects section on the Landing Page

• The project image and technology list are not displayed side-by-side
• The project image is displayed first
• The technology list is displayed below the project image

• The same changes as were made for the Contact page in devices in landscape orientation

• The same changes as for Blog Post cards on devices with a landscape orientation

• Two Blog Post cards are displayed per row instead of one

• The same layout as for devices in landscape orientation

• The blog image is displayed below the blog title and blog date

• The same as for devices in landscape orientation

• The same as for devices in landscape orientation with the following exception:
  • The navbar is vertical and animates the same as the Portfolio site's

The project can be run either locally or deployed on Heroku. Instructions for either option can be viewed below.

Information on using the Admin site can be found here

NOTE: The instructions provided are for installing on a Debian-based Linux operating system. Should your operating system be different, please note that some of the commands might be different.

• An integrated development environment (IDE) - VSCode is free and was used to create this site
• An account on MongoDB Atlas - follow the instructions to create an account
• Git - includes installation instructions
• Python 3 - installation instructions can be found here
• pip - includes installation instructions
• An email acount for which you can find server details - Gmail works very well for this

It is assumed that the required database and collections have been created in your MongoDB Atlas account. If not, please refer to the Information Architecture section and set up your database and collections as stipulated there.

1. Using your browser of choice, navigate to the wondrousWebWorks repository in GitHub

2. Click on the green Clone or download button on the right of the screen (on personal computers) which will trigger a dropdown menu

3. Copy the URL provided

4. Using your terminal of choice, create or navigate to the directory or folder where you'd like to install the wondrousWebWorks project directory

5. Enter the command git clone followed by the URL copied in step 3, or just copy the command from here, paste it in the terminal enter press Enter

    git clone https://github.com/wondrousWebWorks/wondrousWebWorks.git
   

6. Wait for the the repository to be cloned

   It considered good practice to contain each product in each own virtual environment as any dependancies for each project can be installed locally in each project's virtual environment. Several virtual environments exist and since Python 3.3, a subset of the popular virtualenv comes as standard with all Python 3 installations. This subset does not offer the full fetaure set of the full virtualenv package, and as such is recommended to install virtualenv using pip.

7. Install the virtualenv package using pip by using the following command

    pip3 install virtualenv
   

8. Once virtualenv is successfully installed, ensure that you are in the project's root directory and create a virtual environment named venv using the following command

    virtualenv venv
   

9. Ensure you are in the project directory and activate the venv environment with the folowing command. This will allow you to install project-dependant requirements in the next step

    source venv/bin/activate
   

10. Install the necessary requirements in your virtual environment with pip using the following command

    pip3 install -r requirements.txt
    

11. Open your IDE and open the project folder in it

12. Create a file called env.py in the project's root directory

13. In your env.py file, import the os module and set the following environment variables as follows.

    NOTE: Wherever text is surrounded by <> (angle brackets), you will need to provide your own values without the angle brackets as determined by your MongoDB account, mail server and secret key.

    NOTE: Remember to change the username, password and cluster_name in your MongoDB Atlas connection string. Information on getting your MongoDB Atlas connection string can be found here.

    import os
    os.environ["IP"] = "0.0.0.0"
    os.environ["PORT"] = "5000"
    os.environ["DEBUG_VALUE"] = "True"
    os.environ["MONGO_URI"] = "<your MongoDB Atlas connection string>"
    os.environ["MONGO_DBNAME"] = "<your db name>"
    os.environ["SECRET_KEY"] = "<your secret key>"
    os.environ["MAIL_SERVER"] = "smtp.gmail.com"
    os.environ["MAIL_PORT"] = "465"
    os.environ["MAIL_USERNAME"] = "<your gmail address>"
    os.environ["MAIL_PASSWORD"] = "<your gmail password>"
    os.environ["RECIPIENT_ADDRESS"] = "<the email address where you would like the contact mail to be sent - it can be the same as your MAIL_USERNAME>"
    os.environ["SECRET_KEY"] = "<your secret key>"
    

    NOTE: If you wish to use a mail service other than Gmail, use the appropriate values for MAIL_SERVER and MAIL_PORT instead.

    NOTE: Information on generating a good secret key can be found here.

14. If all the steps above have been completed successfully, you can launch the application with the following command and view the site at http://127.0.0.1:5000

    python3 app.py
    

• An account on MongoDB Atlas - follow the instructions to create an account
• An email acount for which you can find server details - Gmail works very well for this

NOTE: In order to deploy successfully to Heroku, both a requirements.txt file and Procfile are required. Both of these files are already included in the GitHub repository for this project for your convenience.

1. On the Heroku website, create a new account if you do not have one already

2. Once logged in and on your Heroku dashboard, create a new app by clicking on the New button, followed by Create new app in the dropdown menu

3. Enter a name for your app (it must be unique) and a region, such as Europe if you are located in Europe and click on Create app

4. On your app page, click on Settings in the navigation bar

5. Click on Reveal Config Vars in the Convig Vars section

6. Set the following Config Vars as key:value pairs

   NOTE: Wherever text is surrounded by <> (angle brackets), you will need to provide your own values without the angle brackets as determined by your MongoDB account, mail server and secret key. Remember to change the username, password and cluster_name in your MongoDB Atlas connection string. Information on getting yourMongoDB Atlas connection string can be found here.

   KEY	VALUE
   IP	0.0.0.0
   PORT	5000
   MONGO_URI	<your MongoDB Atlas connection string>
   MONGO_DBNAME	<your MongoDB Atlas database name>
   MAIL_SERVER	<smtp.gmail.com>
   MAIL_PORT	465
   MAIL_USERNAME	<your Gmail email address>
   MAIL_PASSWORD	<your Gmail account's app-specific password>
   RECIPIENT_ADDRESS	<the email address to which you would like emails to be sent>
   SECRET_KEY	<your secret key>

   NOTE: If you wish to use a mail service other than Gmail, use the appropriate values for MAIL_SERVER and MAIL_PORT instead. Please not that that the default Gmail settings do not allow third party apps to connect. You will need to generate a unique password which will be the password for your MAIL_PASSWORD Convig Var in the table above. Information on getting the unique app password can be found here.

   NOTE: Information on generating a good secret key can be found here.

7. Click on Deploy in the navigation bar

8. In Deployment method, click on GitHub

9. Search for the wondrousWebWorks repository and confirm that it has been found. The search result should look similar to this:

    wondrousWebWorks/wondrousWebWorks
   

10. Click Connect and confirm a successful connection

11. Scroll down to the Manual deploy section and click on Deploy Branch

12. Provided that every step has been followed correctly, the app should be deployed and can be viewed by clicking on the View or Open app buttons

Information on using the Admin site can be found here

• Image for README.md responsive layouts taken from Am I Responsive?
• Hero Shot image on in header was taken from PNGTREE
• Blog images were taken from Pexels
• Project images were generated using mockDrop
• README.md tables in Information Architecture were created using Tables Generator

This site is intended for educational purposes only, and is not intended for use in any other capacity.