alashtal / m-o-e_portfolio

Hello World, My name is Moe & I'm junior rising developer. I offer many my skills to deploy in your next big idea. My portfolio is newly created and will be always updated. Cheers, have fun and don't forget to drop a message =)

Moe Portfolio

Click here to view the portfolio.

Hello world =) Welcome to my portfolio. This repo contains a quick showcase of languages I work along with the usual resume to view and download as PDF which naturally include my work experience. It was created with HTML, CSS and Javascript. Its is lightweight and fully responsive, as well as comes with the Bootstrap and some wow/animate.css ¯\_(ツ)_/¯.

UX (User Experience)

This website is desigened to be responsive on a range of devices which is smooth to navigate for potential recruiters/customers and it showcases a developers skills, the main focus for the website’s owner is to present his knowledge in developing and manifest digital ideas to reality. Potential customers (recruiters) can request projects such as fully responsive front-end static website’s with the addition of back-end functionality, another project can be a mobile application as well.

• User stories

  • As a website user or as a recruiter, I want to effortlessly understand the main purpose of the website & understand more about what the developer is offering.
  • To be able to effortlessly navigate throughout the website to find the right content.
  • To be able to find information about the projects.
  • To be able to contact with the developer for any inquires.
  • To be able to see my picture that connectes the user with me and brings friendliness to the website.
  • To be able to know about the background of the developer.
  • To be able to locate their social media links to see their following on social media to determine the developers echo across the web.

• Design

  • Image:

    • So I was debating between putting my picture in the hero body or not, But after I asked my friends and got random feedback from them, plus I searched online and realized that is what people really wanted to see as well in a portfolio and to just get to know me more as a person. And nowadays as almost 85% of jobs are applied online, where usually there's no opportunity to physically present my face in front of recruiters at the company, the picture really helps. So I reluctantly added my picture to the hero-body. We live in an age with no people judgments can form just based on gender, age and ethnicity, So I'm happy it's there and I hope you like it.

  • Color:

    • The color used are colormap linear gradient of the color schemes purple, white and blue and at most of the design purple is the color progression dominant. I choose the color purple because it's often assosiated with wisdom, creativity and magic.Purple as well is the balancing color between red and blue’s color psychologies, and while red brings energy to the color, blue brings relaxation and stability, together they make purple the perfect balance of the two. Color Psychology says that it “can have calming effects over the mind and nerves, it can be uplifting and can trigger creativity.”
    • Color inspired from dribble.

  • Typography:

    • The sexy fonts used within the website are Exo and Roboto fonts. Sans Serif font is used a well as a fallback font if the browser is not compatible with the fonts.

    • Wireframes

    • Desktop Orginal Idea Wireframes - Main Section - About Page - Say Hello Section

    • Desktop Wireframes - Main Page - Say Hello

    • iPad Wireframes

      • Main Page
      • About Page

    • Mobile Wireframes

      • Main Page
      • About Page
      • About Page2
      • Contact Page

Features

Features Left to Implement

• Gallery for showcasing projects:

  • This will be a section of different hero images of my projects with a hyperlink linked to them. It will include some animation or JavaScript as well.

• Hosting the project in a domain:

  • I will find a hosting platform, optain a domain as well to make the project official and most importantly to have a bigger playground to play with and add more functionality.

• Live Chat Plugin:

  • I will use drift API, for recruiter to chat with me when I'm available, if not all messages will be forwared to me.

• Functionalty contact form:

  • The contact form will be linked to an email after optaining a domain of course.

Existing Features

• Responsive on all device sizes and Interactive elements

  • Hovering on buttons or navs item, its responded by changing the color making it clear that this item can be clicked.
  • Typography/imagery should resize for appealing look on the devices.
  • The navigation bar collapses to a burger icon when using smaller screens.

• Clickable logo which takes you home at any time + navigation bar for quick navigation within the website.

  • When Clicking the navigation bar on About Me, it adds the home button in the nav bar while before it doesn't exist.

• Details about the developer skilss.

  • The well-organized and descriptive information allows the user to find the necessary details about the skils of the developer in the about me page.

• Say Hello =).

  • The page should allow the user to contact the website’s company or Sign-up/Subscribe to the newsletter by having them fill out their details

• Clickable text (Coffee is On me).

  • When Clicking the text it will take the user to contact me page.

• Social media accounts buttons.

  • The social media icons in the footer should allow the user to visit the developer's account for further information or communication.

Technologies Used

Languages Used

• HTML5
• CSS3
• JS

Frameworks, Libraries & Programs Used

1. Animate.CSS:
   • Animate.CSS is a library of ready-to-use, cross-browser animations for you to use in your projects.
2. Bootstrap 4.5:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
3. GitPod:
   • Gitpod was used as an IDE to create and temporary view the website.
4. WOW.Js:
   • wow.js is a JavaScript plugin that reveals animations when you scroll.
5. CSS Tricks -Used to inspired designs and code understanding as well such as creating a variable like :root.
6. Templatemo:
   • Used to downloand the edited theme of the website, the theme is Blaster a very eye catchy theme.
7. Hover.CSS:
   • Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
8. Google Fonts:
   • Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
9. Font Awesome:
   • Font Awesome was used within the whole website to add icons for aesthetic's.
10. jQuery:
    • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
11. Canva:
    • I used Canva to create the logo and size my profile image.
12. Balsamiq:
    • Balsamiq used to create the design wireframes.
13. Git
    • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
14. GitHub:
    • GitHub is used to store the projects code after being pushed from Git.
    • Code-Institute’s Gitpod-Full-Template repository was used to install the helpful extensions for the Gitpod workspace.

Testing

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.

• Am I responsive
• W3C Markup Validator
• W3C CSS Validator

Testing User Stories from User Experience (UX) Section

• As a Visitor, I want to easily understand the main purpose of the site and learn more about the developer.

  1. When Entering the site users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice. Underneath there is a Hero Image with Text and a button that takes you to the footer.
  2. The main points are concluded immediately within the hero image and the short text provided.
  3. The navigation bar has the “About me” link that takes the user to the About section for more information about the developer and what they’re capable of.

• I want to smoothly navigate through the site to find information.

  1. The users have three options:

     1. Click the call to action button that takes to a another tab with the CV presented in PDF.
     2. The navigation bar items that takes them to their section of choice, and in small devices clicking on the burger icon drops down the hidden navigation items. User has the about me section to get to know the developer and the Say Hello section too.
     3. Scroll down to explore the different website’s sections.

  2. I want to be able to find information about the developer's skilss.

     1. I want to know what languages the developer knows and what Technologies he can use.
     2. I want to know what idea's he's capable of Implementing.
     3. I want to see projects previously done by the developer to identify what is the specturm of his skills (Coming soon).

  3. I want to be able to contact the developer for a project idea.

     1. In the Say hello section you will be able to contact the developer.
     2. Another way for communication is clicking on the social media links below in the footer of every page.

Fixed bugs

• I had duplicated sections in the css which I fixed by a comma and duplicated

Deployment

GitHub Pages

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.

Making a Local Clone

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/alashtal/M-O-E_Portfolio

7. Go to the clone folder and double click on the index.html to load the website.

Credits

Content

• Content was written by the programmer.
• README File content was used from Code Institute README Sample

Media

• Hero Image:
  • This is Moe

Acknowledgements

• I'm very grateful and thankful for my mentor @Maranatha Ilesanmi, Mark Mcgann and all the student care team.