This is my first Code Institute milestone product about User-Centric Frontend Development.
In this web page I want to show you my professional experience as a Logistics Specialist before I started studying for Full Stack Web Developer at Code Institute. Both specialties can complement them each other to offer a better value proposition to future products developments.
-
"As a business partner, specialist or client, I expect to learn about Juan Francisco's projects and problem solving strategy as a solutions engineer. In the left section of the navigation bar I can find out what services he offers me and how he does it."
-
"As a recruiter, I expect to discover that Juan Francisco have the requirements to be considered as a candidate to occupy a position as a solutions engineer in the areas of logistics or software development. For this the options in the upper right part of the navigation bar I can know his resume."
-
Also, at the footer navigation bar you have the access to my social networks and a PDF version of my resume.
The mockups for the project are done on the Vectr page, which is basically a page to draw pictures. This time it was very practical for me to do it this way. Here some examples:
For the construction of this site the following features were used:
- Modals to display the contact window anywhere on the site.
- Media Queries to adjust site characteristics to different device sizes.
- Scrollspy to identify the section of the page where you are browsing at the
index.html - Navs, Tables, Jumbotron, and Grid features.
- The external links open in a new tab.
The following features will be added to the site soon:
- Adding feature to send email.
- Adding education and skills content with progress bars.
- Various types of content animation. For example brief movement of the images when they appear for the first time.
- Links to keywords will be added to drill-down into concepts mentioned in the text. For example: operating models, route to market, cost-to-serve, etc.
- In the stories section, the table will be adjusted to a fixed size within the screen.
- Hide and show footer and nav automatically.
- HTML
- CSS - media queries, ovewwrite definitions, etc.
- Bootstrap - scrollspy, modal, nav, col-rows, etc
The project was tested to work in Chrome/Safari browser of desktops, tablets and phones. Its functionality was tested using the Chrome inspect function for different devices.
In any case, the situations that need to be corrected are:
- When reaching the end of the pages, the visibility of 80px row is lost by the fixed footer.
- The Modal feature for contact link does not send any email.
- Education and Skills section in resume link are empty.
- My photo is the option to return to the Home. Probably some users cannot identify this option and use the back key of the browser.
The website is published using GitHub Pages and you can visited by clicling the following link: https://pacotools.github.io/msp01-juanpaco-resume/
This project was developed using GitHub and GitPod. I use the Code Institute template.
Both the development and deployment versions and their resources reside on the GitHub platform for educational use. The repository name is msp01-juanpaco-resume
- The texts for all sections were written by me.
- The photos and images used in this site are own.
- The color theme was selected from https://color.adobe.com/es/search?q=Biella%20fa%20territorio an original theme by Andrea Guccini https://www.behance.net/andreaguccini
- I thank my mentor Guido Cecilio Garcia Bernal for his valuable observations to make this project more intuitive for the user.
- I thank the Code Institute (Matt Rudge videos) for all the practical examples whose code has been very useful to carry out this project (Whiskey, Love Running & CV)
- Finally I thank these websites where I have found valuable knowledge to continue learning:
- Font Media Queries - Martin Michalek from CodePen site https://codepen.io/machal/pen/Bpajbz
- Flexbox - CSS-Tricks site https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Scrollspy - Bootstrap Documentation https://getbootstrap.com/docs/4.4/getting-started/introduction/