Skip to content

adnanmuhtadi/milestone-project-1

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Milestone Project 1 - Adnan Muhtadi Personal Portfolio

View project here.

This is my personal portfolio site where I would be able to advertise my skills and other web projects that I have developed. It will also be a placeholder where I would advertise myself, my skills, employment history projects as well as a method of contacting me. This project would utilise the skills that I have learnt from this course to achieve this project.

The content of this site would be used throughout my journey as my skills and projects would forever keep developing. This site would consist of various technologies such as HTML5, CSS3 as well as bootstrap (further technologies would be utilised as my skills develop throughout my career in development). This site will be responsive which would make it accessible on all size devices.

User Experience (UX)

The Audience

The purpose of this site is to advertise me in forms of work experiences, education, hobbies and interests. The intended audience will be future employers as well as job recruiters.

User Objectives

The website will inform users (Recruiters, Employers, Business and Independent Contracts) who I am and my skills that will be demonstrated in multiple ways. Having a skills bar as well as the site is a placeholder for the other websites which I have developed. (In the short run, the sites which will be used as placeholders will be the sites that were developed as exercises during the course).

The user would also be able to know my journey to know where and how I started my education and career. They would also have the opportunity to view and download my CV as that would inform them more about me. The user would also be able to reach out and contact me in multiple ways in forms of social media and/or a contact form.

My Objectives

My project is going to achieve its objectives by having snippets of information extracted from my personal CV (which would also be accessible via the website). The website will provide the user with a method of viewing and downloading a PDF copy of my CV. Another section would incorporate multiple box models in a form of thumbnails to advertise the other projects which I have developed using Code Institute tutorials.

I aim to keep it simple and elegant with a soft colour scheme as I do not want to distract the user from the main purpose of the website. If the user wants to reach out to me, social media options would be placed in the footer within every page. Another method of contacting me would be through the contact form which would be the last page of the website.

User Stories

The intended type of users which this website is targeted for are Recruiters, Employers, Businesses and Independent Contractors.

  1. As a user, I want to be able to identify the different webpages within the website so I can clearly choose which webpage I want to go on.
  2. As a user, I want to be able to view/download the developers' CV so I can find out more information about the developers.
  3. As a user, I want to be able to contact the developer so I can ask questions if I want to reach out to him.
  4. As a user, I want to find social media links so I can follow their activity.
  5. As a user, I want to see the developers portfolio so I can see what other sites they have developed.
  6. As a user, I want to see the developers skillsets so I know what his main skills are.

Design

  • Colour Scheme

    • I kept the colour scheme White with a little shade of grey in different parts of the site as I wanted to keep the site simple and friendly to the eye
  • Typography

    • I have chosen to use Poppins and Montserrat font as the main fonts throughout the website with Sans Serif as the emergency font in the case for any reason the font is not being imported into the site correctly. Both Poppins and Montserrat is a clean font and easy to read, so it is both attractive and appropriate.
  • Imagery

    • The images that were used are based on the content of what it is portraying. Each hero image has the reduced opacity to increase the visibility of any content which would be on the images.
  • Wireframes

    Home Page

    • Home Page Wireframe (Web) - View
    • Home Page Wireframe (Tablet) - View
    • Home Page Wireframe (Mobile) - View

    Journey Page

    • My Journey Wireframe (Web) - View
    • My Journey Wireframe (Tablet) - View
    • My Journey Wireframe (Mobile) - View

    Portfolio Page

    • Portfolio Wireframe (Web) - View
    • Portfolio Wireframe (Tablet) - View
    • Portfolio Wireframe (Mobile) - View

    Connect Page

    • Connect Wireframe (Web) - View

    • Connect Wireframe (Tablet) - View

    • Connect Wireframe (Mobile) - View

    • Master Wireframes - View

Features

The features that will be utilised in this project will be as follows:

Existing Features

Site Features

  • Responsive on devices sized 1024px, 768px, 425px, 375px and 320px.

  • Allows the user to know the navigated hyperlinks, by having hoover over feature within the hyperlinks.

Navigation bar

  • All links within the navigation bar would take the user to its representable page.

  • The layout of them would change on a mobile device.

  • Active pages would be visible as the links would be in bold and underlined.

  • All link on the navigation bar has a hover-over effect.

Footer

  • Quick links would take you different pages of the website.

  • Clickable social media icons which are connected to my personal social media homepages.

  • Allows the user to download my CV, by having the developers CV to be viewed and downloaded in a PDF format.

Header Image

  • Have the header image expand the full width and height of the display on larger screens, but would change depending on the size of the device.

  • On a large screen, Allow user to click on the arrows pointing down on the jumbotron image to see the next content.

About Me

  • Would display information about me and my interests in a user friendly and clear view without displaying too much white space.

  • On mobile view, the format of the page would change but the content would remain the same.

Journey

  • Allow user to see my skills sets and confidence level of each one.

  • In a responsive view, the skills would disappear and show my journey only.

  • Allow user to go through my journey from birth to where I am today.

  • Allow user to download my CV, by having my CV to be viewed and downloaded in a PDF format.

Portfolio

  • Will display the other websites which have been developed (these are the projects developed while doing the course).

Connect

  • Allows the user to know the areas of text entry, by having the text box highlighted when selected

Features Left to Implement

  • Allow the developer to amend the website via a CMS to update the website quicker.

  • Allowing the contact form to send an email to my email address.

  • Placeholder on the website with personal information to be able to reach out easier.

  • To make the hover-over features more animated.

  • To make the navigation bar collapsable on smaller devices.

Technologies Used

Programming Languages Used

  • HTML5
    • HTML5 was used to structure and present content on my website.
  • CSS3
    • CSS3 was used to provide my website with style

Frameworks, Libraries & Programs Used

  1. Google Chrome:
    • Default browser used to visually display the build process as well as utilising Chrome Dev Tools to assist where needed.
  2. Paint 3D:
    • Was used to crop images to be the same size throughout
  3. Bootstrap 4.5.2:
    • Bootstrap was used to assist with the responsiveness and styling of the website.
  4. 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.
  5. Font Awesome:
    • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
  6. Git:
    • Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
  7. GitHub:
    • GitHub is used to store the code of the project after being pushed from Git.
  8. Github Desktop:
    • A tool that allows you to interact with Github from the desktop
  9. Balsamiq:
    • Balsamiq was used to create the wireframes during the design process.
  10. Brackets:
    • Brackets was used as my text editor to develop the site.
  11. Grammerly:
    • Online tool which assists with the english grammar.

Validation

On code completion, i ensured my code was validated with no snytax errors. I used W3C Markup Validator for HTML5 and W3C CSS Validator for CSS3 to ensure my code is W3C Compliant.

Results

Page With Errors Without Errors
index.html With Errors Without Errors
journey.html With Errors Without Errors
portfolio.html With Errors Without Errors
connect.html With Errors Without Errors
style.css With Errors Without Errors

Testing

functionality useability responsiveness

Deployment

The project was deployed to Github Pages using the following method:

  1. Log into Github and find the Project Repository
  2. At the top of the Repository, find the "Settings" option on the menu.
  3. Scroll down the page until you see "Github Pages" section.
  4. Under the "Source" section, a drop-down option with the result of "None" is visible. Click on the drop-down option and select "Master Brand".
  5. The page would automatically refresh itself to the top of the page.
  6. Scroll down to 'Github Pages' again and you would be able to see a published link which would be your deployed site.

Credits

Code

Content

Media

Acknowledgements