Maoxchan Website is part of Code Institute's Milestone 1 Project: User-Centric Front-End Development module. It is intended for recruits and potential employers to provide an overview of my daughter skills, experiences and qualifications.
- Making a static front-end site to present useful information to users/ recruitments, using all technologies that I have learned about so far. (HTML, CSS, Bootstrap and user experience/design)
- Creating a website that is easy to navigate and easy to understand.
- The customer experience has to be great on every device and internet browser.
- I am creating a portfolio website to show my daughter skills, creativity and competencies.
- The portfolio website is for recruiters and the animation industry, who want to know more about my daughter.
- As a first-time visitor, I want the website to scale on every device so that I can look at the website on desktop, mobile and tablet.
- As a first-time visitor, I want to know which projects the person has done so that I know the level of experience of the person.
- As a first-time visitor, to the site I want the information to be clear and concise so that I can easily understand what the site is about.
- As a first-time visitor, I want to being able to find all the information that is available including be able to download a copy of the curriculum vitae and the facility to check out their social media for any other useful information.
- I want to easily check her skill set comparing it against those required by my client. The ability to download her curriculum vitae will help to speed up the recruitment process and allow me to share her details with my client.
- I will need to have a quick and easy way to contact her if she meets the required criteria.
I've chosen 2 primary colours for the backgrounds (#fdebe4), headings and footers (#d1e3fa). I tried to match the colors on the website with the colors used in the Maoxchan image
The Lato and Roboto font is the main fonts used throughout the whole portfolio website. Sans Serif is the fallback in case the main font isn’t being imported to the site correctly.
All images are personal images. I tried to match the colors on the website with the colors used in the Maoxchan image.
My daughter personal logo is shown on the header on the left side. The navigation bar items are positioned to the left side of the screen and aligned in the centre of the bar. They give access to the Gallery, and Contact pages as well as allowing the site visitor to download my Curriculum Vitae. With a mobile device, the navbar is displayed in a hamburger menu.
Social media links of Facebook Instagram and Twitter.
On the home page, my daughter is presented with a picture of her and a picture of her pseudonym. I also listed her skills as an animator and character designer. From the homepage, there are links to the gallery page and contact page.
The gallery page is divided into three sections: Gif, Animation and Artwork. Here are some of her works from these areas.
My contact page is very simple so. There are input fields for a name, email address and a description of what the contact is concerning.
As this project is designed to build a static front-end that demonstrates the skills I have developed using CSS3, HTML5 and Bootstrap technologies, I would like to add a page for the sale of works in the following projects. I would also like to allow visitors to rate the works.
- HTML5
- HTML5 provides the structure and the content for my project.
- CSS3
- CSS3 provides the style of the HTML5 elements.
- Bootstrap v4.5.2
- Bootstrap v4.5.2 is used to create the layout for desktop and mobile.
- Gitpod
- The GitPod is used to develop the project.
- Git
- The Git was used for version control to commit to Git and push to GitHub.
- GitHub
- GitHub is used to host the project.
- Google Fonts
- Google Fonts is used to provide the font Lato and Roboto that is used in the project.
- Balsamiq
- Balsamiq was used to create the wireframes during the design process.
- Fontawesome
- Fontawesome was used for the social media icons
- W3C Markup Validation Service
- The W3C MarkUp Validation Service is used to check whether there were any errors in the HTML5 code.
- W3C CSS validator
- The W3C CSS validator is used to check whether there were any errors in the CSS3 code.
- Home page
- Gallery page
- Contact page
I tested the appearance and responsiveness of 4 browsers (Chrome, Firefox, Opera and Edge) and it showed good results in all browsers.
Test the navigation bar collapses to give the 'hamburger' icon when the device is smaller than medium.
- Test Results
I placed the social media icons in the center of the footer. I tested all the links and they all worked well. The social media links each open in a separate tab.
The menu options all open the correct page except for of the 'CV Download' which opens my CV in a separate tab.
When testing a page, the Name and Description fields allow input of any text while Email requires the input of Email form. I repeated the test several times and each time it was successful.
The Gallery page is divided into three sections showing representative works of my daughter with which I wanted to show her skills, creativity and competencies.
In the first section, there are Gifs and in the second there are animations. They are divided into three columns, on a tablet into two, on a cell phone into one.
In the third section are the Artworks that go from four columns to three and then to two on the cell phone.
- As a first-time visitor, I want the website to scale on every device so that I can look at the website on desktop, mobile and tablet.
- The first time visitor can visite to the website on a computer, laptop, phone and tablet.
- As a first-time visitor, I want to know which projects the person has done so that I know the level of experience of the person.
- The first time visitor can go to the projects page where the visitor can see all projects the person has done.
- As a first-time visitor to the site I want the information to be clear and concise so that I can easily understand what the site is about.
- The first time visitor sees the navigation on the top of the website (the header) where the visitor can easily navigate through the website. For mobile visitors, there is a hamburger menu.
- As a first-time visitor, I want to be able to find all the information that is available including being able to download a copy of the curriculum vitae and the facility to check out their social media for any other useful information.
- The first time visitor can open the Resume and get additional information.
- I want to easily check her skill set comparing it against those required by my client. The ability to download her curriculum vitae will help to speed up the recruitment process and allow me to share her details with my client.
- Previous projects have been provided to accomplish this outcome. It is also possible to view CVs as well as links to social pages.
- I will need to have a quick and easy way to contact her if she meets the required criteria.
- This is made possible through the Contact page.
The project was deployed to GitHub with the following steps:
- Log in to GitHub and locate the GitHub Repository
- Select “your profile” from the upper-right dropdown menu and select the proper repository.
- Select Settings and Scroll down until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
Clone my project
- Log in to GitHub and go to the repository.
- Click on the green button with the text “Code”.
- Click on “Open with GitHub Desktop” and follow the prompts in the GitHub Desktop Application or follow the instructions from this link to see how to clone the repository in other ways.
Most of the code was developed by the use of Bootstrap's library throughout the project to ensure the responsiveness of the website such as the Navbar, Gifs and Animation Gallery. I found inspiration for the Artwork gallery and footer in two Code Institute projects: Love Running and Mini project with Bootstrap 4.
All images on the website are made by my daughter, Iva Jelavic.
I would like to thank:
- My mentor, Rahul Lakhanpal, for his guidance, patience and encouragement throughout this project.
- The slack community for its extensive Q&A, I found most of the answers to my problems there.
- Thanks to everyone at the Code Institute for helping to make this such an enjoyable and rewarding experience.