MK | Designs Portfolio Website

This is my first personal portfolio website. It is designed to be accessible and responsive on a range of devices and easy to navigate for better UX for future recruiters, employers and collaborators.
As I do not have exprerience yet as a Developer this site will future both qualifications my Nursing background and work history as my Full Stack Developer in progress/ongoing.

1. User Experience (UX)
   • User Stories
   • Design
   • Wireframes
2. Features
   • Existing Features
   • Upcoming Features
3. Technologies Used
   • Languages Used
   • Frameworks, Libraries & Progragms Used
4. Testing
5. Deployment
6. Credits

• User Stories

  • First Time Visitors

    1. For First time visitors my aim is to help them navigate easily through the website and to understand the my main qualifications
    2. The navigation was planned to be easy and approachable by everyone with easy to follow buttons and headers.
    3. First time visitors must be able to navigate directly to the relevant qualification and read as also see and track see my progress.
    4. First time visitors need to be able to navigate over my website and find links to my social media related to each qualification.
    5. Easy to find contact form and accessible up to date CV and Work

  • Returing Visitors

    1. For Returning visitors there will be an up to date Blog so the can read the news and what I am up to each period.
    2. For Returning visitors an up to date CV and work history section must be accessible easily, from the main landing page.
    3. Returning visitors might want to susbscribe to a newsletter which i plan to add in the future.
    4. Returning visitors will require fast access to my social media through the contact form or through the relevant articles

  • Frequent Visitors (such as Recruiters/employers/collaborators)

    1. Frequent visitors recruiters etc will have access through my Blog updates and they will be able to see newest work
    2. Frequent users might want to subscirbe to receive emails when new updates launch,something I plan to add in the future.
    3. Frequent users must have access to my nursing CV if that is the case and see an updated CV and Work history.
    4. Frequent users who like to hire me as a Full-Stack Developer must have access on my social links and able to sent me message for availability.
    5. Frequent users would like to see a most recent updated portfolio which i plan to add an extra page showcasing my portfolio as a developer.

• Design

  • Colour Scheme

    • I used thre colours for the whole project Xibetic #0F1020 for the background, the Alabaster #E0E2DB for the text and Antique Brass #D09076 for the accent colours. There reason I picked the three colours is that I had in mind that my users might be color blinds and these three colours mats together and provide good contrast that covers all types of color blindness such as Protanopia, Deuteranopia, Tritanopia, Achromatopsia, Protanomaly etc. As I work full time in the health sector I took in consideration people with epilepsy and I wanted all the text to be readable and the colors and brightness will not affect their condition as a brighter colours might do. For the same reason I did not make my page colourful.

  • Typography

    • The Doris font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. For the Headings and some Important notes the Alegraya font has been used with serif as a fallback. I picked these two cause they read nice in all devices and I have done a big research before picking these fonts.

  • Imagery

    • I have used two photos relevant to my two differnt qualifications and placed them in the landing page. Also the images refer straight without reading any text to programming and medical/nursing. I used images around the website which I personally took and adjusted in photoshop for the needs of the website. Two of the photos I had to copy from Unsplash which I will link to the credits section.

• Wireframes

  • I removed the embed images as they were covering the whole markdown and users has to scroll long way through, I have done a research and it is rather complicated to make a download function on the markdown as github stops the download function.
  • Please if you want to view the wireframes navigate on my github repository on the project and find the folder assets, click on that folder and find the folder with a name wireframes, click on that folder to view the the wireframes or click here!

• Responsive on all device sizes
• Interactive Elements
• Animation done in CSS3
• Pure awesome :)

• I will added an animated hero image when I get to know and understand JavaScript.
• Animation on text and images while scrolling
• Page transition animation
• Hover effects designed by myself in after effects then implimated in the code.
• Subscibe to news letter button with monthly email updates.
• Animated transition effect on contact form when user presses Send Email.
• Stay tunned as more updates will be comming , your feedback is very valuable.

• HTML 5
• CSS3

1. Bootstrap v.5 Beta
   • Bootstrap was used to assist with the responsiveness and some styling of the website
2. Hover.css
   • Hover.css used for styling effects on buttons and links
3. Font Awesome
   • Font Awesome used for widgets and icons
4. Clip Path: Clip Path used for the design and animation of the hero image
5. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
6. Github
   • GitHub is used to store the projects code after being pushed from Git.
7. Photoshop
   • Photoshop was used to create the logo, resizing images and editing photos for the website.
8. jQuery
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
9. Balsamiq
   • Balsamiq was used to create the wireframes during the design process.
10. Can I Use
    • Can I Use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of
the project to ensure there were no syntax errors in the project. Color Contrast checker Coolors used to check the contrast and also pick the right colour palette for the website. And typeform has been used to gather feedback for the website from friends, colleagues, relatives and friends of friends.

• W3C Markup Validator
• W3C CSS Validator
• Color Contrast Checker
• Coolors
• Typeform

• User Stories

  • First Time Visitors

    1. For First time visitors my aim is to help them navigate easily through the website and to understand the my main qualifications

       • Two hero images on the main page indicate that I am working as a Nurse and the other that I am studying to be a Developer.
       • A small intro has been added under the two hero images to provide some information about me and welcome new visitors.

    2. The navigation was planned to be easy and approachable by everyone with easy to follow buttons and headers.

       • A navigation added on the top of the page to easy find what first time visitors might be looking for, also headers small paragraphs and buttons that indicate page transition has been used correctly to boost accessibility.

    3. First time visitors must be able to navigate directly to the relevant qualification and read as also see and track my progress.

       • This has been achieved with the two hero images on the landing page and also with a blog which will host future updates. Currently I do not have a lot of projects to showcase but there will be an other page showcasing my portfolio as a designer in an upcoming update.
       • There is an up to date working history on my CV so visitors have access to that and they can also download my updated CV

    4. First time visitors need to be able to navigate over my website and find links to my social media related to each qualification.

       • Most common used social media added on the footer.
       • Relevant social media added on the developer section
       • As a nurse I dont use any specific social media so on that section I have left the social media I mostly use day to day.
       • On the contact form all my social media have been added with prompt message.

    5. Easy to find contact form and accessible up to date CV and Work

       • My CV page added which clearly indicates my working history
       • A Link to view and download my CV has been added the bottom of the page.
       • On the relevant article about Nursing a link has been also added at the end to take users to My Cv page.

  • Returning Visitors

    1. For Returning visitors there will be an up to date Blog so the can read the news and what I am up to each period.

       • A blog page has been added which currently hosts two articles I wrote, in the future more articles will be added and there will be an archive for past articles.

    2. For Returning visitors an up to date CV and work history section must be accessible easily, from the main landing page.

       • This is achieved with a link on the navigation bar.

    3. Returning visitors might want to susbscribe to a newsletter which i plan to add in the future.

       • This is not achieved yet as i took of the subscription radio button as it requires back end to work it will be added in a future update.

    4. Returning visitors will require fast access to my social media through the contact form or through the relevant articles

       • Social Media link added were appropriate and also in the contact form visitors can see all my social media. On each article I wrote the relevant social media icons are shown.

  • Frequent Visitors (such as Recruiters/employers/collaborators)

    1. Frequent visitors recruiters etc will have access through my Blog updates and they will be able to see newest work

       • Blog is easily accessible from the main navigation bar, currently hosting two articles I wrote, In the futre more articles will be hosted. Also a section will be added on the delevoper page and landing page to showcase my latest works in the field of Developement.

    2. Frequent users might want to subscirbe to receive emails when new updates launch,something I plan to add in the future.

       • This is not achieved yet as i took of the subscription radio button as it requires back end to work it will be added in a future update.

    3. Frequent users must have access to my nursing CV if that is the case and see an updated CV and Work history.

       • My CV page provides and up to date current and past work history.
       • There is a link at the end of my CV page and Nursing article which users can download and up to date resume in PDF form.

    4. Frequent users who like to hire me as a Full-Stack Developer must have access on my social links and able to sent me message for availability.

       • Contact form with Social media added. In a future update back-end work will be applied for the users to actually send me emails on my works email.
       • Social media links added in the footer
       • Social media links added to the relevant articles.

    5. Frequent users would like to see a most recent updated portfolio which i plan to add an extra page showcasing my portfolio as a developer.

    • This havent achieved yet.

• Tested by friends from facebook and colleagues in differnt divices

  • I have posted the link of the deployed website on my facebook page and asked from friends and family to provide a feedback since I have started the project. The feedback was mostly positive about how easy is to read the text even on small devices and they can also read the text with dimmed lights without any issues. Also the navigation was easy and understandable. Some got worried about the Lorem text but I re-assured them that it is only temporary as they thought the text would not show on their devices. A comment has been made regarding some of the links not working at times as I have not had them enabled but this issue has no been resolved and everything works smoothly. I have to get better photos and find a way to present photos better as users found the photos on the about me page and the blog page are boring. This is something I plan to work better on a future update as I wanted to adjust the photos on my own on photoshop but I run out of time.

• Feedback

  • I used Type-form for the most feedbacks and also slack community. The feedback was again possitive and there was still some queries recarding Lorem text which I will replace before submission of the project. Users who gave feedback have used mostly their phones and laptops I havent received any feedback yet from larger screens or tablets. The site seems to behave appropriately in all browswers including Firefox, Opera, Safari, IE, and Chrome. Slack community mentioned that there was an margin error on the landing page images on small devices which i have now resolved. Looking forward for more feedback to arrive so I can improve the website.

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge, Opera and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, Samsung S8, Samsung S20 Ultra and iPhoneX.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends, Colleagues from work and family members were asked to review the site and documentation
  to point out any bugs and/or user experience issues.
• Typeform used for feedback , I had the basic plan so i will try to attach it on my websites contact form.
• I personally have access in 27" 4K Monitor, a 17" Laptop, Android phone which I constatly used for testing.
• I have used Chrome Developer Tools as Opera Dev Tools to constantly check the website responsivness.
• As I dont want more images on the markdown please find the testing screenshots on the testing folder. This can be achieved if you navigate on my github page then go to MK-PORTFOLIOWEB-MS1 project there you will find a folder named assets if you click on there you will see a subfolder testing. If you right click on that folder you will see the images I have uploaded. Alternatively you can click here to see the folder on my github straight away.

• Most difficult part is the design and animation of the Hero Image on Hover effect with lighting correctly, as i want
  done by using only pure CSS - This wasnt solved yet as it was difficult to be managed with CSS at my current level but in the future i will work more on the animation part.
• Read More does not work as intended looking for a solution regarding this.
• 29.04.2021: I have solved the issue with read more buttons, I have found the solution in Stackoverflow
• 02.05.2021: I had issues with the responsivness of the website, this have been solved when I found out that I was using flex properties on top of the classes I used from Bootstrap and it was cause a big issue.
• 07.05.2021: Issue on small devices on hero images padding. I have used a media Query to remove the .row.gutter on small devices as it was causing problems with my contact form. I have resolved this issue after i have taken off the media query and adding no gutter class from bootstrap to the .row i wanted to have effect and also added a padding on the same row and the contact form is now working as it should be on all device sizes.
• 07.05.2021: My first commits when i was designing my website were differnt than the submission purely because I had an idea about my landing page which I lacked the knowledge to bring it to life. This will be updated in the futre when I get to understand Java script. I have done a big research and lost valuable time trying to do something I couldnt understand when I first started the project but I was so keen to try it out.
• Overall I havent encounter bugs or issues that couldnt be solved in a timely manner.

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

• Bootstrap v5 Beta Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.
• All code was written by Michael Kefalas

• All content was written by Developer and Designer Michael Kefalas
• Psychological properties of colours text in the README.md was found here

• Images Created and taken by Michael Kefalas
• Logo Crated by Michael Kefalas in Adobe Illustrator and a mock up was created on Logomakr
  • Logo did not work out as intended so I will take a Logo Creation and Branding Course the following months. Added a text for logo instead to reflect the logo at this stage
• Two images were downloaded from Unsplash
  • Special thanks to Sammy Williams for the Hero image
  • Special thanks to Hush Naidoo for the Stethiscope image

• Adobe for their tutorials and videos in their youtube channel found here
• Youtubers which i got inspired from :
  • Kevin Powell for his amazing videos regarding CSS and Grid , his approach on designs is something I want to learn and also I am having his course as well for Flexbox
  • Gary Simon has been a great inspiration and you can follow his discord channel here!
• My Mentor Chris Quinn for his last minute guidance and support.
• Fellow Coders from Slack
• Also I have to thank Nescafe which is my go to go Coffee helping me maintain my eyes open while coding late in the evening.This doesnt count as an ad right? And if i continue like this I will Acknowledge Specsavers as they will soon provide me with glasses :)