code-institute-submissions / personal-portfolio-milestone-project-1 Goto Github PK

I have chosen Project Example Idea 3 of building a personal portfolio site as this is something I can use in real life considering my choice for a career change from Marketing to Front End Development. There are two immediate challenges with this type of project; one, is that a CV/portfolio typically attemps to communicate a large amount of information to the reader (or recruiter) so it is important to break that information up into intuitive categories. I initially wanted to have one fluid page with links to each section but concluded that this would be a cognitive overload, therefore I've chosen to make separate webpages to break the information up. 
The purpose of this project then, is to provide a visual example of my (early) design and coding skills to potential recruiters who are looking for candidates to place into Junior developer roles or similar. 
The second challenge is that the developer industry relies heavily on the actual design and functionality of the website and therefore is a competitive area to display technical skill whilst showcasing aesthetic design, combined with presenting the owner's unique personality, whilst remaining a professional space.
I will introduce the UX and the thinking behind this, explanation of the features, technologies used, testing and deployment.  

NB. When refering to 'recruiter' I have defined these as people whose job roles are defined as recruitment consultant AND individuals either stand-alone or employed by a company who are seeking to employ a contractor or freelancer for a particular project. The site is currently ambiguous on whether I freelance, contract or work full time as, as of yet this is an accurate portrayal of my current situation at the present time in my course, but I endeavour to clarify this as I become more technically skilled and clear on my preferences in Software Development technology.  

This website is for recruiters who are often working to tight deadlines, analysing multiple candidates a day and therefore need to see and process candidate information quickly including the candidate's skill level, their specialities and personality fit for a prospective company. This requires presenting key information into clear, concise categories that are easily navigatable and intuitive. 
The value for the web creator, or personal portfolio owner is to present their key skills and personality to the recruiter quickly, in an aestheticly pleasing design to achieve leads for potential career oppurtunities.
A very early mock-up can be found at this link from Canva - a drag and drop online, basic design website which should give at least an idea of initial design ideas, that evolved through the creation of the final website: https://www.canva.com/design/DAD03zjomoY/Mr0wGcCBeyya65HLl_fkFw/view?utm_content=DAD03zjomoY&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink
I chose the theme of a dark overlay over a tropical background as it represents a corporate 'Wayfinding' feel for an air of professionalism while tying into my experiences of travelling to tropical locations as demonstrated in the 'About' section. Additionally to this, my profile image, displayed on each page of the website, was taken in a lotus farm in Cambodia, further reinforcing the tropical theme throughout the website. The white blocks are used to break up and contrast the dark feel of the website adding interest and drawing attention to the signposting of the current page.

I will divide this section by webpage and explain the chosen features on each: 

- Header (all): This is the dominating feature of each webpage which clearly signposts which section of the website the user is currently on. On the right hand side there is a large portfolio picture to sell that the portfolio is of the person pictured. This allows the recruiter to build up an image of the person and associate it with a real representation of the individual. 
- Profile: The two sections of 'What I Do' and 'Why Hire Me' are the two main questions recruiters want to see answers for when they are placing candidates into particular roles. The clear split allows the user to immedietaly see 3 key points that would inform them whether I have the expertise in a particular job role and what my key selling points are in comparison to many other candidates. This is aided by use of icons that allow recruiters to process the information of what the paragraph portrays before engaging with the text, making for a quicker experience of checking for information. 
- Work Experience: This section of the website is separated into 3 large rows containing each job role in my current working history. The middle section is surrounded by a border on the larger screens to visually show the separation of where one job role ends and another starts. The job roles are displayed chronologically, with the most recent at the top of the page to show the recruiter my most recent projects and achievements. Each job role is divided into sections represented by an icon as signposts for recruiters to indicate certain technical experience, making it easier for recruiters to engage with skills relevant to a patricular role or project that they are hiring for.
- Portfolio: On this page, there is a pattern of a graphic, visually representing a project paired with an explanation paragraph which conveys the project details. This allows recruiters to easily access the different projects I have created throughout my work experience, through from website development to digital content creation. They can further explore each project by clicking on the link situated below each explanation paragraph, which opens up the full project in another tab for further scrutiny of my ideas and skills, allowing the recruiter to assess the technological skills acquired throughout my work experience. The pattern of right and left alignment vertically down the page reflects the layout of text on the other website pages creating aesthetic unison with the rest of the website, whilst also spacially breaking up the large graphics of the projects for a clearer projection to the user. 
- Education: The simplest page of the entire website to clearly display my education history should the recruiter be required to have certain qualifications to fill a job role, or project oppurtunity. 
- About: This page was designed to showcase skills and hobbies beyond a paper CV which would allows recruiters to assess company-fit from getting a further idea of my background more powerfully realised with a series of images behind an interactive carousel. I have made 3 versions of the carousel each for large, medium and small devices so that less images are shown on smaller devices to fit the screen-width. The images within the carousel are all my own images, or images I have featured in that I have received permission to showcase on my portfolio. The outcome of this page is to show to the recruiter that I enjoy travelling appreciating natural beauty and architecture and that I have some 'outside' work experience in an entirely different industry of modelling showing the variety of experiences I have had.
- Contact: This page allows recruiters to directly contact me through email by having them fill out the form which will, in future, through JavaScript hook up to my email address so that I can directly respond to messages received through the site, this is a direct link to interact with the recruiters who reach, and are persuaded by my skills and website to hire me. 
- Navigation Bar (all): There are two versions of the navigation bar, one which is fully expanded on medium and large devices with the webpage categories spanning the entire width of the screen below the header, the placement of the large navigation bar is at the bottom of the header to display that the header is the fixed design element across all of the pages - this is the part that is consistent and the navbar acts as the barrier between this and the other fluid elements across the webpages. The arrow icons are placed to further enhance the direction of how the CV should be read, that ties the webpages up into one large narrative. Once collapsed on smaller screens, the navigation bar occupies a small space on the top-left of the website which, from habit and general user experience should be an intuitive placement for the user to find and navigate from. As the collapsible icon is much smaller than the full-width bar it would be likely to look 'lost' if the placement was kept between the header and the fluid webpage contents. 
- Footer (all): The footer was designed to show information that would be understood and relevant across all the categories of my CV (represented in each of the webpages) so for this I have chosen ADDRESS for recruiters to pinpoint location (if relevant) to a job role, CONTACT INFO, if the recruiter wishes to contact me in a more personal manner than the 'CONTACT' page, and 'DOWNLOAD CV' for the recruiter to have a paper version for their records. 

- I have commented a version of the carousel in the 'ABOUT' section for future manipulation with JavaScript. Although the Bootstrap Carousel is functional, I would like more control of the movement when transitioning the images - currently, the images move three at a time but I would prefer the user be able to flick through the images one at a time and for the Carousel to be easily collapsible on smaller devices.
- Another feature that would require the use of JavaScript is the 'Contact' page, where I would connect the form button to my email employing the functionality to receive any messages that are sent to me through the site.
- Relating to the above point, I would like a 'SUCCESS' message after form submission on the 'Contact' page, this will be viable to do after the JavaScript functionality above has been set up.
- I would like a custom domain that would appear more professional to website users, and therefore more trustworthy as a potential candidate for website projects. 
- I could further optimise the images by creating smaller sizes for faster load times and therefore better user experience, but due to time constraints needed to deprioritise this for now. 
- As mentioned above in the UX section, I would like to signpost my career-type for example, freelance, contractor at the top of the webpage somewhere, but this is yet to be defined.
- I have future plans to create a separate website for my own company that involves software development, graphic design and website design. Once this is ready I will link this website to the current one to further showcase to employers my achievements and offering.
- Captioning the images in the Modelling Carousel in the ABOUT section in order to give credit to the photographer and businesses involved in the photoshoots.

- Bootstrap; was heavily used in this project for the layout and general appearance of the website, for example the padding and margin properties. It was also used to hide certain blocks from larger screens or mobiles (one example is hiding the full-wdith navigation bar from mobile so that the collapsible version can be viewed instead) and, to create the carousel component on the 'About' section. 
- Material Design, Google; Most of the icons on this website were from Material Design, Google; to better indicate to the user information that a following paragraph would contain helping the user to navigate the site quickly.
- Google Fonts; Lato and Source Sans Pro were used as the fonts across the website because they carry a professional feel from their light and minimalist design.
- Hover CSS; Used to indicate to the user that certain elements across the website are 'clickable' - I have chosen two versions of the 'grow' hover, one with shadow for the navigation bar to impress upon the light background, and one without for the buttons across the website - this helps the user to find links leading to more information. 
- Font Awesome; Some of the icons on this website were from Font Awesome to indicate to the user through illustration the function the following paragraph or icon itself (for example, the download icon) making for a quicker navigation experience. 
- JQuery was used in collaboration with Bootstrap classes to create the functionality to collapse the navbar in mobile and tablet views.

Contact form:
Go to the "Contact" page
Try to submit the empty form and verify that an error message about the required fields appears
Try to submit the form with an invalid email address and verify that a relevant error message appears
Try to submit the form with all inputs valid and page should refresh.

Buttons (Portfolio): 
Go to the "Portfolio" page
Hover over any button below the explanation paragraphs for each project and verify the 'hover' effect indicating a clickable link
Click the link and verify that the content opens on another tab 

Footer 
On the footer, click the icon underneath 'Download CV' 
Verify that the browser downloads a word document of my CV

On mobile views, the content is stacked but still carries the left and right alignment for aesthetic unison with larger screens, the profile image is a lot longer giving a full portrait view of the portfolio owner. The carousel has been reduced in size to allow more breathing space and a better user experience. 
On mobile views, the portfolio section has been re-ordered slightly so that the graphic always falls below the explanation text (see PORTFOLIO code).
I have noticed a bug on the mobile-view of the carousel which I aim to fix in future when I manipulate the carousel with JavaScript - this is that the left and right arrow-keys to scroll through the carousel are not centered on the page, which is especially obvious on smaller mobile views. 
Most of the testing for screen sizes was done through Chrome Developer tools through trial and error of padding and layout.

I have sent the website to a few friends and colleagues for general testing and feedback of the appearance and intuitivity of the layout, design and functionality and I have implemented the feedback throughout the build of the website and am confident in its success. 

As Gitpod and GitHub has been entirely new to me before this project, I had through fault been committing my changes to a branch called 'setup' so I needed to do a pull request from Master and merge the two branches so that my latest and final changes were pushed to the Master file for final deployment. 
After this was resolved, I deployed my project from my GitHub repository to GitHub pages to receive the final link: 

https://sophiarumpus.github.io/personal-portfolio-milestone-project-1///////////

I am looking to change this link to my purchased domain: sophiarumpus.com but will need to do further research on combining the hosting site with the custom domain funtion on GitHUb. 

For a lot of the Bootstrap classes used in this website, the Bootstrap Documentation has been extremely beneficial in choosing the features needed to achieve the final product shown here. 
I have done my own research in additional CSS properties such as photo editing: contrast, brightness etc. but it was trial-and-error in choosing the exact variables suited to my website.
Link for the additional CSS properties I have used can be found here: https://www.w3schools.com/css/css3_images.asp

Media

The background image for this site was taken from a free stock imagery site called Pexels, linked here: https://www.pexels.com/

My profile image was taken by @LaurentDerossi on my travels through Cambodia

The images and video used in the PORTFOLIO section have been of my own projects that I worked on during my employment at Oxford University Press and are free to view to the public.

The images used in the MODELLING carousel were taken by @BertiesPhotography and @JamesMullerPhotography for shops in the Farnham Area; Farnham Bridal Boutique, Room Ten and Pret a Vintage and I have been granted permission to use these images for my portfolio.

Acknowledgements

I received inspiration for this project from Colorlib which drew on examples of a number of expertly created portfolio websites, a common feature of which was the minimalist content features and dominating header and profile images which I have used in this project. Colorlib is linked here: https://colorlib.com/wp/html-resume-cv-website-templates/